/* ============================================
       DARK THEME (Default)
       ============================================ */
    :root {
        --gold: #D4AF37;
        --gold2: #ffffff;
        --gold3: linear-gradient(135deg, rgba(212,175,55,.8), rgba(212,175,55,.5));
        --night: #0b0b0f;
        --ink: #ffffff;
        --mist: #eaeaea;
        --smoke: #a0a0a0;
        --grid: rgba(255,255,255,.06);
        --glass: linear-gradient(135deg, rgba(46, 41, 41, 0.55), rgba(72, 72, 63, 0.35));
        --glass-strong: linear-gradient(135deg, rgba(36,36,40,.75), rgba(80,80,89,.55));
        --radius-glass: 1.75rem;
    }

    /* ============================================
       LIGHT THEME
       ============================================ */
    [data-theme="light"] {
        --gold: #12bcc3; /* Teal/Cyan */
        --gold2: #444b4c;
        --gold3: linear-gradient(135deg, rgba(8,145,178,.9), rgba(6,182,212,.7));
        --night: #f8fafc; /* Very light background */
        --ink: #ffffff; /* Dark slate for text */
        --mist: #1e293b; /* Darker text */
        --smoke: #64748b; /* Medium slate */
        --grid: rgba(0,0,0,.04);
        --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 248, 255, 0.6));
        --glass-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.85));
        --radius-glass: 1.75rem;
    }

    /* ============================================
       BASE STYLES
       ============================================ */
    html { scroll-behavior: smooth; }
    body { 
        background: var(--night); 
        color: var(--mist); 
        font-family: 'Montserrat', system-ui, -apple-system, sans-serif; 
        overflow-x: hidden;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .h2.fw-bold {
        position: relative;
    }
    .h2.fw-bold::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 60px;
        height: 3px;
        background: var(--gold);
        border-radius: 2px;
    }

    /* ============================================
       GLASS EFFECTS
       ============================================ */
    .glass { 
        background: var(--glass); 
        backdrop-filter: blur(22px); 
        -webkit-backdrop-filter: blur(18px); 
        border: 1px solid rgba(255,255,255,.08); 
        box-shadow: 0 20px 60px rgba(0,0,0,.45); 
        border-radius: var(--radius-glass); 
        transition: border-color .3s, transform .3s, box-shadow .3s; 
    }
    
    [data-theme="light"] .glass {
        border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 20px 60px rgba(0,0,0,.08);
    }
    
    .glass:hover { 
        border-color: rgba(255,255,255,.15); 
        box-shadow: 0 25px 70px rgba(0,0,0,.55); 
    }
    
    [data-theme="light"] .glass:hover {
        border-color: rgba(0,0,0,.15);
        box-shadow: 0 25px 70px rgba(0,0,0,.12);
    }
    
    .glass-strong { 
        background: var(--glass-strong); 
        backdrop-filter: blur(28px); 
        -webkit-backdrop-filter: blur(28px); 
        border: 1px solid rgba(255,255,255,.12); 
        border-radius: var(--radius-glass); 
    }
    
    [data-theme="light"] .glass-strong {
        border: 1px solid rgba(0,0,0,.12);
    }

    /* ============================================
       HELPERS & RICH HOVER EFFECTS
       ============================================ */
    .rounded-glass { border-radius: var(--radius-glass); }
    
    .text-gold {
        color: var(--gold);
    }
    .text-gold2 {
        color: var(--gold2);
    }

    @keyframes shine {
        to { background-position: 200% center; }
    }
    
    .bg-gold { 
        background: var(--gold) !important; 
        color: var(--ink) !important; 
        transition: transform .3s, box-shadow .3s; 
    }
    
    .bg-gold:hover { 
        transform: translateY(-3px); 
        box-shadow: 0 10px 30px rgba(212,175,55,0.3); 
    }
    
    [data-theme="light"] .bg-gold {
        color: #fff !important;
    }
    
    [data-theme="light"] .bg-gold:hover {
        box-shadow: 0 10px 30px rgba(8,145,178,0.3);
    }
    
    .bg-gradient-gold { 
        background: linear-gradient(135deg, rgba(212,175,55,.8), rgba(212,175,55,.5)); 
        color: var(--ink); 
        transition: transform .3s, box-shadow .3s, background .3s; 
    }
    
    [data-theme="light"] .bg-gradient-gold {
        background: linear-gradient(135deg, rgba(8,145,178,.9), rgba(6,182,212,.7));
        color: #fff;
    }
    
    .bg-gradient-gold:hover { 
        transform: translateY(-3px); 
        box-shadow: 0 10px 30px rgba(212,175,55,0.2); 
        background: linear-gradient(135deg, rgba(212,175,55,1), rgba(212,175,55,.7)); 
    }
    
    [data-theme="light"] .bg-gradient-gold:hover {
        box-shadow: 0 10px 30px rgba(8,145,178,0.3);
        background: linear-gradient(135deg, rgba(8,145,178,1), rgba(6,182,212,.8));
    }
    
    .link-ghost { 
        border: 1px solid rgba(255,255,255,.15); 
        border-radius: 999px; 
        padding: .65rem 1rem; 
        display: inline-flex; 
        align-items: center; 
        gap: .5rem; 
        text-decoration: none; 
        color: var(--mist); 
        transition: background .3s, transform .3s, border-color .3s; 
    }
    
    [data-theme="light"] .link-ghost {
        border: 1px solid rgba(0,0,0,.15);
    }
    
    .link-ghost:hover { 
        background: rgba(255,255,255,.1); 
        transform: translateY(-2px); 
        border-color: rgba(255,255,255,.25); 
    }
    
    [data-theme="light"] .link-ghost:hover {
        background: rgba(0,0,0,.05);
        border-color: rgba(0,0,0,.25);
    }
    
    .link-ghost.active { 
        background:var(--gold3); 
        color: var(--ink); 
    }
    
    [data-theme="light"] .link-ghost.active {
        background:var(--gold3);
    }
    
    .footer-link:hover { 
        color: var(--gold) !important; 
    }

    /* ============================================
       MAGNETIC BUTTONS
       ============================================ */
    .magnet { 
        position: relative; 
        overflow: clip; 
        border-radius: 999px; 
    }
    
    .magnet > span { 
        position: relative; 
        z-index: 2; 
        display: inline-flex; 
        align-items: center; 
        gap: .65rem; 
        font-weight: 800; 
    }
    
    .magnet::after { 
        content: ""; 
        position: absolute; 
        inset: 0; 
        background: radial-gradient(600px 600px at var(--mx,50%) var(--my,50%), rgba(212,175,55,.18), transparent 35%); 
        transition: opacity .25s; 
        opacity: 0; 
    }
    
    [data-theme="light"] .magnet::after {
        background: radial-gradient(600px 600px at var(--mx,50%) var(--my,50%), rgba(8,145,178,.15), transparent 35%);
    }
    
    .magnet:hover::after { 
        opacity: 1; 
    }

    /* ============================================
       TILT EFFECT
       ============================================ */
    .tilt { 
        transform-style: preserve-3d; 
        transition: transform .18s ease-out; 
    }
    
    .tilt .tilt-child { 
        transform: translateZ(35px); 
    }

    /* ============================================
       HERO SECTION
       ============================================ */
    #hero { 
        position: relative; 
        min-height: 100svh; 
        display: grid; 
        place-items: center; 
        overflow: hidden; 
    }
    
    #hero video { 
        position: absolute; 
        inset: 0; 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        opacity: .35; 
    }
    
    [data-theme="light"] #hero video {
        opacity: .2;
    }
    
    #hero .scrim { 
        position: absolute; 
        inset: 0; 
        background: linear-gradient(to bottom, rgba(11,11,15,.3), rgba(11,11,15,.4), rgba(11,11,15,1)); 
    }
    
    [data-theme="light"] #hero .scrim {
        background: linear-gradient(to bottom, rgba(248,250,252,.5), rgba(248,250,252,.7), rgba(248,250,252,1));
    }

    /* ============================================
       STATS
       ============================================ */
    .stats .cell { 
        text-align: center; 
        padding: 1.2rem; 
    }
    
    .stats .value { 
        font-weight: 900; 
        font-size: 2rem; 
        color: var(--gold); 
    }
    
    .stats .label { 
        color: var(--smoke); 
        font-size: .9rem; 
    }

    /* ============================================
       MARQUEE
       ============================================ */
    .marquee { 
        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); 
        overflow: hidden; 
    }
    
    .marquee-track { 
        display: flex; 
        align-items: center; 
        gap: 64px; 
        animation: slide 28s linear infinite; 
    }
    
    @keyframes slide { 
        from { transform: translateX(0); } 
        to { transform: translateX(-50%); } 
    }

    /* ============================================
       BULLETS
       ============================================ */
    .bullet { 
        width: 9px; 
        height: 9px; 
        border-radius: 999px; 
        background: #444; 
        transition: transform .25s, background .25s; 
    }
    
    [data-theme="light"] .bullet {
        background: #cbd5e1;
    }
    
    .bullet.active { 
        transform: scale(1.6); 
        background: var(--gold); 
    }

    /* ============================================
       FLOAT LABELS
       ============================================ */
    .float-label { 
        position: relative; 
    }
    
    .float-label input, 
    .float-label textarea { 
        width: 100%; 
        background: rgba(255,255,255,.02); 
        border: 1px solid rgba(255,255,255,.12); 
        color: var(--mist); 
        padding: .9rem 1rem; 
        border-radius: 1rem; 
        outline: none; 
    }
    
    [data-theme="light"] .float-label input,
    [data-theme="light"] .float-label textarea {
        background: rgba(255,255,255,.9);
        border: 1px solid rgba(0,0,0,.12);
    }
    
    .float-label input:focus, 
    .float-label textarea:focus { 
        box-shadow: 0 0 0 .25rem rgba(212,175,55,.2); 
        border-color: rgba(212,175,55,.5); 
    }
    
    [data-theme="light"] .float-label input:focus,
    [data-theme="light"] .float-label textarea:focus {
        box-shadow: 0 0 0 .25rem rgba(8,145,178,.2);
        border-color: rgba(8,145,178,.5);
    }
    
    .float-label label { 
        position: absolute; 
        left: 14px; 
        top: 12px; 
        color: var(--smoke); 
        transition: all .2s; 
        pointer-events: none; 
        background: linear-gradient(to bottom, transparent 40%, rgba(11,11,15,.6) 40%); 
        padding: 0 6px; 
    }
    
    [data-theme="light"] .float-label label {
        background: linear-gradient(to bottom, transparent 40%, rgba(248,250,252,.9) 40%);
    }
    
    .float-label:focus-within label, 
    .float-label input:not(:placeholder-shown) + label, 
    .float-label textarea:not(:placeholder-shown) + label { 
        top: -8px; 
        font-size: 12px; 
        color: var(--gold); 
    }

    /* ============================================
       STICKY NAV
       ============================================ */
    .nav-shadow { 
        box-shadow: 0 10px 35px rgba(0,0,0,.45); 
        border-bottom: 1px solid rgba(255,255,255,.08); 
    }
    
    [data-theme="light"] .nav-shadow {
        box-shadow: 0 10px 35px rgba(0,0,0,.08);
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    /* ============================================
       SECTION SPACING
       ============================================ */
    section { 
        padding-top: 8rem; 
        padding-bottom: 8rem; 
    }
    
    #hero { 
        padding-top: 0; 
        padding-bottom: 0; 
    }

    /* ============================================
       SERVICE FEATURES
       ============================================ */
    .service-features { 
        list-style: none; 
        padding-left: 0; 
    }
    
    .service-features li { 
        display: flex; 
        align-items: center; 
        gap: 0.75rem; 
        margin-bottom: 0.5rem; 
        color: var(--smoke); 
    }
    
    .service-features i { 
        color: var(--gold); 
    }

    /* ============================================
       FAB BUTTON
       ============================================ */
    .fab-container { 
        position: fixed; 
        bottom: 24px; 
        right: 24px; 
        z-index: 1060; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    }
    
    .fab-button, 
    .fab-option { 
        width: 60px; 
        height: 60px; 
        border-radius: 999px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        cursor: pointer; 
        text-decoration: none; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        box-shadow: 0 10px 30px rgba(0,0,0,.3); 
    }
    
    [data-theme="light"] .fab-button,
    [data-theme="light"] .fab-option {
        box-shadow: 0 10px 30px rgba(0,0,0,.15);
    }
    
    .fab-button {
        animation: pulse 3s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0%, 100% { box-shadow: 0 0 0 rgba(212,175,55,0.4); }
        50% { box-shadow: 0 0 30px rgba(212,175,55,0.6); }
    }
    
    [data-theme="light"] .fab-button {
        animation: pulse-light 3s ease-in-out infinite;
    }
    
    @keyframes pulse-light {
        0%, 100% { box-shadow: 0 10px 30px rgba(8,145,178,0.2); }
        50% { box-shadow: 0 0 30px rgba(8,145,178,0.4); }
    }
    
    .fab-button:hover, 
    .fab-option:hover { 
        transform: scale(1.1) translateY(-4px); 
        box-shadow: 0 0 25px rgba(212,175,55,0.3); 
        border-color: rgba(212,175,55,.4) !important; 
        background: var(--glass-strong); 
    }
    
    [data-theme="light"] .fab-button:hover,
    [data-theme="light"] .fab-option:hover {
        box-shadow: 0 0 25px rgba(8,145,178,0.3);
        border-color: rgba(8,145,178,.4) !important;
    }
    
    .fab-options { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 1rem; 
        margin-bottom: 1rem; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        transform: translateY(20px) scale(0.9); 
        opacity: 0; 
        pointer-events: none; 
    }
    
    .fab-container.active .fab-options { 
        transform: translateY(0) scale(1); 
        opacity: 1; 
        pointer-events: auto; 
    }
    
    .fab-button i { 
        transition: transform 0.3s ease; 
    }
    
    .fab-container.active .fab-button i { 
        transform: rotate(135deg); 
    }

    /* ============================================
       ACCESSIBILITY
       ============================================ */
    .sr-only { 
        position: absolute; 
        width: 1px; 
        height: 1px; 
        padding: 0; 
        margin: -1px; 
        overflow: hidden; 
        clip: rect(0,0,0,0); 
        white-space: nowrap; 
        border: 0; 
    }

 

/* Icons overlap for toggle */
#menuIconOpen, #menuIconClose {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

/* Toggle Open/Close icons */
.mobile-menu-open #menuIconOpen { opacity: 0; }
.mobile-menu-open #menuIconClose { opacity: 0; }

.mobile-menu-close #menuIconOpen { opacity: 0; }
.mobile-menu-close #menuIconClose { opacity: 0; }

/* Shared mobile-theme-btn styling */
.mobile-theme-btn {
  width: 50px;                     /* square button */
  height: 50px;
  color: var(--gold);              /* icon color */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;          /* slightly rounded square */
  transition: all 0.3s;
}

.mobile-theme-btn:hover {
  background-color: var(--gold);
  color: var(--night);
  border-color: var(--gold);
}

.mobile-theme-btn i {
  transition: color 0.3s;
}


    /* ============================================
       FOOTER STYLES
       ============================================ */
    .footer-reimagined {
        padding-top: 6rem;
        padding-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .footer-reimagined h5 {
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 0.9rem;
        color: var(--smoke);
    }

    .footer-reimagined .footer-cta h2 {
        font-family: 'Playfair Display', serif;
        text-shadow: 0 4px 20px rgba(0,0,0,.4);
    }
    
    [data-theme="light"] .footer-reimagined .footer-cta h2 {
        text-shadow: 0 4px 20px rgba(0,0,0,.1);
    }

    .footer-divider {
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    }
    
    [data-theme="light"] .footer-divider {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    }

    .footer-bottom {
        font-size: 0.85rem;
        color: var(--smoke);
    }

    .back-to-top {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ============================================
       SOCIAL LINK HOVER
       ============================================ */
    .social-link-swap {
        position: relative;
    }

    .social-link-swap i,
    .social-link-swap img {
        transition: opacity 0.3s ease;
    }

    .social-link-swap img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    .social-link-swap:hover i {
        opacity: 0;
    }

    .social-link-swap:hover img {
        opacity: 1;
    }

    /* ============================================
       FLEET SECTION
       ============================================ */
    .fleet-tabs .nav-link {
        color: var(--mist);
        border-radius: 999px;
        padding: 0.5rem 1.25rem;
        transition: all 0.3s ease;
    }
    
    .fleet-tabs .nav-link.active,
    .fleet-tabs .nav-link:hover {
        background-color: var(--gold);
        color: var(--ink);
    }
    
    [data-theme="light"] .fleet-tabs .nav-link.active,
    [data-theme="light"] .fleet-tabs .nav-link:hover {
        color: #fff;
    }

    .fleet-item {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .fleet-item.hide {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.98);
        position: absolute;
    }

    .fleet-img {
        aspect-ratio: 4/3;
        overflow: hidden;
        border-radius: 1rem;
        background: rgba(255,255,255,0.02);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    [data-theme="light"] .fleet-img {
        background: rgba(0,0,0,0.02);
    }
    
    .fleet-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }
    
    .fleet-img:hover img {
        transform: scale(1.05);
    }

    .fleet-info {
        margin-top: 1rem;
    }

    /* ============================================
       HERO ALTERNATE
       ============================================ */
   .hero-alt {
    position: relative;
    min-height: 100svh; /* match main hero height */
    display: grid;
    place-items: center; /* center content */
    overflow: hidden;
}

.hero-alt .bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 0.35; /* match #hero video default */
}

[data-theme="light"] .hero-alt .bg-image {
    opacity: 0.2; /* match #hero light theme */
}

.hero-alt .scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,11,15,.3), rgba(11,11,15,.4), rgba(11,11,15,1));
    z-index: 1;
}

[data-theme="light"] .hero-alt .scrim {
    background: linear-gradient(to bottom, rgba(248,250,252,.5), rgba(248,250,252,.7), rgba(248,250,252,1));
}

/* Optional: Centered content container */
.hero-alt .container {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--mist);
}

   /* ============================================
       THEME TOGGLE BUTTON (OPTIONAL)
       ============================================ */
    .theme-toggle {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 1050;
        width: 50px;
        height: 50px;
        border-radius: 999px;
        background: var(--glass);
        border: 1px solid rgba(255,255,255,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,.3);
    }
    
    [data-theme="light"] .theme-toggle {
        border: 1px solid rgba(0,0,0,.12);
        box-shadow: 0 10px 30px rgba(0,0,0,.1);
    }
    
    .theme-toggle:hover {
        transform: scale(1.1);
        background: var(--glass-strong);
    }
    
    .theme-toggle i {
        color: var(--gold);
        font-size: 1.25rem;
    }

    /* ============================================
       LOGO THEME SWITCHER
       ============================================ */
    .logo-dark {
        display: block;
    }
    
    .logo-light {
        display: none;
    }
    
    [data-theme="light"] .logo-dark {
        display: none;
    }
    
    [data-theme="light"] .logo-light {
        display: block;
    }

    /* ============================================
       ENHANCED HEADER & NAVIGATION
       ============================================ */
    #nav nav {
        transition: all 0.3s ease;
    }

    /* Mobile menu button theming */
  #mobileMenu { visibility: hidden; opacity: 0; }

    [data-theme="light"] #mobileMenu .bg-gradient-gold:hover {
        box-shadow: 0 6px 20px rgba(8,145,178,0.3);
    }

    /* Desktop nav links enhanced */
    #mainNavLinks .link-ghost {
        font-size: 0.95rem;
    }

    /* Book now button enhancement */
    .magnet.link-ghost {
        border-color: rgba(255,255,255,.15) !important;
    }

    [data-theme="light"] .magnet.link-ghost {
        border-color: rgba(0,0,0,.2) !important;
    }

    .magnet.link-ghost:hover {
        background: rgba(212,175,55,.1);
        border-color: var(--gold) !important;
    }

    [data-theme="light"] .magnet.link-ghost:hover {
        background: rgba(8,145,178,.1);
    }
   
/* ==========================
   Service Card Theming (STARWAY)
   ========================== */

.service-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: var(--radius-glass);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
}

.service-card .image-container {
    position: relative;
    height: 280px;
    overflow: hidden;
    border-radius: var(--radius-glass);
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover img {
    transform: scale(1.08);
}

.service-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,11,15,0.95), rgba(11,11,15,0.3));
    opacity: 0;
    transition: opacity 0.4s;
}

[data-theme="light"] .service-card .overlay {
    background: linear-gradient(to top, rgba(248,250,252,0.95), rgba(248,250,252,0.3));
}

.service-card:hover .overlay {
    opacity: 1;
}

.service-card .content {
    position: relative;
    z-index: 2;
    color: var(--mist);
}

/* Service Icon */
.service-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gold3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--gold);
    margin: 0 auto 1.5rem;
    transition: all 0.3s;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--gold3);
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--smoke);
    font-size: 0.95rem;
}

.feature-list i {
    color: var(--gold);
    margin-top: 0.2rem;
    font-size: 0.9rem;
}

/* Optional: Light Theme Adjustments */
[data-theme="light"] .service-card {
    background: var(--glass);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* STARWAY Themed Glass + Gold Button */
.cta-btn-themed {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    background: linear-gradient(135deg, var(--gold3), rgba(212,175,55,0.8));
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.cta-btn-themed:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 15px 40px rgba(212,175,55,0.45);
    background: linear-gradient(135deg, rgba(212,175,55,1), var(--gold));
    color: var(--ink);
}

[data-theme="light"] .cta-btn-themed {
    background: linear-gradient(135deg, var(--gold), rgba(18,188,195,0.8));
    color: var(--ink);
}

[data-theme="light"] .cta-btn-themed:hover {

    box-shadow: 0 15px 40px rgb(138, 235, 238);

    background: linear-gradient(135deg, rgba(18,188,195,1), var(--gold));
}


/* ------------------------------------------ */
/* ROUND TRIP PAGE*/
/* ------------------------------------------*/



/* New styles for enhanced content TOURSIM */
    .emirate-badge { 
      position: absolute; 
      top: 1rem; 
      right: 1rem; 
      background: var(--gold3); 
      color: var(--ink); 
      padding: 0.3rem 0.8rem; 
      border-radius: 999px; 
      font-size: 0.75rem; 
      font-weight: 600; 
      backdrop-filter: blur(10px);
    }
    
    .attraction-icon { 
      width: 50px; 
      height: 50px; 
      background: var(--gold3);
      border: var(--gold); 
      color: var(--ink);
      border-radius: 50%; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      margin-bottom: 1rem;
    }

    .season-tag { 
      display: inline-block; 
      background: var(--gold3); 
      color: var(--ink); 
      padding: 0.2rem 0.6rem; 
      border-radius: 999px; 
      font-size: 0.7rem; 
      margin-bottom: 0.5rem; 
    }

    .feature-highlight { 
      background: var(--gold3); 
      border-left: 3px solid var(--gold); 
      padding: 1rem; 
      border-radius: 0 1rem 1rem 0; 
      margin: 1rem 0;
    }

    .stats-grid { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
      gap: 1.5rem; 
    }
    
    .stat-item { 
      text-align: center; 
      padding: 2rem 1rem;
    }
    
    .stat-number { 
      font-size: 2.5rem; 
      font-weight: 900; 
      color: var(--gold); 
      font-family: 'Playfair Display', serif; 
      line-height: 1;
    }
    /* =======================
   Itinerary Card Styling
======================= */
.itinerary-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--glass);
}

.itinerary-card:hover {
  transform: translateY(-8px);
}

.cta-btn-itinerary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.8rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--gold3);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
}

.cta-btn-itinerary:hover {
  transform: translateY(-3px) scale(1.03);
  background: linear-gradient(135deg, rgba(212,175,55,1), var(--gold));
}

[data-theme="light"] .cta-btn-itinerary {
  background: var(--gold3);
}

[data-theme="light"] .cta-btn-itinerary:hover {
  background: linear-gradient(135deg, rgba(18,188,195,1), var(--gold));
}







/* ==========================
   UPCOMING EVENTSS
   ========================== */

  /* Event Carousel Styles */
.events-carousel-section {
  position: relative;
  padding: 6rem 0;
  color: var(--mist);
}

.carousel-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.event-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.event-slide.active {
  display: block;
  opacity: 1;
}

.event-card-large {
  position: relative;
  border-radius: var(--radius-glass);
  overflow: hidden;
  height: 550px;
  background: var(--glass);
  border: 1px solid var(--gold3);
}
.event-card-large .image-wrapper {
  position: relative;
  height: 100%;
}
.event-card-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.event-card-large:hover img {
  transform: scale(1.05);
}

.event-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--gold) 0%,
    rgba(11, 11, 15, 0.85) 40%,
    rgba(11, 11, 15, 0.3) 70%,
    transparent 100%
  );
}

.event-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem;
  z-index: 2;
  color: var(--mist);
}

.event-badge {
  display: inline-block;
  background: var(--gold3);
  border: 1px solid var(--gold);
  color: var(--ink);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.event-title {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1rem;
  line-height: 1.1;
  color: var(--ink);
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--ink);
  font-size: 0.95rem;
}
.event-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event-meta-item i {
  color: var(--gold);
  font-size: 1.1rem;
}

.countdown-large {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}
.countdown-unit {
  text-align: center;
}
.countdown-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.countdown-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-top: 0.5rem;
}

/* Carousel Navigation */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.carousel-nav.prev {
  left: -80px;
}
.carousel-nav.next {
  right: -80px;
}
.carousel-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--mist);
  font-size: 1.5rem;
}
.carousel-btn:hover {
  background: var(--gold3);
  border-color: var(--gold);
  transform: scale(1.1);
}
.carousel-btn:active {
  transform: scale(0.95);
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:var(--mist);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.indicator-dot.active {
  background: var(--gold);
  width: 32px;
  border-radius: 5px;
}
.indicator-dot:hover {
  background: var(--gold3);
  border-color: var(--gold);
}

/* Event Card Links & Thumbs */
.event-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card-link:hover .event-card {
  transform: translateY(-6px);
  box-shadow: 0 15px 45px var(--gold);
  border-color: var(--gold);
}

.event-thumb {
  height: 250px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.event-card:hover .event-thumb {
  transform: scale(1.05);
}

.date-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold3);
  color: var(--ink);
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.event-card h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mist);
}

.event-card p {
  color: var(--smoke);
}

/* Hero Services Section */
.hero-services {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--mist);
}
.hero-services .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-services .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--night) 0%,
    var(--night) 40%,
    var(--night) 60%,
    

    transparent 100%
  ); 
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .carousel-nav.prev { left: 10px; }
  .carousel-nav.next { right: 10px; }
  .carousel-btn { width: 50px; height: 50px; font-size: 1.25rem; }
}

@media (max-width: 768px) {
  .event-title { font-size: 2rem; }
  .event-content { padding: 2rem 1.5rem; }
  .countdown-large { gap: 1rem; }
  .countdown-number { font-size: 2rem; }
  .carousel-nav.prev { left: 5px; }
  .carousel-nav.next { right: 5px; }
  .carousel-btn { width: 45px; height: 45px; font-size: 1.1rem; }
}