@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Amiri", serif;
            font-weight: 400;
            font-style: normal;
        }

        .line {
            border-bottom: 2px solid gold;
            transition: 0.5s ease;
        }

        .line:hover {
            transform: translateY(-5px);
        }

        .up {
            transition: 0.5s ease;
        }

        .up:hover {
            transform: translateY(-5px);
        }

        .he {
            padding-right: 10px;
            position: absolute;
            z-index: 999;
            width: 100%;
            height: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .he ul {
            list-style: none;
        }

        .he ul li a {
            text-decoration: none;
            color: white;
        }

        .logo {
            width: 150px;
        }

        .nav1 {
            width: 100%;
        }

        .nav1 .ul_nav {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .ul_all {
            display: flex;
            width: 70%;
            align-items: center;
            gap: 30px;
        }

        .call {
            width: 200px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .call img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }

        .en {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu {
            list-style: none;
            display: none;
        }

        @media(max-width:1256px) {
            .he .nav1 {
                display: none;
            }

            .menu {
                display: flex;
            }
        }

        /* التعديلات على nav2 */
        .nav2 {
            border-top-left-radius: 10px;
            width: 260px;
            height: 100vh;
            position: fixed;
            background-color: rgba(14, 14, 14, 0.85); /* زيادة الشفافية للخلفية */
            top: 0;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            z-index: 999;
            backdrop-filter: blur(5px);
            right: 0;
            overflow-y: auto; /* إضافة تمرير إذا كان المحتوى أطول من الشاشة */
        }

        .nav2 .close {
            margin-top: 20px;
            cursor: pointer;
            align-self: flex-start;
            margin-right: 20px;
        }

        .close svg {
            fill: white;
        }

        .nav2 .ul_nav2 {
            width: 90%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* تغيير من space-between إلى flex-start */
            gap: 15px;
            flex-grow: 1; /* السماح بالتمدد لملء المساحة المتاحة */
        }

        .ul_all2 {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px; /* تقليل المسافة بين العناصر */
            padding-top: 5px;
            align-items: center;
        }

        .ul_all2 li {
            background-color: goldenrod;
            width: 150px;
            text-align: center;
            border-radius: 10px;
            padding: 8px 0; /* إضافة padding لتوسيع العناصر */
        }

        .back {
            transition: 0.5s;
            border: 1px solid white;
            cursor: pointer;
        }

        .back:hover {
            transform: translateY(-5px); /* تقليل المسافة عند التمرير */
            background-color: rgba(0, 0, 0, 0.592);
        }

        .ul_all2 .onme {
            background-color: rgba(0, 0, 0, 0.592);
        }

        .call2 {
            display: flex;
            flex-direction: column;
            gap: 12px; /* تقليل المسافة بين العناصر */
            align-items: center;
            padding: 10px 0;
            margin-top: auto; /* دفع العناصر للأسفل */
            margin-bottom: 20px; /* إضافة مسافة من الأسفل */
        }

        .call2 li {
            background-color: goldenrod;
            width: 150px;
            padding: 8px 0; /* إضافة padding لتوسيع العناصر */
            text-align: center;
            border-radius: 10px;
        }

        .nav2 img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }