body{
                                                                                                                        }
            /*----------main color------------*/
        .text-blue-1,
        .header .header-menu .menu .subnav > li > a:hover,
        .bravo_wrap .footer .menu-footer .menu__nav li .subnav > li > a:hover,
        .desktopMenu .menu a:hover,
        .desktopMenu .menu .subnav__backBtn a,
        .hotel_rooms_form .nav-enquiry .enquiry-item.active span,
        .bravo_single_book .nav-enquiry .enquiry-item.active span,
        .pricing-table .title{
            color: #0960f2;
        }

        .tabs.-underline .tabs__controls .tabs__button:hover,
        .tabs.-pills-2 .tabs__controls .tabs__button:hover,
        .tabs.-bookmark-2 .tabs__button:hover,
        .sidebar.-dashboard .sidebar__button.-is-active,
        .tabs.-underline-2 .tabs__controls .tabs__button.is-tab-el-active,
        .accordion.-db-sidebar .accordion__item.is-active .sidebar__button,
        .tabs.-underline-2 .tabs__controls .tabs__button:hover{
            color: #0960f2 !important;
        }

        .pagination.-dots .pagination__item.is-active,
        .button.-outline-blue-1:hover,
        .form-checkbox:hover input ~ .form-checkbox__mark,
        .pricing-tabs .tab-btns:before,
        .tabs.-underline-2 .tabs__controls .tabs__button::after{
            background-color: #0960f2;
        }

        .bg-blue-1,
        .button.-blue-1:hover,
        .tabs.-pills-2 .tabs__controls .tabs__button.is-tab-el-active,
        .tourTypeCard.-type-1:hover,
        .noUi-connect,
        .accordion.-map .accordion__item.is-active .accordion__icon,
        .form-checkbox input:checked ~ .form-checkbox__mark{
            background-color: #0960f2 !important;
        }

        .button.-blue-1:hover,
        .border-blue-1,
        .button.-outline-blue-1,
        .noUi-handle,
        .hotel_rooms_form .nav-enquiry .enquiry-item.active span,
        .bravo_single_book .nav-enquiry .enquiry-item.active span,
        .form-checkbox input:checked ~ .form-checkbox__mark,
        .pricing-table .inner-box:hover, .pricing-table.tagged .inner-box{
            border-color: #0960f2;
        }
        /*-----------end main color------------*/
    
            
    .swiper-container, .swiper-wrapper, .swiper-slide {
    will-change: transform;
    backface-visibility: hidden;
}

/* القواعد العامة للصور: تمنع تجاوز الحاوية وتحافظ على النسبة الافتراضية */
img {
    max-width: 100%;
    height: auto;
    display: block; /* يزيل الفراغ السفلي الناتج عن السلوك الافتراضي للصور */
    }
    
    /* للصور التي تحتاج عرضًا كامل العرض مع ارتفاع ثابت (مثل أعمدة متساوية) */
    img.h-400 {
    width: 100%;
    height: 400px;
    object-fit: cover; /* تقص الصورة لملء الإطار مع الحفاظ على النسبة (مناسب لصور الخلفيات) */
    /* إذا كانت الصورة تحتوي على نص أو شعار مهم، استخدم contain بدلاً من cover */
    }
    
    /* للشعارات والصور التي يجب ألا تفقد أي جزء منها */
    img.object-contain {
    width: 100%;
    height: 400px;
    object-fit: contain; /* تظهر الصورة كاملة داخل الإطار مع فراغات جانبية */
    background-color: #f8f8f8; /* اختياري: لون خلفية للفراغات */
    }
    
    /* إذا أردت الاحتفاظ بكلاس h-400 ولكن مع سلوك مختلف للشعارات، يمكنك تخصيصه */
    .logo-light.h-400 {
    object-fit: contain; /* الشعار يظهر كاملاً دون قص /
    background-color: transparent; / حسب التصميم */
    }
    
    /* تحسين إضافي: استخدام aspect-ratio لدعم المتصفحات الحديثة /
    img[width][height] {
    aspect-ratio: attr(width) / attr(height); / تجريبي، غير مدعوم في كل المتصفحات */
    /* لكن يمكن تحديد aspect-ratio يدوياً إذا كانت الأبعاد معروفة */
    }
    
    /* بديل يدوي للشعار (مثال: 175x156) */
    img.logo-light {
    aspect-ratio: 175 / 156;
    width: 100%;
    height: auto; /* أو height: 400px حسب التصميم مع object-fit */
    }
    
    /* تأكد من أن الكلاسات الأخرى (مثل col-12) لا تتعارض */
    .col-12 img {
    width: 100%;
    height: auto; /* يضمن عدم فرض ارتفاع ثابت من كلاس آخر */
    }
    
    /* إذا كان هناك تداخل مع h-400، نعطي أولوية للكلاس المحدد */
    img.h-400 {
    height: 400px !important; /* استخدام !important بحذر، فقط للتغلب على تعارضات */
    width: 100% !important;
    }
    
    /* ملاحظة: يفضل تجنب !important واستبداله بترتيب كتابة الكود أو زيادة الخصوصية */
    /* يمكن استخدام هذه القاعدة لضبط سلوك h-400 مع col-12 */
    .col-12.h-400 {
    height: 400px;
    object-fit: cover;
    }
    
    /* =========================================================
    باقي الكود الخاص بالقائمة (Menu Overlay) كما هو دون تغيير
    ========================================================= */
    
    :root {
    --menu-overlay-z: 9999;
    --menu-overlay-bg: rgba(5, 16, 54, 0.55);
    --menu-panel-bg: #ffffff;
    --menu-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    --menu-close-size: 44px;
    }
    
    /* اجعل القائمة تغطي الشاشة من الأعلى بدل الأسفل */
    .header .header-menu {
    top: 0;
    bottom: auto;
    height: 100vh;
    z-index: var(--menu-overlay-z);
    
    /* تحسين الحركة/الأداء */
    transform: translate3d(0, -8px, 0);
    will-change: transform, opacity;
    }
    
    .header .header-menu.is-menu-active {
    transform: translate3d(0, 0, 0);
    }
    
    /* خلي الخلفية/اللوح الأبيض واضحين */
    .header .header-menu .mobile-bg {
    display: block;
    background-color: var(--menu-panel-bg);
    }
    
    /* Overlay خلف اللوح (لإغلاق عند الضغط) */
    .header .header-menu .mobile-overlay {
    display: block;
    background-color: var(--menu-overlay-bg);
    z-index: -1; /* خلف اللوح داخل نفس context */
    }
    
    /* محتوى المنيو فوق الـoverlay */
    .header .header-menu__content {
    position: relative;
    z-index: 1;
    height: 100%;
    }
    
    /* تفعيل سكرول داخلي للمنيو فقط */
    .header .header-menu.is-menu-active .menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    }
    
    /* منع سكرول الصفحة عند فتح المنيو (يعمل مع JS بإضافة body.menu-open) */
    body.menu-open {
    overflow: hidden;
    }
    
    /* زر إغلاق: سنستهدف زر موجود إن وجد أو أي عنصر عليه data-menu-close */
    .header .header-menu [data-menu-close],
    .header .header-menu .menuCloseBtn,
    .header .header-menu .mobile-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: absolute;
    top: 16px;
    right: 16px;
    width: var(--menu-close-size);
    height: var(--menu-close-size);
    
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    
    cursor: pointer;
    z-index: 2;
    }
    
    /* أيقونة X لو مش موجودة داخل الزر */
    .header .header-menu [data-menu-close]::before,
    .header .header-menu .menuCloseBtn::before,
    .header .header-menu .mobile-back-button::before {
    content: "\00d7";
    font-size: 28px;
    line-height: 1;
    color: var(--color-dark-1);
    }
    
    /* Full screen على الموبايل: زرار أكبر ومساحة أفضل */
    @media (max-width: 991px) {
    :root {
    --menu-close-size: 48px;
    }
    
    .header .header-menu {
    width: 100vw;
    height: 100vh;
    }
    }
    
    /* على الكمبيوتر: خلي اللوح يبدو كـdrawer/overlay محترم (بدون ما يغير ألوان الموقع) */
    @media (min-width: 992px) {
    .header .header-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    }
    
    .header .header-menu .mobile-bg {
    /* اعتبر الـmobile-bg هو اللوح الأبيض */
    width: min(520px, 92vw);
    box-shadow: var(--menu-panel-shadow);
    }
    
    .header .header-menu__content {
    width: min(520px, 92vw);
    margin-left: auto;
    }
    }
    
    
            /* شريط اللغات في الأعلى */
    /* شريط اللغات في الأعلى - خارجي وثابت */
    /* شريط اللغات في الأعلى - ثابت وخارج تدفق الموقع */
    .language-top-bar {
        position: fixed; /* يجعله ثابتًا بالنسبة للنافذة */
        top: 0;        /* يلتصق بالجزء العلوي من النافذة */
        left: 0;       /* يلتصق بالجانب الأيسر من النافذة */
        width: 100%;    /* يمتد على كامل عرض النافذة */
        background: linear-gradient(45deg, #343434, #0056b3) !important;
        z-index: 99999; /* يجعله يظهر فوق العناصر الأخرى */
        display: flex;
        justify-content: center; /* توسيط العناصر أفقياً */
        padding: 5px 10px; /* تقليل الحشو الرأسي لتقليل الارتفاع */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* تقليل حجم الظل */
    }
    
    /* iOS/Safari fix: شيل شكل الزر الافتراضي وخليه دايرة فعلاً */
    #scrollToTopBtn,
    #languageBtn,
    #fixedWhatsappBtn {
      -webkit-appearance: none;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
    
      border-radius: 50% !important;
      overflow: hidden;
    
      width: 60px;
      height: 60px;
      padding: 0;
      line-height: 1;
    
      display: flex;
      align-items: center;
      justify-content: center;
    
      box-sizing: border-box;
    }
    
    /* لأن #fixedWhatsappBtn رابط (a) */
    a#fixedWhatsappBtn {
      text-decoration: none;
      border: none;
    }
    
    /* الأيقونة متتحركش الزر */
    #scrollToTopBtn i,
    #fixedWhatsappBtn i,
    #languageBtn .flag-icon {
      pointer-events: none;
    }
    
    
    .language-top-bar a {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        padding: 2px 5px; /* تقليل الحشو الداخلي للروابط */
        margin: 0 3px; /* تقليل المسافة بين الأعلام */
        border-radius: 3px; /* تقليل حجم الحواف الدائرية */
        font-size: 0.9em; /* تقليل حجم الخط إذا كان هناك نص */
    }
    
    .language-top-bar a:hover {
        background: rgba(255, 255, 255, 0.15); /* تأثير hover أقل وضوحًا */
    }
    
    .language-top-bar .flag-icon {
        margin-right: 3px; /* تقليل المسافة بين العلم والنص */
        font-size: 1em; /* تقليل حجم العلم */
    }
    
    /* إضافة هامش علوي بسيط لجسم الصفحة لمنع التداخل */
    body {
        padding-top: 30px; /* يمكنك تعديل هذه القيمة حسب ارتفاع الشريط الفعلي */
    }
    .main-content {
        margin-top: 150px; /* تعديل هذه القيمة حسب ارتفاع شريط اللغات */
    }
    
    .body {
        padding-top: 90px; /* تعديل هذه القيمة حسب ارتفاع شريط اللغات */
    }
            .language-top-bar a {
                color: white;
                text-decoration: none;
                display: flex;
                align-items: center;
                padding: 5px 10px;
                margin: 0 5px; /* مسافة بين الأعلام */
                border-radius: 4px;
            }
    
            .language-top-bar a:hover {
                background: rgba(255, 255, 255, 0.2);
            }
    
            .language-top-bar .flag-icon {
                margin-right: 5px;
                font-size: 1.2em; /* حجم الأيقونة */
            }
    
            .ratio.ratio-16\:9 {
                margin-top: 20px !important;
                margin-bottom: 20px !important;
            }
            .map-ratio,
            .iframe_map {
                margin: 0 !important;
                padding: 0 !important;
            }
    
            /* CSS المصحح للزر الثابت */
            #fixedWhatsappBtn {
                position: fixed;
                bottom: 160px;        /* فوق زر اللغة */
                right: 20px;
                width: 60px;          /* حجم العرض */
                height: 60px;         /* حجم الارتفاع */
                background: linear-gradient(45deg, #25D366, #128C7E);
                color: white;
                border: none;
                border-radius: 50%;    /* كروي */
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28px;        /* حجم الأيقونة */
                z-index: 10000;
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
                transition: transform 0.2s ease, box-shadow 0.2s ease;
                cursor: pointer;
            }
    
            #fixedWhatsappBtn:hover {
                transform: translateY(-4px) scale(1.05);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
                background: linear-gradient(45deg, #1ebe5d, #0f785c);
            }
    
    
            .social-contact {
                display: flex;
                gap: 15px;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                margin: 30px 0;
            }
    
            .social-icon {
                width: 50px;
                height: 50px;
                background-color: #eee;
                color: #333;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                text-decoration: none;
                transition: 0.3s ease;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
    
            .social-icon:hover {
                transform: scale(1.1);
                color: #fff;
            }
    
            .social-icon.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
            .social-icon.facebook { background-color: #3b5998; }
            .social-icon.email    { background-color: #dd4b39; }
            .social-icon.phone    { background-color: #4caf50; }
            .social-icon.viber    { background-color: #7c4bc0; }
    
            .social-icon.instagram:hover { background-color: #fff; }
            .social-icon.facebook:hover { background-color: #2d4373; }
            .social-icon.email:hover    { background-color: #c23321; }
            .social-icon.phone:hover    { background-color: #388e3c; }
            .social-icon.viber:hover    { background-color: #5e35b1; }
    
            @media (max-width: 600px) {
                .social-icon {
                    width: 44px;
                    height: 44px;
                    font-size: 18px;
                }
            }
    
            .footer {
                background: linear-gradient(45deg, #343434, #0056b3); /* إضافة تدرج لوني فخم */
                color: #fff; /* جعل النص أبيض ليتناسب مع الخلفية */
                border-radius: 15px; /* إضافة حواف دائرية للفوتر لجعله يبدو أكثر نعومة */
                box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); /* إضافة ظل لإبراز الفوتر */
                padding: 40px 0; /* إضافة بعض الحشو لجعل الفوتر أكثر اتساعًا */
                margin-top: 20px;
                position: relative; /* ضمان أنه يظهر أسفل المحتوى */
                overflow: hidden;
            }
            .footer .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }
    
            .footer_middle_area {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
    
            .footer_middle_area .col-auto {
                font-size: 16px;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.8);
                line-height: 1.8;
            }
    
    
            .footer_middle_area .col-auto p {
                font-size: 14px;
                line-height: 1.8;
                color: rgba(255, 255, 255, 0.8); /* لون النص في الفوتر بلون شفاف */
            }
    
            .footer_middle_area .col-auto .menu__nav li a {
                color: #fff;
                text-decoration: none;
                padding: 10px 15px;
                border-radius: 25px; /* جعل الروابط على شكل دائري */
                background: rgba(255, 255, 255, 0.1);
                transition: background 0.3s ease;
            }
    
            .footer_middle_area .col-auto .menu__nav li a:hover {
                background: rgba(255, 255, 255, 0.3); /* إضافة تأثير لتغيير الخلفية عند التمرير */
            }
    
            /* تنسيق إضافي في حالة تغير الاستايل */
            .footer-style-1 {
                background: #2c3e50;
            }
    
            .footer-style-2 {
                background: #ecf0f1;
            }
    
            .footer-style-3 {
                background: #34495e;
            }
    
            #contactMainBtn {
                position: fixed;
                bottom: 20px;
                left: 20px;
                z-index: 1000;
                background-color: #007bff;
                color: white;
                border: none;
                padding: 15px;
                border-radius: 50%;
                cursor: pointer;
                font-size: 20px;
            }
    
            .contact-sub-btn {
                position: fixed;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 50px;
                background-color: linear-gradient(45deg, #007BFF, #0056b3);
                color: white;
                border-radius: 50%;
                z-index: 999;
                transition: transform 0.3s ease, opacity 0.3s ease;
                opacity: 0;
                transform: scale(0);
                text-decoration: none;
                font-size: 20px;
            }
    
            .contact-sub-btn.show-sub-buttons {
                opacity: 1;
                transform: scale(1);
            }
    
            /* زر بدء الجولة */
            #startTourBtn {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background-color: #b88b4a;
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                cursor: pointer;
                z-index: 9999;
                font-size: 16px;
                font-weight: bold;
            }
    
            #startTourBtn:hover {
                background-color: #000000cb;
            }
    
            /* إطار الفيديو */
            .video-frame-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #fff;
                border: 8px solid #fff;
                border-radius: 15px;
                padding: 15px;
                overflow: hidden;
                max-width: 90%;
                max-height: 90%;
                z-index: 99999;
            }
    
            .video-frame-container .close {
                position: absolute;
                top: 10px;
                right: 10px;
                background: none;
                border: none;
                color: #000;
                font-size: 30px;
                cursor: pointer;
                z-index: 100000;
            }
    
            .custom-video-wrapper {
                position: relative;
                width: 100%;
                height: auto;
                text-align: center;
            }
    
            .custom-video-player {
                width: 100%;
                height: auto;
                max-height: 80vh;
                border-radius: 10px;
            }
    
            @media only screen and (max-width: 768px),
            only screen and (max-width: 480px) {
                .video-frame-container {
                    padding: 10px;
                    width: 95%;
                }
            }
    
            /* زر التواصل الرئيسي */
            #contactMainBtn {
                position: fixed;
                bottom: 20px;
                left: 20px;
                background: linear-gradient(45deg, #007BFF, #0056b3);
                color: white;
                border: none;
                border-radius: 50%;
                width: 60px;
                height: 60px;
                font-size: 24px;
                cursor: pointer;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                transition: all 0.3s ease;
            }
    
            #contactMainBtn:hover {
                transform: scale(1.1);
            }
    
            /* أزرار التواصل الفرعية */
            .contact-sub-btn {
                position: fixed;
                left: 20px;
                background: #fff;
                color: white;
                border: none;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                font-size: 20px;
                cursor: pointer;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9998;
                transition: all 0.3s ease;
                opacity: 0;
                visibility: hidden;
            }
    
            /* ألوان الأزرار الفرعية */
            #whatsappSubBtn { background: #25D366; bottom: 90px; }
            #phoneSubBtn    { background: #27ae60; bottom: 150px; }
            #emailSubBtn    { background: #f39c12; bottom: 210px; }
            #facebookSubBtn { background: #1877F2; bottom: 270px; }
            #phoneviber { background:rgb(160, 23, 240); bottom: 330px; }
    
            /* زر الصعود لأعلى */
            #scrollToTopBtn {
                display: none;
                position: fixed;
                bottom: 90px;
                right: 20px;
                z-index: 9999;
                background: linear-gradient(45deg, #007BFF, #0056b3);
                color: white;
                border: none;
                border-radius: 50%;
                width: 60px;
                height: 60px;
                font-size: 24px;
                cursor: pointer;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            #languageBtn {
                position: fixed;
                bottom: 160px;
                right: 20px;
                z-index: 9999;
                background: white;
                border: 2px solid linear-gradient(45deg, #007BFF, #0056b3);
                border-radius: 50%;
                width: 60px;
                height: 60px;
                font-size: 26px;
                cursor: pointer;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0;
            }
    
            #languageBtn .flag-icon {
                font-size: 28px;
                border-radius: 50%;
            }
            /* القائمة المنسدلة للغات */
            .language-dropdown {
                position: fixed;
                bottom: 230px;
                right: 20px;
                display: none;
                background: white;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                overflow: hidden;
                z-index: 10000;
            }
    
            .language-dropdown a {
                display: flex;
                align-items: center;
                padding: 10px 15px;
                text-decoration: none;
                color: #333;
                font-size: 16px;
            }
    
            .language-dropdown a:hover {
                background-color: #f0f0f0;
            }
    
            .language-dropdown .flag-icon {
                margin-right: 10px;
            }
    
            /* تصميم الفوتر */
            footer {
                background-color: #333;
                color: white;
                text-align: center;
                padding: 20px 0;
                position: fixed;
                bottom: 0;
                width: 100%;
                font-size: 16px;
                z-index: 9000;
            }
    
            footer a {
                color: #fff;
                text-decoration: none;
                font-weight: bold;
            }
    
            /* إظهار الأزرار الفرعية عند النقر */
            .show-sub-buttons {
                opacity: 1 !important;
                visibility: visible !important;
            }
    
    @font-face {
      font-family: 'Font Awesome 6 Free';
      font-style: normal;
      font-weight: 900;
      font-display: swap;  /* يضمن ظهور النص بخط بديل مؤقتاً */
      src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/webfonts/fa-solid-900.woff2) format('woff2');
    }
    
    @font-face {
      font-family: 'Font Awesome 6 Brands';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/webfonts/fa-brands-400.woff2) format('woff2');
    }