:root {
        --primary: #000000;
        /* أسود */
        --secondary: #ffffff;
        /* أبيض */
        --muted: #f5f5f5;
        /* رمادي فاتح */
        --text: #111111;
        --accent: #b98d39;
        /* لمسة ذهبية فاخرة */
        --card-border: rgba(0, 0, 0, 0.06);
        font-family: Arial, Helvetica, sans-serif;
    }

    * {
        box-sizing: border-box
    }

    body {
        margin: 0;
        background: var(--secondary);
        color: var(--text);
        line-height: 1.6;
        transition: background .3s, color .3s
    }

    a {
        color: inherit
    }

    /* --- HEADER & NAVIGATION --- */
    header {
        background: var(--primary);
        color: var(--secondary);
        padding: 14px 5%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 90;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transition: padding .3s
    }

    .logo-container {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .menu-toggle {
        display: none;
    }

    /* تم استخدام الشعار المرفوع (أسود) بـ filter:invert لجعله أبيض على الخلفية السوداء */
    .owl-logo {
        height: 36px;
        filter: invert(100%) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
    }

    .logo-text {
        font-weight: 700;
        font-size: 20px;
        letter-spacing: 0.4px
    }

    nav {
        display: flex;
        align-items: center;
        gap: 18px
    }

    nav a {
        font-size: 15px;
        text-decoration: none;
        padding: 6px 0;
        position: relative;
        font-family: 'Montserrat', sans-serif
    }

    /* تأثير التمرير الذهبي */
    nav a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        height: 2px;
        width: 0;
        background: var(--accent);
        transition: width .25s
    }

    nav a:hover::after {
        width: 100%
    }

    #language-switch {
        background: transparent;
        color: var(--secondary);
        border: 1px solid var(--secondary);
        padding: 6px 10px;
        border-radius: 6px;
        cursor: pointer;
        transition: background .3s, color .3s
    }

    #language-switch:hover {
        background: var(--secondary);
        color: var(--primary)
    }

    /* Language Toggle Classes */
    .lang-ar {
        display: block;
    }

    .lang-en {
        display: none;
    }

    [dir="ltr"] .lang-ar {
        display: none;
    }

    [dir="ltr"] .lang-en {
        display: block;
    }

    @media (max-width: 768px) {
        header {
            flex-wrap: wrap;
        }

        nav {
            display: none;
            flex-direction: column;
            width: 100%;
            background: #000;
            margin-top: 15px;
            padding: 10px 0;
            border-top: 1px solid #ddd;
        }

        nav a {
            padding: 12px 20px;
        }

        nav.active {
            display: flex;
        }

        .menu-toggle {
            display: block;
        }

        #language-switch {
            margin-left: auto;
            margin-right: 10px;
        }
    }


    /* ========================= */
    /* RESPONSIVE GOOGLE MAP */
    /* ========================= */

    .map {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        /* 16:9 aspect ratio */
        overflow: hidden;
        border-radius: 12px;
    }

    .map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border: 0;
    }

    /* ========================= */
    /* 📱 Small Phones */
    /* ========================= */
    @media (max-width: 480px) {
        .map iframe {
            min-height: 250px;
        }

        .contact-form input,
        .contact-form textarea {
            font-size: 14px;
        }
    }

    @media (max-width: 768px) {
        .contact-form {
            padding: 0 5px;
        }
    }

    /* HERO */
    .hero {
        height: 500px !important;
        background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../video/2.MOV') center/cover no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 6%
    }

    .hero h1 {
        font-size: 44px;
        margin: 0;
        color: var(--secondary);
        font-weight: 700;
        font-family: 'Montserrat', sans-serif
    }

    .hero p {
        color: var(--secondary);
        opacity: .95;
        margin-top: 12px;
        font-size: 20px
    }

    .hero .cta {
        margin-top: 18px;
        display: flex;
        gap: 12px
    }

    .btn {
        background: var(--accent);
        color: var(--secondary);
        padding: 10px 18px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-weight: 700;
        transition: opacity .3s
    }

    /* HERO */
    .hero {
        /* تم حذف الخلفية السابقة */
        height: 460px;
        /* تم تثبيت الارتفاع */
        position: relative;
        /* **إضافة هامة:** للسماح بوضع الفيديو كخلفية مطلقة */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 6%;
        overflow: hidden;
        /* **إضافة هامة:** لإخفاء أي جزء زائد من الفيديو */
    }

    /* **إضافة جديدة:** لتنسيق الفيديو كخلفية تملأ الشاشة */
    .hero-video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 1;
        /* الطبقة الأولى: الفيديو */
        transform: translate(-50%, -50%);
        object-fit: cover;
        filter: brightness(0.7);
        /* لتغميق الفيديو قليلاً وتحسين قراءة النص */
        display: none;
        /* إخفاؤه افتراضيا على الأجهزة الصغيرة (سيتم إظهاره عبر Media Query) */
    }

    /* **إضافة جديدة:** طبقة سوداء شفافة فوق الفيديو لضمان وضوح النص */
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 2;
        /* الطبقة الثانية: التغطية */
    }

    /* **إضافة هامة:** رفع مستوى النص لضمان ظهوره فوق التغطية والفيديو */
    .hero h1,
    .hero p,
    .hero .cta {
        position: relative;
        z-index: 3;
        /* الطبقة الثالثة: المحتوى (النص والأزرار) */
    }

    /* Media Query: لإظهار الفيديو فقط على الشاشات الأكبر */
    @media (min-width: 768px) {
        .hero-video {
            display: block;
        }
    }

    /* ... (باقي الـ CSS) ... */
    .btn:hover {
        opacity: 0.85
    }

    .btn.ghost {
        background: transparent;
        border: 1px solid var(--secondary)
    }

    /* Sections */
    .section {
        padding: 72px 5%
    }

    /* تم إضافة text-align: center; لجعل العناوين في الوسط */
    .section h2 {
        font-size: 34px;
        margin: 0 0 22px;
        color: var(--primary);
        position: relative;
        padding-bottom: 10px;
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }

    .section h2::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: var(--accent);
        bottom: 0
    }

    .content-text {
        max-width: 980px;
        margin: 0 auto;
        text-align: justify
    }

    /* Menu Section (Placeholder Style) */
    .menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }

    .menu-item {
        border: 1px solid var(--card-border);
        padding: 15px;
        border-radius: 8px;
        text-align: center;
        transition: box-shadow .3s;
    }

    .menu-item img {
        width: 80%;
        height: 60%;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 10px;
        /* filter: grayscale(100%); */
    }

    .menu-item h4 {
        font-size: 18px;
        margin: 0 0 5px;
    }

    /* FEATURES, PRICING, GALLERY, FAQ, CONTACT, WHATSAPP, FOOTER */
    .features {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center
    }

    .feature {
        flex: 1 1 260px;
        background: var(--secondary);
        padding: 20px;
        border-radius: 10px;
        border: 1px solid var(--card-border);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
        text-align: center;
        transition: transform .3s
    }

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

    .feature .icon {
        color: var(--accent);
        font-size: 40px;
        margin-bottom: 10px
    }

    .feature h3 {
        margin: 10px 0;
        font-size: 20px;
        font-family: 'Montserrat', sans-serif
    }

    .feature p {
        color: #555
    }

    .pricing {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 24px
    }

    .plan {
        width: 300px;
        border-radius: 12px;
        padding: 20px;
        background: var(--secondary);
        border: 1px solid var(--card-border);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
        text-align: center;
        transition: transform .3s
    }

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

    .plan.popular {
        border: 2px solid var(--accent);
        transform: scale(1.03)
    }

    .price {
        font-size: 28px;
        color: var(--primary);
        margin: 12px 0;
        font-weight: 700;
        font-family: 'Montserrat', sans-serif
    }

    .plan ul {
        list-style: none;
        padding: 0;
        margin: 12px 0
    }

    .plan li {
        padding: 6px 0;
        border-top: 1px dashed rgba(0, 0, 0, 0.04)
    }

    /* **التعديلات على معرض الصور (Gallery Grid)** */
    /* **التعديلات على معرض الصور (Gallery Grid) - العودة للتمرير اليدوي** */
    .gallery-grid {
        display: flex;
        /* لعرض الصور جنبًا إلى جنب */
        gap: 15px;
        padding: 0 5%;

        /* 💡 التمرير اليدوي الأفقي */
        overflow-x: scroll;

        /* 💡 خاصية التوقف على الصور (Scroll Snap) */
        scroll-snap-type: x mandatory;

        /* منع التفاف العناصر (مهم) */
        flex-wrap: nowrap;

        scrollbar-width: none;
        /* لإخفاء شريط التمرير في Firefox */
        -webkit-overflow-scrolling: touch;
        margin-top: 20px;

        /* إزالة أي رسوم متحركة سابقة */
        animation: none !important;
    }

    /* إخفاء شريط التمرير في Chrome/Safari */
    .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-grid img {
        /* تحديد عرض الصور */
        flex-shrink: 0;
        /* لمنع تقلص الصور */
        width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;

        /* 💡 تحديد نقطة التوقف لكل صورة */
        scroll-snap-align: start;
    }

    @media (max-width: 768px) {
        .gallery-grid img {
            width: 80vw;
            /* لجعل الصور أكبر على الجوال */
            height: 220px;
        }
    }

    .lightbox {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 120
    }

    .lightbox img {
        max-width: 90%;
        max-height: 80%;
        border-radius: 8px
    }

    .faq {
        max-width: 900px;
        margin: 0 auto;
        text-align: right
    }

    .qa {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 12px 0
    }

    .qa button {
        width: 100%;
        text-align: right;
        background: transparent;
        border: none;
        padding: 8px;
        font-size: 16px;
        cursor: pointer;
        font-weight: 700;
        color: var(--accent)
    }

    /* يجب أن يكون اتجاه النصوص العادية في الـ FAQ متناسقًا مع الـ dir */
    .qa .answer {
        display: none;
        padding-top: 6px;
        color: #444;
        text-align: justify
    }

    [dir="ltr"] .qa button {
        text-align: left;
    }

    [dir="ltr"] .faq {
        text-align: left;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 24px;
        align-items: start
    }

    .contact-form {
        background: var(--secondary);
        padding: 18px;
        border-radius: 10px;
        border: 1px solid var(--card-border);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05)
    }

    .contact-form label {
        display: block;
        margin-top: 10px;
        font-weight: 700
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        padding: 10px;
        margin-top: 6px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px
    }



    .map {
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--card-border)
    }

    .whatsapp {
        position: fixed;
        bottom: 22px;
        left: 22px;
        background: #25D366;
        color: white;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        z-index: 130
    }

    /* --- Footer Styles --- */
    footer {
        background: var(--primary);
        /* أو أي لون أساسي تريده */
        color: var(--secondary);
        padding: 40px 0 0;
        font-size: 15px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;

    }

    footer h3,
    footer h4 {
        color: var(--secondary);
        margin-top: 0;
        font-weight: 600;
    }

    /* ========================= */
    /* 📱 Tablet & Mobile */
    /* ========================= */
    @media (max-width: 900px) {
        .footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
    }

    /* ========================= */
    /* 📱 Mobile */
    /* ========================= */
    @media (max-width: 600px) {
        .footer-grid {
            grid-template-columns: 1fr;
            padding: 35px 20px;
            text-align: center;
        }

        /* Center everything */
        .footer-grid>div {
            align-items: center;
        }

        .contact-list li {
            display: block !important;
            justify-content: center;
            text-align: center;
        }

        .contact-info {
            justify-content: center;
            width: 100%;
        }

        .social-links {
            justify-content: center;
        }

        .footer-about img {
            margin: 15px auto 0;
        }
    }

    @media (max-width: 600px) {
        .footer-bottom {
            flex-direction: column;
            text-align: center;
        }

        .contact-list .contact-info.lang-ar {
            width: 40px !important;
            /* your requested width */
        }
    }

    /* تنسيق قائمة الفروع الجديدة */
    .contact-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .contact-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        line-height: 1.5;
        gap: 10px;
    }

    .contact-list li .fas.fa-map-marker-alt {
        /* تنسيق أيقونة الموقع */
        color: var(--accent);
        font-size: 16px;
        margin-top: 3px;
        flex-shrink: 0;
    }

    .contact-info {
        margin-right: 100px !important;

    }

    .contact-list .contact-info {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 5px;
    }

    .contact-list .contact-info a {
        color: var(--secondary);
        /* لون أبيض أو ثانوي */
        text-decoration: none;
        transition: color 0.3s;
    }

    .contact-list .contact-info a:hover {
        color: var(--accent);
    }

    .contact-list .contact-info .fas.fa-phone-alt {
        color: var(--accent);
        font-size: 14px;
    }

    /* تنسيق روابط القوائم السريعة */
    .quick-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .quick-links a {
        color: var(--secondary);
        text-decoration: none;
        line-height: 2.2;
        transition: color 0.3s;
    }

    .quick-links a:hover {
        color: var(--accent);
    }

    /* تنسيق الروابط الاجتماعية */
    .social-links {
        display: flex;
        gap: 15px;
        margin-top: 15px;
    }

    .social-links a {
        color: var(--secondary);
        font-size: 20px;
        transition: color 0.3s;
    }

    .social-links a:hover {
        color: var(--accent);
    }

    /* التذييل السفلي (حقوق النشر) */
    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
        padding: 15px 5%;
        font-size: 13px;
        margin-top: 20px;
    }


    /* تنسيق رابط AD97 لجعله مميزاً */
    .footer-bottom a {
        color: var(--accent);

        font-weight: 900;

        text-decoration: none;

        text-transform: uppercase;

        font-size: 11px;

        transition: color 0.3s ease;

        letter-spacing: 0.8px;
    }

    /* تأثير عند مرور الماوس (Hover) */
    .footer-bottom a:hover {
        color: #fff;
        /* لون أبيض عند التحويم */
        opacity: 0.9;
    }

    /* ACCOUNT DROPDOWN */
    .account-dropdown {
        position: relative;
    }

    .account-btn {
        background: transparent;
        color: var(--secondary);
        border: 1px solid var(--secondary);
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: 'Montserrat', sans-serif;
    }

    .account-btn i {
        font-size: 12px;
    }

    .dropdown-menu {
        position: absolute;
        top: 110%;
        right: 0;
        background: var(--secondary);
        color: var(--primary);
        min-width: 160px;
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        display: none;
        overflow: hidden;
        z-index: 200;
    }

    [dir="ltr"] .dropdown-menu {
        right: auto;
        left: 0;
    }

    .dropdown-menu a {
        display: block;
        padding: 10px 14px;
        text-decoration: none;
        color: var(--primary);
        font-size: 14px;
    }

    .dropdown-menu a:hover {
        background: var(--muted);
    }

    /* SHOW ON HOVER (DESKTOP) */
    .account-dropdown:hover .dropdown-menu {
        display: block;
    }

    @media(max-width:900px) {
        .contact-grid {
            grid-template-columns: 1fr
        }

        .hero {
            height: 340px
        }

        .hero h1 {
            font-size: 32px
        }
    }


    .close-btn {
        position: relative;
        top: 10px;
        right: 0;
        left: 95% !important;
        background: transparent;
        border: none;
        color: var(--primary);
        font-size: 20px;
        cursor: pointer;
        padding: 5px;
        opacity: 0.6;
        transition: opacity 0.2s, color 0.2s;
        z-index: 10;
    }

    .close-btn:hover {
        opacity: 1;
        color: var(--accent);
    }

    [dir="ltr"] .close-btn {
        left: auto;
        right: 10px;
    }


    /* تنسيقات الكاروسيل الجديد باستخدام CSS Animation */

    .carousel-container {
        overflow: hidden;
        /* إخفاء الأجزاء الزائدة من الصور أثناء الحركة */
        width: 90%;
        /* تحديد عرض الحاوية المرئية */
        margin: 20px auto;
        border-radius: 10px;
    }

    .carousel-track {
        display: flex;
        gap: 15px;
        /* المسافة بين الصور */
        width: fit-content;
        /* للسماح للعناصر بالامتداد على سطر واحد */

        /* تشغيل الرسوم المتحركة: (اسم الحركة، مدتها، سلسة، لا نهائية) */
        animation: scroll-rtl 40s linear infinite;
    }

    .carousel-track img {
        flex-shrink: 0;
        width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
        transition: transform 0.3s;
    }

    .carousel-track img:hover {
        transform: scale(1.05);
    }


    /* **إيقاف الحركة عند التمرير (Hover)** */
    .carousel-container:hover .carousel-track {
        animation-play-state: paused;
    }


    /* **1. تعريف الحركة للاتجاه العربي (RTL)** */
    @keyframes scroll-rtl {
        0% {
            transform: translateX(0);
        }

        /* تحريك المسار بالكامل إلى اليسار بمقدار نصف عرضه (حجم الصور الأصلية) */
        100% {
            transform: translateX(-50%);
        }
    }

    /* **2. تعديل الحركة للاتجاه الإنجليزي (LTR)** */
    [dir="ltr"] .carousel-track {
        /* تغيير اسم الحركة للحركة في الاتجاه المعاكس */
        animation: scroll 30s linear infinite;
    }

    @keyframes scroll-ltr {
        0% {
            transform: translateX(-50%);
        }

        /* يبدأ من النصف المكرر */
        100% {
            transform: translateX(0);
        }

        /* يعود إلى نقطة البداية */
    }


    .carousel {
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    .carousel-track {
        display: flex;
        gap: 15px;
        animation: scroll 20s linear infinite;
    }

    .carousel img {
        width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 12px;
        cursor: pointer;
    }

    /* Stop animation on hover */
    .carousel:hover .carousel-track {
        animation-play-state: paused;
    }

    /* Animation */
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }


    /* --- About Us Section Styles --- */

    .about-container {
        display: flex;
        flex-wrap: wrap;
        /* للسماح للعناصر بالنزول لسطر جديد على الشاشات الصغيرة */
        gap: 40px;
        align-items: flex-start;
        /* تبدأ المحاذاة من الأعلى */
        max-width: 1200px;
        margin: 30px auto 60px;
        padding: 0 5%;
    }

    .about-visual {
        flex: 1;
        min-width: 300px;
        /* ضمان أن الصورة لا تصغر أكثر من اللازم */
        order: 2;
        /* نجعل الصورة تظهر ثانية (على اليمين في RTL) */
    }

    /* في الاتجاه العربي، نريد الصورة على اليمين */
    [dir="rtl"] .about-visual {
        order: 2;
    }

    /* في الاتجاه الإنجليزي، نريد الصورة على اليسار */
    [dir="ltr"] .about-visual {
        order: 1;
    }

    .story-image {
        width: 100%;
        max-height: 450px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .about-content {
        flex: 2;
        min-width: 300px;
        order: 1;
        /* نجعل النص يظهر أولاً (على اليسار في RTL) */
    }

    [dir="rtl"] .about-content {
        order: 1;
    }

    [dir="ltr"] .about-content {
        order: 2;
    }

    .about-content h3 {
        color: var(--accent);
        /* لون مميز للعناوين الفرعية */
        font-size: 24px;
        margin-bottom: 20px;
    }

    .about-content h4 {
        font-size: 18px;
        margin-top: 30px;
    }

    /* --- Key Features Grid --- */
    .key-features-grid {
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 1000px;
        margin: 50px auto;
        padding: 30px 5%;
        background: var(--muted);
        /* خلفية خفيفة لتمييزها */
        border-radius: 12px;
    }

    .feature-item {
        text-align: center;
        padding: 10px;
    }

    .feature-item i {
        font-size: 40px;
        color: var(--accent);
        margin-bottom: 10px;
    }

    .feature-item h5 {
        margin: 5px 0 0;
        font-size: 14px;
        font-weight: 600;
    }

    /* **تعديل خاص بالشاشات الصغيرة** */
    @media (max-width: 768px) {
        .about-container {
            flex-direction: column;
            gap: 25px;
        }

        .about-visual,
        .about-content {
            order: initial;
            /* إلغاء ترتيب العناصر لتعود لوضعها الطبيعي (النص ثم الصورة) */
        }

        .key-features-grid {
            flex-direction: column;
            gap: 20px;
        }
    }





    /* --- Modal/Popup Styles --- */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* 💡 التعديل: إزالة overflow: auto لتجنب شريط التمرير */
        /* overflow: auto; */

        /* استخدام flex لملء الشاشة بالنافذة */
        display: flex;
        justify-content: center;
        align-items: center;
        /* توسيط رأسي للمحتوى */

        background-color: rgba(0, 0, 0, 0.9);
        padding: 20px;
        /* لترك مسافة حول المحتوى */
    }

    .modal-content {
        /* 💡 التعديل: استخدام max-height لتجنب شريط التمرير */
        max-height: calc(100vh - 40px);
        /* 100% من ارتفاع الشاشة - المسافة العلوية والسفلية */

        margin: 0;
        /* إزالة margin: auto لنتحكم بالوسط عبر flex */
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 90%;
        max-width: 900px;
        background: #fff;
        border-radius: 10px;
        padding: 15px;
        /* تقليل الحشوة الداخلية */
        position: relative;

        /* 💡 التعديل: السماح بالتمرير داخل محتوى المودال فقط إذا كان طويلاً جداً */
        overflow-y: auto;

        /* إخفاء شريط التمرير داخل المحتوى */
        scrollbar-width: none;
    }

    .modal-content::-webkit-scrollbar {
        display: none;
    }


    #modal-menu-image {
        /* 💡 التعديل: ضمان أن الصورة تملأ عرض محتوى المودال */
        width: 100%;
        height: auto;

        /* 💡 التعديل: هذا هو المفتاح! سيضمن أن الصورة لا تتجاوز الارتفاع المتاح لها */
        max-height: 80%;
        /* يمكن تعديل القيمة */

        object-fit: contain;
        /* للتأكد من أن الصورة لا تقتص */

        border-radius: 8px;
        display: block;
        margin-bottom: 15px;
        /* مسافة قبل زر التحميل */
    }

    /* تعديل موقع زر الإغلاق ليكون أفضل */
    .close-btn {
        position: absolute;
        top: 10px;
        /* أقرب إلى الأعلى */
        right: 15px;
        color: var(--primary);
        /* لجعله مرئيًا على الخلفية البيضاء */
        background: #fff;
        border-radius: 50%;
        padding: 0 10px;
        font-size: 30px;
        z-index: 1001;
        /* فوق الصورة */
    }

    /* --- تنسيق توسيط زر القائمة --- */
    .center-cta {
        text-align: center;
        margin: 40px auto 0;
        padding: 0 5%;
    }

    /* --- تنسيق بطاقات القائمة --- */
    .menu-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1000px;
        margin: 30px auto;
        padding: 0 5%;
        text-align: center;
    }

    .menu-item {
        padding: 0;
        margin: 0;
        background: transparent;
        border-radius: 8px;
        overflow: hidden;
    }

    .menu-item img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
        border-radius: 8px;
    }

    .menu-item h4 {
        font-size: 16px;
        margin: 10px 0 0;
        font-weight: 600;
    }


    /* --- 3. تنسيق النافذة المنبثقة (Modal) المُنقح --- */
    #menu-modal {
        /* **الكود الحاسم للإخفاء الافتراضي** */
        display: none;

        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        /* استخدام Flexbox للتوسيط (يعمل عند التبديل في JS) */
        justify-content: center;
        align-items: center;

        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        /* تحديد أقصى ارتفاع للمحتوى بناءً على ارتفاع الشاشة */
        max-height: 90vh;
        width: 90%;
        max-width: 900px;
        background: #fff;
        border-radius: 10px;
        padding: 15px;
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;

        /* السماح بالتمرير الداخلي وإخفاء شريط التمرير */
        overflow-y: auto;
        scrollbar-width: none;
    }

    .modal-content::-webkit-scrollbar {
        display: none;
    }

    #modal-menu-image {
        /* **الكود الحاسم لعرض الصورة بالكامل دون تمرير** */
        width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: contain;
        display: block;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        color: var(--primary);
        background: #fff;
        border-radius: 50%;
        padding: 0 10px;
        font-size: 30px;
        z-index: 1001;
        cursor: pointer;
        line-height: 1.2;
    }

    [dir="rtl"] .close-btn {
        right: initial;
        left: 15px;
    }


    /* --- تنسيق الزر Primary Button --- */

    .primary-button {
        /* الخصائص الأساسية والأبعاد */
        display: inline-block;
        padding: 14px 30px;
        /* زيادة الحشوة لجعله أكبر وأكثر وضوحاً */

        /* اللون والخلفية */
        background: var(--accent);
        /* اللون المميز (عادةً #00A3A3) */
        color: #fff;
        /* نص أبيض */

        /* الشكل والحدود */
        border: none;
        border-radius: 8px;
        /* حواف مستديرة قليلاً */
        text-decoration: none;

        /* الخط والظل */
        font-size: 17px;
        font-weight: 700;
        /* خط سميك لإبراز النص */
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 163, 163, 0.3);
        /* ظل خفيف بلون الزر */

        /* الانتقال السلس للتأثيرات */
        transition: all 0.3s ease-in-out;
    }

    /* تأثير التحويم (Hover Effect) */
    .primary-button:hover {
        background: #008f8f;
        /* لون أغمق قليلاً عند التحويم */
        transform: translateY(-2px);
        /* رفعه للأعلى لإعطاء إحساس التفاعل */
        box-shadow: 0 6px 20px rgba(0, 163, 163, 0.5);
        /* زيادة حدة الظل */
    }

    /* تنسيق النص داخل الزر للتحكم بالاتجاه */
    .primary-button span {
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    /* إخفاء النص غير المستخدم بناءً على لغة الصفحة (إذا كانت آلية تبديل اللغة تعمل) */
    .primary-button .lang-ar {
        display: block;
    }

    .primary-button .lang-en {
        display: none;
    }

    [dir="ltr"] .primary-button .lang-ar {
        display: none;
    }

    [dir="ltr"] .primary-button .lang-en {
        display: block;
    }

    /* تنسيق حاوية التوسيط (للتذكير) */
    .center-cta {
        text-align: center;
        margin: 40px auto 0;
    }

    .t24 {
        font-weight: bold !important;
        color: var(--accent);
    }

/* Arabic contact info width on mobile */
@media (max-width: 600px) {
    .contact-list .contact-info.lang-ar {
        width: 120px !important;  /* your requested width */
    }
    .fa-phone-alt.lang-en {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-video {
        display: none;
    }

    .hero {
        background: url("../imgs/15.JPG") center/cover no-repeat;
    }
}