/**
 * Import Design Variables
 * This file contains all design tokens (spacing, colors, typography, etc.)
 */
/* Search form styles are linked directly from general/index.php to avoid CSS @import chains. */
/* ============================================
   Home Page Styles - Extracted from theme_style_backup_before_clean.css
   ============================================ */
/* Header and Logo Styles */
.logo {
    background-size: cover;
    object-fit: cover;
    width: 17vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    bottom: var(--spacing-1);
}

.logo img {
    transition: var(--transition-all);
}

/* Top Margin Section */
.fromtopmargin {
    float: left;
    width: var(--width-full);
}
.srchinarea {
    padding-bottom: var(--spacing-0);
    padding-top: var(--spacing-0);
    position: relative;
    top: 0;
    width: 100%;
}

/* Caption Group */
.captngrp {
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-5);
    text-align: left;
    margin-top: var(--spacing-2);
    max-width: var(--width-full);
}

/* Big Caption Styles */
#big1.bigcaption {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--spacing-2);
}

.bigcaption {
    color: var(--color-white);
    display: block;
    font-size: var(--font-size-5xl);
    overflow: hidden;
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
}

.bigCaptionMain {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-none);
    color: #D4AF37;
    /* Custom color - keep as is */
    margin-top: var(--spacing-0);
}

/* Small Caption Styles */
#desc.smalcaptn {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    line-height: var(--line-height-normal);
    margin: var(--spacing-0) auto;
    font-family: var(--font-family-base);
    margin-top: var(--spacing-5);
}

.smalcaptn {
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    overflow: hidden;
    text-align: left;
}

.smalcaptn2 {
    font-size: var(--font-size-4xl);
    color: var(--color-white);
    text-align: center;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.hero-caption-single {
    white-space: nowrap;
}

.hero-caption-single .hero-caption-text {
    display: inline-block;
}

@media (max-width: 767px) {
    .hero-caption-single {
        white-space: normal;
        font-size: clamp(1.125rem, 5vw, 1.5rem);
    }
}

/* Search Form Container */
.secndblak {
    float: left;
    width: var(--width-full);
    border-radius: 52px;
    /* Custom value - keep as is */
    position: relative;
    border: var(--border-width-none);
}

.commonNavTabCls {
    margin: var(--spacing-0) auto;
    justify-content: start;
    display: flex;
    margin-bottom: 10px;
}

/* Hide mobile dropdown on desktop */
.mobile-tab-dropdown {
    display: none;
}

/* Tab Navigation */
.nav-tabs.tabstab {
    position: relative;
    border: none;
    background: var(--color-bg-primary);
    padding: 5px;
    border-radius: var(--border-radius-md);
    gap: 12px;
    z-index: 9;
}

.nav-tabs.tabstab>li {
    margin: var(--spacing-0) var(--spacing-0);
}

.nav-tabs.tabstab>li:first-child a {
    /* border-radius: var(--border-radius-lg) var(--spacing-0) var(--spacing-0) var(--border-radius-lg); */
}

.nav-tabs.tabstab>li:last-child a {
    /* border-radius: var(--spacing-0) var(--border-radius-lg) var(--border-radius-lg) var(--spacing-0); */
}

.nav-tabs.tabstab>li>a {
    float: left;
    border-radius: 22px;
    border: 1px solid #E3E5E8;
    color: #737B8C;
    font-size: 14px;
    text-decoration: none;
    margin: var(--spacing-0);
    font-weight: 600;
    padding: 5px 15px;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-1);
    cursor: pointer;
    line-height: 22px;
}

.nav-tabs.tabstab>li>a label {
    cursor: pointer;
    font-weight: 500;
    /* line-height: 26px; */
    display: block;
}

.nav-tabs.tabstab li a.active, .nav-tabs.tabstab>li>a:focus {
    background: #423B4C;
    background-size: 200% 200% !important;
    /* border-radius: var(--border-radius-md); */
    outline: var(--border-width-none) !important;
    border: 1px solid #423B4C;
    color: var(--color-white) !important;
    /* box-shadow: 0 4px 12px var(--shadow-blue-default) !important; */
    transition: all 0.3s ease;
}

.nav-tabs.tabstab li a.active:hover, .nav-tabs.tabstab>li>a:focus:hover {
    background-position: right center !important;
    /* box-shadow: 0 6px 20px var(--shadow-blue-hover) !important; */
    transform: translateY(-1px);
}

.nav-tabs.tabstab li.active span {
    border: var(--border-width-none);
}

.nav-tabs.tabstab>li span {
    transition: var(--transition-all);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ============================================
   MOBILE APP-LIKE RESPONSIVE STYLES
   ============================================ */
/* Mobile: 767px and below */
@media (max-width: 767px) {
    .home-feature-bar {
        display: none !important;
    }

    /* Search Form Container - Mobile App Style */
    .searcharea {
        padding: var(--spacing-4) var(--spacing-3);
    }

    .secndblak {
        border-radius: var(--border-radius-2xl);
        padding: var(--spacing-4);
        padding-top: var(--spacing-4) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        background: linear-gradient(to bottom, var(--gradient-section-top) 0%, var(--gradient-section-mid) 50%, var(--gradient-section-bottom) 100%) !important;
        overflow-x: visible !important;
        position: relative;
    }

    /* Bubble Animation Container - Mobile Only */
    .secndblak::before, .secndblak::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        opacity: 0.5;
        filter: blur(2px);
    }

    /* First Bubble - Purple/Pink */
    .secndblak::before {
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.3));
        top: 15%;
        left: 8%;
        animation: bubbleFloat1 12s ease-in-out infinite;
        box-shadow: /* Bubble 3 - Blue */ 200px 150px 0 60px rgba(79, 172, 254, 0.25), /* Bubble 4 - Purple */ 350px -80px 0 45px rgba(102, 126, 234, 0.3), /* Bubble 5 - Pink */ 500px 200px 0 50px rgba(240, 147, 251, 0.25), /* Bubble 6 - Small Purple */ 150px 300px 0 35px rgba(118, 75, 162, 0.3), /* Bubble 7 - Medium Blue */ 400px 100px 0 40px rgba(79, 172, 254, 0.2);
    }

    /* Second Bubble - Pink/Orange */
    .secndblak::after {
        width: 140px;
        height: 140px;
        background: radial-gradient(circle, rgba(240, 147, 251, 0.35), rgba(245, 87, 108, 0.25));
        bottom: 10%;
        right: 12%;
        animation: bubbleFloat2 15s ease-in-out infinite;
        box-shadow: /* Bubble 8 - Orange */ -180px -120px 0 55px rgba(245, 87, 108, 0.3), /* Bubble 9 - Pink */ -350px 80px 0 50px rgba(240, 147, 251, 0.28), /* Bubble 10 - Coral */ -200px -200px 0 45px rgba(245, 87, 108, 0.25), /* Bubble 11 - Small Pink */ -450px -50px 0 38px rgba(240, 147, 251, 0.3), /* Bubble 12 - Medium Orange */ -300px 150px 0 42px rgba(245, 87, 108, 0.22), /* Bubble 13 - Large Purple */ -100px -150px 0 65px rgba(118, 75, 162, 0.25);
    }

    /* Ensure form content is above bubbles */
    .secndblak > * {
        position: relative;
        z-index: 1;
    }

    /* Bubble Animation Keyframes - Mobile Only */
    @keyframes bubbleFloat1 {
        0% {
            transform: translate(0, 0) scale(1) rotate(0deg);
            opacity: 0.4;
        }

        25% {
            transform: translate(40px, -50px) scale(1.2) rotate(90deg);
            opacity: 0.6;
        }

        50% {
            transform: translate(-30px, -80px) scale(0.8) rotate(180deg);
            opacity: 0.5;
        }

        75% {
            transform: translate(60px, -40px) scale(1.1) rotate(270deg);
            opacity: 0.6;
        }

        100% {
            transform: translate(0, 0) scale(1) rotate(360deg);
            opacity: 0.4;
        }
    }

    @keyframes bubbleFloat2 {
        0% {
            transform: translate(0, 0) scale(1) rotate(0deg);
            opacity: 0.3;
        }

        20% {
            transform: translate(-60px, 60px) scale(1.3) rotate(-90deg);
            opacity: 0.5;
        }

        40% {
            transform: translate(40px, -50px) scale(0.7) rotate(-180deg);
            opacity: 0.4;
        }

        60% {
            transform: translate(50px, 30px) scale(1.1) rotate(-270deg);
            opacity: 0.5;
        }

        80% {
            transform: translate(-40px, -20px) scale(0.9) rotate(-360deg);
            opacity: 0.4;
        }

        100% {
            transform: translate(0, 0) scale(1) rotate(0deg);
            opacity: 0.3;
        }
    }

    /* Ensure parent containers don't clip tabs */
    .allformst, .srchinarea, .searcharea {
        overflow-x: visible !important;
    }

    .commonNavTabCls {
        position: relative !important;
        top: var(--spacing-0) !important;
        margin: var(--spacing-3) auto var(--spacing-2) !important;
        width: 100% !important;
        display: block !important;
        overflow: visible;
        padding: 0 var(--spacing-3);
        box-sizing: border-box;
    }

    .mobile-tab-dropdown {
        display: none !important;
    }

    .commonNavTabCls .nav-tabs.tabstab, .commonNavTabCls .nav-tabs.tabstab.d-flex {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
        margin: 0;
        padding: var(--spacing-1) 0 var(--spacing-2);
        gap: var(--spacing-2);
        border: none;
        background: transparent;
    }

    .commonNavTabCls .nav-tabs.tabstab > li, .commonNavTabCls .nav-tabs.tabstab > .nav-item {
        margin: 0;
        float: none;
        display: block;
    }

    .commonNavTabCls .nav-tabs.tabstab > li > a, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link {
        float: none !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2);
        white-space: normal;
        text-align: center;
        border-radius: var(--border-radius-lg) !important;
        padding: var(--spacing-3) var(--spacing-2);
        min-height: 92px;
        height: 100%;
        background: light-dark(var(--color-white), var(--color-bg-secondary));
        border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(15, 23, 42, 0.035);
        transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.22s ease;
    }

    .commonNavTabCls .nav-tabs.tabstab > li > a .iconcmn, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link .iconcmn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        min-width: 36px;
        min-height: 36px;
        position: static;
        margin: 0;
        padding: 0;
    }

    .commonNavTabCls .nav-tabs.tabstab > li > a .iconcmn .tmx-icon, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link .iconcmn .tmx-icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }

    .commonNavTabCls .nav-tabs.tabstab > li > a .iconcmn .material-icons, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link .iconcmn .material-icons {
        font-size: 36px;
        line-height: 1;
    }

    .commonNavTabCls .nav-tabs.tabstab > li > span, .commonNavTabCls .nav-tabs.tabstab > li > a label, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link label {
        position: static;
        display: block;
        width: 100%;
        margin: 0;
        line-height: 1.25;
        font-size: 13px;
        font-weight: var(--font-weight-semibold, 600);
        white-space: normal;
        word-break: break-word;
    }

    @keyframes homeMobileFadeUp {

        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes homeMobileIconPop {
        0% {
            transform: scale(1);
        }

        45% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes homeMobileSheetIn {
        from {
            opacity: 0;
            transform: translateY(100%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes homeMobileSparkle {
        0%, 100% {
            transform: scale(1) rotate(0deg);
        }

        50% {
            transform: scale(1.08) rotate(6deg);
        }
    }

    .commonNavTabCls .nav-tabs.tabstab > li, .commonNavTabCls .nav-tabs.tabstab > .nav-item {
        animation: homeMobileFadeUp 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(1) {
        animation-delay: 0.05s;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(2) {
        animation-delay: 0.1s;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(3) {
        animation-delay: 0.15s;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(4) {
        animation-delay: 0.2s;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(5) {
        animation-delay: 0.25s;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(6) {
        animation-delay: 0.3s;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(7) {
        animation-delay: 0.35s;
    }

    .commonNavTabCls .nav-tabs.tabstab > :nth-child(8) {
        animation-delay: 0.4s;
    }

    .commonNavTabCls .nav-tabs.tabstab > li > a:active:not(.active), .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link:active:not(.active) {
        transform: scale(0.96);
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
    }

    .commonNavTabCls .nav-tabs.tabstab li a.active, .commonNavTabCls .nav-tabs.tabstab > li > a.active, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link.active {
        transform: scale(1.02);
        border-color: transparent !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 140, 255, 0.14) !important;
    }

    .commonNavTabCls .nav-tabs.tabstab li a.active:hover, .commonNavTabCls .nav-tabs.tabstab > li > a.active:hover, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link.active:hover {
        transform: scale(1.02);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 140, 255, 0.14) !important;
    }

    .commonNavTabCls .nav-tabs.tabstab > li > a.active .iconcmn, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link.active .iconcmn {
        animation: homeMobileIconPop 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @media (prefers-reduced-motion: reduce) {
        .commonNavTabCls .nav-tabs.tabstab > li, .commonNavTabCls .nav-tabs.tabstab > .nav-item, .commonNavTabCls .nav-tabs.tabstab > li > a.active .iconcmn, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link.active .iconcmn {
            animation: none !important;
        }

        .commonNavTabCls .nav-tabs.tabstab > li > a, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link {
            transition: none;
        }
    }

    /* Mobile Dropdown Button */
    .mobile-tab-selector {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--spacing-4) var(--spacing-4);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        border: 2px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
        border-radius: var(--border-radius-lg);
        background: light-dark(var(--color-white), var(--color-bg-secondary));
        color: light-dark(#2C2C2C, var(--color-text-primary));
        cursor: pointer;
        transition: all 0.25s ease;
        min-height: 56px;
        box-sizing: border-box;
        gap: var(--spacing-2);
    }

    .mobile-tab-selector:hover {
        border-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3));
        background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.05));
    }

    .mobile-tab-selector:focus, .mobile-tab-selector:focus-visible {
        outline: none;
        border-color: var(--color-primary-primary);
        box-shadow: 0 0 0 4px rgba(240, 152, 20, 0.1);
    }

    .mobile-tab-selector:active {
        transform: scale(0.98);
    }

    .mobile-tab-selector .material-icons:first-child {
        font-size: 24px;
        color: light-dark(#4A4A4A, var(--color-text-primary));
        flex-shrink: 0;
    }

    .mobile-tab-selector .dropdown-label {
        flex: 1;
        text-align: left;
        font-weight: var(--font-weight-medium);
    }

    .mobile-tab-selector .dropdown-arrow {
        font-size: 24px;
        color: light-dark(#4A4A4A, var(--color-text-secondary));
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .mobile-tab-selector[aria-expanded="true"] .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Bootstrap Dropdown Menu */
    .mobile-tab-dropdown-menu {
        width: 100%;
        margin-top: var(--spacing-1);
        padding: var(--spacing-1);
        border: 2px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
        border-radius: var(--border-radius-lg);
        background: light-dark(var(--color-white), var(--color-bg-secondary));
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 400px;
        overflow-y: auto;
    }

    .mobile-tab-dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        padding: var(--spacing-3) var(--spacing-4);
        border-radius: var(--border-radius-md);
        color: light-dark(#2C2C2C, var(--color-text-primary));
        transition: all 0.2s ease;
        margin-bottom: var(--spacing-1);
    }

    .mobile-tab-dropdown-menu .dropdown-item:last-child {
        margin-bottom: 0;
    }

    .mobile-tab-dropdown-menu .dropdown-item:hover {
        background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
        color: light-dark(#2C2C2C, var(--color-text-primary));
    }

    .mobile-tab-dropdown-menu .dropdown-item.active {
        background: light-dark(#F5F5F0, rgba(240, 152, 20, 0.15));
        color: light-dark(#2C2C2C, var(--color-text-primary));
        font-weight: var(--font-weight-semibold);
    }

    .mobile-tab-dropdown-menu .dropdown-item .material-icons {
        font-size: 22px;
        color: inherit;
        flex-shrink: 0;
    }

    .mobile-tab-dropdown-menu .dropdown-item span {
        flex: 1;
    }
}

/* Extra Small Mobile Devices - 480px and below */
@media (max-width: 480px) {
    /* Mobile Bootstrap Dropdown for Small Screens */ .mobile-tab-selector {
        padding: var(--spacing-3) var(--spacing-3);
        font-size: var(--font-size-sm);
        min-height: 52px;
    }

    .mobile-tab-selector .material-icons:first-child, .mobile-tab-selector .dropdown-arrow {
        font-size: 20px;
    }

    .mobile-tab-dropdown-menu .dropdown-item {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
    }

    .mobile-tab-dropdown-menu .dropdown-item .material-icons {
        font-size: 20px;
    }
}

/* Mobile: 767px and below - Form Fields */
@media (max-width: 767px) {
    /* Form Fields - Mobile App Style */ .lablform {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--spacing-2);
        padding-left: var(--spacing-2);
    }

    .dropdown-menu.show {
        visibility: visible !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        max-height: 400px !important;
    }

    /* Radio Buttons - Mobile App Style */
    .threey {
        display: flex;
        gap: var(--spacing-4);
        margin: var(--spacing-4) var(--spacing-0);
        padding: var(--spacing-3);
        background: var(--color-bg-secondary);
        border-radius: var(--border-radius-lg);
    }

    .threey label {
        font-size: var(--font-size-sm);
        padding: var(--spacing-2) var(--spacing-3);
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        cursor: pointer;
        border-radius: var(--border-radius-md);
        transition: var(--transition-all);
    }

    .threey label:hover {
        background: var(--color-bg-primary);
    }

    /* Search Button - Mobile App Style */
    .searchbtn, button[type="submit"], .submitbtn {
        width: 100%;
        min-height: 56px;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        padding: var(--spacing-4);
        border-radius: var(--border-radius-xl);
        box-shadow: 0 4px 12px rgba(240, 152, 20, 0.3);
        transition: var(--transition-all);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2);
    }

    .searchbtn:active, button[type="submit"]:active, .submitbtn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(240, 152, 20, 0.2);
    }

    /* Date Picker Fields */
    .dateinput, input[type="date"] {
        font-size: var(--font-size-base);
    }

    /* Dropdown Fields */
    .advncedown {
        font-size: var(--font-size-base);
    }

    /* Card-like Sections */
    .allformst, .tabspl {
        border-radius: var(--border-radius-2xl);
        margin: 0px !important;
    }

    /* ============================================
     MOBILE APP STYLE DATEPICKER - BOTTOM SHEET
     ============================================ */
    /* Datepicker Overlay/Backdrop */
    .ui-datepicker.ui-widget.ui-datepicker-multi {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: translateY(0) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        margin: 0 !important;
        border-radius: var(--border-radius-2xl) var(--border-radius-2xl) 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2) !important;
        z-index: 10000 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Add backdrop overlay */
    body.datepicker-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Datepicker Container - Mobile App Style */
    div#ui-datepicker-div.ui-datepicker {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: translateY(0) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        margin: 0 !important;
        border-radius: var(--border-radius-2xl) var(--border-radius-2xl) 0 0 !important;
        border: none !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2) !important;
        z-index: 10000 !important;
        padding: var(--spacing-4) var(--spacing-4) var(--spacing-6) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: light-dark(var(--color-white), var(--color-bg-primary)) !important;
    }

    /* Drag Handle Indicator */
    div#ui-datepicker-div.ui-datepicker::before {
        content: '';
        position: absolute;
        top: var(--spacing-3);
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
        border-radius: var(--border-radius-full);
    }

    /* Datepicker Header - Mobile App Style */
    .ui-datepicker.ui-widget .ui-datepicker-header {
        padding: var(--spacing-6) var(--spacing-0) var(--spacing-4) !important;
        margin-bottom: var(--spacing-4) !important;
        border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15)) !important;
    }

    .ui-datepicker-title {
        font-size: var(--font-size-xl) !important;
        font-weight: var(--font-weight-bold) !important;
    }

    .ui-datepicker-title .ui-datepicker-month, .ui-datepicker-title .ui-datepicker-year {
        font-size: var(--font-size-xl) !important;
        font-weight: var(--font-weight-bold) !important;
    }

    /* Navigation Arrows - Larger for Mobile */
    .ui-datepicker.ui-widget .ui-datepicker-prev::after, .ui-datepicker.ui-widget .ui-datepicker-next::after {
        width: 48px !important;
        height: 48px !important;
        font-size: 28px !important;
        background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1)) !important;
    }

    .ui-datepicker.ui-widget .ui-datepicker-prev, .ui-datepicker.ui-widget .ui-datepicker-next {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /* Calendar Grid - Mobile App Style */
    .ui-datepicker.ui-widget .ui-datepicker-calendar {
        border-spacing: var(--spacing-1) !important;
        width: 100% !important;
        margin: var(--spacing-0) auto !important;
    }

    .ui-datepicker.ui-widget .ui-datepicker-calendar th {
        width: calc(14.28% - 2px) !important;
        height: 44px !important;
        font-size: var(--font-size-xs) !important;
        font-weight: var(--font-weight-bold) !important;
        padding: var(--spacing-2) var(--spacing-0) !important;
        color: light-dark(#666, var(--color-text-secondary)) !important;
    }

    .ui-datepicker.ui-widget td {
        height: 52px !important;
        width: calc(14.28% - 2px) !important;
        padding: var(--spacing-1) !important;
    }

    .ui-datepicker.ui-widget td a {
        min-width: 48px !important;
        min-height: 48px !important;
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-medium) !important;
        border-radius: var(--border-radius-full) !important;
    }

    #ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-widget-content .ui-state-default {
        line-height: 48px !important;
        font-size: var(--font-size-base) !important;
    }

    /* Selected Date - Mobile App Style */
    #ui-datepicker-div .ui-state-active, #ui-datepicker-div .ui-widget-content .ui-state-active {
        background: var(--color-info) !important;
        color: var(--color-white) !important;
        font-weight: var(--font-weight-bold) !important;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--color-info) 40%, transparent) !important;
        transform: none !important;
    }

    /* Today's Date - Mobile App Style */
    #ui-datepicker-div .ui-state-highlight {
        background: var(--color-info-lightest) !important;
        color: var(--color-info-dark) !important;
        font-weight: var(--font-weight-semibold) !important;
    }

    #ui-datepicker-div .ui-state-highlight::after {
        display: none;
    }

    /* Hover State - Mobile App Style */
    #ui-datepicker-div .ui-state-default:hover {
        background: var(--color-info-lightest) !important;
        color: var(--color-info-dark) !important;
        transform: none !important;
    }

    /* Month/Year Selectors - Mobile App Style */
    select.ui-datepicker-month, select.ui-datepicker-year {
        font-size: var(--font-size-lg) !important;
        padding: var(--spacing-2) var(--spacing-3) !important;
        min-height: 48px !important;
        border-radius: var(--border-radius-md) !important;
        background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05)) !important;
    }

    /* Multi-Month Layout - Side by Side */
    .ui-datepicker-multi.ui-widget .ui-datepicker-group {
        border-right: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15)) !important;
        padding: var(--spacing-2) !important;
    }

    .ui-datepicker-multi.ui-widget .ui-datepicker-group:last-child {
        border-right: none !important;
    }

    /* Confirm Button - Hidden */
    .datepicker-confirm-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Prevent body scroll when datepicker is open */
    body.datepicker-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}

/* Extra Small Mobile Devices - 480px and below */
@media (max-width: 480px) {
    div#ui-datepicker-div.ui-datepicker {
        max-height: 90vh !important;
        padding: var(--spacing-3) var(--spacing-3) var(--spacing-5) !important;
    }

    .ui-datepicker.ui-widget td {
        height: 48px !important;
        padding: var(--spacing-0) !important;
    }

    .ui-datepicker.ui-widget td a {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: var(--font-size-sm) !important;
    }

    #ui-datepicker-div .ui-state-default {
        line-height: 44px !important;
        font-size: var(--font-size-sm) !important;
    }

    .ui-datepicker-title {
        font-size: var(--font-size-lg) !important;
    }

    .datepicker-confirm-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Mobile: 480px and below - Extra Small */
@media (max-width: 550px) {
    .searcharea, .srchinarea {
        padding: var(--spacing-0) var(--spacing-2);
        margin-top: var(--spacing-0);
    }

    .secndblak {
        padding: var(--spacing-3);
        border-radius: var(--border-radius-xl);
    }

    .nav-tabs.tabstab>li>a {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
        min-height: 40px;
    }

    .nav-tabs.tabstab>li>a label {
        font-size: var(--font-size-xs);
    }

    .iconcmn {
        width: 18px;
        height: 18px;
    }

    .iconcmn .material-icons {
        font-size: 18px;
    }

    .normalinput, .plcetogo input, input[type="text"], input[type="date"], select {
        font-size: var(--font-size-lg) !important;
        padding: var(--spacing-2) var(--spacing-3);
        width: 90% !important;
    }

    .searchbtn, button[type="submit"], .submitbtn {
        min-height: 52px;
        font-size: var(--font-size-base);
        padding: var(--spacing-3);
    }

    .threey {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .threey label {
        width: 100%;
        justify-content: center;
    }

    /* Hero Text - Mobile App Style */
    .bigCaptionMain {
        font-size: var(--font-size-3xl);
        line-height: 1.2;
        margin-bottom: var(--spacing-3);
    }

    .smalcaptn {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    /* Search Area Positioning - Mobile */
    .srchinarea {
        position: relative;
        top: var(--spacing-0);
        padding: var(--spacing-0) var(--spacing-0);
    }

    .searcharea {
        position: relative;
        margin-top: var(--spacing-0);
    }
}

/* Mobile: 360px and below - Smallest screens */
@media (max-width: 360px) {
    .nav-tabs.tabstab>li>a {
        padding: var(--spacing-2);
        font-size: var(--font-size-xs);
        min-height: 36px;
    }

    .nav-tabs.tabstab>li>a label {
        display: none;
        /* Hide labels on very small screens, show only icons */
    }

    .commonNavTabCls .nav-tabs.tabstab > li > a label, .commonNavTabCls .nav-tabs.tabstab > .nav-item > .nav-link label {
        display: inline-block !important;
    }

    .iconcmn {
        width: 20px;
        height: 20px;
    }

    .iconcmn .material-icons {
        font-size: 20px;
    }

    .normalinput, .plcetogo input, input[type="text"], input[type="date"], select {
        min-height: 44px;
        font-size: var(--font-size-sm);
    }

    .searchbtn, button[type="submit"], .submitbtn {
        min-height: 48px;
        font-size: var(--font-size-sm);
    }
}

/* Tab Splash */
.tabspl {
    float: left;
    width: var(--width-full);
    /* border-radius: var(--border-radius-2xl); */
    background: var(--color-bg-primary);
    padding: var(--spacing-0);
}

.tabrow {
    float: left;
    width: var(--width-full);
    /* border-radius: var(--border-radius-sm); */
}

/* Form Labels */
.lablform {
    color: #737B8C;
    display: block;
    font-size: 12px;
    /* padding-left: var(--spacing-3); */
    font-weight: 600;
    position: relative;
    /* top: var(--spacing-1); */
    /* left: var(--spacing-1); */
    margin-bottom: 6px;
    line-height: 14px;
}

/* Place to Go */
.plcetogo {
    position: relative;
    width: 100%;
    /* padding-left: var(--spacing-2); */
    display: block;
    float: left;
}

.plcetogo input {
    /* border: var(--border-width-none) !important; */
    border-radius: 8px !important;
}

/* Normal Input */
.normalinput {
    border: var(--border-width-thin) !important;
    color: #00334D !important;
    /* Custom color - keep as is */
    float: left;
    font-size: 14px !important;
    height: 46px;
    padding: 8px 12px 8px 32px !important;
    font-family: var(--font-family-base);
    border-radius: var(--border-radius-lg) !important;
    width: var(--width-full);
    border-radius: var(--spacing-0);
    background: none;
    box-shadow: var(--shadow-none);
    font-weight: 500;
    -webkit-box-sizing: unset !important;
    box-sizing: border-box !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
}

/* Remove all input focus styles */
input:focus, input:focus-visible, input:focus-within, textarea:focus, textarea:focus-visible, textarea:focus-within, select:focus, select:focus-visible, select:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* Tab Content */
.tab-content.custmtab {
    float: left;
    width: var(--width-full);
    padding-bottom: var(--spacing-0) !important;
    /* border-radius: 19px; */
    /* Custom value - keep as is */
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2) !important;
    z-index: 1;
    position: relative;
    overflow: visible;
}

.tab-content.custmtab .tab-pane {
    overflow: visible;
}

/* ============================================
   Home feature bar (overlaps banner / white)
   ============================================ */
.searcharea {
    /* position: relative; */
    z-index: 1;
    width: 100%;
}

/* Search form overlays the bottom of the hero banner (desktop) */
@media (min-width: 768px) {
    .hero-slider-wrapper {
        position: absolute;
        min-height: 400px;
        overflow: visible;
        box-sizing: border-box;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        /* z-index: 13; */
    }

    .hero-slider-wrapper .hero-slider, .hero-slider-wrapper .hero-slide, .hero-slider-wrapper .hero-slide-bg, .hero-slider-wrapper .hero-overlay {
        height: 100%;
        min-height: 100%;
    }

    .hero-slider-wrapper .hero-text-content {
        top: clamp(28px, 4vw, 56px);
    }

    .hero-slider-wrapper .hero-text-content .captngrp {
        margin-top: 0;
    }

    .hero-slider-wrapper .searcharea {
        /* position: absolute !important; */
        left: 0;
        right: 0;
        /* bottom: 30px; */
        width: 100%;
        float: none !important;
        z-index: 99;
        pointer-events: none;
    }

    .hero-slider-wrapper .searcharea .srchinarea, .hero-slider-wrapper .searcharea .allformst, .hero-slider-wrapper .searcharea .secndblak, .hero-slider-wrapper .searcharea .home-feature-bar {
        pointer-events: all;
    }

    .hero-slider-wrapper .srchinarea {
        position: relative;
        top: 0;
    }

    .hero-slider-wrapper.hero-multicity-active {
        min-height: 440px;
    }
}

.home-feature-bar {
    position: relative;
    z-index: 0;
    bottom: -45px;
    position: absolute;
    left: 0;
    right: 0;
    margin-bottom: 18px;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.home-feature-bar .container {
    pointer-events: auto;
}

.home-feature-bar__inner {
    display: flex;
    align-items: stretch;
    max-width: 920px;
    margin: 0 auto;
    background: color-mix(in srgb, var(--color-bg-primary) 94%, transparent);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-white) 80%, var(--border-color-light));
    border-radius: var(--border-radius-full);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-text-primary) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-info) 6%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.home-feature-bar__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 18px;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.home-feature-bar__item:not(:last-child) {
    border-right: var(--border-width-thin) solid color-mix(in srgb, var(--border-color-light) 85%, transparent);
}

.home-feature-bar__item:hover {
    background: color-mix(in srgb, var(--color-info) 5%, var(--color-bg-primary));
    text-decoration: none;
    color: inherit;
    transform: translateY(-1px);
}

.home-feature-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.05rem;
    line-height: 1;
}

.home-feature-bar__icon .bi {
    display: block;
    line-height: 1;
}

.home-feature-bar__icon--holiday {
    background: #f5efe6;
    color: #9a6b3f;
}

.home-feature-bar__icon--pay {
    background: #e8f2fc;
    color: var(--color-info);
}

.home-feature-bar__icon--guide {
    background: #e8f6ee;
    color: var(--color-success-primary);
}

.home-feature-bar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.home-feature-bar__title {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.home-feature-bar__desc {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top_flight-sec {
    /* padding-top: var(--spacing-2); */
    position: relative;
    display: none;
}

@media (max-width: 991px) {
    .home-feature-bar {
        margin-top: -28px;
        margin-bottom: 14px;
    }

    .home-feature-bar__inner {
        max-width: 100%;
        flex-direction: column;
        border-radius: var(--border-radius-xl);
    }

    .home-feature-bar__item:not(:last-child) {
        border-right: none;
        border-bottom: var(--border-width-thin) solid var(--border-color-light);
    }

    .home-feature-bar__item {
        padding: 10px 14px;
    }
}

@media (max-width: 575px) {
    .home-feature-bar {
        margin-top: -22px;
        margin-bottom: 10px;
    }

    .home-feature-bar__icon {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
        border-radius: 8px;
    }

    .home-feature-bar__title {
        font-size: 0.75rem;
    }

    .home-feature-bar__desc {
        font-size: 0.625rem;
        -webkit-line-clamp: 1;
    }
}

/* ============================================
   Offers Section
   ============================================ */
.offers_sec {
    background: #F8F9FA;
    padding: var(--spacing-10) var(--spacing-0);
    padding-bottom: var(--spacing-2);
}

.offers-section-header {
    text-align: left;
    margin-bottom: var(--spacing-6);
}

.offers-section-title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-size-4xl);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.offers-section-subtitle {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.offers-filter-tabs {
    display: none;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    justify-content: center;
    margin: var(--spacing-4) 0 var(--spacing-6);
}

.offer-filter-tab {
    border: 1px solid var(--border-color-medium);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.offer-filter-tab.active {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
}

.offer-card {
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    position: relative;
    color: #00334D;
    text-align: left;
    margin-bottom: var(--spacing-7);
    transition: var(--transition-all);
    height: 175px;
    /* Custom value - keep as is */
    border: 1px solid #E3E5E8;
}

.offer-card:hover {
    transform: translateY(calc(var(--spacing-0) - var(--spacing-1)));
    box-shadow: 0 8px 24px -12px #11182726;
}

.offer-content {
    position: absolute;
    left: var(--spacing-5);
    bottom: var(--spacing-0);
    z-index: var(--z-index-base);
}

.offer-img {
    width: var(--width-full);
    height: var(--height-full);
    object-fit: cover;
    border-radius: var(--border-radius-xl);
    display: none;
}

.offer-bg {
    position: absolute;
    top: var(--spacing-0);
    left: var(--spacing-0);
    width: var(--width-full);
    background: linear-gradient(to right, rgba(32, 58, 135, 0.801) 0%, rgba(0, 0, 0, 0) 100%);
    height: var(--height-full);
    border-radius: var(--border-radius-xl);
    opacity: var(--opacity-85);
}

.offer1 h3, .offer2 h3, .offer3 h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    color: #00334D;
}

.offer1 p, .offer2 p, .offer3 p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.discount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
}

@media (max-width: 767px) {
    .top_flight-sec {
        padding-top: 0;
        background: var(--color-bg-primary, #fff);
    }

    .offers_sec {
        padding: 20px 0 12px;
        background: var(--color-bg-primary, #fff);
    }

    .offers_sec .container.mobile_pad {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .offers-section-header {
        text-align: left;
        margin-bottom: 14px;
    }

    .offers-section-title {
        font-size: 1.25rem;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .offers-section-subtitle {
        font-size: 0.8125rem;
        line-height: 1.4;
        margin-top: 4px;
    }

    .offers-filter-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
        padding: 0 0 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .offers-filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .offer-filter-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
        padding: 8px 16px;
        border-radius: 999px;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
        border: 1px solid var(--border-color-light, #e5e7eb);
        background: var(--color-bg-primary, #fff);
        color: var(--color-text-secondary, #6b7280);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .offer-filter-tab.active {
        background: var(--color-info, #008cff);
        border-color: var(--color-info, #008cff);
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 140, 255, 0.28);
    }

    .offers_sec .mySwiper {
        overflow: hidden;
        padding-bottom: 30px;
        margin: 0 -2px;
    }

    .offers_sec .mySwiper .swiper-slide {
        height: auto;
    }

    .offer-card {
        height: auto;
        aspect-ratio: 16 / 9;
        min-height: 164px;
        max-height: 196px;
        margin-bottom: 0;
        text-align: left;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    }

    .offer-card:hover {
        transform: none;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    }

    .offer-img {
        border-radius: 14px;
    }

    .offer-bg {
        border-radius: 14px;
        opacity: 1;
        background: linear-gradient( 105deg, rgba(12, 77, 163, 0.94) 0%, rgba(12, 77, 163, 0.62) 38%, rgba(12, 77, 163, 0.18) 58%, rgba(0, 0, 0, 0) 78% );
    }

    .offer-content {
        left: 16px;
        right: 42%;
        bottom: 14px;
        max-width: none;
    }

    .offer1 p, .offer2 p, .offer3 p {
        font-size: 0.75rem;
        line-height: 1.25;
        margin: 0;
        opacity: 0.95;
    }

    .offer1 h3, .offer2 h3, .offer3 h3 {
        font-size: 1.375rem;
        line-height: 1.15;
        margin: 4px 0;
    }

    .discount {
        font-size: 1.5rem;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .offer-content p:last-child {
        margin-top: 4px;
        font-size: 0.8125rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .offers_sec .mySwiper .swiper-pagination {
        bottom: 6px !important;
        line-height: 0;
    }

    .offers_sec .mySwiper .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px !important;
        background: #d1d5db !important;
        opacity: 1;
        transition: width 0.25s ease, background-color 0.25s ease;
    }

    .offers_sec .mySwiper .swiper-pagination-bullet-active {
        width: 18px;
        border-radius: 999px;
        background: var(--color-primary-primary, #f09814) !important;
        transform: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .offer-card {
        height: 220px;
    }

    .discount {
        font-size: var(--font-size-3xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .offer-filter-tab, .offers_sec .mySwiper .swiper-pagination-bullet {
        transition: none;
    }
}

/* ============================================
   Popular Hotels Section - Modern Hotel Cards Design
   ============================================ */
.popular-hotels-section {
    position: relative;
    padding: 24px 0 20px;
    background: #F8F9FA;
}
.popular-hotels-section--featured {
    /* padding-bottom: var(--spacing-10); */
}

.popular-hotels-section--featured .popular-header.popular-header--lined {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    margin-bottom: var(--spacing-3);
    width: 100%;
}

.section-title-lined {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-4);
    width: 100%;
    max-width: 960px;
    margin: var(--spacing-0) auto var(--spacing-2);
    font-family: var(--font-family-heading);
    font-size: clamp(var(--font-size-xl), 2.5vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    color: var(--color-info-dark);
    line-height: var(--line-height-tight);
}

.section-title-lined::before, .section-title-lined::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color-light);
    min-width: var(--spacing-8);
    display: none;
}

.popular-header--lined .subtitle {
    margin-top: var(--spacing-0);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.featured-hotels-carousel-wrap {
    position: relative;
    padding: var(--spacing-0) var(--spacing-0);
}

.featured-hotels-swiper {
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

.featured-hotels-swiper .swiper-slide {
    height: auto;
}

.featured-hotels-nav {
    position: absolute;
    top: -58px;
    transform: translateY(-50%);
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 30px;
    border: 1px solid #E3E5E8;
    background: #fff;
    color: #8F96A3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px 0 #0000001A;
    transition: var(--transition-all);
    right: 64px;
    left: auto !important;
}

.featured-hotels-nav:hover {
    background: var(--color-info-lightest);
    border-color: var(--color-info);
    color: var(--color-info-dark);
}

.featured-hotels-nav .material-icons {
    font-size: 28px;
}

.featured-hotels-prev {
    left: var(--spacing-0);
}

.featured-hotels-next {
    right: var(--spacing-0);
}

.featured-hotel-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 316px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    background: #fff;
    margin-bottom: 15px;
    border: 1px solid #E3E5E8;
    box-shadow: 0 8px 24px -12px #11182726;
}

.featured-hotel-card:hover {
    /* transform: translateY(-6px); */
    /* box-shadow: var(--shadow-lg); */
}

.featured-hotel-card__media {
    position: absolute;
    /* inset: var(--spacing-0) var(--spacing-0) var(--spacing-19) var(--spacing-0); */
    z-index: 0;
}

.featured-hotel-card__media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-hotel-card:hover .featured-hotel-card__media img {
    /* transform: scale(1.06); */
}

.featured-hotel-card__gradient {
    position: absolute;
    inset: var(--spacing-0);
    background: linear-gradient( to top, color-mix(in srgb, var(--color-black) 88%, transparent) 0%, color-mix(in srgb, var(--color-info) 45%, transparent) 42%, transparent 68% );
    z-index: 1;
    width: 100%;
}

.featured-hotel-card__ribbon {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    z-index: 2;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-inverse);
    background: linear-gradient(135deg, var(--color-success-primary) 0%, var(--color-success-midtone) 100%);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    max-width: calc(100% - var(--spacing-6));
    display: none;
}

.featured-hotel-card__content {
    position: absolute;
    left: var(--spacing-0);
    right: var(--spacing-0);
    bottom: 0;
    z-index: 2;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-0);
    /* top: auto; */
}

.featured-hotel-card__title {
    margin: var(--spacing-0);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: #00334D;
    line-height: var(--line-height-snug);
    /* text-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 35%, transparent); */
    text-transform: capitalize;
    line-height: 28px;
    margin-bottom: 4px;
}

.featured-hotel-card__stars {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 3px 0 4px;
    display: none;
    /* justify-content: center; */
    /* line-height: 22px; */
}

.featured-hotel-card__star {
    font-size: 16px !important;
    width: 18px;
    height: 18px;
    color: #C9A227;
}

.featured-hotel-card__star--empty {
    opacity: 0.55;
}

.featured-hotel-card__location {
    margin: var(--spacing-0);
    font-size: 14px;
    color: #737B8C;
    font-weight: 400;
    padding: 2px 0;
    line-height: 16px;
}

.featured-hotel-card__book-pill {
    align-self: center;
    margin-top: var(--spacing-3);
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    /* letter-spacing: 0.08em; */
    /* text-transform: uppercase; */
    color: #fff;
    background: #F97A17;
    box-shadow: 0 6px 16px -8px #F97A17;
    font-weight: 500;
    line-height: 22px;
}

.featured-hotel-card--promo .featured-hotel-card__content {
    padding-bottom: var(--spacing-6);
}

@media (max-width: 767px) {
    .popular-hotels-section--featured {
        padding: 24px 0 20px;
    }

    .popular-hotels-section--featured .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .popular-hotels-section--featured .popular-header.popular-header--lined {
        align-items: flex-start;
        text-align: left;
        margin-bottom: 14px;
    }

    .section-title-lined {
        font-size: 1.25rem;
        line-height: 1.25;
        justify-content: flex-start;
        max-width: none;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
        color: var(--color-text-primary, #111827);
    }

    .section-title-lined::before, .section-title-lined::after {
        display: none;
    }

    .popular-header--lined .subtitle {
        font-size: 0.8125rem;
        line-height: 1.4;
        text-align: left;
    }

    .featured-hotels-carousel-wrap {
        padding: 0 0 28px;
    }

    .featured-hotels-nav {
        display: none !important;
    }

    .featured-hotels-swiper {
        overflow: hidden;
        border-radius: 0;
    }

    .featured-hotel-card {
        min-height: 0;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .featured-hotel-card:active {
        transform: scale(0.985);
    }

    .featured-hotel-card:hover {
        transform: none;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
    }

    .featured-hotel-card__gradient {
        background: linear-gradient( 180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.82) 100% );
    }

    .featured-hotel-card__ribbon {
        top: 10px;
        left: 10px;
        padding: 4px 8px;
        font-size: 0.625rem;
        border-radius: 999px;
    }

    .featured-hotel-card__content {
        padding: 14px 12px 12px;
        gap: 4px;
    }

    .featured-hotel-card__title {
        font-size: 0.9375rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .featured-hotel-card__stars {
        margin: 2px 0;
    }

    .featured-hotel-card__star {
        font-size: 14px !important;
        width: 14px;
        height: 14px;
    }

    .featured-hotel-card__location {
        font-size: 0.75rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .featured-hotel-card__book-pill {
        display: none;
    }

    .featured-hotels-pagination {
        display: block;
        bottom: 4px !important;
        line-height: 0;
    }

    .featured-hotels-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px !important;
        background: #d1d5db !important;
        opacity: 1;
        transition: width 0.25s ease, background-color 0.25s ease;
    }

    .featured-hotels-pagination .swiper-pagination-bullet-active {
        width: 18px;
        border-radius: 999px;
        background: var(--color-primary-primary, #f09814) !important;
    }
}

@media (min-width: 768px) {
    .featured-hotels-pagination {
        display: none;
    }
}

/* Hide mobile slider on desktop */
.hotel-cards-slider {
    display: none;
}

/* Show desktop grid by default */
.hotel-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-10);
}

.swiper-pagination {
    bottom: 0px !important;
}

.mySwiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--color-bg-secondary) !important;
    opacity: 1;
}

.mySwiper .swiper-pagination-bullet-active {
    background: var(--color-primary-primary) !important;
    transform: scale(1.1);
}

.popular-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-10);
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.popular-header h2 {
    color: #00334D !important;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    font-size: 40px;
    margin: var(--spacing-0);
    line-height: 47px;
    font-family: var(--font-family-heading);
    text-align: left;
    text-transform: capitalize;
}

.popular-header .subtitle {
    color: #737B8C;
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    margin-top: var(--spacing-0);
    display: block;
    width: 100%;
}

.view-all {
    color: var(--color-primary-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-all);
}

.view-all:hover {
    color: var(--color-primary-midtone);
    transform: translateX(4px);
}

.view-all i {
    font-size: var(--font-size-sm);
}

/* Hotel Card (Modern Design) */
.hotel-card {
    border-radius: var(--border-radius-2xl);
    overflow: hidden;
    position: relative;
    background: var(--color-bg-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: var(--spacing-6);
    transition: var(--transition-all);
    display: flex;
    flex-direction: column;
}

.hotel-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Hotel Image Section */
.hotel-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.hotel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-all);
}

.hotel-card:hover .hotel-image img {
    transform: scale(1.05);
}

/* Badges (Top Rated, Best Sale, Discount) */
.trending-badge, .hotel-badge {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.trending-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: var(--color-text-primary);
}

.hotel-badge.badge-top-rated {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: var(--color-text-primary);
}

.hotel-badge.badge-best-sale {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    color: var(--color-text-inverse);
}

.hotel-badge.badge-discount {
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    color: var(--color-text-inverse);
}

/* Favorite/Heart Icon */
.hotel-favorite {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: var(--transition-all);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hotel-favorite:hover {
    background: var(--color-bg-primary);
    transform: scale(1.1);
}

.hotel-favorite i {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    transition: var(--transition-all);
}

.hotel-favorite:hover i, .hotel-favorite.active i {
    color: #e91e63;
}

.hotel-favorite.active i {
    font-weight: 900;
}

/* Rating Overlay on Image */
.hotel-rating-overlay {
    position: absolute;
    bottom: var(--spacing-3);
    left: var(--spacing-3);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    z-index: 2;
}

.hotel-rating-overlay .star-icon {
    color: #ffd700;
    font-size: var(--font-size-base);
}

.hotel-rating-overlay .rating-text {
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.hotel-rating-overlay .review-count {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-1);
}

/* Hotel Info Box (Overlapping Card) */
.hotel-info-box {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-xl);
    position: relative;
    margin: calc(var(--spacing-0) - var(--spacing-12)) var(--spacing-4) var(--spacing-0);
    padding: var(--spacing-5);
    padding-bottom: var(--spacing-0);
    z-index: 3;
}

.hotel-info-box h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.hotel-location {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    margin-top: var(--spacing-1);
}

/* Star Rating */
.star-rating {
    color: #ffd700;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin: var(--spacing-2) var(--spacing-0);
}

.star-rating i {
    font-size: var(--font-size-sm);
}

/* Hotel Description */
.hotel-description {
    margin: var(--spacing-4) var(--spacing-4) var(--spacing-0);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    flex: 1;
}

/* Hotel Details (Duration & Guests) */
.hotel-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin: var(--spacing-3) var(--spacing-4) var(--spacing-0);
    padding: var(--spacing-3) var(--spacing-0);
    border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color-light);
}

.hotel-detail-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.hotel-detail-item i {
    color: var(--color-primary-primary);
    font-size: var(--font-size-base);
}

/* Hotel Footer (Price & Button) */
.hotel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    gap: var(--spacing-4);
}

.price {
    display: flex;
    flex-direction: column;
    color: var(--color-text-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.price small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    margin-top: var(--spacing-1);
    text-transform: lowercase;
}

.btn-details, .hotel-book-btn {
    background: linear-gradient(135deg, var(--color-primary-primary) 0%, var(--color-primary-midtone) 100%);
    color: var(--color-text-inverse);
    border: var(--border-width-none);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3) var(--spacing-6);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-all);
    box-shadow: 0 4px 12px rgba(240, 152, 20, 0.3);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    white-space: nowrap;
}

.btn-details:hover, .hotel-book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 152, 20, 0.4);
    text-decoration: none;
    color: var(--color-text-inverse);
}

.btn-details:active, .hotel-book-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(240, 152, 20, 0.3);
}

.btn-details::after {
    content: '→';
    font-size: var(--font-size-base);
    transition: var(--transition-all);
}

.btn-details:hover::after {
    transform: translateX(4px);
}

/* Responsive Design for Hotel Cards */
@media (max-width: 768px) {
    .popular-hotels-section {
        padding: var(--spacing-4) var(--spacing-0) !important;
        margin-top: var(--spacing-0) !important;
        margin-bottom: var(--spacing-4) !important;
        background: var(--color-bg-primary);
    }

    .popular-header {
        padding: var(--spacing-0) var(--spacing-4);
        margin-bottom: var(--spacing-4) !important;
    }

    .popular-header h2 {
        font-size: var(--font-size-2xl) !important;
        margin-bottom: var(--spacing-1) !important;
    }

    .popular-header .subtitle {
        font-size: var(--font-size-sm) !important;
    }

    /* Hide desktop grid on mobile */
    .hotel-cards-grid {
        margin-bottom: var(--spacing-0) !important;
        overflow: auto;
    }

    /* Show mobile slider */
    .hotel-cards-slider {
        display: block !important;
        padding: var(--spacing-0) var(--spacing-4);
        margin: var(--spacing-0);
        overflow: visible;
    }

    .hotel-cards-slider .swiper-wrapper {
        display: flex;
        align-items: stretch;
    }

    .hotel-cards-slider .swiper-slide {
        width: 320px !important;
        height: auto;
        display: flex;
        flex-shrink: 0;
    }

    /* Mobile App Style Hotel Card */
    .hotel-cards-slider .hotel-card {
        width: 100%;
        height: 100%;
        margin-bottom: var(--spacing-0);
        border-radius: var(--border-radius-2xl);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
        background: light-dark(var(--color-white), var(--color-bg-secondary));
        display: flex;
        flex-direction: column;
    }

    .hotel-cards-slider .hotel-image {
        height: 240px;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        overflow: hidden;
    }

    .hotel-cards-slider .hotel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Badge - Mobile App Style */
    .hotel-cards-slider .trending-badge, .hotel-cards-slider .hotel-badge {
        top: var(--spacing-2);
        left: var(--spacing-2);
        padding: var(--spacing-1) var(--spacing-3);
        font-size: 10px;
        font-weight: var(--font-weight-bold);
    }

    /* Favorite Icon - Mobile App Style */
    .hotel-cards-slider .hotel-favorite {
        top: var(--spacing-2);
        right: var(--spacing-2);
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
    }

    .hotel-cards-slider .hotel-favorite i {
        font-size: var(--font-size-base);
    }

    /* Rating Overlay - Mobile App Style */
    .hotel-cards-slider .hotel-rating-overlay {
        bottom: var(--spacing-2);
        left: var(--spacing-2);
        padding: var(--spacing-1) var(--spacing-2);
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(10px);
    }

    .hotel-cards-slider .hotel-rating-overlay .rating-text {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
    }

    .hotel-cards-slider .hotel-rating-overlay .review-count {
        font-size: 10px;
    }

    /* Hotel Info Box - Mobile App Style */
    .hotel-cards-slider .hotel-info-box {
        margin: calc(var(--spacing-0) - var(--spacing-10)) var(--spacing-3) var(--spacing-0);
        padding: var(--spacing-4);
        background: light-dark(var(--color-white), var(--color-bg-secondary));
        border-radius: var(--border-radius-xl);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .hotel-cards-slider .hotel-info-box h4 {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-1);
        color: light-dark(#2C2C2C, var(--color-text-primary));
    }

    .hotel-cards-slider .hotel-location {
        font-size: var(--font-size-xs);
        color: light-dark(#666, var(--color-text-secondary));
        margin-top: var(--spacing-0);
    }

    .hotel-cards-slider .star-rating {
        margin: var(--spacing-1) var(--spacing-0);
    }

    .hotel-cards-slider .star-rating i {
        font-size: 16px;
        color: #ffd700;
    }

    /* Hotel Details - Mobile App Style */
    .hotel-cards-slider .hotel-details {
        margin: var(--spacing-2) var(--spacing-3) var(--spacing-0);
        padding: var(--spacing-2) var(--spacing-0);
        border-top: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
        gap: var(--spacing-3);
    }

    .hotel-cards-slider .hotel-detail-item {
        font-size: var(--font-size-xs);
        gap: var(--spacing-1);
    }

    .hotel-cards-slider .hotel-detail-item i {
        font-size: 18px;
        color: var(--color-primary-primary);
    }

    /* Hotel Footer - Mobile App Style */
    .hotel-cards-slider .hotel-footer {
        padding: var(--spacing-3);
        margin-top: var(--spacing-2);
        gap: var(--spacing-2);
    }

    .hotel-cards-slider .price {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        color: light-dark(#2C2C2C, var(--color-text-primary));
    }

    .hotel-cards-slider .price small {
        font-size: 10px;
        color: light-dark(#999, var(--color-text-secondary));
    }

    .hotel-cards-slider .hotel-book-btn {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        border-radius: var(--border-radius-lg);
        white-space: nowrap;
        min-width: 100px;
    }

    /* Swiper Pagination - Mobile App Style */
    .hotel-slider-pagination {
        position: relative !important;
        margin-top: var(--spacing-4) !important;
        bottom: auto !important;
        text-align: center;
    }

    .hotel-slider-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
        opacity: 1;
        margin: 0 var(--spacing-1);
        transition: all 0.3s ease;
    }

    .hotel-slider-pagination .swiper-pagination-bullet-active {
        width: 24px;
        background: var(--color-primary-primary);
        border-radius: var(--border-radius-full);
    }

    /* Smooth scrolling for slider */
    .hotel-cards-slider {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hotel-cards-slider::-webkit-scrollbar {
        display: none;
    }

    /* Card hover effect for mobile */
    .hotel-cards-slider .hotel-card:active {
        transform: scale(0.98);
    }
}

/* Extra Small Mobile - 480px and below */
@media (max-width: 480px) {
    .hotel-cards-slider .swiper-slide {
        width: 300px !important;
    }

    .hotel-cards-slider .hotel-image {
        height: 220px;
    }

    .popular-header h2 {
        font-size: var(--font-size-xl) !important;
    }

    .hotel-cards-slider .hotel-info-box {
        margin: calc(var(--spacing-0) - var(--spacing-8)) var(--spacing-2) var(--spacing-0);
        padding: var(--spacing-3);
    }

    .hotel-cards-slider .hotel-info-box h4 {
        font-size: var(--font-size-base);
    }
}

/* ============================================
   Popular Destinations Section
   ============================================ */
.popular-destinations-section {
    position: relative;
    padding: var(--spacing-14) var(--spacing-0);
    background: light-dark(#FFF0EC, #0f1a2a);
    /* background-image: url('../images/layer.png'),
                    radial-gradient(circle at 20% 50%, rgba(255, 182, 193, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(255, 182, 193, 0.08) 0%, transparent 50%); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.popular-destinations-header {
    text-align: center;
    margin-bottom: var(--spacing-10);
}

.popular-destinations-header h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);
    font-family: var(--font-family-heading);
    line-height: var(--line-height-tight);
}

.destinations-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    margin: var(--spacing-0);
}

.destinations-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-4);
    overflow-x: auto;
    padding: var(--spacing-2) var(--spacing-0) var(--spacing-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.destinations-grid::-webkit-scrollbar {
    height: 6px;
}

.destinations-grid::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-full);
}

.destinations-grid::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
    border-radius: var(--border-radius-full);
}

.destinations-grid::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-primary);
}

.destination-card-wrapper {
    flex: 0 0 auto;
    width: 260px;
    min-width: 260px;
}

/* Destination Card */
.destination-card {
    position: relative;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: var(--transition-all);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.destination-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid #2196F3;
}

.destination-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.destination-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-all);
}

.destination-card:hover .destination-image img {
    transform: scale(1.05);
}

.destination-content {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-8);
    flex: 1;
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
}

.destination-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-1);
    line-height: var(--line-height-tight);
}

.destination-hotels {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--spacing-0);
    font-weight: var(--font-weight-normal);
}

.destination-link {
    position: absolute;
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    width: 36px;
    height: 36px;
    background: var(--color-bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: var(--transition-all);
    z-index: 2;
}

.destination-link i {
    font-size: 18px;
    transition: var(--transition-all);
}

.destination-link:hover {
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-text-primary);
}

.destination-link:hover i {
    transform: translateX(2px);
}

/* Call to Action Card */
.destination-cta-card {
    background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-6) var(--spacing-5);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
    transition: var(--transition-all);
}

.destination-cta-card:hover {
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
}

.cta-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-6);
    line-height: var(--line-height-relaxed);
}

.cta-button {
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    border: var(--border-width-none);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-all);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: var(--color-text-inverse);
    text-decoration: none;
}

.cta-button i {
    font-size: var(--font-size-base);
    transition: var(--transition-all);
}

.cta-button:hover i {
    transform: translateX(3px);
}

/* Responsive Design for Popular Destinations */
@media (max-width: 991px) {
    .destination-card-wrapper {
        width: 250px;
        min-width: 250px;
    }

    .destination-image {
        height: 150px;
    }

    .destination-cta-card {
        min-height: 280px;
        padding: var(--spacing-5) var(--spacing-4);
    }

    .cta-title {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 768px) {
    .popular-destinations-section {
        padding: var(--spacing-8) var(--spacing-0);
    }

    .popular-destinations-header h2 {
        font-size: var(--font-size-2xl);
    }

    .destinations-subtitle {
        font-size: var(--font-size-sm);
    }

    .destination-card-wrapper {
        width: 260px;
        min-width: 260px;
    }

    .destination-image {
        height: 180px;
    }

    .destination-content {
        padding: var(--spacing-3) var(--spacing-3) var(--spacing-6);
    }

    .destination-name {
        font-size: var(--font-size-base);
    }

    .destination-link {
        width: 32px;
        height: 32px;
        bottom: var(--spacing-3);
        right: var(--spacing-3);
    }

    .destination-link i {
        font-size: 16px;
    }

    .destination-cta-card {
        min-height: 240px;
        padding: var(--spacing-4) var(--spacing-3);
    }

    .cta-title {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-4);
    }

    .cta-button {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 576px) {
    .destination-card-wrapper {
        width: 85%;
        min-width: 85%;
    }
}

/* ============================================
   Main Awards Section
   ============================================ */
.main_awards {
    background: #fff2eb;
    /* Custom color - keep as is */
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-2);
}

.page_head_h3 {
    text-align: center;
    margin: var(--spacing-0);
    margin-bottom: var(--spacing-10);
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-none);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
}

.partners {
    display: flex;
    gap: var(--spacing-12);
    flex-wrap: wrap;
    justify-content: center;
    width: var(--width-full);
}

.partner img {
    max-width: 130px;
    /* Custom value - keep as is */
    max-height: 75px;
    /* Custom value - keep as is */
}

.partner span {
    margin-top: var(--spacing-2);
    color: var(--color-text-primary);
    font-size: 0.9em;
    /* Custom value - keep as is */
}

/* ============================================
   Why Choose Section
   ============================================ */
.why_choose {
    padding: var(--spacing-10) var(--spacing-0) var(--spacing-12);
    background: var(--color-bg-primary);
    float: left;
    width: var(--width-full);
    position: relative;
    overflow: hidden;
    z-index: var(--z-index-base);
}

.choose_us_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
}

.choose_us_left {
    flex: 1;
}

.choose_us_left img {
    width: var(--width-full);
    height: var(--height-full);
    object-fit: cover;
}

.choose_us_right {
    flex: 1;
    text-align: left;
}

.choose_us_right h3 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-7);
    color: var(--color-text-primary);
}

.choose_widget {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.widget_icon {
    flex-shrink: var(--spacing-0);
}

.widget_icon img {
    width: var(--size-lg);
    height: var(--size-lg);
}

.widget_desc h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-1);
    color: var(--color-text-primary);
}

.widget_desc p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ============================================
   Curated Travel Package Section
   ============================================ */
.curated_trvl_pckg {
    padding: var(--spacing-10) var(--spacing-0) var(--spacing-10);
    background-size: cover;
    position: relative;
    background-color: var(--color-bg-primary);
}

.hdng {
    text-align: center;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
}

.hdng h3 {
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    position: relative;
    top: var(--spacing-1);
}

.carousel-container {
    position: relative;
    max-width: var(--width-full);
    overflow: visible;
}

.carousel {
    height: 650px !important;
    /* Custom value - keep as is */
    perspective: 254px !important;
    /* Custom value - keep as is */
    overflow-y: clip;
}

.carousel-item {
    cursor: grab !important;
    width: 400px !important;
    /* Custom value - keep as is */
    opacity: var(--opacity-100) !important;
    height: auto !important;
}

.carousel-item img {
    width: var(--width-full) !important;
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius-2xl);
    height: 560px;
    /* Custom value - keep as is */
}

.carousel-arrow {
    position: absolute;
    bottom: -145px;
    /* Custom value - keep as is */
    transform: translateY(-50%);
    background-color: var(--color-primary-primary);
    color: light-dark(var(--color-black), var(--color-text-primary));
    font-size: var(--font-size-2xl);
    padding: var(--spacing-0);
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    z-index: var(--z-index-base);
    width: var(--size-xl);
    height: var(--size-xl);
    line-height: var(--size-xl);
    text-align: center;
    user-select: none;
}

.carousel-arrow.left {
    right: var(--spacing-10);
}

.carousel-arrow.right {
    right: calc(var(--spacing-0) - var(--spacing-7));
}

.carousel-arrow i {
    position: relative;
    top: var(--spacing-2);
    color: var(--color-white);
    font-weight: var(--font-weight-thin);
}

.curated_trip_btm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: var(--z-index-base);
}

.curated_trip_btm h3 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    text-align: center;
}

.curated_trip_btm a {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-align: center;
    display: block;
    padding: var(--spacing-2);
    border: var(--border-width-thin) var(--border-style-solid) #3b800d;
    /* Custom color - keep as is */
    width: 15%;
    /* Custom percentage - keep as is */
    border-radius: var(--spacing-12);
    background-color: #3b800d;
    /* Custom color - keep as is */
}

/* ============================================
   Trending Holiday Destinations Section
   ============================================ */
.trending-holiday-section {
    position: relative;
    padding: var(--spacing-14) var(--spacing-0);
    background: light-dark(#FFF0EC, #0f1a2a);
    /* float: left; */
    width: var(--width-full);
}

.trending-holiday-header {
    text-align: left;
    margin-bottom: var(--spacing-10);
}

.trending-holiday-header h2 {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);
    font-family: var(--font-family-heading);
    line-height: 47px;
    margin-bottom: 8px;
}

.holiday-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    font-weight: 400;
    margin: var(--spacing-0);
    line-height: 19px;
}

.holiday-packages-slider {
    position: relative;
    padding: var(--spacing-2) var(--spacing-0);
    /* overflow: visible; */
    /* overflow-x: hidden; */
    margin: 0 -5px;
}

.holiday-packages-slider .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.holiday-packages-slider .swiper-slide {
    height: auto;
    display: flex;
    align-items: stretch;
}

.holiday-packages-slider .swiper-slide .holiday-card-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

/* Swiper Navigation Buttons */
.holiday-packages-slider .swiper-button-next, .holiday-packages-slider .swiper-button-prev {
    width: 48px;
    height: 48px;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-full);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: var(--transition-all);
    margin-top: 0;
    top: -23px;
    transform: translateY(-50%);
    color: var(--color-text-primary);
}

.holiday-packages-slider .swiper-button-next {
    right: 24px;
}

.holiday-packages-slider .swiper-button-prev {
    left: 24px;
}

.holiday-packages-slider .swiper-button-next::after, .holiday-packages-slider .swiper-button-prev::after {
    display: none;
}

.holiday-packages-slider .swiper-button-next i, .holiday-packages-slider .swiper-button-prev i {
    font-size: var(--font-size-2xl);
    line-height: 1;
    color: var(--color-text-primary);
}

.holiday-packages-slider .swiper-button-next:hover, .holiday-packages-slider .swiper-button-prev:hover {
    background: var(--color-primary-primary);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(240, 152, 20, 0.3);
}

.holiday-packages-slider .swiper-button-next:hover i, .holiday-packages-slider .swiper-button-prev:hover i {
    color: var(--color-text-inverse);
}

.holiday-packages-slider .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.holiday-card-wrapper {
    padding: 0 5px;
}

.holiday-card {
    position: relative;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-2xl);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: var(--transition-all);
    cursor: pointer;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.holiday-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.holiday-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.holiday-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-all);
}

.holiday-card:hover .holiday-image img {
    transform: scale(1.1);
}

.holiday-overlay {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    z-index: 2;
}

.holiday-image-caption {
    display: none;
}

.holiday-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.holiday-card-link:hover, .holiday-card-link:focus {
    text-decoration: none;
    color: inherit;
}

.holiday-badge {
    background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%);
    color: var(--color-text-inverse);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.holiday-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.holiday-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-2);
}

.holiday-location i {
    font-size: var(--font-size-base);
    color: var(--color-primary-primary);
}

.holiday-title {
    font-size: 24px;
    font-weight: 600;
    color: #00334D;
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-3);
    line-height: 28px;
}

.holiday-duration {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    background: #423B4C;
    color: #fff;
    line-height: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    bottom: 24px;
    z-index: 1;
    left: 24px;
}

.holiday-duration i {
    font-size: var(--font-size-base);
    color: var(--color-primary-primary);
}

.holiday-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--spacing-4);
    border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color-light);
    gap: var(--spacing-4);
}

.holiday-price {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal); margin-right:5px;
}

.price-amount {
    font-size: 20px;
    font-weight: 600;
    color: #00334D;
    line-height: 23px;
}

.holiday-view-btn {
    background: linear-gradient(135deg, var(--color-primary-primary) 0%, var(--color-primary-midtone) 100%);
    color: var(--color-text-inverse);
    border: var(--border-width-none);
    border-radius: 25px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-all);
    box-shadow: 0 6px 16px -8px #F97A17;
    white-space: nowrap;
    line-height: 14px;
    letter-spacing: 0.2px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    /* letter-spacing: 0.08em; */
    /* text-transform: uppercase; */
    color: #fff;
    background: #F97A17;
    box-shadow: 0 6px 16px -8px #F97A17;
    font-weight: 500;
    line-height: 22px;
}

.holiday-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 152, 20, 0.4);
    color: var(--color-text-inverse);
    text-decoration: none;
}

.holiday-view-btn i {
    font-size: var(--font-size-base);
    transition: var(--transition-all);
}

.holiday-view-btn:hover i {
    transform: translateX(4px);
}

.holiday-view-all {
    text-align: center;
    margin-top: var(--spacing-8);
}

.view-all-packages-btn {
    background: var(--color-bg-primary);
    color: var(--color-primary-primary);
    border: 2px solid var(--color-primary-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-all);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-all-packages-btn:hover {
    background: var(--color-primary-primary);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 152, 20, 0.3);
    text-decoration: none;
}

.view-all-packages-btn i {
    font-size: var(--font-size-lg);
    transition: var(--transition-all);
}

.view-all-packages-btn:hover i {
    transform: translateX(4px);
}

/* Responsive Design for Trending Holiday Section */
@media (max-width: 991px) {
    .holiday-packages-slider .swiper-button-prev {
        left: -12px !important;
    }

    .holiday-packages-slider .swiper-button-next {
        right: -12px !important;
    }

    .holiday-packages-slider .swiper-button-prev, .holiday-packages-slider .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .holiday-image {
        height: 240px;
    }
}

@media (max-width: 768px) {
    .trending-holiday-section {
        padding: var(--spacing-8) var(--spacing-0);
    }

    .trending-holiday-header h2 {
        font-size: var(--font-size-2xl);
    }

    .holiday-subtitle {
        font-size: var(--font-size-sm);
    }

    .holiday-packages-slider .swiper-button-prev {
        left: 0 !important;
    }

    .holiday-packages-slider .swiper-button-next {
        right: 0 !important;
    }

    .holiday-packages-slider .swiper-button-prev, .holiday-packages-slider .swiper-button-next {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9) !important;
    }

    .holiday-packages-slider .swiper-button-prev i, .holiday-packages-slider .swiper-button-next i {
        font-size: var(--font-size-xl) !important;
    }

    .holiday-image {
        height: 220px;
    }

    .holiday-footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
    }

    .holiday-price {
        text-align: center;
    }

    .holiday-view-btn {
        width: 100%;
        justify-content: center;
    }

    .view-all-packages-btn {
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   Where We Go Section
   ============================================ */
.whereWeGoSec {
    background: url(../images/exploreTravelOptionBG.jpg) no-repeat center center;
    background-size: cover;
    height: 480px;
    /* Custom value - keep as is */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-5);
}

/* ============================================
   Why Travel With Us Section
   ============================================ */
.why-travel-section {
    padding: var(--spacing-16) var(--spacing-0);
    background: var(--color-bg-primary);
}

.why-travel-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.why-travel-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);
    font-family: var(--font-family-heading);
    line-height: var(--line-height-tight);
}

.why-travel-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    margin: var(--spacing-0);
}

.why-travel-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
    max-width: 100%;
    margin: var(--spacing-0) auto;
    padding: var(--spacing-0) var(--spacing-4);
}

.why-travel-card {
    background: var(--color-white);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-8) var(--spacing-6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: var(--transition-all);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.why-travel-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Card Background Colors - Matching exact pastel colors from design */
.card-best-price {
    background: #E0F7F4;
}

.card-24-7 {
    background: #FCE7F3;
}

.card-satisfaction {
    background: #DBEAFE;
}

.card-easy-booking {
    background: #F3E8FF;
}

.why-travel-icon-wrapper {
    margin-bottom: var(--spacing-4);
}

.why-travel-icon {
    width: 72px;
    height: 72px;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition-all);
}

.why-travel-card:hover .why-travel-icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.why-travel-icon i {
    font-size: 36px;
    line-height: 1;
}

/* Icon Colors - Matching exact colors from design */
.card-best-price .why-travel-icon i {
    color: #F59E0B;
    /* Golden/Amber */
}

.card-24-7 .why-travel-icon i {
    color: #EF4444;
    /* Red */
}

.card-satisfaction .why-travel-icon i {
    color: #3B82F6;
    /* Blue */
}

.card-easy-booking .why-travel-icon i {
    color: #10B981;
    /* Green/Emerald */
}

.why-travel-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: #1F2937;
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-3);
    font-family: var(--font-family-heading);
}

.why-travel-card-desc {
    font-size: var(--font-size-sm);
    color: #6B7280;
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-6);
    flex: 1;
}

.why-travel-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: #1F2937;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: var(--transition-all);
    margin-top: auto;
}

.why-travel-link:hover {
    color: var(--color-primary-primary);
    gap: var(--spacing-2);
}

.why-travel-link i {
    font-size: var(--font-size-base);
    transition: var(--transition-all);
    vertical-align: middle;
}

.why-travel-link:hover i {
    transform: translateX(4px);
}

.whereWeGoSec-content {
    background-color: rgba(0, 0, 0, 0.25);
    /* Custom rgba - keep as is */
    backdrop-filter: blur(12px);
    /* Custom value - keep as is */
    border-radius: var(--border-radius-xl);
    text-align: center;
    color: var(--color-white);
    max-width: 800px;
    /* Custom value - keep as is */
    width: var(--width-full);
    padding: var(--spacing-12) var(--spacing-7);
    box-shadow: var(--shadow-lg);
}

.whereWeGoSec-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    margin-bottom: var(--spacing-5);
}

.whereWeGoSec-para {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    margin-bottom: var(--spacing-7);
}

.BtnExplore {
    background-color: #2c9a36;
    /* Custom color - keep as is */
    color: var(--color-white);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-base);
    padding: var(--spacing-3) var(--spacing-7);
    border-radius: var(--spacing-6);
    border: var(--border-width-none);
    transition: background-color var(--transition-slow);
}

.BtnExplore:hover {
    background-color: #24812b;
    /* Custom color - keep as is */
    color: var(--color-white);
}

/* ============================================
   Top Airline Partner Section
   ============================================ */
.airline-partner-section {
    padding: 48px 32px;
    /* background: var(--color-bg-airline-section); */
    position: relative;
    width: var(--width-full);
    display: block;
    clear: both;
    border: 1px solid #E3E5E8;
    background: #fff;
    border-radius: 24px;
    margin-bottom: 25px;
    box-shadow: 0 8px 24px -12px #11182726;
}

.airline-partner-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover, cover, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center, center, center;
    opacity: 0.7;
    pointer-events: none;
}

.airline-partner-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
    position: relative;
    z-index: 1;
}

.airline-partner-title {
    font-size: 24px;
    font-weight: 700;
    color: #00334D;
    margin: 0;
    font-family: var(--font-family-heading);
    line-height: var(--line-height-tight);
    text-align: center;
    margin-bottom: 32px;
}

.airline-partner-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    margin: var(--spacing-0);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.airline-partner-slider {
    position: relative;
    width: auto;
    max-width: 100%;
    /* margin: 0 52px; */
    /* overflow: visible; */
    box-sizing: border-box;
}

.airline-partner-slider.swiper {
    /* overflow: hidden; */
}

.airline-partner-slider .swiper-wrapper {
    align-items: center;
    box-sizing: border-box;
}

.airline-partner-slider .swiper-slide {
    margin: 0 10px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.airline-partner-card {
    background: var(--color-bg-primary);
    backdrop-filter: blur(10px);
    /* border: 1px solid #f6f6f6; */
    border-radius: var(--border-radius-xl);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    transition: var(--transition-all);
    cursor: pointer;
    height: 110px;
    width: 100%;
    flex-flow: column wrap;
}

/* .airline-partner-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
} */
.airline-logo-wrapper {
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-flow: column;
}

.airline-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* filter: brightness(0) invert(1);
  opacity: 0.9; */
    transition: var(--transition-all);
    max-height: 75px;
}

/* .airline-partner-card:hover .airline-logo {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  transform: scale(1.05);
} */
/* Swiper Navigation Buttons */
.airline-partner-slider .swiper-button-next, .airline-partner-slider .swiper-button-prev {
    width: 44px;
    height: 44px;
    background: var(--color-info);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-full);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition-all);
    margin-top: 0;
    display: none;
    top: 50%;
    transform: translateY(-50%);
    color: #8F96A3;
    border: 1px solid #E3E5E8;
    background: var(--color-bg-primary);
}

.airline-partner-slider .swiper-button-next {
    right: 0;
}

.airline-partner-slider .swiper-button-prev {
    left: 0;
}

.airline-partner-slider .swiper-button-next::after, .airline-partner-slider .swiper-button-prev::after {
    display: none;
}

.airline-partner-slider .swiper-button-next i, .airline-partner-slider .swiper-button-prev i {
    font-size: var(--font-size-xl);
    line-height: 1;
    color: #333;
}

.airline-partner-slider .swiper-button-next:hover, .airline-partner-slider .swiper-button-prev:hover {
    /* background: rgba(255, 255, 255, 0.2); */
    /* border-color: rgba(255, 255, 255, 0.3); */
    /* transform: translateY(-50%) scale(1.1); */
    /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); */
}

.airline-partner-slider .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 767px) {
    .airline-partner-section {
        padding: 24px 0 20px;
        background: var(--color-bg-primary, #fff);
    }

    .airline-partner-section::before {
        display: none;
    }

    .airline-partner-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .airline-partner-header {
        text-align: left;
        margin-bottom: 14px;
    }

    .airline-partner-title {
        font-size: 1.25rem;
        line-height: 1.25;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }

    .airline-partner-subtitle {
        font-size: 0.8125rem;
        line-height: 1.45;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        color: var(--color-text-secondary, #6b7280);
    }

    .airline-partner-slider {
        padding: 0 0 28px;
        overflow: hidden;
    }

    .airline-partner-slider .swiper-slide {
        height: auto;
    }

    .airline-partner-card {
        min-height: 72px;
        padding: 12px 10px;
        border: 1px solid var(--border-color-light, #eef0f3);
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
        background: var(--color-bg-primary, #fff);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .airline-partner-card:active {
        transform: scale(0.98);
    }

    .airline-logo-wrapper {
        height: 52px;
        padding: 0;
    }

    .airline-logo {
        max-height: 44px;
        max-width: 92%;
    }

    .airline-partner-slider .swiper-button-next, .airline-partner-slider .swiper-button-prev {
        display: none !important;
    }

    .airline-swiper-pagination {
        display: block;
        bottom: 4px !important;
        line-height: 0;
    }

    .airline-swiper-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px !important;
        background: #d1d5db !important;
        opacity: 1;
        transition: width 0.25s ease, background-color 0.25s ease;
    }

    .airline-swiper-pagination .swiper-pagination-bullet-active {
        width: 18px;
        border-radius: 999px;
        background: var(--color-info, #008cff) !important;
    }
}

@media (min-width: 768px) {
    .airline-swiper-pagination {
        display: none;
    }

    .airline-partner-slider .swiper-button-next, .airline-partner-slider .swiper-button-prev {
        display: flex;
    }
}

/* ============================================
   Frequently Asked Questions Section
   ============================================ */
.faq-section {
    padding: var(--spacing-16) var(--spacing-0);
    background: linear-gradient(135deg, light-dark(#F5F5F5, #152238) 0%, light-dark(#E8E8E8, #0f1a2a) 100%);
    position: relative;
    float: left;
    width: var(--width-full);
    overflow: hidden;
}

/* .faq-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 10px, light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05)) 10px, light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05)) 20px),
    radial-gradient(circle at 85% 20%, light-dark(rgba(33, 150, 243, 0.05), rgba(33, 150, 243, 0.1)) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, light-dark(rgba(156, 39, 176, 0.05), rgba(156, 39, 176, 0.1)) 0%, transparent 50%);
  pointer-events: none;
} */
.faq-header {
    text-align: center;
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 1;
}

.faq-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: light-dark(#2C3E50, var(--color-text-primary));
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-2);
    font-family: var(--font-family-heading);
    line-height: var(--line-height-tight);
}

.faq-subtitle {
    font-size: var(--font-size-base);
    color: light-dark(#7F8C8D, var(--color-text-secondary));
    font-weight: var(--font-weight-normal);
    margin: var(--spacing-0);
}

.faq-categories {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-10);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.faq-category-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: light-dark(var(--color-white), var(--color-bg-secondary));
    border: 1px solid light-dark(#E0E0E0, var(--border-color-medium));
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: light-dark(#5A5A5A, var(--color-text-primary));
    cursor: pointer;
    transition: var(--transition-all);
    font-family: var(--font-family-base);
}

.faq-category-btn:hover {
    border-color: var(--color-primary-primary);
    color: var(--color-primary-primary);
    background: light-dark(rgba(240, 152, 20, 0.05), rgba(240, 152, 20, 0.15));
}

.faq-category-btn.active {
    background: var(--color-primary-primary);
    border-color: var(--color-primary-primary);
    color: var(--color-white);
}

.faq-category-btn i {
    font-size: var(--font-size-lg);
}

.faq-content-card {
    background: light-dark(var(--color-white), var(--color-bg-primary));
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-8) var(--spacing-6);
    box-shadow: light-dark(0 4px 20px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: var(--spacing-0) auto;
}

.faq-item {
    border-bottom: 1px solid light-dark(#F0F0F0, var(--border-color-light));
    padding-bottom: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    transition: var(--transition-all);
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: var(--spacing-0);
    padding-bottom: var(--spacing-0);
}

.faq-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    cursor: pointer;
    user-select: none;
}

.faq-number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: light-dark(#2C3E50, var(--color-text-primary));
    min-width: 50px;
    line-height: 1;
}

.faq-question {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: light-dark(#2C3E50, var(--color-text-primary));
    margin: var(--spacing-0);
    flex: 1;
    line-height: var(--line-height-relaxed);
}

.faq-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: light-dark(var(--color-white), var(--color-bg-secondary));
    border: 1px solid light-dark(#E0E0E0, var(--border-color-medium));
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-all);
    flex-shrink: 0;
    padding: var(--spacing-0);
}

.faq-item.active .faq-toggle {
    background: light-dark(#2C3E50, var(--color-text-primary));
    border-color: light-dark(#2C3E50, var(--color-text-primary));
    color: var(--color-white);
}

.faq-toggle:hover {
    border-color: var(--color-primary-primary);
    background: light-dark(rgba(240, 152, 20, 0.05), rgba(240, 152, 20, 0.15));
}

.faq-item.active .faq-toggle:hover {
    background: light-dark(#1a1a1a, #3a3a3a);
    border-color: light-dark(#1a1a1a, #3a3a3a);
}

.faq-toggle i {
    font-size: var(--font-size-lg);
    color: light-dark(#2C3E50, var(--color-text-primary));
    transition: var(--transition-all);
}

.faq-item.active .faq-toggle i {
    color: var(--color-white);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) 66px;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: var(--spacing-4) var(--spacing-0) var(--spacing-0) 66px;
}

.faq-answer p {
    font-size: var(--font-size-base);
    color: light-dark(#7F8C8D, var(--color-text-secondary));
    line-height: var(--line-height-relaxed);
    margin: var(--spacing-0);
}

/* ============================================
   Top Flight Routes Section
   ============================================ */
.topFlightRoutes {
    /* background-color: var(--color-bg-primary); */
    padding: 24px 0;
    float: left;
    width: var(--width-full);
}

.route-sec-header {
    text-align: left;
    margin-bottom: var(--spacing-2);
    position: relative;
}

.route-sec-title {
    font-size: 40px;
    font-weight: 700;
    color: #00334D;
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-3);
    font-family: var(--font-family-heading);
    line-height: 47px;
    letter-spacing: 0.2px;
    position: relative;
    display: inline-block;
    text-transform: capitalize;
}

.route-sec-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    font-weight: 400;
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-0);
    line-height: 19px;
}

/* Flight Routes Grid Layout */
.flight-routes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-0);
    padding: var(--spacing-4) var(--spacing-0);
}

.route-card-wrapper {
    width: 33.33%;
    padding: 5px;
}

/* Grid Card Style */
.route-card-link {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.route-card-grid {
    border: 2px solid light-dark(#F0F0F0, rgba(255, 255, 255, 0.08));
    border-radius: var(--border-radius-2xl);
    background: linear-gradient(135deg, light-dark(#FFFFFF, rgba(255, 255, 255, 0.02)) 0%, light-dark(#FAFAFA, rgba(255, 255, 255, 0.01)) 100%);
    padding: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.route-card-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(240, 152, 20, 0.05), transparent);
    transition: left 0.6s ease;
}

.route-card-grid:hover::before {
    left: 100%;
}

.route-card-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(240, 152, 20, 0.02) 0%, rgba(240, 152, 20, 0.01) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: var(--border-radius-2xl);
}

.route-card-grid:hover::after {
    opacity: 1;
}

.route-card-grid:hover {
    border-color: var(--color-primary-primary);
    box-shadow: 0 8px 24px rgba(240, 152, 20, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px) scale(1.01);
    background: linear-gradient(135deg, light-dark(#FFFFFF, rgba(255, 255, 255, 0.05)) 0%, light-dark(#FFFBF5, rgba(255, 255, 255, 0.03)) 100%);
}

.route-departure, .route-arrival {
    flex: 1;
    display: flex;
    /* width: 43%; */
    flex-direction: column;
    /* gap: var(--spacing-2); */
    position: relative;
    z-index: 1;
    align-items: flex-end;
}

.route-city {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
    position: relative;
}

.route-card-grid:hover .route-city {
    color: var(--color-primary-primary);
}

.route-airport {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    color: #737B8C;
    line-height: var(--line-height-relaxed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.route-card-grid:hover .route-airport {
    opacity: 1;
}

.route-connection {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width: 14%; */
    flex-shrink: 0;
    z-index: 1;
}

.route-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: calc(100% + 20px);
    background-image: linear-gradient(to bottom, transparent 0%, transparent 42%, light-dark(#D0D0D0, rgba(255, 255, 255, 0.2)) 42%, light-dark(#D0D0D0, rgba(255, 255, 255, 0.2)) 58%, transparent 58%, transparent 100%);
    background-size: 2px 14px;
    background-repeat: repeat-y;
    transition: background-image 0.3s ease;
    display: none;
}

.route-card-grid:hover .route-line {
    background-image: linear-gradient(to bottom, transparent 0%, transparent 42%, rgba(240, 152, 20, 0.4) 42%, rgba(240, 152, 20, 0.4) 58%, transparent 58%, transparent 100%);
}

.route-icon-wrapper {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(240, 152, 20, 0.1) 0%, rgba(240, 152, 20, 0.05) 100%);
    border: 2px solid rgba(240, 152, 20, 0.2);
    border-radius: var(--border-radius-full);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(240, 152, 20, 0.1);
}

.route-card-grid:hover .route-icon-wrapper {
    background: linear-gradient(135deg, var(--color-primary-primary) 0%, var(--color-primary-midtone) 100%);
    border-color: var(--color-primary-primary);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 16px rgba(240, 152, 20, 0.3);
}

.route-airplane-icon {
    font-size: var(--font-size-xl);
    color: var(--color-primary-primary);
    transform: rotate(90deg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(240, 152, 20, 0.2));
    line-height: 35px !important;
}

.route-card-grid:hover .route-airplane-icon {
    color: var(--color-white);
    transform: rotate(90deg) scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.btn-destination {
    font-family: var(--font-family-base);
    display: inline-block;
    border: var(--border-width-thin) var(--border-style-solid) var(--border-color-medium);
    border-radius: var(--border-radius-full);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: light-dark(#F8F9FA, var(--color-bg-secondary));
    transition: var(--transition-all);
    white-space: nowrap;
    cursor: pointer;
}

.btn-destination:hover {
    background: var(--color-primary-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary-primary);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(240, 152, 20, 0.3);
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 991px) {
    .flight-routes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }
}

@media (max-width: 767px) {
    .whereWeGoSec-title {
        font-size: var(--font-size-4xl);
    }

    .tab-content.custmtab {
        background: none !important;
        z-index: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .whereWeGoSec-para {
        font-size: var(--font-size-sm);
    }

    .whereWeGoSec-content {
        padding: var(--spacing-7) var(--spacing-5);
    }

    .hotel-image img {
        height: 220px;
        /* Custom value - keep as is */
    }

    .why-travel-section {
        padding: var(--spacing-12) var(--spacing-0);
    }

    .why-travel-title {
        font-size: var(--font-size-3xl);
    }

    .why-travel-subtitle {
        font-size: var(--font-size-sm);
    }

    .why-travel-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-5);
        padding: var(--spacing-0) var(--spacing-4);
    }

    .why-travel-card {
        padding: var(--spacing-6) var(--spacing-5);
    }

    .why-travel-icon {
        width: 70px;
        height: 70px;
    }

    .why-travel-icon i {
        font-size: 36px;
    }

    .why-travel-card-title {
        font-size: var(--font-size-lg);
    }

    .holiday-packages-slider .swiper-button-next, .holiday-packages-slider .swiper-button-prev, .flight-routes-slider .swiper-button-next, .flight-routes-slider .swiper-button-prev {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9) !important;
    }

    .holiday-packages-slider .swiper-button-next, .flight-routes-slider .swiper-button-next {
        right: 0 !important;
    }

    .holiday-packages-slider .swiper-button-prev, .flight-routes-slider .swiper-button-prev {
        left: 0 !important;
    }

    .holiday-packages-slider .swiper-button-next i, .holiday-packages-slider .swiper-button-prev i, .route-sec-title {
        font-size: var(--font-size-3xl);
    }

    .route-sec-title::after {
        width: 50px;
        height: 3px;
    }

    .why-travel-section {
        padding: var(--spacing-12) var(--spacing-0);
    }

    .why-travel-title {
        font-size: var(--font-size-3xl);
    }

    .why-travel-subtitle {
        font-size: var(--font-size-sm);
    }

    .why-travel-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-5);
        padding: var(--spacing-0) var(--spacing-4);
    }

    .why-travel-card {
        padding: var(--spacing-6) var(--spacing-5);
    }

    .why-travel-icon {
        width: 70px;
        height: 70px;
    }

    .why-travel-icon i {
        font-size: 36px;
    }

    .why-travel-card-title {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    .whereWeGoSec-title {
        font-size: var(--font-size-3xl);
    }
}

/* ============================================
   Why Travel Feature Strip (UI refresh)
   ============================================ */
.why-travel-section {
    padding: var(--spacing-8) var(--spacing-0) var(--spacing-10);
    background: #f8f9fa;
    position: relative;
}

.why-travel-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--color-bg-primary);
    /* border: 1px solid var(--border-color-light); */
    border-radius: 10px;
    overflow: hidden;
    gap: 24px;
}

.why-travel-feature {
    border: 0;
    border: 1px solid var(--border-color-light);
    background: #fff;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    box-shadow: 0 8px 24px -12px #11182726;
    border-radius: 16px;
    flex-flow: column;
    align-items: flex-start;
}

.why-travel-feature:last-child {
    border-right: 0;
}

.why-travel-icon-wrap {
    flex: 0 0 auto;
    margin: 0 0 5px;
}

.why-travel-feature .why-travel-icon {
    width: 50px;
    height: 50px;
    /* border-radius: 50%; */
    background: var(--color-info-lightest);
    /* border: 2px solid var(--color-info); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.why-travel-feature .why-travel-icon i {
    font-size: 26px;
    color: #009FB6;
    /* font-weight: 300; */
}

.why-travel-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.why-travel-feature .why-travel-card-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 23px;
    color: #00334D;
    font-weight: 700;
}

.why-travel-feature .why-travel-card-desc {
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: #737B8C;
}

@media (max-width: 991px) {
    .why-travel-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-travel-feature {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .why-travel-feature:nth-child(odd) {
        border-right: 1px solid #e5e7eb;
    }

    .why-travel-feature:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

@media (max-width: 576px) {
    .why-travel-strip {
        grid-template-columns: 1fr;
    }

    .why-travel-feature, .why-travel-feature:nth-child(odd) {
        border-right: 0;
    }

    .why-travel-feature:not(:last-child) {
        border-bottom: 1px solid #e5e7eb;
    }

    .why-travel-feature:last-child {
        border-bottom: 0;
    }
}

/* ============================================
   Top Flight Routes (Static premium refresh)
   ============================================ */
.topFlightRoutes {
    position: relative;
    background: #F8F9FA;
    overflow: hidden;
}

.topFlightRoutes::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='360' viewBox='0 0 900 360'%3E%3Cg fill='%230393f2' fill-opacity='0.07'%3E%3Cpath d='M78 145l24-18 40 6 28-12 18 10 30-6 14 14-14 20-32 6-24-8-26 10-34-4z'/%3E%3Cpath d='M260 120l38-14 50 4 36-12 44 12 16 22-22 14-32-2-30 8-18 20-38-6-40-18z'/%3E%3Cpath d='M470 128l30-8 46 8 22-10 30 8 12 20-20 18-38 2-20 14-42-4-24-16z'/%3E%3Cpath d='M620 150l34-12 52 8 34-10 42 14 12 20-22 12-30 0-34 10-36-6-20-12z'/%3E%3Cpath d='M300 220l26-10 30 4 26-8 24 8 8 18-16 10-24 2-20 10-30-4-16-14z'/%3E%3Cpath d='M560 222l30-10 34 8 28-10 22 12 6 18-14 10-22 2-22 10-30-6-22-14z'/%3E%3C/g%3E%3C/svg%3E"); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* opacity: 0.6; */
    pointer-events: none;
}

.topFlightRoutes .container {
    position: relative;
    z-index: 1;
}

.flight-routes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: var(--spacing-5) var(--spacing-0) var(--spacing-0);
    margin: 0 - var(--spacing-5);
}

.route-card-wrapper {
    width: auto;
    padding: 0;
}

.route-card-grid, .route-card-grid:hover {
    border: 1px solid #E3E5E8;
    border-radius: 14px;
    background: var(--color-bg-primary);
    box-shadow: 0 8px 24px -12px #11182726;
    transform: none;
}

.route-card-grid {
    transition: none;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    justify-content: space-between;
    flex-flow: row;
    align-items: flex-end;
}

.route-card-grid::before, .route-card-grid::after {
    content: none;
}

.route-card-media {
    width: 74px;
    min-width: 74px;
    height: 74px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color-light);
    background: var(--color-bg-tertiary);
    display: none;
}

.route-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.route-card-main {
    /* flex: 1; */
    /* min-width: 0; */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* gap: var(--spacing-2); */
    /* width: 100%; */
    max-width: 122px;
}

.route-city, .route-card-grid:hover .route-city {
    color: #00334D;
}

.route-airport, .route-card-grid:hover .route-airport {
    opacity: 1;
}

.route-line, .route-card-grid:hover .route-line {
    background-image: linear-gradient( to bottom, transparent 0%, transparent 42%, color-mix(in srgb, var(--color-info) 35%, transparent) 42%, color-mix(in srgb, var(--color-info) 35%, transparent) 58%, transparent 58%, transparent 100% );
}

.route-icon-wrapper, .route-card-grid:hover .route-icon-wrapper {
    width: 35px;
    height: 35px;
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    transform: none;
}

.route-airplane-icon, .route-card-grid:hover .route-airplane-icon {
    color: var(--color-info);
    transform: rotate(90deg);
    filter: none;
    /* line-height: 35px !important; */
}

@media (max-width: 991px) {
    .flight-routes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.route-airport-code {
    font-weight: 600;
    color: #00334D;
    font-size: 24px;
    line-height: 28px;
}

.route-card-media img[src=""], .route-card-media img:not([src]) {
    opacity: 0;
}

@media (max-width: 767px) {
    .topFlightRoutes {
        padding: 24px 0 20px;
    }

    .topFlightRoutes .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .route-sec-header {
        text-align: left;
        margin-bottom: 14px;
    }

    .route-sec-title {
        font-size: 1.25rem;
        line-height: 1.25;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }

    .route-sec-subtitle {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .flight-routes-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 0;
    }

    .route-card-grid {
        padding: 12px;
        gap: 12px;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .route-card-media {
        width: 52px;
        min-width: 52px;
        height: 52px;
        border-radius: 10px;
        flex-shrink: 0;
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }

    .route-card-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
        align-items: center;
        gap: 6px;
    }

    .route-departure, .route-arrival {
        width: auto;
        flex: initial;
        min-width: 0;
        gap: 2px;
    }

    .route-arrival {
        text-align: right;
    }

    .route-city {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .route-airport {
        font-size: 0.6875rem;
        line-height: 1.3;
    }

    .route-airport-name {
        display: none;
    }

    .route-airport-code {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--color-text-muted, #9ca3af);
        text-transform: uppercase;
    }

    .route-connection {
        position: relative;
        min-width: 44px;
        width: 44px;
        height: 36px;
        flex-shrink: 0;
    }

    .route-line {
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 2px;
        background-image: linear-gradient( to right, transparent 0%, transparent 8%, color-mix(in srgb, var(--color-info) 40%, transparent) 8%, color-mix(in srgb, var(--color-info) 40%, transparent) 92%, transparent 92%, transparent 100% );
        background-size: 6px 2px;
        background-repeat: repeat-x;
    }

    .route-icon-wrapper, .route-card-grid:hover .route-icon-wrapper {
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }

    .route-airplane-icon, .route-card-grid:hover .route-airplane-icon {
        font-size: 1rem;
        transform: rotate(90deg);
    }

    .route-card-wrapper {
        animation: homeMobileFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .route-card-wrapper:nth-child(1) {
        animation-delay: 0.04s;
    }

    .route-card-wrapper:nth-child(2) {
        animation-delay: 0.08s;
    }

    .route-card-wrapper:nth-child(3) {
        animation-delay: 0.12s;
    }

    .route-card-wrapper:nth-child(4) {
        animation-delay: 0.16s;
    }

    .route-card-wrapper:nth-child(5) {
        animation-delay: 0.2s;
    }

    .route-card-wrapper:nth-child(6) {
        animation-delay: 0.24s;
    }

    .route-card-link:active .route-card-grid {
        transform: scale(0.985);
        box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .route-card-wrapper {
        animation: none !important;
    }

    .route-card-link:active .route-card-grid {
        transform: none;
    }
}

/* ============================================
   Trending Holiday (Static clean refresh)
   ============================================ */
.trending-holiday-section {
    background: #f8f9fa;
    padding: 30px 0 24px;
}

.trending-holiday-header {
    margin-bottom: var(--spacing-4);
}

.trending-holiday-header h2 {
    color: #00334D;
}

.holiday-subtitle {
    color: #737B8C;
}

.holiday-card {
    background: var(--color-bg-primary);
    border: 1px solid #E3E5E8;
    border-radius: 16px;
    box-shadow: 0 8px 24px -12px #11182726;
    transition: none;
    cursor: default;
}

.holiday-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.holiday-image {
    height: 240px;
}

.holiday-image img, .holiday-card:hover .holiday-image img {
    transform: none;
    transition: none;
}

.holiday-badge {
    background: var(--color-info);
    color: var(--color-white);
    box-shadow: none;
    display: none;
}

.holiday-duration i {
    color: var(--color-info);
}

.holiday-footer {
    border-top: none;
}

.holiday-view-btn {
    background: #F97A17;
    color: var(--color-white);
    transition: none;
}

.holiday-view-btn:hover {
    transform: none;
    box-shadow: none;
    color: var(--color-white);
    text-decoration: none;
}

.holiday-view-btn i, .holiday-view-btn:hover i {
    transform: none;
    transition: none;
}

.holiday-packages-slider .swiper-button-next, .holiday-packages-slider .swiper-button-prev {
    background: var(--color-bg-primary);
    border: 1px solid var(--border-color-light);
    box-shadow: none;
    transition: none;
}

.holiday-packages-slider .swiper-button-next:hover, .holiday-packages-slider .swiper-button-prev:hover {
    background: var(--color-bg-primary);
    transform: translateY(-50%);
    box-shadow: none;
}

.holiday-packages-slider .swiper-button-next i, .holiday-packages-slider .swiper-button-prev i, .holiday-packages-slider .swiper-button-next:hover i, .holiday-packages-slider .swiper-button-prev:hover i {
    color: var(--color-info);
}

@media (max-width: 767px) {
    .trending-holiday-section {
        padding: 24px 0 20px;
    }

    .trending-holiday-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .trending-holiday-header {
        text-align: left;
        margin-bottom: 14px;
    }

    .trending-holiday-header h2 {
        font-size: 1.25rem;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    .holiday-subtitle {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .holiday-card-wrapper {
        padding: 0;
    }

    .holiday-card {
        border: none;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
        border-radius: 14px;
        overflow: hidden;
    }

    .holiday-card-link:active .holiday-card {
        transform: scale(0.985);
    }

    .holiday-image {
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 220px;
    }

    .holiday-overlay {
        inset: 0;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 12px;
        background: linear-gradient( 180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.08) 38%, rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.78) 100% );
    }

    .holiday-badge {
        align-self: flex-start;
        padding: 4px 10px;
        font-size: 0.625rem;
        border-radius: 999px;
    }

    .holiday-image-caption {
        display: block;
        margin-top: auto;
        padding-top: 8px;
    }

    .holiday-image-caption .holiday-title {
        margin: 0 0 6px;
        color: #fff;
        font-size: 1rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    }

    .holiday-price-overlay {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .holiday-price-overlay .price-label {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .holiday-price-overlay .price-amount {
        color: #fff;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.1;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    }

    .holiday-content {
        display: none !important;
    }

    .holiday-packages-slider {
        padding: 0 0 28px;
        overflow: hidden;
    }

    .holiday-packages-slider .swiper-button-next, .holiday-packages-slider .swiper-button-prev {
        display: flex !important;
        width: 34px;
        height: 34px;
        top: 42%;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid var(--border-color-light, #e5e7eb);
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12) !important;
        z-index: 3;
    }

    .holiday-packages-slider .swiper-button-prev {
        left: 4px !important;
    }

    .holiday-packages-slider .swiper-button-next {
        right: 4px !important;
    }

    .holiday-packages-slider .swiper-button-next:hover, .holiday-packages-slider .swiper-button-prev:hover {
        background: #fff !important;
        transform: translateY(-50%) scale(1.04);
    }

    .holiday-packages-slider .swiper-button-next i, .holiday-packages-slider .swiper-button-prev i {
        font-size: 1.25rem !important;
        color: var(--color-info, #008cff) !important;
    }

    .holiday-swiper-pagination {
        display: block;
        bottom: 4px !important;
        line-height: 0;
    }

    .holiday-swiper-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px !important;
        background: #d1d5db !important;
        opacity: 1;
        transition: width 0.25s ease, background-color 0.25s ease;
    }

    .holiday-swiper-pagination .swiper-pagination-bullet-active {
        width: 18px;
        border-radius: 999px;
        background: var(--color-primary-primary, #f09814) !important;
    }
}

@media (min-width: 768px) {
    .holiday-swiper-pagination {
        display: none;
    }
}

/* ============================================
   FAQ visual refresh (design system)
   ============================================ */
.faq-section {
    background: var(--color-bg-light-blue);
    display: none;
}

.faq-header {
    margin-bottom: var(--spacing-9);
}

.faq-title {
    color: var(--color-text-primary);
}

.faq-subtitle {
    color: var(--color-text-secondary);
}

.faq-categories {
    gap: 10px;
    margin-bottom: var(--spacing-8);
}

.faq-category-btn {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color-medium);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.faq-category-btn i {
    font-size: 16px;
    color: var(--color-info);
}

.faq-category-btn:hover {
    border-color: var(--color-info);
    background: var(--color-info-lightest);
    color: var(--color-info-dark);
}

.faq-category-btn.active {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
}

.faq-category-btn.active i {
    color: var(--color-white);
}

.faq-content-card {
    border: 1px solid var(--border-color-light);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

.faq-item {
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: var(--spacing-5);
    margin-bottom: var(--spacing-5);
}

.faq-number {
    color: var(--color-info);
    font-size: var(--font-size-2xl);
    min-width: 40px;
}

.faq-question {
    font-size: var(--font-size-base);
    line-height: 1.45;
}

.faq-toggle {
    border-radius: 10px;
    border-color: var(--border-color-medium);
}

.faq-item.active .faq-toggle {
    background: var(--color-info);
    border-color: var(--color-info);
}

.faq-toggle i {
    color: var(--color-info);
}

.faq-item.active .faq-toggle i {
    color: var(--color-white);
}

/**/
.secndblak {
    background: #fff;
    padding: 15px 12px;
    border: 1px solid #E3E5E8;
    border-radius: 12px;
    box-shadow: 0 2px 8px 0 #00000014;
    margin-bottom: 40px;
}

.plcetogo.destinatios input {
    /* padding-left: var(--spacing-3) !important; */
}

.padfive.thrdtraveller {
    padding: 0 8px !important;
}

/**/
.ggt-hero-root, .ggt-hero-root *, .ggt-hero-root *::before, .ggt-hero-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ggt-hero {
    position: relative;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* background:
      radial-gradient(120% 90% at 50% 0%, var(--ggt-navy-800) 0%, var(--ggt-navy-900) 45%, var(--ggt-navy-950) 100%); */
    padding: 40px 24px 112px;
}

/* soft curved horizon glow at the base, echoing the source image */
.ggt-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -55%;
    width: 160%;
    height: 70%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(79, 214, 232, 0.10) 0%, rgba(79, 214, 232, 0) 60%);
    pointer-events: none;
}

.ggt-hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.ggt-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 30px;
    background: color(srgb 1 1 1 / 0.2);
    /* border: 1px solid var(--ggt-pill-border); */
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    backdrop-filter: blur(6px);
    line-height: 16px;
    display: none;
}

.ggt-heading {
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;
    /* letter-spacing: -0.02em; */
    color: #ffffff;
}

.ggt-heading .ggt-accent {
    color: #009FB6;
    margin-right: var(--spacing-4);
}

.ggt-subtext {
    max-width: 600px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #F2F2F2;
}

.offer1 .offer-bg {
    background: #E5F2FF;
}

.swiper-slide:nth-child(1) .offer1 .offer-bg {
    background: #E5F2FF;
}

.swiper-slide:nth-child(2) .offer1 .offer-bg {
    background: #FFF2E5;
}

.swiper-slide:nth-child(3) .offer1 .offer-bg {
    background: #E5FFF2;
}

.route-departure {
    align-items: flex-start;
}

@media (max-width: 480px) {
    .ggt-hero {
        padding: 72px 20px 100px;
    }

    .ggt-subtext {
        font-size: 0.95rem;
    }
}

@media (max-width: 767px) {
    .faq-section {
        padding: 24px 0 28px;
        background: var(--color-bg-light-blue, #f0f7ff);
    }

    .faq-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-header {
        text-align: left;
        margin-bottom: 14px;
    }

    .faq-title {
        font-size: 1.25rem;
        line-height: 1.25;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }

    .faq-subtitle {
        font-size: 0.8125rem;
        line-height: 1.45;
    }

    .faq-categories {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 14px;
        padding: 0 0 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .faq-categories::-webkit-scrollbar {
        display: none;
    }

    .faq-category-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 0.8125rem;
        gap: 6px;
        border-radius: 999px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .faq-category-btn i {
        font-size: 1rem;
    }

    .faq-content-card {
        max-width: none;
        margin: 0;
        padding: 12px 14px;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
        border: 1px solid var(--border-color-light, #e5e7eb);
    }

    .faq-item {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .faq-item-header {
        gap: 10px;
        align-items: flex-start;
    }

    .faq-number {
        display: none;
    }

    .faq-question {
        font-size: 0.875rem;
        line-height: 1.4;
        padding-right: 4px;
    }

    .faq-toggle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .faq-toggle i {
        font-size: 1.125rem;
    }

    .faq-answer, .faq-item.active .faq-answer {
        padding: 0 !important;
        max-height: 0;
    }

    .faq-item.active .faq-answer {
        max-height: 800px;
        padding-top: 10px !important;
    }

    .faq-answer p {
        font-size: 0.8125rem;
        line-height: 1.55;
        margin: 0;
        color: var(--color-text-secondary, #6b7280);
    }

    .faq-empty {
        font-size: 0.875rem;
        text-align: center;
        color: var(--color-text-secondary, #6b7280);
        padding: 12px 0;
    }
}

/**/
.wga-root {
    --wga-navy-800: #173047;
    --wga-navy-900: #0d2033;
    --wga-navy-950: #081724;
    --wga-teal-glow: rgba(120, 190, 200, 0.25);
    --wga-text-body: #b7c4d1;
    --wga-pill-bg: rgba(255, 255, 255, 0.10);
    --wga-pill-border: rgba(255, 255, 255, 0.14);
    --wga-btn-bg: rgba(255, 255, 255, 0.08);
    --wga-btn-border: rgba(255, 255, 255, 0.12);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    background: #eef1f5;
}

.wga-root, .wga-root *, .wga-root *::before, .wga-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wga-card {
    position: relative;
    width: 100%;
    /* max-width: 720px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    border-radius: 20px;
    padding: 32px 40px;
    background: linear-gradient(135deg, var(--wga-navy-800) 0%, var(--wga-navy-900) 55%, var(--wga-navy-950) 100%);
}

.wga-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 400px;
}

.wga-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--wga-pill-bg);
    border: 1px solid var(--wga-pill-border);
    color: #e4e9f0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.wga-heading {
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.wga-subtext {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--wga-text-body);
}

.wga-store-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.wga-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--wga-btn-bg);
    border: 1px solid var(--wga-btn-border);
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.wga-store-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: #ffffff;
}

.wga-store-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.wga-store-text .wga-store-sub {
    font-size: 9px;
    font-weight: 400;
    color: #c7d0da;
}

.wga-store-text .wga-store-name {
    font-size: 12.5px;
    font-weight: 700;
}

.wga-qr-wrap {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wga-qr-wrap::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--wga-teal-glow) 0%, rgba(120, 190, 200, 0) 70%);
    pointer-events: none;
}

.wga-qr-tile {
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.wga-qr-tile img, .wga-qr-tile svg {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #ffffff;
}
.qr-mainwrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* width: 30%; */
}
@media (max-width: 640px) {
    .wga-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }

    .wga-qr-wrap {
        align-self: center;
    }
}

.wga-root {
    margin-bottom: var(--spacing-12);
}

.topbar i.material-icons.trip-icon {
    color: #fff;
    font-size: 18px;
    /* transform: rotate(45deg); */
    margin-right: 6px;
}

.tnsfrm45 {
    transform: rotate(45deg);
}

.twa-widget {
    --twa-page-bg: #F8F9FA;
    --twa-ink: #00334C;
    --twa-muted: #737B8C;
    --twa-line: #ECEEF1;
    --twa-orange: #F9AD72;
    --twa-teal: #63C3D1;
    --twa-dark-pill: #423B4C;
    --twa-blue-bg: #E5F2FF;
    --twa-blue: #3D7AF5;
    --twa-orange-bg: #FFF2E5;
    --twa-orange-acc: #F58A3D;
    --twa-green-bg: #E5FFF2;
    --twa-green: #0AC247;
    background: var(--twa-page-bg);
    /* font-family:'Inter',sans-serif; */
    color: var(--twa-ink);
    display: block;
}

.twa-widget .twa-heading-font {
    /* font-family:'Poppins',sans-serif; */
}

.twa-widget .twa-app-shell {
    /*max-width:700px;*/
    margin: 0 auto;
    background: var(--twa-page-bg);
    /* min-height:100vh; */
    padding: 24px 0px 30px;
}

/* ---------- Category icon row ---------- */
.twa-widget .twa-cat-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--twa-line);
    margin-bottom: 32px;
    display: none;
}

.twa-widget .twa-cat-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    cursor: default;
}

.twa-widget .twa-cat-item svg {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
}

.twa-widget .twa-cat-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--twa-muted);
    text-transform: uppercase;
    line-height: 125%;
}

/* ---------- Section headings ---------- */
.twa-widget .twa-section-title {
    font-weight: 700;
    font-size: 40px;
    color: #00334D;
    margin-bottom: 10px;
    line-height: 47px;
}

.twa-widget .twa-section-sub {
    color: #737B8C;
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 24px !important;
}

/* ---------- Recently viewed card ---------- */
.twa-widget .twa-trip-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px -12px #11182726;
    padding: 24px;
    width: 100%;
    border: 1px solid #E3E5E8;
}

.twa-widget .twa-route-text {
    font-weight: 700;
    font-size: 20px;
    color: #00334D;
    line-height: 100%;
}

.twa-widget .twa-route-arrow {
    color: #009FB6;
    font-weight: 700;
    margin: 0 6px;
}

.twa-widget .twa-dot-teal {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--twa-teal);
    display: inline-block;
    margin-right: 6px;
}

.twa-widget .twa-meta-text {
    color: #737B8C;
    font-size: 14px;
    margin: 16px 0 !important;
}

.twa-widget .twa-airline-name {
    font-weight: 700;
    color: #00334D;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 1px;
}

.twa-widget .twa-price-sub {
    color: #737B8C;
    font-size: 14px;
    line-height: 16px;
}

.twa-widget .twa-btn-dark-pill {
    background: var(--twa-dark-pill);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 5px 15.25px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: 20px;
}

.twa-widget .twa-btn-dark-pill:hover {
    background: #332d3d;
    color: #fff;
}

/* ---------- Best offers ---------- */
.twa-widget .twa-nav-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--twa-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9AA1AC;
    box-shadow: 0 2px 6px rgba(15,35,55,.04);
}

.twa-widget .twa-offer-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px -12px #11182726;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #E3E5E8;
}

.twa-widget .twa-offer-top {
    padding: 24px 24px;
}

.twa-widget .twa-offer-badge {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.25px;
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 8px;
    line-height: 22px;
}

.twa-widget .twa-offer-title {
    font-weight: 700;
    font-size: 24px;
    color: #00334D;
    margin-bottom: 6px;
    line-height: 28px;
}

.twa-widget .twa-offer-desc {
    color: #737B8C;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 0;
}

.twa-widget .twa-offer-bottom {
    background: #fff;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.twa-widget .twa-offer-price {
    font-weight: 700;
    font-size: 24px;
}

.twa-widget .twa-offer-price-sub {
    color: #737B8C;
    font-size: 14px;
}

.twa-widget .twa-btn-book {
    background: var(--twa-dark-pill);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0;
}

.twa-widget .twa-btn-book:hover {
    background: #332d3d;
    color: #fff;
}

.twa-widget .twa-bg-hotels-top {
    background: #E5F2FF;
    border-bottom: 1px solid #3D7AF5;
}

.twa-widget .twa-bg-flight-top {
    background: #FFF2E5;
    border-bottom: 1px solid #F58A3D;
}

.twa-widget .twa-bg-bank-top {
    background: #E5FFF2;
    border-bottom: 1px solid #0AC247;
}

.twa-widget .twa-badge-hotels {
    background: #3D7AF5;
}

.twa-widget .twa-badge-flight {
    background: var(--twa-orange-acc);
}

.twa-widget .twa-badge-bank {
    background: #0AC247;
}

.twa-widget .twa-text-hotels {
    color: #3D7AF5;
}

.twa-widget .twa-text-flight {
    color: #F58A3D;
}

.twa-widget .twa-text-bank {
    color: #0AC247;
}

@media (max-width: 576px) {
    .twa-widget .twa-cat-label {
        font-size:9px;
    }

    .twa-widget .twa-cat-item svg {
        width: 32px;
        height: 32px;
    }
}

/**/
.hero-pagination {
    position: absolute;
    top: 460px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 1;
}

/* Base dot styling */
.pagination-dot {
    width: 26px;
    height: 5px;
    background-color: #E3E5E8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover effect */
.pagination-dot:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Active dot layout */
.pagination-dot.active {
    background-color: #009FB6;
    /* transform: scale(1.3); */
    /* box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); */
}

header {
    position: relative;
    z-index: 2;
}

.bknow {
    font-size: 14px;
    color: #00334D;
    background: #E5F2FF;
    border: 1px solid #009FB6;
    padding: 6px 15px;
    font-weight: 600;
    letter-spacing: 0.15px;
    border-radius: 22px;
    line-height: 18px;
}

.bknow.btn:hover {
    color: #F97A17;
    background-color: #FFE5CC;
    border-color: #F97A17;
}

.plcetogo i {
    /*transform: rotate(135deg);*/
    position: absolute;
    left: var(--spacing-4);
    top: 14px;
    /* transform: translateY(-50%); */
    color: var(--color-text-muted);
    z-index: 1;
    left: 7px;
    color: #009FB6;
}

.plcetogo i.material-icons.tnsfrm45 {
    position: absolute;
    left: var(--spacing-4);
    top: 13px;
    /* transform: translateY(-50%); */
    color: var(--color-text-muted);
    z-index: 1;
    left: 7px;
    color: #009FB6;
}

.rcnt_flt {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
}

.twa-app-shell > .mb-4 {
    margin-bottom: 64px !important;
}

.twa-widget .twa-offer-price small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    margin-right: 8px;
}

.prc_tag {
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    background: #423B4C;
    color: #fff;
    line-height: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    bottom: 24px;
    z-index: 1;
    left: 24px;
}

.prc_tag small {
    font-size: 10px;
    margin-right: 5px;
}

/**/
span.route-airport-name {
    display: none;
}

.route-city {
    display: none;
}

ul.flt_rout_btm {
    font-size: 14px;
    font-weight: 400;
    color: #737B8C;
    margin: 0;
    padding-left: 16px;
}
.holiday-content p {
    color: #737B8C;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.flight-routes-grid .holiday-view-btn {
    background: #423B4C;    box-shadow: none
}
.pr_prsn {
    font-size: 14px;
    color: #737B8C;
    line-height: 16px;
}
.route-card-wrapper {
    display: none;
}
.route-card-wrapper:nth-child(1), .route-card-wrapper:nth-child(2), .route-card-wrapper:nth-child(3) {
    display: block;
}
.luxury_hotels  .featured-hotel-card__stars {
    display: flex;
}
/**/
.lxry_htl {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.htl_in span {
    font-size: 10px;
    color: #00334D;
    font-weight: 500;
}

.htl_in span strong {
    font-size: 18px;
    font-weight: 700;
    margin-left: 5px;
}

.htl_in span small {
    color: #737B8C;
    font-size: 14px;
    font-weight: 400;
    display: block;
}

.luxury_hotels .featured-hotel-card__stars i.material-icons {
    font-size: 14px !important;
    line-height: 18px;
}
.luxury_hotels .featured-hotel-card {
    min-height: 392px;
}
.luxury_hotels .featured-hotel-card__title {
    margin-bottom: 0;
}
.app-banner {
    position: relative;
    width: 100%;
    /* max-width: 1335px; */
    /* min-height: 222px; */
    /* margin: 28px auto 20px; */
    padding: 48px;
    overflow: hidden;
    background: #423B4C;
    border-radius: 24px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 40px;
}

/* Right side glow */
.app-banner::after {
    content: "";
    position: absolute;
    right: 55px;
    top: 50%;
    width: 250px;
    height: 180px;
    transform: translateY(-50%);

    background: radial-gradient(
        ellipse,
        rgba(214, 178, 76, 0.25) 0%,
        rgba(214, 178, 76, 0.10) 35%,
        rgba(214, 178, 76, 0) 72%
    );

    pointer-events: none;
}

/* =========================
   LEFT CONTENT
========================= */

.app-content {
    position: relative;
    /* z-index: 2; */
    padding-left: 0;
    max-width: 720px;
}

.app-badge {
   display: inline-flex;
   align-items: center;
   /* height: 32px; */
   padding: 6px 13.5px;
   border-radius: 20px;
   background: #FFFFFF33;
   color: #ffffff;
   font-size: 14px;
   font-weight: 700;
   line-height: 20px;
}

.app-title {
    /* margin: 10px 0 8px; */
    color: #FFDA40;
    font-size: 40px;
    line-height: 47px;
    font-weight: 700;
    /* max-width: 310px; */
    margin: 16px 0;
}

.app-description {
   margin: 0 0 16px;
   /* max-width: 463px; */
   color: #D9D9D9;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
}

/* =========================
   STORE BUTTONS
========================= */

.store-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.store-btn {
    /* width: 93px; */
    /* height: 36px; */
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #FFDA40;
    border-radius: 12px;
    background: #FFFFFF33;
    transition: all 0.2s ease;
}

.store-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffd72f;
}

.store-icon {
    /* width: 15px; */
    min-width: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8F96A3;
    font-size: 15px;
    color: #8F96A3;
    font-size: 15px;
}

.store-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    line-height: 1;
}

.store-small {
    font-size: 12px;
    color: #E3E5E8;
    margin-bottom: 8px;
}

.store-name {
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
    font-weight: 700;
}

/* =========================
   QR SECTION
========================= */

.qr-wrapper {
    position: relative;
    /* z-index: 3; */
    /* right: 27px; */
    /* top: 50%; */
    width: 260px;
    height: 260px;
    /* transform: translateY(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFDA40;
    border-radius: 28px;
    background: #FFFFFF33;
}

.qr-box {
    width: 180px;
    height: 180px;
    /* background: #ffffff; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 7px; */
}

.qr-box img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}
.airline-partner-card span {
    display: block;
    font-size: 16px;
    color: #737B8C;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 19px;
}
.qr-mainwrap::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 420px;
    right: -32px;
    top: -21px;
    background-image: radial-gradient(#FFDA4047, #FFDA4000);
    max-width: 420px;
    border-radius: 210px;
}
/* =========================
   TABLET
========================= */

@media (max-width: 767.98px) {

    .app-banner {
        width: calc(100% - 24px);
        min-height: 230px;

        margin: 15px auto;

        padding: 24px 20px;
    }

    .app-content {
        max-width: calc(100% - 135px);
    }

    .app-title {
        font-size: 20px;
        max-width: 250px;
    }

    .app-description {
        max-width: 280px;
    }

    .qr-wrapper {
        right: 18px;
        width: 120px;
        height: 120px;
        border-radius: 14px;
    }

    .qr-box {
        width: 85px;
        height: 85px;
        padding: 6px;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 575.98px) {

    .app-banner {
        width: calc(100% - 20px);
        min-height: auto;

        margin: 10px auto;
        padding: 20px;

        flex-direction: column;
        align-items: flex-start;
    }

    .app-content {
        max-width: 100%;
    }

    .app-title {
        font-size: 21px;
        max-width: 100%;
    }

    .app-description {
        max-width: 100%;
    }

    .qr-wrapper {
        position: relative;

        right: auto;
        top: auto;

        transform: none;

        margin: 22px auto 0;

        width: 135px;
        height: 135px;
    }

    .qr-box {
        width: 94px;
        height: 94px;
    }

    .store-buttons {
        flex-wrap: wrap;
    }
}