/* ===================
1. Google fonts
====================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

.custom-col-width {
    width: 23% !important; /* Use !important to override Bootstrap's column width */
    flex: 0 0 23% !important; /* Also override flex properties if Bootstrap uses them */
    max-width: 23% !important;
}

/* Comprehensive RTL Support for All Languages */
body [style*="direction: rtl"],
body.language-ar,
body.language-fa,
body.language-ku {
    direction: rtl;
    text-align: right;
}

/* Header RTL Fixes */
body[style*="direction: rtl"] .header-top,
body.language-ar .header-top,
body.language-fa .header-top,
body.language-ku .header-top {
    direction: rtl;
}

body[style*="direction: rtl"] .header-top-left,
body.language-ar .header-top-left,
body.language-fa .header-top-left,
body.language-ku .header-top-left {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .header-top-right,
body.language-ar .header-top-right,
body.language-fa .header-top-right,
body.language-ku .header-top-right {
    direction: rtl;
    flex-direction: row-reverse;
}

body[style*="direction: rtl"] .top-social,
body.language-ar .top-social,
body.language-fa .top-social,
body.language-ku .top-social {
    direction: rtl;
}

body[style*="direction: rtl"] .top-contact-info,
body.language-ar .top-contact-info,
body.language-fa .top-contact-info,
body.language-ku .top-contact-info {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .top-contact-info ul,
body.language-ar .top-contact-info ul,
body.language-fa .top-contact-info ul,
body.language-ku .top-contact-info ul {
    direction: rtl;
    padding-right: 0;
}

/* Navigation RTL Fixes */
body[style*="direction: rtl"] .navbar-nav,
body.language-ar .navbar-nav,
body.language-fa .navbar-nav,
body.language-ku .navbar-nav {
    flex-direction: row;
    direction: rtl;
}

body[style*="direction: rtl"] .nav-item,
body.language-ar .nav-item,
body.language-fa .nav-item,
body.language-ku .nav-item {
    direction: rtl;
}

body[style*="direction: rtl"] .dropdown-menu,
body.language-ar .dropdown-menu,
body.language-fa .dropdown-menu,
body.language-ku .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    text-align: right;
    direction: rtl;
}

/* Hero Section RTL Fixes */
body[style*="direction: rtl"] .hero-section,
body.language-ar .hero-section,
body.language-fa .hero-section,
body.language-ku .hero-section {
    direction: rtl;
}

body[style*="direction: rtl"] .hero-content,
body.language-ar .hero-content,
body.language-fa .hero-content,
body.language-ku .hero-content {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .hero-content-wrapper,
body.language-ar .hero-content-wrapper,
body.language-fa .hero-content-wrapper,
body.language-ku .hero-content-wrapper {
    direction: rtl;
}

/* Search Area RTL Fixes */
body[style*="direction: rtl"] .search-area,
body.language-ar .search-area,
body.language-fa .search-area,
body.language-ku .search-area {
    direction: rtl;
}

body[style*="direction: rtl"] .search-nav,
body.language-ar .search-nav,
body.language-fa .search-nav,
body.language-ku .search-nav {
    direction: rtl;
}

body[style*="direction: rtl"] .search-nav ul,
body.language-ar .search-nav ul,
body.language-fa .search-nav ul,
body.language-ku .search-nav ul {
    direction: rtl;
    padding-right: 0;
}

body[style*="direction: rtl"] .search-form,
body.language-ar .search-form,
body.language-fa .search-form,
body.language-ku .search-form {
    direction: rtl;
}

body[style*="direction: rtl"] .form-group-icon i,
body.language-ar .form-group-icon i,
body.language-fa .form-group-icon i,
body.language-ku .form-group-icon i {
    left: auto !important;
    right: 15px !important;
}

body[style*="direction: rtl"] .form-group-icon input,
body.language-ar .form-group-icon input,
body.language-fa .form-group-icon input,
body.language-ku .form-group-icon input {
    padding-left: 15px !important;
    padding-right: 45px !important;
    text-align: right;
}

/* RECTIFIED: Added missing '.' to the swap class selector */
body[style*="direction: rtl"] .search-form-swap,
body.language-ar .search-form-swap,
body.language-fa .search-form-swap,
body.language-ku .search-form-swap {
    left: auto !important;
    right: -5px !important;
    margin-top: -19px;
    transform: translateX(50%) !important;
}

/* Slider and Carousel RTL Fixes */
body[style*="direction: rtl"] .hero-slider,
body.language-ar .hero-slider,
body.language-fa .hero-slider,
body.language-ku .hero-slider {
    direction: ltr; /* Keep slider direction LTR for proper animation */
}

body[style*="direction: rtl"] .owl-carousel,
body.language-ar .owl-carousel,
body.language-fa .owl-carousel,
body.language-ku .owl-carousel {
    direction: ltr; /* Keep carousel direction LTR */
}

body[style*="direction: rtl"] .partner-slider,
body.language-ar .partner-slider,
body.language-fa .partner-slider,
body.language-ku .partner-slider {
    direction: ltr;
}

body[style*="direction: rtl"] .hotel-slider,
body.language-ar .hotel-slider,
body.language-fa .hotel-slider,
body.language-ku .hotel-slider {
    direction: ltr;
}

body[style*="direction: rtl"] .car-slider,
body.language-ar .car-slider,
body.language-fa .car-slider,
body.language-ku .car-slider {
    direction: ltr;
}

/* Content Sections RTL Fixes */
body[style*="direction: rtl"] .feature-area,
body.language-ar .feature-area,
body.language-fa .feature-area,
body.language-ku .feature-area {
    direction: rtl;
}

body[style*="direction: rtl"] .feature-item,
body.language-ar .feature-item,
body.language-fa .feature-item,
body.language-ku .feature-item {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .flight-area,
body.language-ar .flight-area,
body.language-fa .flight-area,
body.language-ku .flight-area {
    direction: rtl;
}

body[style*="direction: rtl"] .site-heading,
body.language-ar .site-heading,
body.language-fa .site-heading,
body.language-ku .site-heading {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .flight-item,
body.language-ar .flight-item,
body.language-fa .flight-item,
body.language-ku .flight-item {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .hotel-area,
body.language-ar .hotel-area,
body.language-fa .hotel-area,
body.language-ku .hotel-area {
    direction: rtl;
}

body[style*="direction: rtl"] .hotel-item,
body.language-ar .hotel-item,
body.language-fa .hotel-item,
body.language-ku .hotel-item {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .tour-area,
body.language-ar .tour-area,
body.language-fa .tour-area,
body.language-ku .tour-area {
    direction: rtl;
}

body[style*="direction: rtl"] .tour-item,
body.language-ar .tour-item,
body.language-fa .tour-item,
body.language-ku .tour-item {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .car-area,
body.language-ar .car-area,
body.language-fa .car-area,
body.language-ku .car-area {
    direction: rtl;
}

body[style*="direction: rtl"] .car-item,
body.language-ar .car-item,
body.language-fa .car-item,
body.language-ku .car-item {
    direction: rtl;
    text-align: right;
}

/* Testimonial RTL Fixes */
body[style*="direction: rtl"] .testimonial-area,
body.language-ar .testimonial-area,
body.language-fa .testimonial-area,
body.language-ku .testimonial-area {
    direction: rtl;
}

body[style*="direction: rtl"] .testimonial-content,
body.language-ar .testimonial-content,
body.language-fa .testimonial-content,
body.language-ku .testimonial-content {
    flex-direction: row-reverse;
    direction: rtl;
}

body[style*="direction: rtl"] .testimonial-author-img,
body.language-ar .testimonial-author-img,
body.language-fa .testimonial-author-img,
body.language-ku .testimonial-author-img {
    margin-right: 0 !important;
    margin-left: 15px !important;
}

body[style*="direction: rtl"] .testimonial-author-info,
body.language-ar .testimonial-author-info,
body.language-fa .testimonial-author-info,
body.language-ku .testimonial-author-info {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .testimonial-quote,
body.language-ar .testimonial-quote,
body.language-fa .testimonial-quote,
body.language-ku .testimonial-quote {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .testimonial-quote-icon,
body.language-ar .testimonial-quote-icon,
body.language-fa .testimonial-quote-icon,
body.language-ku .testimonial-quote-icon {
    right: auto !important;
    left: 0 !important;
}

/* Footer RTL Fixes */
body[style*="direction: rtl"] .footer-area,
body.language-ar .footer-area,
body.language-fa .footer-area,
body.language-ku .footer-area {
    direction: rtl;
}

body[style*="direction: rtl"] .footer-widget,
body.language-ar .footer-widget,
body.language-fa .footer-widget,
body.language-ku .footer-widget {
    direction: rtl;
}

body[style*="direction: rtl"] .footer-widget-box,
body.language-ar .footer-widget-box,
body.language-fa .footer-widget-box,
body.language-ku .footer-widget-box {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .footer-list i,
body.language-ar .footer-list i,
body.language-fa .footer-list i,
body.language-ku .footer-list i {
    margin-right: 0 !important;
    margin-left: 8px !important;
    transform: rotate(180deg);
}

body[style*="direction: rtl"] .footer-contact,
body.language-ar .footer-contact,
body.language-fa .footer-contact,
body.language-ku .footer-contact {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .footer-newsletter,
body.language-ar .footer-newsletter,
body.language-fa .footer-newsletter,
body.language-ku .footer-newsletter {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .copyright,
body.language-ar .copyright,
body.language-fa .copyright,
body.language-ku .copyright {
    direction: rtl;
}

body[style*="direction: rtl"] .footer-social,
body.language-ar .footer-social,
body.language-fa .footer-social,
body.language-ku .footer-social {
    direction: rtl;
}

/* Download Section RTL Fixes */
body[style*="direction: rtl"] .download-area,
body.language-ar .download-area,
body.language-fa .download-area,
body.language-ku .download-area {
    direction: rtl;
}

body[style*="direction: rtl"] .download-content,
body.language-ar .download-content,
body.language-fa .download-content,
body.language-ku .download-content {
    direction: rtl;
    text-align: right;
}

body[style*="direction: rtl"] .download-feature li,
body.language-ar .download-feature li,
body.language-fa .download-feature li,
body.language-ku .download-feature li {
    direction: rtl;
    text-align: right;
}

/* FAQ Section RTL Fixes */
body[style*="direction: rtl"] .faq-section,
body.language-ar .faq-section,
body.language-fa .faq-section,
body.language-ku .faq-section {
    direction: rtl;
}

body[style*="direction: rtl"] .faq-item,
body.language-ar .faq-item,
body.language-fa .faq-item,
body.language-ku .faq-item {
    direction: rtl;
    text-align: right;
}

/* Button and Icon RTL Fixes */
body[style*="direction: rtl"] .theme-btn i,
body.language-ar .theme-btn i,
body.language-fa .theme-btn i,
body.language-ku .theme-btn i {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

body[style*="direction: rtl"] .flight-text-btn i,
body.language-ar .flight-text-btn i,
body.language-fa .flight-text-btn i,
body.language-ku .flight-text-btn i {
    margin-left: 0 !important;
    margin-right: 5px !important;
    transform: rotate(180deg);
}

body[style*="direction: rtl"] .hotel-text-btn i,
body.language-ar .hotel-text-btn i,
body.language-fa .hotel-text-btn i,
body.language-ku .hotel-text-btn i {
    margin-left: 0 !important;
    margin-right: 5px !important;
    transform: rotate(180deg);
}

body[style*="direction: rtl"] .car-text-btn i,
body.language-ar .car-text-btn i,
body.language-fa .car-text-btn i,
body.language-ku .car-text-btn i {
    margin-left: 0 !important;
    margin-right: 5px !important;
    transform: rotate(180deg);
}

/* Grid and Layout RTL Fixes */
body[style*="direction: rtl"] .row,
body.language-ar .row,
body.language-fa .row,
body.language-ku .row {
    direction: rtl;
    padding-right: 15px;
}

body[style*="direction: rtl"] .col-lg-1,
body[style*="direction: rtl"] .col-lg-2,
body[style*="direction: rtl"] .col-lg-3,
body[style*="direction: rtl"] .col-lg-4,
body[style*="direction: rtl"] .col-lg-5,
body[style*="direction: rtl"] .col-lg-6,
body[style*="direction: rtl"] .col-lg-7,
body[style*="direction: rtl"] .col-lg-8,
body[style*="direction: rtl"] .col-lg-9,
body[style*="direction: rtl"] .col-lg-10,
body[style*="direction: rtl"] .col-lg-11,
body[style*="direction: rtl"] .col-lg-12,
body.language-ar .col-lg-1,
body.language-ar .col-lg-2,
body.language-ar .col-lg-3,
body.language-ar .col-lg-4,
body.language-ar .col-lg-5,
body.language-ar .col-lg-6,
body.language-ar .col-lg-7,
body.language-ar .col-lg-8,
body.language-ar .col-lg-9,
body.language-ar .col-lg-10,
body.language-ar .col-lg-11,
body.language-ar .col-lg-12,
body.language-fa .col-lg-1,
body.language-fa .col-lg-2,
body.language-fa .col-lg-3,
body.language-fa .col-lg-4,
body.language-fa .col-lg-5,
body.language-fa .col-lg-6,
body.language-fa .col-lg-7,
body.language-fa .col-lg-8,
body.language-fa .col-lg-9,
body.language-fa .col-lg-10,
body.language-fa .col-lg-11,
body.language-fa .col-lg-12,
body.language-ku .col-lg-1,
body.language-ku .col-lg-2,
body.language-ku .col-lg-3,
body.language-ku .col-lg-4,
body.language-ku .col-lg-5,
body.language-ku .col-lg-6,
body.language-ku .col-lg-7,
body.language-ku .col-lg-8,
body.language-ku .col-lg-9,
body.language-ku .col-lg-10,
body.language-ku .col-lg-11,
body.language-ku .col-lg-12 {
    float: right !important;
}

/* Ensure all containers have proper RTL */
body[style*="direction: rtl"] .container,
body.language-ar .container,
body.language-fa .container,
body.language-ku .container {
    direction: rtl;
}

/* Fix for Bootstrap grid in RTL */
body[style*="direction: rtl"] .row [class*="col-"],
body.language-ar .row [class*="col-"],
body.language-fa .row [class*="col-"],
body.language-ku .row [class*="col-"] {
    float: right;
}

/* Important: Reset carousel containers to LTR to prevent layout breaks */
body[style*="direction: rtl"] .owl-stage-outer,
body.language-ar .owl-stage-outer,
body.language-fa .owl-stage-outer,
body.language-ku .owl-stage-outer {
    direction: ltr;
}

body[style*="direction: rtl"] .owl-stage,
body.language-ar .owl-stage,
body.language-fa .owl-stage,
body.language-ku .owl-stage {
    direction: ltr;
}

body[style*="direction: rtl"] .owl-item,
body.language-ar .owl-item,
body.language-fa .owl-item,
body.language-ku .owl-item {
    direction: ltr;
}

/* Language & Currency Dropdown Styles */
.dropdown-container {
    position: relative;
    display: inline-block;
    margin-right: 120px;
    margin-left: 120px;
}

.dropdown-btn {
    background: #ffffff00;
    border: 1px solid #dddddd00;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #ffffff;
    transition: all 0.3s ease;
    height: 25px;
    min-width: 100px;
}

.dropdown-btn:hover {
    background: #f5f5f500;
    border-color: #bbbbbb00;
}

/* Desktop container - 4 languages in one row */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: -150px;
    background: white;
    width: 550px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 20px;
}

.dropdown-container.active .dropdown-content {
    display: block;
}

.language-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
}

/* Desktop: 4 languages in one row */
.language-options-horizontal {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns for 4 languages */
    gap: 10px;
}

.language-option {
    display: flex;
    flex-direction: column; /* Stack flag and text vertically */
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    text-align: center;
    min-height: 75px;
}

.language-option:hover {
    background: #f8fafc;
    border-color: #cbd5e0;
}

.language-option.active {
    background: #e1f0ff;
    border-color: #4da8ff;
}

.language-option .flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.language-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.language-name {
    font-size: 13px;
    font-weight: 500;
    color: #2d3748;
    line-height: 1.2;
}

.language-code {
    font-size: 11px;
    color: #718096;
    font-weight: 600;
    background: #f7fafc;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}

/* Currency Grid - 3 boxes in one row */
.currency-grid-six-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
}

.currency-item {
    display: flex;
    flex-direction: column; /* Stack flag and text vertically */
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    min-height: 65px;
    width: 100%;
}

.currency-item:hover {
    background: #f8fafc;
    border-color: #cbd5e0;
}

.currency-item.selected {
    background: #e1f0ff;
    border-color: #4da8ff;
}

.currency-flag {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    margin-bottom: 6px;
}

.currency-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.currency-code {
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
}

.currency-name {
    font-size: 11px;
    color: #718096;
    text-align: center;
    line-height: 1.2;
}

/* Dropdown Footer */
.dropdown-footer {
    padding: 15px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.selection-status {
    font-size: 13px;
    color: #718096;
    margin-bottom: 12px;
    text-align: center;
}

.selection-status span {
    font-weight: 600;
    color: #2d3748;
}

.apply-btn {
    width: 100%;
    background: #0a2c5e;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 14px;
}

.apply-btn:hover {
    background: #083a7c;
}

/* RTL Support */
.language-ar .dropdown-content,
.language-fa .dropdown-content {
    right: auto;
    left: 0;
}

/* Scrollbar Styling */
.currency-grid-six-columns::-webkit-scrollbar {
    width: 4px;
}

.currency-grid-six-columns::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.currency-grid-six-columns::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.currency-grid-six-columns::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* =========================================
   MOBILE RESPONSIVE STYLES
   ========================================= */

/* Tablet and Mobile */
@media (max-width: 991px) {
    .header-top-right .dropdown-container {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
        left: 0 !important;
        right: 0 !important;
        margin-right: 0 !important;
    }
    
    .dropdown-btn {
        min-width: 80px;
    }
    
    .dropdown-content {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 340px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        padding: 15px !important;
    }
    
    .dropdown-container.active .dropdown-content {
        display: block !important;
    }
}

/* Mobile devices (768px and below) */
@media (max-width: 768px) {
    .dropdown-content {
        width: 95vw !important;
        max-width: 320px !important;
    }
    
    /* 2 language boxes side by side in each row for mobile */
    .language-options-horizontal {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 8px !important;
    }
    
    .language-option {
        padding: 8px 6px !important;
        min-height: 65px !important;
    }
    
    .language-option .flag {
        width: 20px !important;
        height: 15px !important;
    }
    
    .language-name {
        font-size: 12px !important;
    }
    
    .language-code {
        font-size: 10px !important;
    }
    
    /* Currency grid - keep 3 columns */
    .currency-grid-six-columns {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        max-height: 160px !important;
    }
    
    .currency-item {
        padding: 8px 6px !important;
        min-height: 60px !important;
    }
    
    .currency-flag {
        width: 16px !important;
        height: 12px !important;
    }
    
    .currency-code {
        font-size: 12px !important;
    }
    
    .currency-name {
        font-size: 10px !important;
    }
    
    .section-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
}

/* Small mobile devices (480px and below) */
@media (max-width: 480px) {
    .dropdown-content {
        width: 98vw !important;
        max-width: 300px !important;
        padding: 12px !important;
    }
    
    .language-options-horizontal {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    
    .language-option {
        padding: 7px 5px !important;
        min-height: 60px !important;
    }
    
    .currency-grid-six-columns {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        max-height: 140px !important;
    }
    
    .currency-item {
        padding: 7px 5px !important;
        min-height: 55px !important;
    }
    
    .header-top-right {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .dropdown-container {
        margin-right: 0 !important;
    }
}

/* Extra small mobile devices (360px and below) */
@media (max-width: 360px) {
    .dropdown-content {
        max-width: 280px !important;
    }
    
    .language-option {
        padding: 6px 4px !important;
        min-height: 55px !important;
    }
    
    .language-name {
        font-size: 11px !important;
    }
    
    .currency-item {
        padding: 6px 4px !important;
        min-height: 50px !important;
    }
    
    .currency-code {
        font-size: 11px !important;
    }
    
    .currency-name {
        font-size: 9px !important;
    }
}

/* =========================================
   ENSURE LANGUAGE DROPDOWN IS ALWAYS CLICKABLE
   ========================================= */

#language-currency-display,
#language-currency-display *,
.dropdown-container,
.dropdown-container * {
    pointer-events: auto !important;
}

#language-currency-display:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

.dropdown-content,
.dropdown-content * {
    pointer-events: auto !important;
    touch-action: auto !important;
    user-select: text !important;
}

.language-option,
.currency-item {
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(10, 44, 94, 0.1) !important;
}

.language-option:hover,
.currency-item:hover {
    background-color: #f0f7ff !important;
}

#apply-selections {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: auto !important;
}

#apply-selections:hover {
    background-color: #083a7c !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
    #language-currency-display {
        min-height: 20px !important;
        height: 25px !important;
        min-width: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dropdown-content {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

/* ============================================================
   COMPREHENSIVE RTL SUPPORT FIX
   ============================================================ */
body.rtl {
    direction: rtl !important;
    text-align: right !important;
}

/* Force RTL on all elements when body has rtl class */
body.rtl * {
    direction: rtl !important;
    text-align: right !important;
}

/* Header RTL Fix */
body.rtl .header-top {
    direction: rtl !important;
}

body.rtl .header-top-left,
body.rtl .header-top-right {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .header-top-right {
    flex-direction: row !important;
}

body.rtl .top-social,
body.rtl .top-contact-info {
    direction: rtl !important;
}

body.rtl .top-contact-info ul {
    direction: rtl !important;
    padding-right: 0 !important;
}

/* Navigation RTL Fix */
body.rtl .main-navigation {
    direction: rtl !important;
}

body.rtl .navbar-nav {
    flex-direction: row-reverse !important;
    direction: rtl !important;
}

body.rtl .nav-item {
    direction: rtl !important;
}

body.rtl .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Hero Section RTL Fix */
body.rtl .hero-section {
    direction: rtl !important;
}

body.rtl .hero-content {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .hero-content-wrapper {
    direction: rtl !important;
    text-align: right !important;
}

/* Search Area RTL Fix */
body.rtl .search-area {
    direction: rtl !important;
}

body.rtl .search-nav ul {
    direction: rtl !important;
    padding-right: 0 !important;
}

body.rtl .search-form {
    direction: rtl !important;
}

body.rtl .form-group-icon i {
    left: auto !important;
    right: 15px !important;
}

body.rtl .form-group-icon input {
    padding-left: 15px !important;
    padding-right: 45px !important;
    text-align: right !important;
}

body.rtl .search-form-swap {
    left: auto !important;
    right: -5px !important;
    margin-top: -18px;
    transform: translateX(50%) !important;
}

/* Sliders - Maintain LTR for functionality while content is RTL */
body.rtl .hero-slider,
body.rtl .partner-slider,
body.rtl .hotel-slider,
body.rtl .car-slider,
body.rtl .testimonial-slider,
body.rtl .owl-carousel,
body.rtl .owl-stage-outer,
body.rtl .owl-stage,
body.rtl .owl-item {
    direction: ltr !important;
    text-align: center !important;
}

body.rtl .hero-slider .hero-content,
body.rtl .partner-slider .partner-card,
body.rtl .hotel-slider .hotel-item,
body.rtl .car-slider .car-item,
body.rtl .testimonial-slider .testimonial-single {
    direction: rtl !important;
    text-align: right !important;
}

/* Content Sections RTL */
body.rtl .feature-area,
body.rtl .flight-area,
body.rtl .hotel-area,
body.rtl .tour-area,
body.rtl .car-area,
body.rtl .testimonial-area,
body.rtl .download-area,
body.rtl .blog-area,
body.rtl .faq-section {
    direction: rtl !important;
}

body.rtl .site-heading {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .feature-item,
body.rtl .flight-item,
body.rtl .hotel-item,
body.rtl .tour-item,
body.rtl .car-item,
body.rtl .testimonial-single,
body.rtl .blog-item,
body.rtl .faq-item {
    direction: rtl !important;
    text-align: right !important;
}

/* Testimonial Content RTL */
body.rtl .testimonial-content {
    flex-direction: row-reverse !important;
    direction: rtl !important;
}

body.rtl .testimonial-author-img {
    margin-right: 0 !important;
    margin-left: 15px !important;
}

body.rtl .testimonial-author-info,
body.rtl .testimonial-quote {
    direction: rtl !important;
    text-align: right !important;
}

/* Footer RTL */
body.rtl .footer-area {
    direction: rtl !important;
}

body.rtl .footer-widget,
body.rtl .footer-widget-box {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .footer-list i {
    margin-right: 0 !important;
    margin-left: 8px !important;
    transform: rotate(180deg) !important;
}

body.rtl .footer-contact,
body.rtl .footer-newsletter {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .copyright {
    direction: rtl !important;
}

/* Button and Icon RTL */
body.rtl .theme-btn i,
body.rtl .flight-text-btn i,
body.rtl .hotel-text-btn i,
body.rtl .car-text-btn i,
body.rtl .tour-text-btn i {
    margin-left: 0 !important;
    margin-right: 8px !important;
    transform: rotate(180deg) !important;
}

/* Grid System RTL Fix */
body.rtl .container {
    direction: rtl !important;
}

body.rtl .row {
    direction: rtl !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

body.rtl [class*="col-"] {
    float: right !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

/* Download Section RTL */
body.rtl .download-content {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .download-feature li {
    direction: rtl !important;
    text-align: right !important;
}

/* FAQ SECTION RTL FIX */
body.rtl .faq-section {
    direction: rtl !important;
}

body.rtl .faq-header {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .faq-grid {
    direction: rtl !important;
}

body.rtl .faq-item {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .faq-question h3 {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 20px !important;
}

body.rtl .faq-icon {
    left: 20px !important;
    right: auto !important;
}

body.rtl .faq-answer {
    direction: rtl !important;
    text-align: right !important;
    padding: 0 20px 20px 20px !important;
}

body.rtl .faq-content,
body.rtl .faq-content p {
    direction: rtl !important;
    text-align: right !important;
}

body.rtl .read-more-btn {
    direction: rtl !important;
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Emergency Override Fix */
body.rtl div,
body.rtl section,
body.rtl article,
body.rtl aside,
body.rtl details,
body.rtl figcaption,
body.rtl figure,
body.rtl footer,
body.rtl header,
body.rtl hgroup,
body.rtl main,
body.rtl menu,
body.rtl nav,
body.rtl summary {
    direction: rtl !important;
    text-align: right !important;
}

/* Selection Status Fix */
.selection-status {
    font-size: 13px;
    color: #718096;
    margin-bottom: 12px;
    text-align: center;
}

.apply-btn {
    width: 100%;
    background: #0a2c5e;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 0px 0px 6px 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 14px;
}

/* =========================================
   FAQ SECTION CSS (Rectified & Scoped)
   ========================================= */

.faq-section {
    padding: 60px 0;
    background: #f9f9f9;
}

/* Base style for the answer container */
.faq-answer {
    /* Set to block to allow the 'teaser' max-height logic to work */
    display: block !important; 
    padding-top: 10px;
}

/* The wrapper that handles the 2-line preview and expansion */
.faq-content {
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    /* Smooth expansion transition */
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) !important;
}

/* 2 Lines visible initially */
.faq-content.collapsed {
    max-height: 85px !important;
}

/* Full text visible when expanded */
.faq-content.expanded {
    max-height: 2000px !important;
}

.text-wrapper p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 15px;
}

.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

/* --- INDIVIDUAL FAQ ITEM --- */
.faq-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 20px 25px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

/* --- HEADER AREA (Question + Icon) --- */
.faq-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.faq-question-header h3 {
    font-size: 18px;
    color: #0a2c5e;
    font-weight: 700;
    margin: 0;
    padding-right: 15px;
}

/* The Blue Circle Icon */

/* DEFAULT styles first (desktop) */
.faq-icon {
    width: 50px;
    height: 50px;
    background-color: #0a2c5e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* MEDIA QUERY second (mobile - overrides desktop) */
@media (max-width: 991px) {
    .faq-icon {
        width: 30px;
        height: 30px;
        font-size: 18px;
        /* Other properties remain the same */
    }
}

@media (max-width: 991px) {
    .hotel-slider .owl-nav,
    .hotel-carousel .owl-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Rotate icon when active */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
    background-color: #007bff;
}

/* Styled Blue Button */
.read-more-btn {
    display: inline-block !important;
    background: #0a2c5e !important;
    color: white !important;
    padding: 6px 15px !important;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    margin-top: 10px;
    position: relative;
    z-index: 10;
}

.phone-btn-faq {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    gap: 40px;
    background: #edfaff;
    color: #2b2f3b;
    border: 1px solid #4fcbfc;
    font-size: 22px;
    font-weight: 700;
    padding: 0px 0px;
    border-radius: 40px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

/* --- FINAL FIX: LANGUAGE ICON & HEADER POSITION --- */

.dropdown-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    background: transparent !important;
    min-width: 110px !important;
}

#header-flag-img {
    width: 20px !important;
    height: 15px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    margin: 0 !important;
}

/* RTL (Arabic/Kurdish/Farsi) - Mirror Layout */
body.rtl .header-top,
html[dir="rtl"] .header-top {
    flex-direction: row-reverse !important;
}

body.rtl .header-top-right,
html[dir="rtl"] .header-top-right {
    flex-direction: row !important;
    justify-content: flex-end !important;
}

body.rtl .dropdown-btn,
html[dir="rtl"] .dropdown-btn {
    flex-direction: row !important;
}

/* =========================================
   DATE PICKER POPUP STYLES
   ========================================= */

.date-picker-container {
    width: 900px;
    max-width: 95vw;
    height: 650px;
    max-height: 90vh;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 46, 109, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUpScale 0.227s forwards;
}

/* Apply button styles */
.footer .apply-btn {
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer .apply-btn:hover {
    background-color: #083a7c !important;
    transform: translateY(-2px);
}

.date-picker-header {
    padding: 10px 30px;
    background-color: #0a2c5e;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.date-picker-header h1 {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Barlow', sans-serif;
    color: white;
}

@media (max-width: 768px) {
    .date-picker-header h1 {
        font-size: 20px;
        font-weight: 600;
        font-family: 'Barlow', sans-serif;
        color: white;
    }
}

.trip-selector {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.trip-option {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Barlow', sans-serif;
}

.trip-option.active {
    background-color: #4da8ff;
    font-weight: 600;
}

.date-picker-content {
    display: flex;
    flex-direction: column;
    padding: 25px 30px;
    flex-grow: 1;
    overflow: auto;
}

.selected-dates {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
    gap: 15px;
}

.date-info {
    flex: 1;
    padding: 15px 15px 0;
    background-color: #f0f4f8;
    border-radius: 8px;
    min-width: 0;
}

.date-info.return-disabled {
    background-color: #e8ecef;
    color: #a0aec0;
}

.date-info.return-disabled h3,
.date-info.return-disabled .date-value {
    color: #a0aec0;
}

.date-info h3 {
    font-size: 16px;
    color: #0a2c5e;
    margin-bottom: 8px;
    font-family: 'Barlow', sans-serif;
}

.date-value {
    font-size: 18px;
    font-weight: 600;
    color: #0a2c5e;
    font-family: 'Barlow', sans-serif;
}

.clear-btn {
    position: absolute;
    left: 50%;
    top: -10%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    z-index: 10;
    white-space: nowrap;
    font-family: 'Barlow', sans-serif;
    background-color: #f4f9ff;
    border: 1px solid #c1e1ff;
    border-radius: 35px;
}

.clear-btn:hover {
    background-color: #e1e8f0;
}

.calendar-container {
    display: flex;
    gap: 30px;
}

/* Option 1 styles */
/* Header controls wrapper */

.header-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.trip-selector {
    display: flex;
    gap: 10px;
}

.header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

/* Close button styles */

.close-btn:hover {
    background-color: #f5f5f5;
    color: #333;
}

/* Optional: Responsive adjustments */
@media (max-width: 768px) {
    .header-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .calendar-container {
        flex-direction: column;
    }
    
    .date-value {
        font-size: 16px;
    }
}

.calendar {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.month-year {
    font-size: 18px;
    font-weight: 600;
    color: #0a2c5e;
    text-align: center;
    font-family: 'Barlow', sans-serif;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 10px;
}

.weekday {
    font-weight: 600;
    color: #0a2c5e;
    padding: 8px 0;
    font-size: 18px;
    font-family: 'Barlow', sans-serif;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2.5px;
    flex-grow: 1;
}

.day {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 16px;
    background-color: #f8fafc;
    font-family: 'Barlow', sans-serif;
}

.day.in-range {
    background-color: #e1f0ff;
}

.footer {
    background-color: #f0f4f8;
    justify-content: flex-end;
}

/* =========================================
   ADDITIONAL FLIGHT OPTIONS
   ========================================= */
.additional-flight-options {
    margin-top: 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-left: -13px;
    width: 100%;
}

.flight-options-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.direct-flights-option, .refundable-flights-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Standardized Checkbox Sizes */
.direct-flights-option input[type="checkbox"],
.refundable-flights-option input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
}

.flexible-flights-option select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-family: 'Barlow', sans-serif;
    color: #626262;
    font-size: 16px;
    cursor: pointer;
}

.passenger-confirm-btn {
    background-color: #0a2c5e;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

/* Google Review Styles */
.google-review-header {
    border-bottom: 2px solid #f0f4f8;
}

.book-now-btn-review {
    width: 300px;
    background-color: #052f6d;
    color: #fff;
    padding: 5px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 10px;
    margin-left: 25px;
}

.book-now-btn-review-1 {
    width: 300px;
    background-color: #056d2d;
    color: #fff;
    padding: 5px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 10px;
    margin-left: 25px;
}

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

.google-logo svg {
    width: 80px;
    height: 26px;
}

.google-text {
    font-size: 18px;
    font-weight: 600;
    color: #4285F4;
    font-family: 'Google Sans', Arial, sans-serif;
}

.google-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stars {
    font-size: 24px;
    display: flex;
    gap: 2px;
}

.star {
    color: #FFB400;
    font-size: 24px;
}

.rating-text {
    font-size: 24px;
    font-weight: 600;
    color: #0a2c5e;
}

.live-google-review {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #4285F4;
}

.review-text {
    font-size: 16px;
    line-height: 1.6;
    color: #2d3748;
    margin-bottom: 15px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.review-author strong {
    color: #0a2c5e;
    font-size: 16px;
}

.review-date {
    color: #718096;
    font-size: 14px;
}

.review-source {
    display: flex;
    align-items: center;
    gap: 8px;
}

.source-badge {
    background: #34A853;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.source-company {
    color: #718096;
    font-size: 14px;
}

.google-review-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.stat-stars {
    display: flex;
    justify-content: center;
    gap: 1px;
    margin-bottom: 5px;
    height: 30px;
}

.stat-stars .star {
    font-size: 20px;
}

.stat-label {
    font-size: 12px;
    color: #718096;
    font-weight: 500;
}

/* Smooth Opening Animations */
@keyframes fadeInOverlay {
    from {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
    to {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }
}

@keyframes slideUpScale {
    0% {
        transform: translateY(50px) scale(0.9);
        opacity: 0;
    }
    70% {
        transform: translateY(-10px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Optional: Add closing animation */
.date-picker-overlay.closing {
    animation: fadeOutOverlay 0.4s ease-in forwards;
}

.date-picker-container.closing {
    animation: slideDownScale 0.5s ease-in forwards;
}

@keyframes fadeOutOverlay {
    from {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }
    to {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
}

@keyframes slideDownScale {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(50px) scale(0.9);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .google-review-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .google-review-stats {
        grid-template-columns: 1fr;
    }

    .review-author,
    .review-source {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* Animation for stars */
.star {
    animation: starGlow 2s ease-in-out infinite alternate;
}

.star:nth-child(2) { animation-delay: 0.2s; }
.star:nth-child(3) { animation-delay: 0.4s; }
.star:nth-child(4) { animation-delay: 0.6s; }
.star:nth-child(5) { animation-delay: 0.8s; }

@keyframes starGlow {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 1; transform: scale(1.1); }
}

/* =========================================
   SEARCH BUTTON & PASSENGER BOX POSITIONING
   ========================================= */
.passenger-search-container {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 100%;
    position: relative;
}

.passenger-search-container .passenger-box {
    flex: 1;
    margin-bottom: 0;
}

.passenger-search-container .search-btn {
    flex: 0 0 auto;
    margin: 0;
    align-self: stretch;
}

.passenger-search-container .theme-btn {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    padding: 0 8px;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .passenger-search-container {
        flex-direction: column;
    }

    .passenger-search-container .theme-btn {
        height: 50px;
        width: 100%;
        margin-top: 0;
    }
}

/* =========================================
   POPUP & OVERLAY STYLES
   ========================================= */
#popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    flex-direction: column;
    gap: 8px;
    border-bottom: 2px solid rgb(0, 89, 255);
    padding: 40px;
}

.close-btn-overlay {
  position: relative;
  z-index: 9999;
  pointer-events: auto !important;
  cursor: pointer;
  background: red; /* just to make it visible */
  width: 40px;
  height: 40px;
}

/* =========================================
   PARTNER CARDS & RIBBONS
   ========================================= */

.partner-card {
    position: relative;
    margin: 10px;
    transition: all 0.3s ease;
}

.partner-card-inner {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8f4ff;
    transition: all 0.3s ease;
    overflow: hidden;
}

.partner-card:hover .partner-card-inner {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 46, 109, 0.2);
}

/* Ribbon Styles */
.partner-ribbon {
    position: absolute;
    top: 15px;
    right: -30px;
    padding: 6px 35px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    min-width: 130px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.partner-ribbon-discount {
    background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
    display: block; /* Rectified from active to block */
}

.partner-ribbon-popular {
    background: linear-gradient(45deg, #4ECDC4, #6FFFE0);
    display: block; /* Rectified from active to block */
}

.partner-ribbon-featured {
    background: linear-gradient(45deg, #45B7D1, #7CE0FE);
    display: block; /* Rectified from active to block */
}

.partner-ribbon-new {
    background: linear-gradient(45deg, #96CEB4, #BAF2D8);
    display: block;
}

/* Price Tag Styles */
.partner-price-tag {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0a2c5e, #4da8ff);
    color: white;
    padding: 0px 16px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(10, 44, 94, 0.3); /* Removed 'none' */
    z-index: 2;
    min-width: 160px;
    text-align: center;
    transition: all 0.3s ease;
}

.partner-price-tag::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #365a7a;
}

.partner-card:hover .partner-price-tag {
    background: linear-gradient(135deg, #4da8ff, #0a2c5e);
    transform: translateX(-50%) scale(1.05); /* Removed 'none' */
}

.partner-price {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Partner Images */
.partner-card img {
    height: 80px;
    object-fit: contain;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    filter: grayscale(0.3);
    opacity: 0.8;
}

.partner-card:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.5);
}

/* Responsive Design */
@media (max-width: 768px) {
    .partner-ribbon {
        font-size: 10px;
        padding: 4px 25px;
        right: -25px;
    }
    
    .partner-price-tag {
        font-size: 12px;
        padding: 6px 12px;
        min-width: 100px;
    }
    
    .partner-card img {
        height: 60px;
        margin-bottom: 25px;
    }
}

/* Animations */
@keyframes ribbonPulse {
    0% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(45deg) scale(1.05); }
    100% { transform: rotate(45deg) scale(1); }
}

.partner-ribbon {
    animation: ribbonPulse 2s infinite ease-in-out;
}

/* =========================================
   GOOGLE REVIEW STYLES
   ========================================= */
.google-review-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 10px;
}

.google-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 15px;
}

.stat-item {
    text-align: center;
    padding: 0;
    background: #f7f9fc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Animations */
@keyframes ribbonPulse {
    0% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(45deg) scale(1.05); }
    100% { transform: rotate(45deg) scale(1); }
}

@keyframes scan {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(200px); opacity: 0; }
}

/* =========================================
   TESTIMONIAL SLIDER STYLES
   ========================================= */
.testimonial-slider {
    position: relative;
}

.testimonial-single {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin: 10px;
    border: 1px solid #e8f4ff;
}

.testimonial-content {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.testimonial-author-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
}

.testimonial-author-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-info h4 {
    margin: 0;
    color: #0a2c5e;
    font-size: 18px;
}

.testimonial-author-info p {
    margin: 5px 0 0 0;
    color: #718096;
    font-size: 14px;
}

.testimonial-quote {
    position: relative;
    margin-bottom: 20px;
}

.testimonial-quote p {
    font-size: 16px;
    line-height: 1.6;
    color: #2d3748;
    margin: 0;
}

.testimonial-quote-icon {
    position: absolute;
    top: -10px;
    right: 0;
    width: 60px;
    height: 60px;
}

.testimonial-rate {
    color: #FFB400;
    font-size: 16px;
}

/* =========================================
   FORMS & INPUTS STYLES
   ========================================= */
.form-group-icon input.auto-save-clear {
    background-color: #fff !important;
}

.form-group-icon input.auto-save-clear:focus {
    background-color: #fff !important;
    outline: 2px solid #4da8ff !important;
    outline-offset: -2px !important;
}

.form-group-icon {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 0px;
}

/* =========================================
   CAR SEARCH LAYOUT
   ========================================= */
.car-search-wrapper .row {
    align-items: flex-end;
}

.car-search-wrapper .search-btn {
    margin-top: 0;
    align-self: flex-end;
}

/* =========================================
   ENHANCED DROPDOWN STYLING
   ========================================= */
.flexible-flights-option select {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 46, 109, 0.15) !important;
    padding: 12px 40px !important;
    background: white !important;
    font-family: 'Barlow', sans-serif !important;
    color: #626262 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    /* Rectified: Added quotes to data URL */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%230a2c5e' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px !important;
    outline: none !important;
    min-width: 180px;
}

.Cabin-Class-option select {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 46, 109, 0.15) !important;
    padding: 12px 40px !important;
    background: white !important;
    font-family: 'Barlow', sans-serif !important;           
    font-size: 16px;
    font-weight: 500;
    color: #626262 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%230a2c5e' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px !important;
    outline: none !important;
    min-width: 180px;
}

/* =========================================
   DOWNLOAD AREA STYLES
   ========================================= */
.equal-height-container {
    display: flex;
    align-items: stretch;
}

.download-img-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 46, 109, 0.1);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    margin: 0 10px;
}

.download-img img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    transition: all 0.3s ease;
}

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

.download-content-container {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 40px 35px;
    box-shadow: 0 10px 30px rgba(0, 46, 109, 0.1);
    border: 1px solid #e2e8f0;
    height: 80%;
    margin: 0 10px;
    display: flex;
    align-items: center;
}

.site-title-tagline-download {
    display: inline-block;
    background: linear-gradient(135deg, #4da8ff, #0a2c5e);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    max-width: 1540px; /* Changed from width to max-width */
    width: 98%; /* Added for responsiveness */
    margin-left: auto;
    margin-right: auto;
}

.download-link a {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-width: 140px;
    max-width: 160px;
}

/* =========================================
   ANIMATIONS & RESPONSIVE
   ========================================= */
@media (max-width: 992px) {
    .passenger-search-container {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .testimonial-content {
        flex-direction: column;
        text-align: center;
    }
}

@keyframes starGlow {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 1; transform: scale(1.1); }
}

.star {
    animation: starGlow 2s ease-in-out infinite alternate;
}

/* =========================================
   SEARCH TAB NAVIGATION
   ========================================= */
.search-nav .nav-link i {
    margin-right: 8px; /* Space between icon and text */
}

.nav-link-hidden {
    display: none !important;
}

.search-nav ul.nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
}

.search-nav .nav-item {
    white-space: nowrap;
}

/* =========================================
   ACCOUNT LINKS (MY TRIPS & LOGIN)
   ========================================= */
.account-links {
    display: flex;
    align-items: center;
    gap: 45px;
    margin-top: 5px;
}

.account-links a {
    color: white;
    text-decoration: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.account-links a i {
    font-size: 19px;
}

.account-links a:hover {
    color: #f0f0f0;
    text-decoration: none;
}

/* =========================================
   DONE BUTTONS & DROPDOWN ACTIONS
   ========================================= */
.done-section {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
    text-align: right;
    margin-right: 20px;
}

.btn-done-primary {
    background: #0a2c5e;
    color: #fff;
    border: none;
    padding: 4px 15px;
    width: 250px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

.passenger-box-custom {
    flex: 1;
    margin-bottom: 0;
}

.done-section-secondary {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
    text-align: right;
}

.btn-done-secondary {
    background: #0a2c5e;
    color: #fff;
    border: none;
    padding: 4px 15px;
    width: 300px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-done-secondary:hover, .btn-done-primary:hover {
    background: #0232cf;
}

/* =========================================
   MEGA MENU (FLIGHT + HOTEL)
   ========================================= */

@media (max-width: 768px) {
    /* Make the dropdown container positioning relative */
    .custom-dropdown {
        position: relative !important;
    }
    
    /* Override Bootstrap's dropdown positioning */
    .more-options-menu-mega.dropdown-menu {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        min-width: 340px !important;
        max-width: 90vw !important;
        width: auto !important;
        margin: 0 !important;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        z-index: 1060 !important;
        
        /* Remove Bootstrap's default positioning */
        right: auto !important;
        bottom: auto !important;
    }
    
    /* Remove arrow if present */
    .more-options-menu-mega.dropdown-menu::before,
    .more-options-menu-mega.dropdown-menu::after {
        display: none !important;
    }
}

.more-options-menu-mega {
    min-width: 700px !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.three-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 10px;
}

.options-column.border-right {
    border-right: 1px solid #eee;
    padding-right: 15px;
}

.column-title {
    font-size: 14px;
    font-weight: 700;
    color: #0a2c5e;
    margin-bottom: 15px;
}

.btn-clear-red {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    width: 100%;
}

.btn-done-mega {
    background: #0a2c5e;
    color: #fff;
    border: none;
    padding: 8px 15px;
    width: 250px;
    border-radius: 4px;
    margin-top: 15px;
}

.done-footer {
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* =========================================
   SEARCH BAR ALIGNMENT (BUNDLE & PACKAGE)
   ========================================= */

@media (max-width) {
    .bundle-search-container, .package-search-container {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        height: 100%;
        flex-direction: column;
    }
}

.bundle-search-container, .package-search-container {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 100%;
}

.bundle-passenger-box, .package-passenger-box {
    width: 300px !important;
    margin-bottom: 0;
}

.btn-bundle-search, .btn-package-search {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.btn-done-bundle, .btn-done-package {
    background: #0a2c5e;
    color: #fff;
    border: none;
    padding: 4px 15px;
    width: 100%;
    border-radius: 4px;
}

#pills-4 .form-group {
    margin-bottom: 0;
}

/* =========================================
   MULTI-CITY SEARCH
   ========================================= */

/* Flight Search Row Styles */
.flight-search-row {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
    position: relative;
}

/* Delete Button Styles */
.remove-flight-btn {
    background: rgb(205, 233, 255);
    border: 1px solid rgba(67, 172, 252, 1);
    color: #dc3545;
    cursor: pointer;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
}

.remove-flight-btn:hover {
    background: #ffebee;
    border-color: #dc3545;
    transform: scale(1.05);
}

.remove-flight-btn i {
    font-size: 24px;
}

/* Form adjustments for flight search */
.flight-search-row .form-group {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .flight-search-row .col-lg-4,
    .flight-search-row .col-lg-3,
    .flight-search-row .col-lg-1 {
        margin-bottom: 15px;
    }
    
    .remove-flight-btn {
        width: 40px;
        height: 40px;
    }
    
    .remove-flight-btn i {
        font-size: 20px;
    }
}

/* Animation for row removal */
@keyframes fadeOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-100%); }
}

.flight-search-row.removing {
    animation: fadeOut 0.3s ease forwards;
}

.multi-city-main {
    display: none;
    width: 100%;
}

.multi-city-row.leg-row-first {
    width: 100%;
    margin: 0;
    padding-top: 20px;
}

.multi-city-row.leg-row-additional {
    width: 100%;
    margin: 20px 0 0 0;
}

.remove-btn-column {
    padding-bottom: 12px;
    display: flex;
    align-items: flex-end;
}

.remove-flight-btn {
    background: rgb(205, 233, 255);
    border: 1px solid rgba(67, 172, 252, 1);
    color: #dc3545;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px;
}

.btn-add-flight {
    background: rgb(1, 81, 143);
    border: 1px solid rgb(187, 226, 255);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    width: 100%;
    font-weight: 600;
    border-radius: 8px;
    font-size: 24px;
}

.btn-search-full {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.custom-passenger-width { width: 500px !important; }
.passenger-total-display { width: 400px; }

.nested-rooms-box {
    flex: 1;
    margin-bottom: 0;
    width: 400px;
    margin-left: 30px !important;
}

.custom-mega-dropdown {
    width: 100%;
    min-width: 500px;
}

.cabin-label {
    color: #0a2c5e;
    font-size: 16px;
}

.btn-done-sm {
    background: #0a2c5e;
    color: #fff;
    border: none;
    padding: 4px 15px;
    width: 250px;
    border-radius: 4px;
}

.btn-done-lg {
    background: #0a2c5e;
    color: #fff;
    border: none;
    padding: 4px 15px;
    width: 400px;
    margin-right: 30px;
    border-radius: 4px;
}

/* =========================================
   QR CODE & SCAN ANIMATION
   ========================================= */
.qr-code-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 20px;
    padding: 15px 30px;
    box-shadow: 0 10px 30px rgba(0, 46, 109, 0.1);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    margin: 0 10px;
}

.qr-code-box {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actual-qr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.qr-scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #007da1;
    box-shadow: 0 0 8px #007da1;
    z-index: 5;
    animation: scanAnimation 3s infinite linear;
}

@keyframes scanAnimation {
    0% { top: 0; }
    50% { top: 100%; }
    100% { top: 0; }
}

.qr-code-card {
    background: white;
    border-radius: 16px;
    padding: 30px 25px;
    box-shadow: 0 8px 25px rgba(0, 46, 109, 0.15); /* Rectified */
    border: 1px solid #e2e8f0; /* Rectified */
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
    height: 100%;
}

.qr-code-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4da8ff, #0a2c5e, #4da8ff);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================================
   QR CODE & DOWNLOAD COMPONENT STYLES
   ========================================= */

.qr-code-header {
    margin-bottom: 5px;
}

.qr-code-header h4 {
    color: #0a2c5e;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Barlow', sans-serif;
}

.qr-code-header p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

.qr-code-box {
    position: relative;
    background: #f8fafc;
    padding: 10px;
    border-radius: 16px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 2px solid #e2e8f0;
    margin-bottom: 10px;
    overflow: hidden;
}

.qr-code-placeholder {
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 12px;
    position: relative;
    border: 1px solid #e2e8f0;
    margin: 0 auto;
}

.qr-code-design {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, #f1f5f9 0%, #ffffff 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-corner {
    position: absolute;
    width: 35px;
    height: 35px;
    border: 4px solid #0a2c5e;
}

.qr-corner-tl { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.qr-corner-tr { top: 15px; right: 15px; border-left: none; border-bottom: none; }
.qr-corner-bl { bottom: 15px; left: 15px; border-right: none; border-top: none; }

.qr-pattern {
    width: 120px;
    height: 120px;
    background: 
        linear-gradient(45deg, #0a2c5e 25%, transparent 25%),
        linear-gradient(-45deg, #0a2c5e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #0a2c5e 75%),
        linear-gradient(-45deg, transparent 75%, #0a2c5e 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    opacity: 0.7;
}

.qr-text {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.qr-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4da8ff, transparent);
    animation: scan 2s ease-in-out infinite;
}

.qr-code-footer {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qr-instruction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
    background: #f8fafc;
    padding: 2px 15px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.qr-platform-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.qr-platform-badge.android { background: linear-gradient(135deg, #3DDC84, #2BB673); }
.qr-platform-badge.ios { background: linear-gradient(135deg, #000000, #333333); }
.qr-platform-badge:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }

/* =========================================
   RESPONSIVE DESIGN (FLATTENED & FIXED)
   ========================================= */

@media (max-width: 1199px) {
    .download-content .site-title { font-size: 24px; }
    .download-img-container, .download-content-container, .qr-code-container { padding: 35px 25px; }
}

@media (max-width: 991px) {
    .phone-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 100px;
        background: #edfaff;
        color: #2b2f3b;
        border: 1px solid #4fcbfc;
        font-size: 20px;
        font-weight: 700;
        padding: 10px 14px;
        border-radius: 40px;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
    }

    .equal-height-container { flex-direction: column; gap: 30px; }
    .equal-height-container > [class*="col-"] { margin: 0; }
    
    .download-img-container, .download-content-container, .qr-code-container {
        margin: 0;
        padding: 40px 30px;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    }
    
    .download-content { text-align: center; }
    .download-link { justify-content: center; }
    .qr-code-card { max-width: 100%; border: 1px solid #e2e8f0; }
}

@media (max-width: 768px) {
    .download-content .site-title { font-size: 22px; }
    .download-img-container, .download-content-container, .qr-code-container { padding: 30px 20px; }
    .qr-code-placeholder { width: 200px; height: 200px; }
    .download-link a { min-width: 130px; max-width: 140px; }
}

@media (max-width: 576px) {
    .download-content .site-title { font-size: 20px; }
    .download-link { flex-direction: column; align-items: center; }
    .download-link a { max-width: 200px; width: 100%; }
    .qr-code-card { padding: 25px 20px; }
}

/* =========================================
   ANIMATIONS, EFFECTS & MISC
   ========================================= */

.download-img-container, .download-content-container, .qr-code-container {
    transform: translateY(-5px);
    transition: all 0.3s ease; 
}

.download-img-container:hover, .download-content-container:hover, .qr-code-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 46, 109, 0.2);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scan {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(200px); opacity: 0; }
}

.translation-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    backdrop-filter: blur(5px);
}

.translation-loading {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 2px solid #0a2c5e;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/* =========================================
   1. Dual Banner CSS Start
   ========================================= */



/* =========================================
   PROMO SIGN-UP FORM (LEFT BANNER ONLY)
   ========================================= */

.banner-form-promo {
    display: flex !important;
    width: 100%;
    height: 48px;
    gap: 0;
    margin-bottom: 10px;
}

.banner-form-promo input {
    flex: 1;
    height: 48px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.banner-form-promo input:hover,
.banner-form-promo input:focus {
    border-color: #004c9c;
}

.banner-form-promo button {
    height: 48px;
    padding: 0 20px;
    background: #004c9c;
    color: #fff;
    border: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.banner-form-promo button:hover {
    background: #1385ff;
}

/* =========================================
   MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 767px) {
    .banner-form-promo {
        width: 80px !important;
        height: 44px;
    }

    .banner-form-promo input {
        height: 44px;
        font-size: 14px;
        padding: 0 10px;
    }

    .banner-form-promo button {
        height: 44px;
        padding: 0 15px;
        font-size: 14px;
    }
}


.dual-banner-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: stretch;
    width: 100%;
}

.signup-banner-container {
    display: flex !important;
    flex: 1; 
    height: 240px !important;
    background: #fff;
    border: 1px solid #86e7ff;
    border-radius: 12px;
    overflow: hidden !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}





/* ====================
69. signup_banner-2
==================== */


.banner-item {
  background: #fff; 
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 15px 5px rgba(85, 85, 85, 0.123);
}

/* Layout for banner */
.banner-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Make image bigger */
.banner-left img {
  max-width: 300px;   /* increase size */
  margin: 0 auto;
}

/* Right side content */
.banner-right {
  flex: 1;
}

/* Title */
.banner-title {
  font-size: 30px;
  font-weight: 700;
  color: #003366;
  margin-bottom: 8px;
}

/* Subtitle text */
.banner-right p {
  font-size: 22px;
  margin-bottom: 12px;
}

/* Email + button */
.banner-form {
  display: flex;
  gap: 0px;
  margin-bottom: 6px;
}

.banner-form input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  font-size: 16px;
}

.banner-form button {
  background: #004c9c;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 20px;
  border: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
  margin-top: -0.5px;
}

.banner-form button:hover {
  background: #1385ff;
}

/* Small text */
.banner-small {
  font-size: 16px;
  color: #666;
}


.banner-item::before,
.banner-item::after {
  content: none !important;
  background: none !important;
}

@media (max-width: 767px) {
  .banner-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .banner-left img {
    width: 100%;
    max-width: 300px; /* optional */
    margin: 0 auto;
  }
@media (max-width: 767px) {
  .banner-form {
    display: flex;
    gap: 0px;
    width: 130px;
  
}
}

  .banner-form button {
    width: 100%;
    padding: 15px 10px;
    font-size: 15px;
  }

    .banner-form button {
        background: #004c9c;
        color: #fff;
        border: none;
        padding: 0 15px;
        border-radius: 0 8px 8px 0;
        font-weight: 600;
        cursor: pointer;
    
  }
}


.custom-container-1540 {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
}

.dual-banner-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px; /* Space between the two banners */
    align-items: stretch; /* Ensures both are equal height */
    width: 100%;
}

/* =========================================
   Left Banner Styles
   ========================================= */
.signup-banner-container {
    display: flex !important;
    flex: 1; /* Takes equal width */
    height: 240px !important; /* Fixed height */
    background: #fff;
    border: 1px solid #86e7ff;
    border-radius: 12px;
    overflow: hidden !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.banner-content-container {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-content-container h1 {
    font-size: 22px;
    color: #1a3a8f;
    margin-bottom: 8px;
    line-height: 1.2;
    font-weight: 800;
}

.banner-content-container h2 {
    font-size: 17px;
    color: #444;
    margin-bottom: 15px;
    font-weight: 500;
}

.highlight {
    color: #1a3a8f;
    font-weight: bold;
}

.banner-form {
    display: flex;
    height: 48px;
    margin-bottom: 10px;
}


.banner-form input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px 0 0 8px;
}

.banner-form input:hover {
    flex: 1;
    padding: 10px;
    border: 1px solid #004c9c;
    border-radius: 8px 0 0 8px;
}

.banner-form button {
    background: #004c9c;
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 0 8px 8px 0;
    font-weight: 600;
    cursor: pointer;
}



.banner-small {
    font-size: 12px;
    color: #666;
}




.banner-small {
    font-size: 12px !important;
    color: #666;
    line-height: 1.3;
}
.banner-small a { color: #007bff; text-decoration: none; }

/* --- Responsive (Mobile) --- */
@media (max-width: 991px) {
    .dual-banner-wrapper {
        flex-direction: column; /* Stack banners on top of each other */
    }
    .signup-banner-container {
        width: 100% !important;
        margin-bottom: 20px;
    }
    .banner-content-container h1 {
        font-size: 15px !important;
        margin: 0 0 8px 0 !important;
        font-weight: 800;
        color: #1a3a8f;
        line-height: 1.2;
    }

    .banner-content-container h2 {
    font-size: 14px !important;
    margin: 0 0 15px 0 !important;
    font-weight: 500;
    color: #444;
    line-height: 1.4;
    }
    }


/* =========================================
   1. Dual Banner CSS End
   ========================================= */


/* === 3. RIGHT BANNER STYLES (NEW - CONTACT CARD) === */
.contact-banner-container {
    display: flex;
    flex: 1; /* Equal width to left banner */
    height: 240px; /* Equal height to left banner */
    background: #fff; /* White background for readability */
    border: 1px solid #86e7ff; /* Dark Blue Border */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Image Side (Left) */
.contact-image-side {
    width: 35%; /* Same width proportion as left banner */
    height: 100%;
    position: relative; /* Necessary for the overlay to position correctly */
    overflow: hidden;
}

.contact-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content Side (Right) */
.contact-content-side {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Typography */
.contact-content-side h1 {
    font-size: 20px;
    color: #0a2c5e; /* Brand Blue */
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 1.2;
}

.contact-subtitle {
    font-size: 14px;
    color: #cc7400; /* Accent Color */
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* The Feature List */
.contact-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Space between items */
}

.contact-features li {
    font-size: 17px; /* Small font to fit all items */
    color: #444;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.contact-features li i {
    color: #00b894; /* Green Checkmark */
    font-size: 17px;
}

/* Terms Link */
.contact-terms {
    margin-top: 8px;
    font-size: 14px;
    text-align: right;
}

.contact-terms a {
    color: #535353;
    text-decoration: underline;
}

.contact-terms a:hover {
    color: #0a2c5e;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .dual-banner-wrapper { flex-direction: column; height: auto; }
    .signup-banner-container, .contact-banner-container { 
        width: 100%; 
        height: 240px !important; 
        height: 240px; 
    }
}

/* 1. Shake the icon inside the blue circle */
.contact-banner-container .phone-icon-circle i {
    display: inline-block;
    animation: contact-phone-vibrate 2s infinite ease-in-out;
    transform-origin: center;
}

/* 2. Add a pulsing glow effect to the blue circle itself */
.contact-banner-container .phone-icon-circle {
    position: relative;
    animation: contact-circle-pulse 2s infinite;
    z-index: 1;
}

/* --- ANIMATION KEYFRAMES --- */

/* The Ringing/Vibration Effect */
@keyframes contact-phone-vibrate {
    0% { transform: rotate(0); }
    5% { transform: rotate(-15deg); }
    10% { transform: rotate(15deg); }
    15% { transform: rotate(-15deg); }
    20% { transform: rotate(15deg); }
    25% { transform: rotate(-15deg); }
    30% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

/* The Outer Glowing Pulse Effect */
@keyframes contact-circle-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 93, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 93, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 93, 255, 0);
    }
}

/* Optional: Make it vibrate faster when the user hovers over it */
.contact-banner-container .phone-wrapper:hover .phone-icon-circle i {
    animation-duration: 0.5s;
}

/* =========================================
   NEW STYLES FOR NUMBER & ICON OVERLAY 
   ========================================= */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for contrast */
    
    /* This pushes the .phone-wrapper to the BOTTOM */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: center;
    z-index: 2;
    padding-bottom: 20px; /* Space from the bottom edge */
}

/* This puts the Icon and Number in ONE line (Row) */
.phone-wrapper {
    display: flex;
    align-items: center; /* Vertically centers them */
    justify-content: center;
    gap: 12px; /* Space between Icon and Number */
}

.phone-icon-circle {
    background-color: #1e88e575;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    /* Removed margins because we use 'gap' in the wrapper now */
}

/* Rotates the icon inside the circle */
.phone-icon-circle i.rotated {
    transform: rotate(90deg); /* Rotates 90 degrees to the right */
}

.phone-icon-circle i {
    transform: rotate(90deg); 
}

.overlay-number {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    line-height: 1;
}

/* =========================================
   NEW STYLES FOR NUMBER & ICON OVERLAY END
   ========================================= */

/* =========================================
   NEW FLIGHT OPTIONS BAR CSS
   ========================================= */

/* The Trigger Buttons (Text Only style) */
.option-trigger {
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #4f5050; /* Brand Blue */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
}

.option-trigger i {
    font-size: 16px;
    color: #4f5050;
    transition: transform 0.3s;
}

/* Rotate arrow when open */
.dropdown.show .option-trigger i {
    transform: rotate(180deg);
}

/* Dropdown Menu Styling */
.custom-dropdown .dropdown-menu {
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    padding: 10px;
    margin-top: 10px !important;
    min-width: 180px;
}

/* Trip Type Items */
.custom-dropdown .dropdown-item {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    color: #333;
    transition: all 0.2s;
}

.custom-dropdown .dropdown-item:hover,
.custom-dropdown .dropdown-item.active {
    background-color: #f0f7ff; /* Light Blue Hover */
    color: #4f5050;
    font-weight: 600;
}

/* More Options Menu Specifics */
.more-options-menu {
    min-width: 260px !important;
    padding: 0px !important;
}

.more-options-menu .form-check-input {
    cursor: pointer;
    border-color: #ccc;
}

.more-options-menu .form-check-input:checked {
    background-color: #0a2c5e;
    border-color: #0a2c5e;
}

.more-options-menu .form-check-label {
    cursor: pointer;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.option-trigger {
    font-size: 14px;
    background: #f4f7fa; /* Grey Pill on Mobile */
    padding: 8px 15px;
    border-radius: 8px;
}

/* Hides the default Bootstrap arrow so only the custom one shows */
.option-trigger::after {
    display: none !important;
}

/* =========================================
   UPDATED FLIGHT OPTIONS CSS
   ========================================= */

/* 1. Widen the Dropdown to fit side-by-side */
.more-options-menu {
    min-width: 450px !important; /* Increased width */
    padding: 20px !important;
    overflow: visible !important; /* FIX: Allows Cabin Class dropdown to show fully */
}

/* 2. Create the 2-Column Grid */
.flight-options-grid {
    display: flex;
    align-items: flex-start;
}

.options-column {
    flex: 1; /* Each column takes 50% width */
}

/* 3. Style Checkboxes */
.more-options-menu .form-check {
    margin-bottom: 0px !important;
}

.more-options-menu .form-check-label {
    cursor: pointer;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

.more-options-menu .form-check-input {
    cursor: pointer;
    border-color: #bbb;
}

.more-options-menu .form-check-input:checked {
    background-color: #0a2c5e;
    border-color: #0a2c5e;
}

/* 4. Style Cabin Class Select */
.cabin-select-group .form-select {
    font-size: 14px;
    border-radius: 6px;
    border-color: #ced4da;
    padding: 8px 30px 8px 10px;
    cursor: pointer;
    background-color: #fff;
    /* Ensure standard appearance to avoid clipping */
    appearance: none; 
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.form-select {
    --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    display: block;
    width: 400px;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-left: -33px;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.cabin-select-group .form-select:focus {
    border-color: #0a2c5e;
    box-shadow: 0 0 0 0.2rem rgba(10, 44, 94, 0.15);
}

/* 5. Mobile Responsive Fix */
@media (max-width: 768px) {
    .more-options-menu {
        min-width: 290px !important;
    }
    
    .flight-options-grid {
        flex-direction: column;
        gap: 15px;
    }
    
    .options-column {
        width: 100%;
        border-right: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* Fix for Flight + Hotel Passenger Box Width */
#pills-3 .passenger-box {
    width: 300px !important;
    min-width: 300px !important;
    flex: none !important;
}

/* ==================================================
   FIX FOR FLIGHT + HOTEL PASSENGER & SEARCH BUTTON
   ================================================== */

/* 1. Reset the Container to keep elements inside the column */
#pills-3 .passenger-search-container-1 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px; /* Space between input and button */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    left: -12px;
}

/* 2. Fix the Passenger Box (Input) */
#pills-3 .passenger-box {
    flex: 1; /* Grow to fill available space */
    min-width: 0; /* Prevent flexbox overflow */
    margin: 0 !important; /* Remove negative margins causing overlap */
    border: 1px solid rgb(205, 233, 255);
}

/* 3. Fix the Input Field inside to ensure it fits */
#pills-3 .passenger-box .form-group-icon {
    width: 100% !important;
    padding-right: 0px;
    padding-left: 0px;
    background: white;
    border-radius: 12px;
    height: 45px;
}

/* 4. Fix the Search Button (Stop it from floating/overlapping) */
#pills-3 .search-btn {
    flex: 0 0 auto; /* Don't shrink or grow */
    width: auto !important;
    margin: 0 !important;
    position: static !important; /* Stop absolute positioning */
    transform: none !important;
}

/* 5. Style the button itself to match height */
#pills-3 .search-btn .theme-btn {
    position: static !important; /* Stop absolute positioning */
    transform: none !important;
    height: 90px !important; /* Match input height */
    padding: 0 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: none;
}

/* Highlight the box when the dropdown is OPEN (.show) */
.passenger-box.show .input-box-style, 
.passenger-box.show .form-group-icon {
    border-color: #0a2c5e !important;      /* Blue Border */
    box-shadow: 0 0 0 1px #0a2c5e !important; /* Sharp Outline */
    background-color: #fff !important;     /* White Background */
    transition: all 0.3s ease;
}

.container, 
.container-fluid, 
.container-lg, 
.container-md, 
.container-sm, 
.container-xl, 
.container-xxl {
    width: 100%;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Custom Flex Layout for Flight Options dropdown */
.flight-options-flex {
    display: flex;
    gap: 10px;
    width: 100%;
}

.flight-options-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    width: 100%;
    gap: 120px;
}

.flight-options-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.flight-options-title {
    font-size: 15px;
    font-weight: bold;
    color: #494949;
    margin: 0;
    text-align: center;
}

.flight-options-left {
    padding-right: 20px;
    border-right: 1px solid #e0e0e0;
}

.flight-options-right {
    padding-left: 20px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* FIX: Consistent checkbox sizing */
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-item input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.checkbox-item label {
    cursor: pointer;
    font-size: 14px;
    color: #333;
    margin: 0;
    line-height: 1.4;
}

.clear-btn-1 {
    background: transparent;
    border: 1px solid #a71423;
    color: #a71423;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: auto; /* This pushes button to bottom */
}

.clear-btn-1:hover {
    background: #dc3545;
    color: #ffffff;
}

.done-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.done-btn {
    background: #0a2c5e;
    color: #ffffff;
    border: none;
    padding: 6px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.done-btn:hover {
    background: #083a7c;
}

/* Ensure dropdown container has proper styling */
.more-options-menu {
    position: absolute;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 450px;
}

/* Selected Options Display */
.selected-options-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #e9ecef;
}

.selected-options-title {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.selected-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.option-tag {
    background: #0a2c5e;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.option-tag .remove-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-left: 3px;
}

.option-tag .remove-btn:hover {
    color: #ff6b6b;
}

.no-options {
    font-size: 13px;
    color: #6c757d;
    font-style: italic;
}

/* Style for when options are selected */
.option-trigger.active-selection {
    color: #0a2c5e;
    font-weight: 700;
    background-color: #e1f0ff; 
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #0a2c5e;
}

/* =========================================
   FIX FLIGHT MORE OPTIONS DROPDOWN LAYOUT
   ========================================= */

/* Main dropdown container */
.more-options-menu {
    min-width: 600px !important;
    padding: 20px !important;
}

/* Column Styling */
.flight-options-left {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-right: 20px !important;
    border-right: 1px solid #e2e8f0 !important;
}

/* Right column - Cabin Class */
.flight-options-right {
    padding-left: 20px !important;
}

/* Headers layout */
.flight-options-header {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    width: 380px !important;
}

.flight-options-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0a2c5e !important;
    margin: 0 !important;
}

/* Checkbox groups */
.checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
    margin-top: 20px;
}

.checkbox-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.checkbox-item input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.checkbox-item label {
    cursor: pointer !important;
    font-size: 14px !important;
    color: #333333 !important;
    margin: 0 !important;
}

/* Clear buttons */
.clear-btn-1 {
    background: transparent !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: auto !important;
}

.clear-btn-1:hover {
    background: #dc3545;
    color: #ffffff;
}

/* Done button */
.done-section {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e2e8f0 !important;
    text-align: right !important;
}

/* Mobile responsive (768px) */
@media (max-width: 768px) {
    .more-options-menu {
        min-width: 300px !important;
    }

    .checkbox-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 15px !important;
        margin-bottom: 0px !important;
        flex-grow: 1 !important;
        margin-top: 0px;
    }
    
    .flight-options-flex {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .container {
        max-width: 1540px;
        margin: 0 auto;
        padding: 0 0px !important;
    }

    .flight-options-left {
        padding-right: 0 !important;
        border-right: none !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .flight-options-right {
        padding-left: 0 !important;
    }
}

/* =========================================
   MOBILE RESPONSIVE FIXES (991px)
   ========================================= */
@media (max-width: 991px) {
    .hero-section {
        display: none !important;
    }

    .search-area {
        padding-top: 20px;
    }

    /* 3. Stack the 4 Search Columns */
    .custom-col-width {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* 6. Fix Passenger & Search Button Container */
    .passenger-search-container {
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        left: 0 !important;
        align-items: stretch !important;
    }

    /* Fix Passenger Input Box Width */
    .passenger-search-container .passenger-box,
    #pills-3 .passenger-box {
        margin-bottom: 15px !important;
        flex: none !important;
    }
    
    /* Fix for Flight + Hotel Passenger Box Width */
    #pills-3 .passenger-box {
        width: 350px !important;
        min-width: 350px !important;
        flex: none !important;
    }
    
    /* 7. Fix Search Button Width and Height */
    .search-btn .theme-btn {
        width: 100% !important;
        min-width: 365px;
        height: 50px !important;
        margin-top: 0 !important;
    }

    /* Flight + Hotel Specific Button Fix */
    #pills-3 .search-btn .theme-btn {
        height: 50px !important;
    }

    /* 8. Fix Car Search Columns */
    .car-search-wrapper .col-lg-2 {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 15px;
    }

    /* 9. General Container Padding */
    .search-wrapper {
        padding: 0;
    }
    
    /* 10. Fix Date Picker Popup on Mobile */
    .date-picker-container {
        width: 95% !important;
        height: 90vh !important;
        overflow-y: scroll;
    }

    .calendar-container {
        flex-direction: column;
    }

    .review-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        flex-direction: column;
    }

    .google-review-section {
        background: white;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 10px;
    }

    /* Top Header Mobile Fix */
    .header-top {
        display: block !important;
        padding: 10px 0;
        background: #f8f9fa;
        height: 45px;
        z-index: 10;
    }
}

/* Specific button widths for smaller screens */
@media (max-width: 768px) {
    .search-btn .theme-btn {
        min-width: 325px !important;
    }
}

@media (max-width: 480px) {
    .search-btn .theme-btn {
        min-width: 325px !important;
    }
}

@media (max-width: 991px) {
    .header-top-right .dropdown-btn {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 60px !important;
        padding: 6px 12px !important;
        background: rgba(255,255,255,0.1) !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        border-radius: 20px !important;
        color: white !important;
        cursor: pointer !important;
        position: relative;
        right: 90px;
    }
}

/* =========================================
   MOBILE RESPONSIVE CSS ADDITIONS
   ========================================= */
@media (max-width: 991px) {
    .header-top {
        display: block !important;
        padding: 10px 0;
        background: #f8f9fa;
        height: 45px;
    }
    
    .header-top-right .dropdown-container {
        position: relative !important;
        left: -40px !important; /* Move 40px left from current position */
    }

    .header-top-left {
        display: none !important;
    }
            
    .header-top-right {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 0px;
    }
            
    /* Language dropdown */
    .header-top-right .dropdown-container {
        order: 1;
        margin-bottom: 0px;
        margin-left: 10px;
    }
            
    /* My Trips and Login */
    .header-top-right .account {
        order: 3;
        display: flex !important;
        gap: 15px;
        margin-bottom: 10px;
    }
            
    /* Add My Trips with icon */
    .header-top-right .account::before {
        content: " My Trips";
        display: flex !important;
        align-items: center;
        color: #333;
        font-weight: 500;
        order: 2;
        padding: 8px 12px;
        background: #fff;
        border-radius: 6px;
        border: 1px solid #ddd;
    }
            
    /* Phone Number between Logo and Menu */
    .navbar-brand {
        position: relative;
        margin-right: auto;
    }
            
    .navbar-brand::after {
        content: "+442086255000";
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 24px;
        white-space: nowrap;
        font-weight: 600;
        color: #0a2c5e;
        font-size: 14px;
        background: #f8f9fa;
        padding: 4px 8px;
        border-radius: 4px;
    }
}

/* =========================================
   FIX MOBILE LANGUAGE DROPDOWN CENTERING
   ========================================= */
@media (max-width: 991px) {
    .header-top-right .dropdown-container {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto !important;
        left: 0 !important;
        right: 0 !important;
    }

    .dropdown-content {
        position: fixed !important;
        left: 50% !important;
        top: 40% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }
    
    .dropdown-container.active .dropdown-content {
        display: block !important;
    }
}

/* Small mobile devices */
@media (max-width: 768px) {
    .dropdown-content {
        width: 95vw !important;
        max-width: 370px !important;
    }
    
    .language-options-horizontal {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .currency-grid-six-columns {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
}

/* Very small mobile devices */
@media (max-width: 480px) {
    .dropdown-content {
        width: 98vw !important;
        max-width: 370px !important;
        padding: 15px !important;
    }
    
    .language-options-horizontal {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .currency-grid-six-columns {
        grid-template-columns: repeat(3, 2fr) !important;
    }
    
    .header-top-right {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* =========================================
   COMPLETE MOBILE SEARCH BUTTON SLIDER FIX
   ========================================= */
@media (max-width: 991px) {
    /* Hide scrollbar for Webkit browsers */
    .search-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

    .search-nav-wrapper {
        /* Create wrapper for offset */
        width: 100vw !important;
        margin-left: -15px !important;
        padding-left: 15px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .search-nav {
        /* Remove all positioning from inner container */
        position: static !important;
        left: 0 !important;
        width: auto !important;
        display: inline-flex !important;
        white-space: nowrap !important;
        padding: 10px 15px !important;
        margin: 0 !important;
    }
    
    .search-nav > * {
        flex: 0 0 auto !important;
        margin-right: 15px !important;
    }

    .search-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

    /* Force list items inline */
    .search-nav .nav-item {
        display: inline-block !important;
        float: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Style the buttons */
    .search-nav .nav-link {
        white-space: nowrap !important;
        padding: 12px 20px !important;
        border-radius: 10px 10px 0px 0px !important;
        background: none #f8f9fa !important;
        box-shadow: 0px 5px 10px 0px #6666;
        color: #495057 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: max-content !important;
        height: auto !important;
        line-height: 1.2 !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
    }
    
    /* Active state */
    .search-nav .nav-link.active {
        background: #0a2c5e !important;
        border-color: #0a2c5e !important;
        color: white !important;
        transform: none !important;
    }
    
    /* Hover states */
    .search-nav .nav-link:not(.active):hover {
        background: #e9ecef !important;
        border-color: #ced4da !important;
        transform: translateY(-2px) !important;
    }
    
    .search-nav .nav-link.active:hover {
        background: #083a7c !important;
        border-color: #083a7c !important;
    }
    
    /* Icons */
    .search-nav .nav-link i {
        font-size: 18px !important;
        margin: 0 !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Button text */
    .search-nav .nav-link span {
        display: inline !important;
        font-size: 14px !important;
    }

    .flight-options-bar .dropdown {
        flex: 1;
        min-width: 160px;
    }
    
    .flight-options-bar .option-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 10px 5px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        font-size: 14px;
    }
    
    /* Apply to all search engine tabs */
    .tab-content .flight-options-bar {
        display: flex !important;
        flex-direction: row !important;
    }
    
    /* 5. Tour Tabs Content Fix */
    .tour-area .filter-box {
        display: block !important;
    }
    
    .tour-area .filter-item {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .tour-item {
        margin-bottom: 30px;
    }
    
    .filter-controls {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
    }
    
    .filter-btns {
        display: inline-flex;
        gap: 10px;
    }
    
    /* 6. Dual Bar Mobile Responsive */
    .dual-banner-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .signup-banner-container,
    .contact-banner-container {
        flex-direction: column;
        height: auto !important;
    }
    
    .banner-image-container,
    .contact-image-side {
        width: 100% !important;
        height: 120px !important;
    }
    
    .banner-content-container,
    .contact-content-side {
        padding: 20px;
    }
    
    /* 7. Scan to Download Height Fix */
    .qr-code-container {
        height: auto !important;
        margin-top: 20px;
    }
    
    .qr-code-placeholder {
        width: 200px !important;
        height: 200px !important;
    }
    
    /* Additional Mobile Fixes */
    .hero-section {
        display: none !important;
    }
    
    .search-area {
        padding-top: 0px;
    }
    
    .passenger-search-container {
        flex-direction: column;
        gap: 0px;
    }
    
    .search-btn .theme-btn {
        height: 50px !important;
        margin-top: 0 !important;
    }
    
    .car-search-wrapper .col-lg-2 {
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    .date-picker-container {
        width: 95% !important;
        height: 90vh !important;
    }
    
    .calendar-container {
        flex-direction: column;
    }
}

/* Desktop - keep original */
@media (min-width: 992px) {
    .search-nav {
        width: auto !important;
        margin-left: 10px !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        padding-bottom: 0 !important;
    }
    
    .search-nav ul.nav-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 0px !important;
        margin-left: 30px; 
    }
}

/* =========================================
   MOBILE SEARCH BUTTON SLIDER END
   ========================================= */

@media (max-width: 768px) {
    .navbar-brand::after {
        display: none;
    }

    .flight-options-bar .dropdown {
        width: 100%;
    }
    
    .more-options-menu {
        min-width: 300px !important;
        left: -2% !important;
        transform: translateX(-50%) !important;
    }
    
    .flight-options-flex {
        flex-direction: column;
    }
    
    .flight-options-column {
        border-right: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .header-top-right {
        flex-direction: column;
        align-items: flex-start;
        height: 25px;
    }
    
    .header-top-right .dropdown-container,
    .header-top-right .account {
        width: 100%;
        justify-content: space-between;
        position: relative;
        left: 0px;
        top: 3px;
    }
    
    .header-top-right .account::before {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
}

/* =======================================================
   MOBILE RESPONSIVE FIXES (REQUESTED CHANGES)
   ======================================================= */
@media (max-width: 991px) {
    /* 1. Top Header: Show on mobile, specific items only */
    .header-top {
        display: block !important;
        background-color: #0a2c5e;
        padding: 8px 0;
    }

    .header-top-left {
        display: none !important;
    }

    .header-top-right {
        justify-content: space-evenly !important;
        padding: 0 20px;
        display: flex;
        width: 350px;
        align-items: center;
    }

    /* Top Header Icons Only */
    #language-currency-display span,
    .account a span {
        display: none;
    }

    .lang-currency-trigger i,
    .account a i {
        font-size: 17px;
        color: white;
        margin-left: 15px;
    }

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

    .lang-currency-trigger {
        color: white;
        display: flex;
        align-items: center;
    }

    /* 2. Phone Number in Menu */
    .main-navigation .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px !important;
        flex-direction: row;
    }

    .navbar-brand {
        margin-right: 0;
        flex-shrink: 0;
    }

    .mobile-menu-right {
        margin-left: 0;
    }

    .search-nav ul {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 5px;
        width: max-content;
    }

    .search-nav .nav-item {
        flex: 0 0 auto;
    }

    .search-nav::-webkit-scrollbar {
        display: none;
    }

    .custom-dropdown {
        width: 50% !important;
    }

    .option-trigger {
        width: 100%;
        justify-content: space-between;
        font-size: 12px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 6px;
    }

    .more-options-menu {
        min-width: 300px !important;
        width: 92vw;
        left: -3% !important;
    }

    .flight-options-flex {
        flex-direction: column;
    }

    /* 5. Fix Tour Content & General Search Layout */
    .custom-col-width {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 5px;
    }

    .passenger-search-container {
        flex-direction: column;
        width: 100%;
    }

    .passenger-search-container .passenger-box {
        width: 350px !important;
        margin-bottom: 15px;
    }

    .search-form .search-btn .theme-btn {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .hero-section {
        display: none !important;
    }

    .search-area {
        padding-top: 0px;
    }

    /* 6. Dual Banner (Image Top, Content Bottom) */
    .dual-banner-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .signup-banner-container,
    .contact-banner-container {
        flex-direction: column !important;
        height: 240px !important;
    }

    .banner-image-container,
    .contact-image-side {
        width: 100% !important;
        height: 180px !important;
    }

    .banner-content-container,
    .contact-content-side {
        width: 100% !important;
        padding: 20px;
    }

    .banner-form button {
        background: #004c9c;
        color: #fff;
        border: none;
        padding: 0 15px;
        border-radius: 0 8px 8px 0;
        font-weight: 600;
        cursor: pointer;
    }

    /* 7. Scan to Download (Reduced Height) */
    .equal-height-container {
        flex-direction: column;
    }

    .download-img-container,
    .download-content-container,
    .qr-code-container {
        height: auto !important;
        margin-bottom: 20px;
        padding: 30px 20px;
    }

    .qr-code-placeholder {
        width: 150px;
        height: 150px;
    }

    /* Car Search Fix */
    .car-search-wrapper .col-lg-2 {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .time-picker-integrated {
        margin-top: 0;
    }
    
    /* Banner button override */
    .banner-form button {
        background: #004c9c;
        color: #fff;
        border: none;
        padding: 0 5px;
        border-radius: 0 8px 8px 0;
        font-weight: 600;
        cursor: pointer;
    }

    .bundle-search-container-fh {
        display: flex;
        gap: 10px;
        height: 100%;
        margin: -12px;
        flex-direction: column;
    }
    
    /* MOBILE RESPONSIVE RULES */
    .header-top-right {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: 100%;
        gap: 15px;
        padding-right: 0px;
        margin-top: 0px;
    }
}

@media (max-width: 768px) {
    .flight-options-bar .option-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 10px 5px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        font-size: 14px;
    }
    
    .passenger-search-container .passenger-box {
        width: 100% !important;
        margin-bottom: 15px;
        position: relative;
    }
   
    .lang-text,
    .top-link span {
        display: none !important;
    }

    .top-link i {
        font-size: 18px;
    }

    .lang-currency-trigger {
        display: flex;
        align-items: center;
    }

    .header-top-left {
        display: none !important;
    }
}

/* =========================================
   PRECISE CLICKABLE INPUT TEXT BOX & CALENDAR ICON
   ========================================= */

.form-group,
.form-group-icon,
.search-form-date,
.search-form-journey,
.search-form-return {
    cursor: default !important;
}

.form-group-icon input[type="text"],
.form-group-icon input.date-picker {
    width: 100% !important;
    position: relative;
    z-index: 2;
}

.form-group-icon::before,
.form-group-icon::after {
    content: none !important;
    display: none !important;
}

.form-group-icon input {
    padding-left: 45px !important;
    padding-right: 15px !important;
}

.form-group-icon i {
    left: 15px !important;
}

/* Fix minus buttons */
.passenger-qty .minus-btn,
.passenger-qty .plus-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #f0f4f8 !important;
    border: 1px solid #d1d9e6 !important;
    cursor: pointer !important;
}

/* =========================================
   MOBILE RESPONSIVE FIX FOR FLIGHT OPTIONS
   ========================================= */
@media (max-width: 768px) {
    .flight-options-flex {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .flight-options-column {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .flight-options-left {
        padding-right: 10px !important;
        border-right: 1px solid #e2e8f0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .flight-options-right {
        padding-left: 10px !important;
    }

    .more-options-menu {
        min-width: 320px !important;
        width: 95vw !important;
        left: 2.5vw !important;
        transform: none !important;
    }

    .flight-options-header {
        flex-direction: row !important;
        gap: 20px !important;
        margin-bottom: 15px !important;
    }

    .checkbox-group {
        gap: 10px !important;
    }

    .checkbox-item {
        margin-bottom: 8px !important;
    }

    .clear-btn-1 {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .flight-options-flex {
        gap: 10px !important;
    }

    .flight-options-left,
    .flight-options-right {
        padding: 0 5px !important;
    }

    .more-options-menu {
        min-width: 280px !important;
        width: 90vw !important;
        left: 5vw !important;
        padding: 15px !important;
    }

    .flight-options-title {
        font-size: 13px !important;
    }
}

/* =========================================
   TRIP TYPE SECTION - MOBILE & DESKTOPS
   ========================================= */

/* Hide mobile trip type section on desktop */
.mobile-trip-type-section {
    display: none !important;
}

/* Show desktop trip type dropdown only on desktop */
@media (min-width: 769px) {
    .desktop-only {
        display: block !important;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-trip-type-section {
        display: block !important;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e2e8f0;
    }

    .more-options-menu {
        min-width: 320px !important;
        width: 95vw !important;
        max-width: 400px !important;
    }
}

/* Trip Type Options Styling (only visible on mobile) */
.trip-type-options {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.trip-type-option {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
}

.trip-type-option.active {
    background: #0a2c5e;
    border-color: #0a2c5e;
    color: white;
}

.trip-type-option:hover:not(.active) {
    background: #e9ecef;
    border-color: #ced4da;
}

.three-column-layout {
    display: flex;
    gap: 20px;
    width: 100%;
    min-height: 200px;
}

.options-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.column-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0a2c5e !important;
    margin: 0 0 px 0 !important;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
    flex-grow: 1;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.checkbox-item label {
    cursor: pointer;
    font-size: 13px;
    color: #333;
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
}

.clear-btn-1 {
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: auto;
    font-weight: 500;
}

.clear-btn-1:hover {
    background: #dc3545;
    color: white;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* Phone Number Text */
.call-info-box a span {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .three-column-layout {
        flex-direction: column;
        gap: 15px;
    }

    .options-column {
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 15px;
    }

    .options-column:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .more-options-menu {
        min-width: 300px !important;
        width: 90vw !important;
        max-width: 350px !important;
    }
}

/* ============================================================
   FIX: HIDE ROUND TRIP DROPDOWN IN FLIGHT+HOTEL ON MOBILE
   ============================================================ */
@media (max-width: 991px) {
    /* Target the Flight + Hotel Tab (#pills-3) specifically */
    #pills-3 .flight-options-bar .dropdown.trip-type-mobile-hide,
    #pills-3 .flight-options-bar .dropdown:nth-child(2) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
    }
}

.flight-options-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.more-flight-btn {
    white-space: nowrap;
}

/* ============================================================
   CLEAN RESET FOR FLIGHT OPTIONS & SEARCH FORM
   ============================================================ */

/* 1. Ensure the parent FORM stacks items Vertically (Top to Bottom) */
.search-form form {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* 2. Style the Options Bar to sit cleanly on TOP */
.flight-options-bar {
    max-width: 350px !important;
    width: 350px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 100 !important;
    margin-left: -10px;
}

/* 3. Style the Dropdown Buttons */
.flight-options-bar .dropdown, 
.flight-options-bar .custom-dropdown {
    width: auto !important;
    min-width: 170px !important;
}

.flight-options-bar .option-trigger {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    height: 48px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0a2c5e !important;
}

/* 4. Ensure Search Inputs sit cleanly BELOW */
.holiday-search-wrapper {
    width: 100% !important;
    display: block !important;
}

/* 5. HIDE TRIP TYPE ON MOBILE (Requirement) */
@media (max-width: 991px) {
    .trip-type-mobile-hide {
        display: none !important;
    }

    /* Allow remaining buttons to wrap on small screens */
    .flight-options-bar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .flight-options-bar .dropdown {
        flex: 1 1 45% !important;
    }
}

/* ============================================================
   3-COLUMN DROPDOWN STYLING
   ============================================================ */

/* 1. Make the dropdown menu wider to fit 3 columns */
.more-options-menu {
    min-width: 650px !important;
    padding: 20px !important;
}

/* 2. Grid Layout for 3 Columns */
.three-col-header, 
.three-col-flex {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20px;
}

.three-col-header .flight-options-title {
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 700;
    color: #0a2c5e;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* 3. Borders between columns */
.col-border-right {
    border-right: 1px solid #e0e0e0;
    padding-right: 15px;
}

/* 4. Radio Button Styling (Consistent with Checkboxes) */
.checkbox-item input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: #0a2c5e;
}

/* 5. Mobile Responsiveness */
@media (max-width: 768px) {
    .more-options-menu {
        min-width: 300px !important;
        width: 95vw !important;
    }

    /* Stack columns vertically on mobile */
    .three-col-header, 
    .three-col-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    .col-border-right {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        padding-right: 0;
    }

    .three-col-header {
        display: none !important;
    }

    /* Add titles back for mobile context */
    .flight-options-column::before {
        content: attr(data-mobile-title);
        font-weight: bold;
        color: #0a2c5e;
        display: block;
        margin-bottom: 10px;
    }
}

/* ============================================================
   FINAL CSS FIX: 3-COLUMN DROPDOWN + ALIGNMENT
   ============================================================ */

/* DROPDOWN MENU STYLING (3 Columns) */
.more-options-menu {
    min-width: 600px !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* Grid Layout for Desktop */
.three-col-flex {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20px;
}

/* Header Styling (Now inside columns) */
.flight-options-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0a2c5e !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e9ecef !important;
    display: block !important;
}

/* Borders between columns */
.col-border-right {
    border-right: 1px solid #e0e0e0;
    padding-right: 20px;
}

/* Radio & Checkbox Styling */
.checkbox-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.checkbox-item input {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-item label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.passenger-box {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
}

.search-btn .theme-btn {
    height: 90px !important; /* Matches input height */
    padding: 0 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 120px;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES (Max-Width 991px)
   ============================================================ */
@media (max-width: 991px) {
    /* 1. Adjust Top Bar Buttons */
    .flight-options-bar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .search-btn .theme-btn {
        height: 50px !important; /* Matches input height */
        padding: 0 30px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        width: 120px;
    }
    
    .flight-options-bar .dropdown {
        flex: 1 1 45% !important; /* Share width */
        min-width: 140px !important;
    }

    /* 2. Fix Dropdown Menu Sizing */
    .more-options-menu {
        min-width: 300px !important;
        width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* Center it */
        padding: 20px !important;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* 3. Stack the 3 Columns Vertically */
    .three-col-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .flight-options-column {
        width: 100% !important;
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
    }

    /* Move borders to bottom for vertical stack */
    .col-border-right {
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        padding-right: 0 !important;
    }

    /* 4. Fix Search Button Stacking */
    .passenger-search-container {
        flex-direction: column !important;
    }

    .search-btn .theme-btn {
        width: 100% !important;
    }
}

.form-group-icon input.date-picker {
    cursor: pointer !important;
    background-color: white !important;
}

.day.selected {
    background-color: #6db8eb !important;
    color: white !important;
    font-weight: bold;
}

.day.in-range {
    background-color: #e1f0ff !important;
    color: #0a2c5e !important;
}

.day.other-month {
    color: #a0aec0 !important;
    cursor: default !important;
}

/* =========================================
   CLEAN MOBILE FIX ONLY
   ========================================= */

/* Mobile Responsive */
@media (max-width: 991px) {
    /* Keep all text visible in header-top-right */
    .header-top-right span,
    .account-text,
    #header-lang-text,
    #header-curr-text {
        display: inline !important;
        visibility: visible !important;
        font-size: 14px !important;
    }

    /* Make header-top-right items fit */
    .header-top-right {
        gap: 15px !important;
    }

    .account-links {
        gap: 15px !important;
    }

    .account-links a {
        font-size: 14px !important;
        gap: 8px !important;
    }

    .account-links i {
        font-size: 16px !important;
    }
}

/* Very small screens - adjust text */
@media (max-width: 480px) {
    .header-top-right {
        gap: 10px !important;
    }

    #header-lang-text,
    #header-curr-text {
        font-size: 12px !important;
    }
}

/* =========================================
   CALENDAR CLICKABILITY FIX
   ========================================= */

/* Ensure date inputs are properly styled */
.form-group-icon input.date-picker[readonly] {
    cursor: pointer !important;
    background-color: white !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Hover effect for date inputs */
.form-group-icon input.date-picker[readonly]:hover {
    border-color: #4da8ff !important;
    background-color: #f8fbff !important;
}

/* Remove focus outline but keep accessibility */
.form-group-icon input.date-picker[readonly]:focus {
    outline: 2px solid #4da8ff !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Calendar icon styling */
.form-group-icon i.fal.fa-calendar-days {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Date picker overlay fixes */
.date-picker-overlay {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    align-items: center !important;
    justify-content: center !important;
}

.date-picker-container {
    z-index: 100 !important;
    position: relative !important;
}

/* Calendar day clickability */
.day:not(.disabled):not(.other-month) {
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.day:not(.disabled):not(.other-month):hover {
    background-color: #e1f0ff !important;
    transform: scale(1.05) !important;
}

/* FIXED RTL STYLES - Only apply direction/text-align, not positioning */
body.rtl {
    direction: rtl;
    text-align: right;
}

/* FIX: Only apply RTL to specific containers, not everything */
body.rtl .container,
body.rtl .header-top,
body.rtl .main-navigation,
body.rtl .search-area,
body.rtl .hero-content,
body.rtl .footer-area {
    direction: rtl;
}

/* FIX: Reset positioning for containers */
body.rtl .container {
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

/* FIX: Reset body positioning */
body.rtl {
    position: static !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* FIX: Reset HTML element */
html.rtl,
html[dir="rtl"] {
    direction: rtl;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* FIX: Grid system for RTL */
body.rtl .row {
    margin-right: -15px !important;
    margin-left: -15px !important;
    direction: rtl;
}

body.rtl [class*="col-"] {
    float: right !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    position: relative !important;
    min-height: 1px !important;
}

/* FIX: Navigation dropdowns */
body.rtl .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    text-align: right;
}

/* FIX: Search form icons */
body.rtl .form-group-icon i {
    left: auto !important;
    right: 15px !important;
}

body.rtl .form-group-icon input {
    padding-left: 15px !important;
    padding-right: 45px !important;
}

/* FIX: Keep carousels LTR */
body.rtl .owl-carousel,
body.rtl .hero-slider,
body.rtl .partner-slider,
body.rtl .hotel-slider,
body.rtl .car-slider,
body.rtl .testimonial-slider {
    direction: ltr !important;
}

/* FIX: Don't override all elements */
body.rtl div,
body.rtl section,
body.rtl article,
body.rtl aside,
body.rtl details,
body.rtl figcaption,
body.rtl figure,
body.rtl footer,
body.rtl header,
body.rtl hgroup,
body.rtl main,
body.rtl menu,
body.rtl nav {
    /* Add this instead: */
    position: static !important;
    left: auto !important;
    right: auto !important;
}

/* FIX: Make sure content stays centered */
body.rtl .feature-area,
body.rtl .flight-area,
body.rtl .hotel-area,
body.rtl .tour-area,
body.rtl .car-area,
body.rtl .testimonial-area,
body.rtl .download-area,
body.rtl .blog-area,
body.rtl .faq-section {
    direction: rtl;
    text-align: right;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FIX: Footer positioning */
body.rtl .footer-area {
    direction: rtl;
    text-align: right;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* EMERGENCY FIX: Reset any element that might be shifted */
body.rtl *[style*="left:"],
body.rtl *[style*="right:"],
body.rtl *[style*="transform:"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* FIX: Button icons for RTL */
body.rtl .theme-btn i,
body.rtl .flight-text-btn i,
body.rtl .hotel-text-btn i,
body.rtl .car-text-btn i,
body.rtl .tour-text-btn i {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* =============================================
   FIX FOR TOUR CARDS IN RTL LAYOUT END
   ============================================= */

/* =========================================
   MOBILE POPUP OVERLAY OPTIMIZATION
   ========================================= */
@media (max-width: 768px) {
    /* Make popup smaller for mobile */
    #booking-popup.popup {
        width: 80% !important;
        height: 60% !important;
        max-height: 75vh !important;
        padding: 25px 20px !important;
        border-radius: 12px !important;
        transform: translateY(0) !important;
        position: relative;
    }

    /* Position popup below header */
    #popup-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 70px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(3px) !important;
    }

    /* Adjust popup content for mobile */
    .popup-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }

    .popup-header img.agent {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto !important;
    }

    .popup-header-content h1 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    .popup-header-content p {
        font-size: 14px !important;
        margin-top: 5px !important;
    }

    .popup-body {
        max-height: 40vh !important;
        overflow-y: auto !important;
        padding: 10px 0 !important;
    }

    .features li {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .features .check {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        margin-left: 5px !important;
        margin-top: 0 !important;
    }

    /* Phone button adjustments */
    .phone-btn {
        font-size: 20px !important;
        padding: 10px 15px !important;
        gap: 10px !important;
    }

    .phone-btn .icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 18px !important;
    }

    .brand-logo {
        width: 150px !important;
        height: 60px !important;
        margin-bottom: 10px !important;
    }
}

.close-btn:hover {
    background-color: #f5f5f5;
    color: #333;
}


.close-btn {
    top: -3% !important;
    right: 15px !important;
    font-size: 24px !important;
    color: grey;
    font-weight: 600;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    z-index: 101 !important;
    align-self: flex-end;
    margin-top: 40px;
    border: none;
    position: absolute;
}

.close-btn-dp {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff; /* use #333 if header is light */
    font-size: 28px;
    font-weight: 300;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    line-height: 1; /* removes extra space around × */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1001;
    transition: background 0.2s ease;
}

.close-btn-dp:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* If your header is light, use this instead */
.close-btn-dp.light {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.close-btn-dp.light:hover {
    background: rgba(0, 0, 0, 0.12);
}
 


.trip-selector {
    display: flex;
    gap: 20px;
    position: relative;
    right: 10px;
}

@media (max-width: 678px) {
    .trip-selector {
        display: flex;
        gap: 10px;
        position: relative;
        right: 0px;
    }
}



/* =========================================
   FIX: CALENDAR ICON POSITIONING IN RTL/MOBILE
   ========================================= */

/* Ensure calendar icons stay in place on mobile */
@media (max-width: 768px) {
    .form-group-icon i.fal.fa-calendar-days {
        left: 20px !important;
        right: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    /* Input padding should be consistent */
    .form-group-icon input.date-picker {
        padding-left: 45px !important;
        padding-right: 15px !important;
        text-align: left !important;
    }
}

/* FIX: OVERRIDE RTL STYLES FOR CALENDAR ICONS SPECIFICALLY */
body.rtl .form-group-icon i.fal.fa-calendar-days,
body[dir="rtl"] .form-group-icon i.fal.fa-calendar-days,
.language-ar .form-group-icon i.fal.fa-calendar-days,
.language-fa .form-group-icon i.fal.fa-calendar-days,
.language-ku .form-group-icon i.fal.fa-calendar-days {
    left: 15px !important;
    right: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fix input alignment in RTL - keep icons on left, text on right */
body.rtl .form-group-icon input.date-picker,
body[dir="rtl"] .form-group-icon input.date-picker,
.language-ar .form-group-icon input.date-picker,
.language-fa .form-group-icon input.date-picker,
.language-ku .form-group-icon input.date-picker {
    padding-left: 45px !important;
    padding-right: 15px !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Fix location icons (plane, location dot) */
body.rtl .form-group-icon i.fal.fa-location-dot,
body.rtl .form-group-icon i.fal.fa-earth-americas,
body.rtl .form-group-icon i.far.fa-plane-departure {
    left: 15px !important;
    right: auto !important;
}

/* Fix user icon in passenger dropdown */
body.rtl .form-group-icon i.fal.fa-user-plus {
    left: auto !important;
    right: 15px !important;
}

/* Improve touch target size */
.form-group-icon i.fal.fa-calendar-days {
    min-width: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    top: 10px;
}

/* Make date inputs more touch-friendly on mobile */
input.date-picker[readonly] {
    cursor: pointer !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Prevent zoom on focus for iOS */
input.date-picker[readonly]:focus {
    font-size: 16px !important;
}

/* Hide keyboard on mobile */
@media (max-width: 768px) {
    input.date-picker[readonly] {
        caret-color: transparent !important;
    }
    
    .date-picker-overlay {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* =========================================
   MOBILE-SPECIFIC FIXES FOR CALENDAR LAYOUT
   ========================================= */
@media (max-width: 768px) {
    .search-form .form-group-icon i {
        left: 15px !important;
        right: auto !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
    
    .search-form-date .form-group-icon i.fal.fa-calendar-days {
        left: 15px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .search-form-date .form-group-icon {
        position: relative !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .search-form-swap {
        position: absolute !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        top: 45px !important;
        z-index: 10 !important;
    }
}

/* =========================================
   EMERGENCY OVERRIDE FOR CALENDAR ICON POSITION
   ========================================= */

/* --- 1. The Container --- */
#multi-city-rows-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0px !important;
    position: relative;
    top: 0px;
}

/* --- 2. The Rows --- */
.multi-city-row {
    margin-bottom: 12px !important;
    width: 10%;
    position: relative;
    margin-left: 0px !important;
}

#multi-city-rows-wrapper > .multi-city-row:last-child {
    margin-bottom: 0 !important;
}

/* --- 3. Blue Outline Fix --- */
.form-group-icon input:focus,
.form-control:focus,
.date-picker:focus {
    outline: 2px solid #4da8ff !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* --- 4. Remove Button Styling --- */
.remove-flight-btn {
    background: transparent;
    border: none;
    color: #dc3545;
    font-size: 20px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 28px;
}

/* Responsive calendar arrows */
@media (max-width: 991px) {
    html[dir="ltr"] .search-header .calendar-prev-icon {
        transform: rotate(0deg);
    }
    
    html[dir="ltr"] .search-header .calendar-next-icon {
        transform: rotate(0deg);
    }
    
    html[dir="rtl"] .search-header .calendar-prev-icon {
        transform: rotate(180deg);
    }
    
    html[dir="rtl"] .search-header .calendar-next-icon {
        transform: rotate(180deg);
    }
    
    html[dir="rtl"] .search-header .calendar-arrow-icon {
        transform: scaleX(-1);
    }
}

/* --- Desktop Specific Sizes --- */
@media (min-width: 992px) {
    .custom-passenger-width {
        width: 500px;
        min-width: 400px;
    }
    
    .custom-search-width {
        width: 150px;
        min-width: 150px;
    }
}

/* --- Mobile/Tablet Responsive --- */
@media (max-width: 991px) {
    .custom-passenger-width,
    .custom-search-width {
        width: 100% !important;
        margin-top: 15px;
    }
}

.style.cssText {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #f0f7ff;
    color: #0a2c5e;
    text-decoration: none;
    border: 1px solid #cde1ff;
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    white-space: nowrap;
}

/* =========================================
   1. SHARED STYLES (Base Layout)
   ========================================= */
.form-group-icon {
    position: relative;
}

/* =========================================
   2. LTR STYLES (English)
   ========================================= */
html[dir="ltr"] .form-group-icon i {
    left: 15px;  /* Icon stays on Left */
    right: auto;
}

html[dir="ltr"] .form-group-icon .form-control {
    padding-left: 45px;  /* Text starts after icon */
    padding-right: 15px;
    text-align: left;
}

html[dir="ltr"] .dropdown-menu {
    text-align: left;
}

/* =========================================
   3. RTL STYLES (Arabic)
   ========================================= */
html[dir="rtl"] .row {
    flex-direction: row; /* Flexbox handles the column flipping automatically */
}

/* Flip the Icons inside inputs */
html[dir="rtl"] .form-group-icon i {
    right: 15px; /* Icon moves to Right */
    left: auto;
}

/* Flip the Text Padding inside inputs */
html[dir="rtl"] .form-group-icon .form-control {
    padding-right: 45px; /* Text starts after icon (from right) */
    padding-left: 15px;
    text-align: right;
}

/* Align Dropdowns (Passenger Box) */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* Fix Passenger Box alignment in RTL */
html[dir="rtl"] .passenger-info {
    text-align: right;
}

/* Fix Search Button Icon (Arrow) */
html[dir="rtl"] .theme-btn i {
    transform: rotate(180deg); /* Flips the arrow to point left */
    margin-right: 5px;
    margin-left: 0;
}

/* --- FINAL FIX: LANGUAGE ICON & HEADER POSITION --- */

/* 1. Ensure the Button Design matches English exactly in all languages */
.dropdown-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Space between flag and text */
    height: 32px !important; /* Fixed Height */
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
    background: transparent !important;
    min-width: 110px !important; /* Enforce width */
}

#header-flag-img {
    width: 20px !important;
    height: 15px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    margin: 0 !important; /* Remove specific margins, rely on gap */
}

/* 2. Header Positioning Logic (LTR vs RTL) */

/* LTR (English) - Default */
.header-top {
    display: flex;
    justify-content: space-between;
}

/* RTL (Arabic/Kurdish/Farsi) - Mirror Everything */
body.rtl .header-top,
html[dir="rtl"] .header-top {
    flex-direction: row-reverse !important; /* Swaps Left and Right sections */
}

/* Ensure content inside right section flips correctly */
body.rtl .header-top-right,
html[dir="rtl"] .header-top-right {
    flex-direction: row !important; /* Keep internal items aligned properly */
    justify-content: flex-end !important; /* Ensure they stick to the 'Start' */
}

/* Fix the specific Language Button internal alignment in RTL */
body.rtl .dropdown-btn,
html[dir="rtl"] .dropdown-btn {
    flex-direction: row !important; /* Keep Flag-Text order or use row-reverse to swap */
}

/* --- LANGUAGE ICON & HEADER POSITION FIX END --- */

/* For <html dir="ltr"> */
html[dir="ltr"] .mobile-header-phone {
    right: 150px !important;
    left: auto !important;
    margin-left: auto !important;
    margin-right: 15px !important;
}

/* For <html dir="rtl"> or <body class="rtl"> */
html[dir="rtl"] .mobile-header-phone,
body.rtl .mobile-header-phone {
    left: 60px !important;
    right: auto !important;
    margin-right: auto !important;
    margin-left: 15px !important;
}

/* Optional: Flip the phone icon inside if needed */
html[dir="rtl"] .mobile-header-phone i {
    transform: scaleX(-1) !important; 
}

/* =========================================
   DROPDOWN SLIDE-IN ANIMATION (SAFE METHOD)
   ========================================= */

/* 1. Hide items initially when menu opens */
.dropdown-menu.show .dropdown-item {
    opacity: 0;
    animation: slideContentIn 0.3s forwards; /* Runs the animation */
}

/* 2. Stagger the items slightly for a cool effect */
.dropdown-menu.show .dropdown-item:nth-child(1) { animation-delay: 0.05s; }
.dropdown-menu.show .dropdown-item:nth-child(2) { animation-delay: 0.1s; }
.dropdown-menu.show .dropdown-item:nth-child(3) { animation-delay: 0.15s; }
.dropdown-menu.show .dropdown-item:nth-child(4) { animation-delay: 0.2s; }
.dropdown-menu.show .dropdown-item:nth-child(5) { animation-delay: 0.25s; }
.dropdown-menu.show .dropdown-item:nth-child(6) { animation-delay: 0.3s; }

/* 3. LTR (English): Slide from Right */
html[dir="ltr"] .dropdown-menu.show .dropdown-item {
    transform: translateX(20px); /* Start 20px to the right */
}

/* 4. RTL (Arabic): Slide from Left */
html[dir="rtl"] .dropdown-menu.show .dropdown-item {
    transform: translateX(-20px); /* Start 20px to the left */
}

/* 5. The Animation Keyframes */
@keyframes slideContentIn {
    from {
        opacity: 0;
        /* Transform is defined in rules 3 & 4 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Move to center */
    }
}

/* =========================================
   MOBILE HEADER LAYOUT FIX (FLEXBOX) menu slider
   ========================================= */

@media (max-width: 991px) {
    /* 1. Force the Header Container to be a Row */
    .main-navigation .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Spreads items out */
        position: relative !important;
    }

    /* 2. Logo adjustments */
    .navbar-brand {
        margin-right: 0 !important;
        padding: 0 !important;
        flex-shrink: 0; /* Prevents logo from shrinking */
    }

    /* 3. Phone Button (No Absolute Positioning!) */
    .mobile-header-phone {
        position: relative !important; /* Stop floating/dropping */
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;    
        display: flex !important;
        align-items: center;
        margin: 0 10px !important; /* Spacing between Logo and Menu */
        background: #f0f7ff;
        color: #0a2c5e;
        border: 1px solid #cde1ff;
        border-radius: 20px;
        padding: 6px 12px;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        white-space: nowrap;
    }

    /* 4. Hamburger Menu (Toggle) */
    .mobile-menu-right {
        margin-left: 0 !important;
    }
    
    /* === RTL SPECIFIC ADJUSTMENTS === */
    
    /* In Arabic, we might need to swap margins slightly */
    html[dir="rtl"] .mobile-header-phone {
        margin: 0 10px !important;
    }
    
    html[dir="rtl"] .mobile-header-phone i {
        margin-left: 8px; /* Gap between icon and text in Arabic */
        margin-right: 0;
        transform: scaleX(-1); /* Flip icon */
    }
    
    /* In English */
    html[dir="ltr"] .mobile-header-phone i {
        margin-right: 8px;
        margin-left: 0;
    }
}

/* =========================================
   2. MENU SLIDE IN (From Side)
   ========================================= */

/* LTR (English): Slide from Right to Left */
html[dir="ltr"] .dropdown-menu.show {
    animation: SlideInRight 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    transform-origin: top right !important;
    display: block !important;
}

/* RTL (Arabic): Slide from Left to Right */
html[dir="rtl"] .dropdown-menu.show {
    animation: SlideInLeft 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    transform-origin: top left !important;
    display: block !important;
}

/* --- Keyframes --- */

@keyframes SlideInRight {
    0% {
        opacity: 0;
        transform: translateX(30px); /* Start 30px to the Right */
    }
    100% {
        opacity: 1;
        transform: translateX(0);    /* End at Center */
    }
}

@keyframes SlideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the Left */
    }
    100% {
        opacity: 1;
        transform: translateX(0);     /* End at Center */
    }
}

/* =========================================
   1. FIXED MOBILE PHONE (Visible & Centered)
   ========================================= */
.mobile-header-phone-fixed {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Absolute Position: Sits on top of everything */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Locks vertical center */
    z-index: 1002 !important; /* Above everything */
    
    /* Design */
    background: #f0f7ff !important;
    color: #0a2c5e !important;
    border: 1px solid #cde1ff !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    height: 34px !important; /* Fixed height prevents jumping */
}

/* Ensure the container allows absolute positioning */
.main-navigation .container {
    position: relative !important;
}

/* --- LTR (English): Right Side --- */
html[dir="ltr"] .mobile-header-phone-fixed {
    right: 60px !important; /* Next to hamburger menu */
    left: auto !important;
}

/* --- RTL (Arabic): Left Side --- */
html[dir="rtl"] .mobile-header-phone-fixed {
    left: 60px !important; /* Next to hamburger menu */
    right: auto !important;
}

/* Flip Icon in RTL */
html[dir="rtl"] .mobile-header-phone-fixed i {
    transform: scaleX(-1) rotate(90deg) !important;
    margin-left: 5px !important;
}

/* Mobile Screens Adjustment */
@media (max-width: 480px) {
    .mobile-header-phone-fixed span {
        display: none !important; /* Hide number on tiny screens */
    }
    
    .mobile-header-phone-fixed {
        padding: 8px !important; /* Square button */
        width: 34px !important;
    }
}

@media (max-width: 480px) {
    .element.style {
        width: 500px !important;
        position: relative;
        top: -100px;
    }
}

/* =========================================
   1. FIXED MOBILE PHONE (Visible & Centered)
   ========================================= */
.mobile-header-phone-fixed {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Absolute Position: Sits on top of everything */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Locks vertical center */
    z-index: 1002 !important; /* Above everything */
    
    /* Design */
    background: #f0f7ff !important;
    color: #0a2c5e !important;
    border: 1px solid #cde1ff !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    height: 34px !important; /* Fixed height prevents jumping */
}

/* Ensure the container allows absolute positioning */
.main-navigation .container {
    position: relative !important;
}

/* --- LTR (English): Right Side --- */
html[dir="ltr"] .mobile-header-phone-fixed {
    right: 60px !important; /* Next to hamburger menu */
    left: auto !important;
}

/* --- RTL (Arabic): Left Side --- */
html[dir="rtl"] .mobile-header-phone-fixed {
    left: 60px !important; /* Next to hamburger menu */
    right: auto !important;
}

/* Flip Icon in RTL */
html[dir="rtl"] .mobile-header-phone-fixed i {
    transform: scaleX(-1) rotate(90deg) !important;
    margin-left: 5px !important;
}

/* Mobile Screens Adjustment */
@media (max-width: 480px) {
    .mobile-header-phone-fixed span {
        display: none !important; /* Hide number on tiny screens */
    }
    
    .mobile-header-phone-fixed {
        padding: 8px !important; /* Square button */
        width: 34px !important;
    }
}

@media (max-width: 480px) {
    .element.style {
        width: 500px !important;
        position: relative;
        top: -100px;
    }
}

@media (max-width: 991px) {
    .element.style {
        width: 500px !important;
        position: relative;
        top: -100px;
    }
}

@media (max-width: 992px) {
    .element.style {
        width: 500px !important;
        position: relative;
        top: -100px;
    }
}

@media (max-width: 768px) {
    .element.style {
        width: 500px !important;
        position: relative;
        top: -100px;
    }
}

@media (max-width: 992px) {
    .element.style {
        background: transparent;
        border: 1px solid rgb(205, 233, 255);
        color: rgb(10, 44, 94);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90px;
        font-weight: 600;
        position: relative;
        bottom: -70px;
    }
}

/* 2. Fix "Missing Numbers" in Calendar */
/* Your numbers are likely white-on-white. This forces them black. */
.calendar .day {
    color: #333 !important; 
    font-weight: 600;
    cursor: pointer;
}

/* Fix "Other Month" numbers to be grey */
.calendar .day.other-month {
    color: #ccc !important;
}

/* 3. Fix Language Dropdown Click */
/* Ensures the dropdown container is positioned to accept clicks */
#language-currency-dropdown {
    position: relative;
    z-index: 10001; /* Higher than other header elements */
}

/* Ensure the button itself catches the click event */
#language-currency-display {
    position: relative;
    z-index: 10002;
}

/* Ensure the dropdown menu appears correctly when active */
.dropdown-container.active .dropdown-content {
    display: block !important;
}

/* --- STEP 1: FORCE ALL NUMBERS TO SHOW ON DESKTOP --- */
@media (min-width: 992px) {
    /* This overrides any script trying to hide your footer/popups */
    a[href^="tel:"] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--theme-color, #0f0f0f17); /* Fallback blue */
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 99999;
}

/* Wrapper to stack the content */
.preloader-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    font-family: sans-serif;
}

.preloader-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px; 
    width: 100%;
}

/* --- THE LOADER (Size 160px) --- */
.loader {
    position: relative;
    width: 160px; 
    height: 160px;
    flex-shrink: 0;
}

.loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
}

.loader span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--color-white, #ffffff);
    border-radius: 50%;
    transform: scale(0);
    animation: loader 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
}

/* --- THE LOGO --- */
.loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 140px; 
    min-height: 120px;
    z-index: 5;
    object-fit: contain;
}

/* --- THE PLANE (FIXED POSITION) --- */
.loader-plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: loader-rotating 2s linear infinite;
    animation-delay: -4s;
    z-index: 10;
}

/* --- THE PLANE (Fixed Direction & Position) --- */
.loader-plane::before {
    content: '\f072';
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    color: var(--color-white, #ffffff);
    font-size: 38px;
    
    /* 1. Position at the Top-Left Corner (Matches the dots exactly) */
    top: 0;
    left: 0;
    
    /* 
       2. Transform Logic:
       - translate(-50%, -50%): Centers the icon exactly on the line.
       - rotate(45deg): Points the nose forward (Clockwise direction).
    */
    transform: translate(-30%, -30%) rotate(-45deg);
}

/* --- ANIMATIONS (Unchanged) --- */
@keyframes loader {
    0% { transform: scale(0); }
    10% { transform: scale(1.2); }
    80%, 100% { transform: scale(0); }
}

@keyframes loader-rotating {
    0% { transform: rotate(10deg); }
    100% { transform: rotate(360deg); }
}

/* --- TEXT INFO STYLES --- */
.preload-info {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-left { text-align: right; }
.info-right { text-align: left; }

.airport-name { font-size: 16px; opacity: 0.9; margin-bottom: 5px; }

.flight-date {
    font-size: 16px; 
    font-weight: 600;
    background: rgba(15, 15, 15, 0.048);
    padding: 4px 10px; 
    border-radius: 4px;
    display: inline-block;
}

.flight-date-loader {
    font-size: 18px; 
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px; 
    border-radius: 4px;
    display: inline-block;
}

.preload-text {
    margin-top: 50px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    text-align: center;
    animation: pulseText 1.5s infinite ease-in-out;
}



@keyframes pulseText {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@media (max-width: 768px) {
    .preloader-row {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .loader {
        position: relative;
        width: 140px; 
        height: 140px;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .loader-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 70px; 
        max-height: 60px;
        z-index: 5;
        object-fit: contain;
    }

    .info-left, .info-right {
        text-align: center;
    }
}

/* =========================================
   ENSURE LANGUAGE DROPDOWN IS ALWAYS CLICKABLE
   ========================================= */

/* Language dropdown trigger should always be interactive */
#language-currency-display,
#language-currency-display *,
.dropdown-container,
.dropdown-container * {
    pointer-events: onclick !important;
    touch-action: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
}

/* Language dropdown specific fixes */
#language-currency-display {
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

#language-currency-display:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* Dropdown content should be fully interactive */
.dropdown-content,
.dropdown-content * {
    touch-action: auto !important;
}

/* Language and currency options should be clickable */
.language-option,
.currency-item {
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(10, 44, 94, 0.1) !important;
}

.language-option:hover,
.currency-item:hover {
    background-color: #f0f7ff !important;
}

/* Apply button should be clickable */
#apply-selections {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: auto !important;
}

#apply-selections:hover {
    background-color: #083a7c !important;
    transform: translateY(-1px) !important;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
    #language-currency-display {
        min-height: 20px !important; /* Minimum touch target size */
        min-width: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dropdown-content {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

/* Styling the cross icon for Multi-City */
/* Multi-City Delete Button CSS */
.remove-flight-btn {
    /* Layout & Size */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    
    /* Colors & Borders */
    background: rgb(205, 233, 255) !important;
    border: 1px solid rgba(67, 172, 252, 1) !important;
    color: #dc3545 !important;
    border-radius: 10px !important;
    
    /* Spacing & Positioning */
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    
    /* Effects */
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.remove-flight-btn:hover {
    background: rgb(185, 220, 255) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

.remove-flight-btn:active {
    transform: scale(0.95) !important;
}

.remove-flight-btn i {
    font-size: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1 !important;
}

/* Ensure proper layout of columns */
.multi-city-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
}

/* Ensure inputs in Multi-City don't wrap weirdly */
.multi-city-row .form-group {
    margin-bottom: 0;
}

/* NEW CSS for the Image Ribbon with Text */
.image-ribbon-container {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the ribbon visually on the top edge */
    width: 220px; /* Adjust to fit your ribbon image width */
    height: 56px; /* Adjust to fit your ribbon image height */
    z-index: 20; /* Ensures it's on top */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allows clicks to pass through to elements behind the image */
}

.image-ribbon {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the image fits without distortion */
    pointer-events: none; /* Critical for clicking elements behind it */
}

.ribbon-text {
    position: absolute;
    color: white; /* Text color */
    font-size: 16px; /* Adjust font size as needed */
    font-weight: bold;
    text-align: center;
    line-height: 1; /* Ensures text is centered vertically within its own space */
    pointer-events: none; /* Critical for clicking elements behind it */
    white-space: nowrap; /* Prevent text from wrapping */
}

.flight-item-card {
    position: relative; /* This is crucial for absolute positioning to work */
}

.image-ribbon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4)) 
            drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3))
            drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2));
}

.image-ribbon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.25));
    & + .ribbon-text {
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    }
}

/* --- General Ribbon Styles --- */
.flight-item {
    position: relative;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 0 15px 5px rgba(85, 85, 85, 0.123);
    padding: 15px;
    border-radius: 10px;
}

.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 10;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 8px 0;
    background-color: #ff5e14;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    right: -56px;
    top: 38px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    
    /* Create folded ends with clip-path */
    clip-path: polygon(
        20px 0%, 
        calc(100% - 20px) 0%, 
        100% 50%, 
        calc(100% - 20px) 100%, 
        20px 100%, 
        0% 50%
    );
}

/* Add folded ends to create wrapped around effect */
.ribbon span::before,
.ribbon span::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: -1;
}

.ribbon span::before {
    left: 0;
    border-width: 8px 8px 0 0;
    border-color: #cc3333 transparent transparent transparent;
}

.ribbon span::after {
    right: 0;
    border-width: 8px 0 0 8px;
    border-color: #cc3333 transparent transparent transparent;
}

/* Update colors for gradient method */
#ribbon-red span {
    background: 
        linear-gradient(135deg, transparent 15px, #e74c3c 15px),
        linear-gradient(-135deg, transparent 15px, #e74c3c 15px);
    background-size: 50% 100%;
    background-position: left, right;
    background-repeat: no-repeat;
}

#ribbon-blue span {
    background: 
        linear-gradient(135deg, transparent 15px, #3498db 15px),
        linear-gradient(-135deg, transparent 15px, #3498db 15px);
    background-size: 50% 100%;
    background-position: left, right;
    background-repeat: no-repeat;
}

#ribbon-green span {
    background: 
        linear-gradient(135deg, transparent 15px, #2ecc71 15px),
        linear-gradient(-135deg, transparent 15px, #2ecc71 15px);
    background-size: 50% 100%;
    background-position: left, right;
    background-repeat: no-repeat;
}

/* Popup Styles */
body {
    background: #f3f4f6;
}

#popup-overlay {
    display: none;
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 15px;
}

/* Equal Height Container */
.equal-height-container {
    display: flex;
    align-items: stretch;
}

.equal-height-container > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* free translation css start */
#translation-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    backdrop-filter: blur(5px);
}

.translation-loading {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 2px solid #0a2c5e;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0a2c5e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.translation-loading span {
    color: #0a2c5e;
    font-weight: 600;
    font-size: 16px;
}

.translation-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    z-index: 10000;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    font-size: 14px;
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.no-translate {
    translate: none !important;
}

/* RTL support enhancements */
body[style*="direction: rtl"] .header-top-right {
    flex-direction: row-reverse;
}

body[style*="direction: rtl"] .navbar-nav {
    flex-direction: row;
    padding-left: 100px;
    padding-right: 100px;
}




/* flight-inner css */
/* flight deals css */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}

.section-background-grey {
    background-color: #fafafb;
    padding: 40px 0;
}



.container {
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}



.section-header-2{
    background-color: #035c85;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 30px 0 20px;
    display: flex;
    align-items: center;
}

.section-header-2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #d3d3d3;
    margin-bottom: 10px;
}

.section-header-1 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #e6e6e6 !important;
    margin-bottom: 10px;
}

.sub-header {
    text-align: center;
    font-size: 22px;
    color: #666;
    margin-bottom: 40px;
}

.flex-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 40px;
}

.section-header-inner {
    background-color: #0056b3;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 30px 0 20px;
    text-align: center;
    justify-content: space-between;
    font-size: 28px;
}

.flight-row-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 100%;
}

.flight-item-card {
    flex: 1 1 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border-bottom: 2px solid #052f6d;
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 500px;
}

.flight-details {
    margin-bottom: 10px;
}

.flight-details img.airline-logo {
    width: 60px;
    height: 46px;
    margin-right: 15px; /* Adjusted margin */
    flex-shrink: 0;
}

.airport-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow to take available space */
}

.airport-codes {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjusted gap */
    width: 100%; /* Make it fill its container */
}

.airport-codes strong {
    font-size: 24px;
    color: #555;
    flex-shrink: 0;
}

.arrow-line {
    height: 1px;
    background-color: #cfcfcf;
    position: relative;
    flex-grow: 1; /* Allow it to grow */
    margin: 0 5px; /* Adjusted margin */
}

.arrow-line::after {
    content: '>';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    color: #cfcfcf;
    font-size: 25px;
    line-height: 1.5px;
}

.city-names-row { /* New container for city names */
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    color: #777;
    margin-top: 5px;
    width: 100%;
}

.date-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 5px;
    margin-bottom: 5px;
    width: fit-content;
    gap: 25px;
}

.price-info {
    display: flex;
    align-items: baseline;
}

.price-info .from-text {
    font-size: 18px;
    color: #888;
    margin-right: 20px;
}

.price-info .price {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.price-info .superscript {
    font-size: 16px;
    vertical-align: super;
}

.separator {
    border-top: 1.5px solid #eee;
    margin: 2px 0;
}

.flight-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    gap: 15px; /* Space between items */
}

.share-action {
    display: flex;
    align-items: center;
    color: #007bff;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

.share-action:hover {
    color: #0056b3;
}

.share-action img {
    width: 28px;
    height: 28px;
    margin-right: 25px;
    margin-left: 20px;
}

.book-now-btn {
    background-color: #052f6d;
    color: #fff;
    padding: 1px 20px; /* Adjusted padding */
    border-radius: 6px;
    text-decoration: none;
    font-size: 20px; /* Adjusted font size */
    font-weight: 700;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    flex-shrink: 0; /* Prevent shrinking */
}

.book-now-btn:hover {
    background-color: #0056b3;
}

.show-more-area {
    text-align: center;
    margin-top: 40px;
}

.show-more-btn {
    background-color: #e9ecef;
    color: #333;
    padding: 15px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.show-more-btn:hover {
    background-color: #dee2e6;
}

/* =============================
   FLIGHT ITEM CARD MOBILE WIDTH FIX
   ============================= */

@media (max-width:768px){

    .container{
        overflow:hidden;
    }

    .flight-row-inner{

        display:flex;
        flex-wrap:nowrap;
        gap:15px;

        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        justify-content:flex-start;

        padding:0 10px 15px;

        scrollbar-width:none;
    }

    .flight-row-inner::-webkit-scrollbar{
        display:none;
    }

    .flight-item-card{
        flex:0 0 calc(100% - 20px);
        max-width:calc(100% - 20px);
        width:calc(100% - 20px);
        scroll-snap-align:center;
        margin-top:20px;
        box-sizing:border-box;
    }
    .date-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 5px;
    margin-bottom: 5px;
    width: fit-content;
    gap: 5px;
}

    .section-header{
        font-size:26px;
    }

    .sub-header{
        font-size:16px;
        padding: 0 20px;
    }

    .airport-codes strong{
        font-size:20px;
    }

    .city-names-row{
        font-size:15px;
    }

    .price-info .price{
        font-size:22px;
    }

    .flight-footer{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:10px;
    }

    .book-now-btn{

        font-size:17px;

        padding:8px 18px;
    }

}

    .section-header {
        font-size: 28px;
    }

    .sub-header {
        font-size: 16px;
    }

    .airport-codes strong {
        font-size: 20px;
    }

    .city-names-row {
        font-size: 16px;
    }

    .price-info .price {
        font-size: 24px;
    }

    .book-now-btn {
        font-size: 18px;
        padding: 8px 15px;
    }

    .share-action {
        font-size: 16px;
    }

    .flight-footer {
        flex-direction: row; /* Keep in a row as requested */
        justify-content: space-between;
        align-items: center;
        gap: 15px; /* Space between items */
    }


@media (max-width: 480px) {
    .flight-details {
        flex-direction: row; /* Keep logo and airport info in a row */
        align-items: center;
    }

    .flight-details img.airline-logo {
        margin-bottom: 0;
        margin-right: 10px;
    }

    .airport-info {
        padding-left: 0;
    }

    .airport-codes {
        justify-content: flex-start; /* Align codes to the start */
    }

    .arrow-line {
        width: 30px; /* Shorter arrow for very small screens */
        margin: 0 5px;
    }

    .city-names-row {
        flex-direction: row; /* Keep city names in a row */
        justify-content: space-between;
        font-size: 14px;
    }

    .date-price-row {
        flex-direction: column; /* Stack date and price on very small screens */
        align-items: flex-start;
    }

    .price-info {
        margin-top: 0px;
    }

    .flight-footer {
        flex-direction: column; /* Stack share and book button */
        align-items: stretch; /* Stretch to fill width */
        gap: 10px;
    }
    .section-header-inner {
    background-color: #0056b3;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 30px 0 20px;
    text-align: center;
    justify-content: space-between;
    font-size: 20px;
}

    .book-now-btn,
    .share-action {
        width: 100%;
        text-align: center;
        justify-content: center; /* Center content within buttons */
        box-sizing: border-box; /* Include padding in width */
    }
}



/* =========================================
   Right Banner Styles
   ========================================= */
.app-banner-container {
    display: flex;
    flex: 1; /* Share width equally with left banner */
    height: 240px; /* Matches left banner height */
    background: #0a2c5e;
    border: 1px solid #0a2c5e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    position: relative;
}

.app-content-side {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.app-content-side h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.app-content-side p {
    color: #e0e0e0;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.4;
    max-width: 400px;
}

.app-qr-side {
    width: 35%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 5px solid #ffc107;
    position: relative;
}

.qr-code-box-1 {
    position: relative;
    width: 160px;
    height: 160px;
    padding: 5px;
    margin-bottom: 60px;
    left: 20%;
}

.qr-pattern {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.9;
}

.qr-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 800;
    color: #0a2c5e;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.qr-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border-color: #0a2c5e;
    border-style: solid;
    border-width: 0;
}

.qr-corner-tl { top: -5px; left: -5px; border-top-width: 3px; border-left-width: 3px; }
.qr-corner-tr { top: -5px; right: -5px; border-top-width: 3px; border-right-width: 3px; }
.qr-corner-bl { bottom: -5px; left: -5px; border-bottom-width: 3px; border-left-width: 3px; }
.qr-corner-br { bottom: -5px; right: -5px; border-bottom-width: 3px; border-right-width: 3px; }

.qr-scan-line {
    position: absolute;
    width: 130%;
    height: 2px;
    background: #00adef;
    box-shadow: 0 0 4px #00adef, 0 0 8px #00adef;
    left: 0%;
    animation: scan-move 2s infinite linear;
    z-index: 10;
}

@keyframes scan-move {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.qr-instruction {
    font-size: 15px;
    color: #666;
    font-weight: 600;
}

.qr-instruction i {
    color: #0a2c5e;
    margin-right: 5px;
}

.store-btn-wrapper { display: flex; gap: 12px; }

.store-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 200px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.store-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.store-btn .icon-box {
    width: 45px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    padding-left: 5px;
}

.store-btn .text-box {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 25px;
    color: #fff;
    line-height: 1.2;
}

.small-txt { font-size: 13px; text-transform: uppercase; opacity: 0.9; }
.big-txt { font-size: 16px; font-weight: 700; }

.btn-apple { background: linear-gradient(115deg, #00adef 32%, #314256 32.1%); }
.btn-android { background: linear-gradient(115deg, #fbad18 32%, #314256 32.1%); }

@media (max-width: 991px) {
    .dual-banner-wrapper { flex-direction: column; height: auto; }
    .signup-banner-container,
    .app-banner-container { width: 100%; height: auto !important; height: 240px; }
    .app-banner-container { flex-direction: column; }
    .app-qr-side { width: 100%; padding: 20px; border-left: none; border-top: 5px solid #ffc107; }

}

.title-color {
    color: #cc7400; /* Change color here */
    padding-bottom: 10px;
}

/* ====================
71. Booking Cycle (Fixed & Scoped)
==================== */

/* Use a specific parent class so we don't break the Header/Footer */
.booking-cycle-area {
    background-color: #f8f9fa;
    padding: 60px 0;
    color: #333;
    line-height: 1.6;
}

/* Use a unique container name or use Bootstrap's default */
.booking-cycle-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 15px;
}

.booking-cycle-area h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 2.5rem;
}

.nav-header {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.nav-btn {
    background-color: #3498db;
    color: white !important;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 8px 12px;
}

.bundle-search-container-fh {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 100%;
    margin: -12px;
}

.nav-btn:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.section-header {
    background-color: #3498db;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 30px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section-header-1 {
    background-color: #3498db;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 30px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.boxes-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.box {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.box:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Logic fix: Expand content when box is active */
.box.active {
    border-color: #3498db;
    background-color: #f0f8ff;
}

.box.active .box-content {
    max-height: 500px; /* Expands the content */
    margin-top: 15px;
}

.step-ribbon {
    position: absolute;
    top: 10px;
    right: -35px;
    background: linear-gradient(45deg, #3498db, #2980b9);
    color: white;
    padding: 5px 40px;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 1;
}

.box-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #3498db;
    text-align: center;
    display: block;
}

.box-title {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
}

.box-content {
    max-height: 0;
    overflow: active;
    transition: max-height 0.4s ease, margin 0.3s ease;
    color: #555;
    font-size: 15px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .boxes-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .boxes-container { grid-template-columns: 1fr; }
    .section-title { font-size: 20px; }
}

/* ====================
   Hotel Property CSS
==================== */
.section-headers {
    text-align: center;
    margin-bottom: 50px;
}

.section-main-header {
    font-size: 30px;
    font-weight: bold;
    font-family: Barlow, sans-serif;
    color: #626262;
    margin-bottom: 10px;
    line-height: 1.3;
}

.section-sub-header {
    font-size: 20px;
    font-family: Barlow, sans-serif;
    color: #626262;
    line-height: 1.4;
    margin: 0;
}

/* Properties Slider */
.properties-slider {
    position: relative;
    padding: 0 -20px;
}

/* Property Card */
.property-card {
    width: 100%; 
    height: 180px;
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.property-card-inner {
    position: relative;
    width: 100% !important;
    height: 100%;
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.property-card:hover .property-image {
    transform: scale(1.05);
}

/* Modern Stylish Price Tag */
.property-price-tag {
    position: absolute;
    bottom: -25px;
    right: 25%;
    background: linear-gradient(135deg, #5d7bff 0%, #033ebe 100%);
    color: white;
    padding: 10px 40px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    z-index: 3;
    backdrop-filter: blur(10px);
    border: none 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
}

.property-price-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.property-card:hover .property-price-tag::before {
    left: 100%;
}

.property-price {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.price-night {
    font-size: 11px;
    opacity: 0.9;
    margin-left: 2px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Ribbon Container */
.property-ribbon {
    width: 200px !important;
    height: 50px !important;
    position: absolute !important;
    top: -17px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99 !important;
    pointer-events: none;
    background-image: url('assets/img/ribbon.png'); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 !important;
    display: block !important;
}

.ribbon-text {
    display: block;
    position: absolute;
    width: 100%;       
    text-align: center; 
    top: 15px;         
    color: white !important;
    font-weight: bold;
    font-size: 16px;
    font-family: sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    line-height: 1;
}

/* Fix to prevent Ribbon from getting cut off */
.properties-slider.owl-carousel .owl-stage-outer {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    margin-top: -50px !important;
    margin-bottom: -50px !important;
    overflow: hidden !important;
}

.properties-slider.owl-carousel .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    margin-right: 20px;
}

.properties-slider.owl-carousel .owl-item.center .property-card {
    transform: scale(1.05);
    z-index: 10;
}

/* Navigation Arrows */
.properties-slider.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: calc(100% + 60px);
    left: -30px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.properties-slider.owl-carousel .owl-prev,
.properties-slider.owl-carousel .owl-next {
    width: 45px;
    height: 45px;
    left: 50%;
    top: 50%;
    background: white !important;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: none all 0.3s ease;
    font-size: 24px !important;
}

.properties-slider.owl-carousel .owl-prev:hover,
.properties-slider.owl-carousel .owl-next:hover {
    background: #667eea !important;
    color: white !important;
}

/* Dots */
.properties-slider.owl-carousel .owl-dots {
    margin-top: 30px;
    text-align: center;
}

.properties-slider.owl-carousel .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px;
    background: #ddd;
    transition: all 0.3s ease;
}

.properties-slider.owl-carousel .owl-dot.active span {
    background: #667eea;
    width: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .properties-slider {
        padding: 0 20px;
    }
    
    .properties-slider.owl-carousel .owl-nav {
        width: calc(100% + 40px);
        left: -20px;
    }
    
    .property-card {
        margin: 0 3px;
    }
}

/* RTL support enhancements */
body[style*="direction: rtl"] .header-top-right {
    flex-direction: row-reverse;
}

body[style*="direction: rtl"] .navbar-nav {
    flex-direction: row;
    padding-left: 100px;
    padding-right: 100px;
}

/* Change ID 1 to 100% width */
#main-hotel-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    position: relative;
    top: -80px;
    z-index: 100;
}

/* Change ID 2 (Grid Items) to 25% width */
.custom-hotel-col {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

/* Pagination */
.pagination-area {
    width: 100%;
    margin-top: 30px;
}

/* Optional: adjustment for mobile responsiveness */
@media (max-width: 991px) {
    .custom-hotel-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 575px) {
    .custom-hotel-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575px) {
    .call-info-box .user-photo,
    .top-contact-info .user-photo,
    #mobilePhoneContainer .user-photo {
        width: 25px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        animation: gentleShake 3s infinite ease-in-out !important;
    }
}

.call-info-box:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* User Photo with Shaking Animation */
.user-photo {
    width: 25px;
    height: auto;
    flex-shrink: 0;
    animation: gentleShake 3s infinite ease-in-out;
}

@keyframes glowShake {
    0%, 100% {
        transform: translateX(0);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    25% {
        transform: translateX(-2px);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    75% {
        transform: translateX(2px);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* Phone Number Text */
.call-info-box a span {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Hide the mobile phone container on desktop */
#mobilePhoneContainer {
    display: none;
}

/* Show and position between logo and menu on mobile */
@media (max-width: 991px) {
    #mobilePhoneContainer {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
    }
}

/* Specific fix for the phone number link */
@media (max-width: 991px) {
    /* Target the actual phone link */
    .call-info-box > a[href^="tel:"],
    .top-contact-info a[href^="tel:"],
    #mobilePhoneContainer a[href^="tel:"] {
        color: #ffffff !important;
    }
    
    /* Target the icon inside the phone link */
    .call-info-box a[href^="tel:"] i,
    .top-contact-info a[href^="tel:"] i,
    #mobilePhoneContainer a[href^="tel:"] i {
        color: #ffffff !important;
    }
    
    /* Target the text span inside the phone link */
    .call-info-box a[href^="tel:"] span,
    .top-contact-info a[href^="tel:"] span,
    #mobilePhoneContainer a[href^="tel:"] span {
        color: #ffffff !important;
    }
}

/* Position the phone between logo and menu on mobile ONLY */
@media (max-width: 991px) {
    .container {
        display: block !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        position: relative !important;
    }
    
    .navbar-brand {
        order: 1;
        flex: 0 0 auto;
    }
    
    #mobilePhoneContainer.top-contact-info {
        order: 2;
        text-align: center !important;
        white-space: nowrap !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: auto !important;
        width: auto !important;
        padding: 0 10px;
        /* Ensure the phone link is styled properly */
    }
    
    .mobile-menu-right {
        order: 3;
        flex: 0 0 auto;
    }
    
    .navbar-collapse {
        order: 4;
        flex: 0 0 100%;
        /* Bootstrap handles the collapse state, we just need it to take full width when shown */
    }
}



@media (max-width: 991px) {
    /* Hide on desktop (default state) */
    #mobilePhoneContainer.top-contact-info {
        display: none;
    }

    /* HIDE by default */
    #mobilePhoneContainer,
    .top-contact-info {
        display: none !important;
    }

    .user-photo img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    /* SHOW only on mobile */
    @media (max-width: 991px) {
        #mobilePhoneContainer,
        .top-contact-info {
            display: block !important;
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 100 !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    }
}

.call-info-box {
    display: flex;
    align-items: center;
    background: #007bff;
    padding: 0px 5px 0px 0px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    gap: 5px;
    transition: all 0.3s ease;
}

.call-info-box:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

@keyframes glowShake {
    0%, 100% {
        transform: translateX(0);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    25% {
        transform: translateX(-2px);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    75% {
        transform: translateX(2px);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}

.user-photo img {
    animation: glowShake 3s infinite;
}

/* Phone Link */
.call-info-box a {
    text-decoration: none;
    align-items: center;
    gap: 10px;
}

/* Phone Number Text */
.call-info-box a span {
    font-weight: 600;
    letter-spacing: 0.3px;
    font-size: 14px;
}

/* CSS Filtering */
.car-item {
    display: block !important; /* Override Owl Carousel display */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.car-item.hidden {
    display: none !important;
    opacity: 0;
}

/* Add this at the VERY END of your CSS file */
body .dropdown.custom-dropdown .dropdown-menu.more-options-menu-mega.show[data-bs-popper] {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

/* 3. Container with 1540px limit and overflow hidden */
.partner-container-1540 {
    max-width: 1540px !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    z-index: 2 !important; /* Above background */
    overflow: hidden !important; /* Hide overflow */
}

/* Counter Area with full width background */
.counter-area {
    padding: 50px 20px; /* Remove horizontal padding */
    position: relative;
    background: #fafafa; /* Make actual element transparent */
    z-index: 1;
    overflow: hidden; /* Contain the pseudo-element */
}

/* Counter Area with full width background */
.hotel-area {
    padding: 30px 20px; /* Remove horizontal padding */
    position: relative;
    background: #fafafa; /* Make actual element transparent */
    z-index: 1;
    overflow: hidden; /* Contain the pseudo-element */
}

/* Fix for partner/popular section arrows */
.partner-slider .owl-nav button,
.popular-slider .owl-nav button,
.owl-carousel .owl-nav button {
    background: #093270 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2) !important;
    z-index: 1000 !important;
}

.partner-slider .owl-nav button,
.popular-slider .owl-nav button,
.owl-carousel .owl-nav button:hover {
    background-color: #0d91f6 !important;
    color: white !important;
}

/* For extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .download-area,
    .testimonial-area,
    .blog-area,
    .faq-section,
    .tour-area,
    .feature-area,
    .footer-widget {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* For small devices (phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .download-area .container,
    .testimonial-area .container,
    .blog-area .container,
    .faq-section .container,
    .tour-area .container,
    .feature-area .container,
    .footer-widget .container {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Optional: Prevent content from touching screen edges on very small screens */
@media (max-width: 400px) {
    .download-area .row,
    .testimonial-area .row,
    .blog-area .row,
    .faq-section .row,
    .tour-area .row,
    .feature-area .row,
    .footer-widget .row {
        margin-left: -5px;
        margin-right: -5px;
    }
}

.phone-number {
    color: #07286e;
    font-weight: 800;
    font-size: 28px;
    font-family: 'Barlow', sans-serif;
    margin-left: 15px;
    line-height: 1;
}

.phone-icon-circle {
    background-color: #1e88e575;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.phone-box:hover .buzz-animation {
    animation-duration: 0.5s;
}

.buzz-animation {
    animation: ring-vibrate 2s infinite ease-in-out, pulse-blue 2s infinite;
}

.banner-image-container img {
    width: 100%;
    width: 400px !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.banner-content-container {
    flex: 1 !important;
    height: 100% !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
}



.phone-box {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 20px 25px 20px 10px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 1px solid #54c9ff;
    margin-top: 0px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* For Car tab only, make custom-col-width 25% */
#pills-5 .custom-col-width {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

.leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
    opacity: 1;
    transform: translate3d(1004px, 285px, 0px);
    bottom: 28px !important;
    left: -140px !important;
}

/* Social Footer Section */
.copyright .row {
    justify-content: center !important;
}

.copyright .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.copyright .copyright-text {
    width: auto !important; /* Remove fixed width */
    max-width: none !important;
    text-align: center !important;
}

.copyright {
    padding: 20px 15px;
}

.copyright .row {
    max-width: 1200px;
    margin: 0 auto;
}

/* Just force text centering at all levels */
.copyright {
    text-align: center !important;
}

.copyright .container,
.copyright .row,
.copyright .col-md-6,
.copyright-text {
    text-align: center !important;
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.owl-carousel .owl-stage-outer {
    padding-top: 20px;
}

/*   arrow changer for every section */
/* Hide Owl Carousel navigation */
.owl-carousel .owl-nav {
    display: visible !important;
}

/* CSS-only navigation functionality */
.testimonial-slider-wrapper {
    position: relative;
}

/* Hide radio inputs */
.testimonial-radio {
    display: visible;
}

/* Slide positioning - ONLY for movement */
.testimonial-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Show active slide */
#testimonial-radio-1:checked ~ .testimonial-slider .testimonial-single:nth-child(1),
#testimonial-radio-2:checked ~ .testimonial-slider .testimonial-single:nth-child(2),
#testimonial-radio-3:checked ~ .testimonial-slider .testimonial-single:nth-child(3) {
    opacity: 1;
    position: relative;
}

/* Make existing Owl arrows clickable with CSS */
.owl-carousel .owl-prev,
.owl-carousel .owl-next {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Connect Owl arrows to radio buttons */
.owl-carousel .owl-prev {
    z-index: 1000 !important;
}

.owl-carousel .owl-next {
    z-index: 1000 !important;
}

/* SIMPLER APPROACH: Use labels that overlay existing arrows */
.testimonial-arrow-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1001;
}

/* Position labels over existing Owl arrows */
.testimonial-arrow-labels .prev-label {
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
}

.testimonial-arrow-labels .next-label {
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
}

/* Connect labels to slides */
#testimonial-radio-1:checked ~ .testimonial-slider .testimonial-single:nth-child(1) {
    display: block;
}

#testimonial-radio-2:checked ~ .testimonial-slider .testimonial-single:nth-child(2) {
    display: block;
}

#testimonial-radio-3:checked ~ .testimonial-slider .testimonial-single:nth-child(3) {
    display: block;
}

.flight-slider-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(33.333% - 20px);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px;
}

.flight-item {
    scroll-snap-align: start;
}

.css-carousel {
    position: relative;
    overflow: hidden;
}

/* footer social section css */  

.header-top-footer {
    background: #07286ef3;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 10px 0;
    z-index: 9999;
    border-radius: 10px;
}

.header-top .container-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    border-radius: 10px;
}

/* Content container - holds text and social icons */
.info-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    color: #ffffff;
    text-align: center;
}

.info-footer h6 {
    font-size: 20px;
    margin: 0;
    font-weight: 500;
    color: #ffffff;
}

/* Social icons container */
.header-top-left-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Individual social icon links */
.footer-social-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgb(85, 128, 247);
    transition: all 0.3s ease;
    text-decoration: none;
    color: #ffffff;
}

.footer-social-icon {
    display: flex;
    flex-direction: row;
    
}

.footer-social-icon a i {
    font-size: 18px;
    line-height: 1;
    transition: all 0.3s ease;
}

/* Hover effects for individual icons */
.footer-social-icon a:hover {
    background: #ffffff;
    transform: translateY(-2px);
    color: var(--theme-color);
}

.footer-social-icon a:hover i {
    color: var(--theme-color);
}

/* Alternative if you want to apply the circle style directly to the links */
/* This might be better depending on your actual HTML structure */
.header-top-left-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgb(85, 128, 247);
    transition: all 0.3s ease;
    text-decoration: none;
    color: #ffffff;
    margin: 0 5px;
}

.info-footer-social {
    font-size: 18px !important;
    color: #ffff;
    text-align: center;
    line-height: 1;
    transition: all 0.3s ease;
}

.header-top-left-footer a:hover {
    background: #ffffff;
    transform: translateY(-2px);
}

.header-top-left-footer a:hover i {
    color: var(--theme-color);
}




/* For a more colorful design, you could use: */
.city-oval {
    font-size: 24px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #135dca 0%, #052659 100%);
    padding: 1px 30px;
    border-radius: 50px;
    margin-bottom: -25px; /* Negative margin creates the overlap */
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    text-align: center;
    border: 1px solid #ddd;
    position: relative; /* Ensures it stays above the content */
    top: -43px;
    z-index: 2; /* Makes sure it appears on top */
    width: fit-content; /* Makes width fit the content */
    margin-left: auto; /* Centers horizontally */
    margin-right: auto; /* Centers horizontally */
}

/* Add this to give the contact content some top padding to accommodate the overlap */
.contact-content {
    position: relative;
    z-index: 1;








}
/* Close button styling - moved to right side */
.close-btn-overlay {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    color:#733d3d;
    border: none;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 1000;
    line-height: 1;
    padding: 0;
}

  .properties-slider.owl-carousel .owl-prev{
         right: -20px !important;

    }

    .partner-slider .owl-nav button, .popular-slider .owl-nav button, .owl-carousel .owl-nav button{
        right: -20px !important;
    } 

    .properties-slider.owl-carousel .owl-next {
         left: -20px !important;
    }

.close-btn-overlay {
  position: absolute !important;   /* force it above everything */
  z-index: 99999 !important;
  background: #a476769c !important;   /* make it highly visible */
  width: 40px !important;
  height: 40px !important;
  pointer-events: auto !important;
}

.close-btn-overlay {
  pointer-events: auto !important;
}

.close-btn-overlay:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Agent image styling - positioned in front of header */
.agent-contact {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin-bottom: 15px;
    display: block;
}

.popup-header-overlay {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    margin-top: 10px;
}

.popup-header-content {
    margin-top: 5px;
}

.popup-header-content h1 {
    margin: 10px 0 5px 0;
    font-size: 24px;
}

.popup-header-content p {
    margin: 0;
    color: #666;
}

/* Google Review Section Styling with Icon */
.google-review {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 18px !important;

}
.review-icon{
    width:70px;
    height:70px;
    object-fit:contain;
}

.google-icon {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.review-stars {
    color: #ffc107;
    letter-spacing: 2px;
}

.review-stars span {
    font-size: 18px !important;
}

.review-text {
    color: #666;
    margin: 0;
    font-weight: 400;
    width: 100%;
}

.rating-value {
    background: #34a853;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 18px !important;
}

/* Popup container styling */
.popup-contact {
    position: relative;
    background: white;
    border-radius: 15px;
    padding: 25px;
    max-width: 500px !important;
    margin: 0 auto;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Phone button styling */
.phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #333;
    background: #f5f5f5;
    padding: 10px 20px;
    border-radius: 50px;
    transition: background 0.3s ease;
}

.phone-btn:hover {
    background: #e8e8e8;
}

.phone {
    width: 44px;
    height: 44px;
}

/* Popup footer adjustments */
.popup-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* Brand logo styling */
.brand-logo {
    max-width: 200px;
    margin: 0 auto 15px;
    display: block;
}

/* Features list styling */
.features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.check {
    color: #4CAF50;
    font-weight: bold;
    font-size: 20px;
}

.contact-terms {
    text-align: center;
    margin: 15px 0;
}

.contact-terms a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.contact-terms a:hover {
    text-decoration: underline;
}

/* For very small mobile devices */
@media (max-width: 480px) {
    #booking-popup.popup {
        width: 90vw !important;
        padding: 20px 15px !important;
        margin-top: 60px !important;
    }

    #popup-overlay {
        padding-top: 60px !important;
    }

    .popup-header-content h1 {
        font-size: 18px !important;
    }

    .phone-btn {
        font-size: 20px !important;
        padding: 8px 12px !important;
    }
       .reviews-carousel-item {
                flex-basis: 100% !important;
                max-width: 0px;
                width: 0px;
            }

    .review-icon{
    width:60px;
    height:60px;
    object-fit:contain;
}

    .features li {
        font-size: 13px !important;
    }
}

/* MOBILE ONLY */
@media (max-width: 767px){

    .testimonial-slider .owl-stage{
        display:flex;
    }

    .testimonial-slider .owl-item{
        display:flex;
        justify-content:center;
        width:100% !important;
    }
    

    .testimonial-slider .testimonial-single{
        width:100%;
        max-width:100%;
        margin:0;
        box-sizing:border-box;
    }

    .properties-slider.owl-carousel .owl-prev{
         right: -20px !important;

    }

    .partner-slider .owl-nav button, .popular-slider .owl-nav button, .owl-carousel .owl-nav button{
        right: 0px !important;
  
        
    }

}

        /* RIBBON STYLE */




.back-ribbon-mobile::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    border-width:4px 4px 0 0;
    border-style:solid;
    border-color:#8e1c10 transparent transparent transparent;
}


.back-ribbon{
        display:inline-block;
        position:absolute;
        left:0px;      /* LEFT SIDE */
        top:-16px;        /* Adjust independently */
        background:linear-gradient(90deg,#e74c3c,#c0392b);
        color:#fff;
        padding:5px 14px;
        font-size:12px;
        font-weight:700;
        text-decoration:none;
        border-radius:0 4px 4px 0;
        box-shadow:0 2px 6px rgba(0,0,0,.25);
        white-space:nowrap;
        z-index:999;
}
.top-flex{
    position:relative !important;
}

.back-ribbon::after {
    content:"";
    position:absolute;
    top:100%;
    left:0;
    border-width:4px 4px 0 0;
    border-style:solid;
    border-color:#8e1c10 transparent transparent transparent;
}
.back-ribbon {
    z-index: 9999;
}

@media (max-width:768px){

.mobile-header-bar{
    position:relative;
    padding-top:28px;   /* room for ribbon */
}

.back-ribbon-mobile{
    display:block;
    position:absolute;
    left:0;
    top:0px;

    background:linear-gradient(90deg,#e74c3c,#c0392b);
    color:#fff;
    padding:5px 15px;
    font-size:12px;
    font-weight:bold;
    text-decoration:none;

    box-shadow:2px 2px 5px rgba(0,0,0,.2);
    z-index:999;
}

    .back-ribbon {
        display:inline-block;
        position:absolute;
        left:0px;      /* LEFT SIDE */
        top:-16px;        /* Adjust independently */
        background:linear-gradient(90deg,#e74c3c,#c0392b);
        color:#fff;
        padding:5px 14px;
        font-size:12px;
        font-weight:700;
        text-decoration:none;
        border-radius:0 4px 4px 0;
        box-shadow:0 2px 6px rgba(0,0,0,.25);
        white-space:nowrap;
        z-index:999;
    }
}