/* --- ASIA TRAVELS: DYNAMIC STICKY EDITION --- */
:root {
    /* Color System */
    --deep-forest: #1F3A2E;
    --bg-secondary: #13241c;
    --copper-solid: #C68B59;
    --copper-border: #A67C52;
    --soft-beige: #F5EFE6;

    /* Typography System */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--soft-beige);
    overflow-x: clip;
    width: 100%;
}
























/* --- THE DYNAMIC NAVBAR --- */
.header-wrapper {
    position: fixed;
    /* Fixed to allow smooth scroll transitions */
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}

.header-wrapper.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Reduced Top White Utility Bar */
.top-bar {
    background-color: var(--deep-forest);
    color: #ffffff !important;
    height: 80px;
    /* Reduced from 110px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    position: relative;
    border-bottom: 0.4px solid #eaeaea73;
}

@media (max-width: 1440px) {
    .top-bar {
        height: 70px;
    }
}

/* Left & Right Flex Containers */
.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Contact Info moved next to Menu */
.nav-contact-info {
    font-size: 11px;
    font-weight: 400;
    color: #666;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-left: 1px solid #ddd;
    /* Subtle separator from Menu */
    padding-left: 32px;
}

.nav-contact-info span.divider {
    margin: 0 12px;
    color: #ccc;
}

/* Center Column (Hanging Logo) */
.center-logo-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
    /* Adjusted slightly */
    z-index: 1010;

    /* The White Plate Fix */
    background-color: #ffffff;
    border-radius: 50%;
    padding: 8px;
    /* Adjust this to make the white border thicker/thinner */
    /* box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); */
    /* Soft shadow for depth */
}

/* Reduced Logo Size */
.hanging-logo {
    width: 140px;
    display: block;
    /* Remove any dark drop-shadows on the image itself */
    filter: none;
}



@media (max-width: 1440px) {
    .hanging-logo {
        width: 120px;
    }
}

/* Dynamic Scroll State for Logo */
.header-wrapper.scrolled .hanging-logo {
    width: 75px;
    /* Shrinks the logo when scrolling */
    top: 5px;
}

/* Nav Links in Top Bar */
.nav-link-simple {
    text-decoration: none;
    color: #111;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

.nav-link-simple:hover {
    color: var(--copper-solid);
}







/* Secondary Stroke Button (Client Spec) */
/* --- 3D SECONDARY COPPER BUTTON (COPPER ROD EFFECT) --- */
.btn-secondary-copper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--deep-forest);
    background: transparent;
    border-radius: 12px;

    /* 1. The 3D Copper Rod Outline */
    border: 2px solid #be7c46;
    /* Base copper tone */
    border-top-color: #e3ad83;
    /* Highlighted top edge (light) */
    border-bottom-color: #733f15;
    /* Shadowed bottom edge (dark) */

    /* Subtle inner glow to round out the "rod" feel */
    box-shadow:
        inset 0 1px 3px rgba(227, 173, 131, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.05);

    overflow: hidden;
    /* Contains the shine animation */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 1;
}




/* 2. The Shine Beam Setup (Hidden off-screen) */
.btn-secondary-copper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 2;
}



/* --- HOVER STATE --- */
.btn-secondary-copper:hover {
    color: #ffffff;

    /* Fill with the primary button's metallic gradient */
    background: linear-gradient(180deg, #e3ad83 0%, #c98954 40%, #ad6831 100%);

    /* Blend the border into the new solid background */
    border-color: #c98954;
    border-top-color: #e3ad83;
    border-bottom-color: #ad6831;

    /* Match the 3D Block Shadow of the primary button */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 4px 0 #733f15,
        0 10px 15px rgba(0, 0, 0, 0.2);

    transform: translateY(-2px);
    /* Lift off the page */
}

/* Trigger the Shine Animation on Hover */
.btn-secondary-copper:hover::before {
    animation: copper-shine 0.7s ease-in-out;
}

/* --- ACTIVE (CLICK) STATE --- */
.btn-secondary-copper:active {
    transform: translateY(2px);
    /* Physically push down */
    /* Flatten the shadow block */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 0px 0 #733f15,
        0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Note: Only include this if you didn't already copy it from the primary button CSS! */
@keyframes copper-shine {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}




/* Bottom Green Navigation Bar */
.bottom-nav-bar {
    background-color: var(--deep-forest);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Setup for smooth collapse */
    height: 50px;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
    opacity: 1;
}

@media (max-width: 1440px) {
    .bottom-nav-bar {
        height: 60px;
    }
}

/* Scroll State: Hide the Green Bar */
.header-wrapper.scrolled .bottom-nav-bar {
    max-height: 0;
    opacity: 0;
}

.bottom-nav-bar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 70px;
    height: 50px;
    align-items: center;
}

.bottom-nav-bar a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.bottom-nav-bar a:hover {
    color: var(--copper-solid);
}

.nav-spacer {
    width: 140px;
    transition: width 0.4s ease;
}

.header-wrapper.scrolled .nav-spacer {
    width: 90px;
}


/* --- EXPANDABLE SEARCH BAR --- */
.expandable-search {
    position: relative;
    display: flex;
    align-items: center;
}

.search-trigger {
    z-index: 10;
    position: relative;
}

/* The wrapper that holds the input and hides it by default */
.search-input-wrapper {
    position: absolute;
    right: 0;
    /* Aligns to the right edge of the trigger */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 5;
}

/* The actual input field */
.search-input {
    width: 100%;
    padding: 8px 40px 8px 15px;
    /* Space for the search icon to overlay */
    background: #ffffff;
    border: none;
    border-bottom: 2px solid var(--copper-solid);
    /* Elegant underline */
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--deep-forest);
    outline: none;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); */
}

.search-input::placeholder {
    color: #a0a0a0;
    font-style: italic;
}

/* --- THE ACTIVE STATE --- */
.expandable-search.is-active .search-input-wrapper {
    width: 280px;
    /* How wide the search bar expands */
    opacity: 1;
    visibility: visible;
}

/* Hide the word "SEARCH" when open, just keep the icon */
.expandable-search.is-active .search-text {
    display: none;
}

/* --- SUGGESTIONS DROPDOWN --- */
.search-suggestions {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease 0.1s;
    /* Slight delay so input opens first */
}

/* Show dropdown when search is active */
.expandable-search.is-active .search-suggestions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.suggestions-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 12px;
}

.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestions-list li {
    margin-bottom: 10px;
}

.suggestions-list li:last-child {
    margin-bottom: 0;
}

.suggestions-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--deep-forest);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.suggestions-list a:hover {
    color: var(--copper-solid);
    transform: translateX(5px);
    /* Gentle nudge interaction */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .expandable-search.is-active .search-input-wrapper {
        width: 220px;
    }
}



























/* --- FULL-SCREEN LUXURY OFFCANVAS (GRID LAYOUT) --- */
.luxury-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999 !important;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: hidden;
}

.luxury-offcanvas.is-open {
    transform: translateX(0);
}

.nav-overlay {
    display: grid;
    /* 140px for Logo, 380px for Main Menu, 1fr for Dynamic Content, 100px for Close */
    grid-template-columns: 140px 380px 1fr 100px;
    grid-template-rows: 1fr;
    height: 100vh;
}

/* Col 1: Logo */
.col-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.4rem 0;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.offcanvas-logo {
    width: 80px;
    /* Fits comfortably in the 140px column */
    height: auto;
    object-fit: contain;
}

/* Col 2: Navigation Links */
.col-nav {
    padding: 3.5rem 3rem 3rem 2.8rem;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d1d1 transparent;
}

/* Custom Scrollbar for Webkit */
.col-nav::-webkit-scrollbar {
    width: 4px;
}

.col-nav::-webkit-scrollbar-track {
    background: transparent;
}

.col-nav::-webkit-scrollbar-thumb {
    background-color: #d1d1d1;
    border-radius: 10px;
}

.col-nav::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}

.nav-section-label,
.panel-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.nav-discover {
    margin-bottom: 2.5rem;
}

.nav-primary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.35rem 0;
    margin-bottom: 0.2rem;
}

.nav-primary-link {
    font-family: var(--font-heading);
    font-size: 28px;
    /* High-end large serif typography */
    font-weight: 600;
    color: var(--deep-forest);
    text-decoration: none;
    line-height: 1.15;
    transition: color 0.3s ease;
}

.nav-primary-item:hover .nav-primary-link,
.nav-primary-item.active .nav-primary-link {
    color: var(--copper-solid);
}

.nav-chevron {
    color: #ccc;
    transition: transform 0.3s ease, color 0.3s ease;
}

.nav-primary-item.active .nav-chevron {
    color: var(--copper-solid);
}

.menu-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.06);
    margin: 2.5rem 0;
}

.nav-learn-item {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: #666;
    text-decoration: none;
    padding: 0.4rem 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-learn-item.bold {
    color: var(--deep-forest);
    font-weight: 500;
}

.nav-learn-item:hover {
    color: var(--copper-solid);
    transform: translateX(4px);
}

/* Col 3: Dynamic Right Panel */
.col-right {
    padding: 3.5rem 4rem 3rem;
    overflow-y: auto;
    background: #ffffff;
    /* Off-white background highlights this panel */
    scrollbar-width: thin;
    scrollbar-color: #d1d1d1 transparent;
}

/* Custom Scrollbar for Webkit in Col 3 */
.col-right::-webkit-scrollbar {
    width: 4px;
}

.col-right::-webkit-scrollbar-track {
    background: transparent;
}

.col-right::-webkit-scrollbar-thumb {
    background-color: #d1d1d1;
    border-radius: 10px;
}

.col-right::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}

.right-panel {
    display: none;
}

.right-panel.active {
    display: block;
    animation: fadeInPanel 0.4s ease;
}


.dest-icon {
    width: 62px;
    height: 62px;
    object-fit: contain;
    flex-shrink: 0;
}





@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.panel-hero-card {
    border-radius: 12px;
    margin-bottom: 2rem;
    background: var(--deep-forest);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2rem;
}

.panel-hero-title {
    font-family: var(--font-heading);
    font-size: 26px;
    color: #fff;
    line-height: 1.2;
}

.panel-hero-subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
}

.panel-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
}

.dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 30px;
}

.dest-item {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--deep-forest);
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 12px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    gap: 20px;
    transition: 0.3s;
}

.dest-item:hover {
    color: var(--copper-solid);
}

.panel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2rem;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--copper-solid);
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Col 4: Close Button */
.col-close {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.6rem 0;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.offcanvas-close-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px dashed var(--deep-forest);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--deep-forest);
    transition: all 0.3s ease;
}

.offcanvas-close-btn:hover {
    background: var(--copper-solid);
    border-color: var(--copper-solid);
    color: #ffffff;
    transform: rotate(90deg);
}

/* Hide mobile back row on desktop */
.mobile-back-row {
    display: none;
}

/* Intermediate Desktop Sizing (Prevents overlap with col-close) */
@media (max-width: 1360px) {
    .dest-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px 20px;
    }

    .dest-item {
        font-size: 20px;
        gap: 15px;
    }

    .dest-icon {
        width: 48px;
        height: 48px;
    }
}

/* Mobile Responsive */
@media (max-width: 1100px) {
    .nav-overlay {
        display: block !important;
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .col-logo {
        display: none;
    }

    .col-close {
        position: absolute;
        top: 15px;
        right: 15px;
        border-left: none;
        padding: 0;
        z-index: 100;
    }

    .col-nav {
        width: 100%;
        height: 100%;
        border-right: none;
        border-bottom: none;
        padding: 5rem 2rem 2rem;
        overflow-y: auto;
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    /* Slide left column out of view when right panel is open */
    .luxury-offcanvas.right-panel-open .col-nav {
        transform: translateX(-100%);
    }

    .col-right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        padding: 5rem 2rem 3rem;
        z-index: 50;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        overflow-y: auto;
    }

    /* Slide right column in when open */
    .luxury-offcanvas.right-panel-open .col-right {
        transform: translateX(0);
    }

    /* Mobile back button styling */
    .mobile-back-row {
        display: block;
        margin-bottom: 2rem;
    }

    .mobile-back-btn {
        background: none;
        border: none;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 600;
        color: var(--copper-solid);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 0;
        transition: color 0.3s ease;
    }

    .mobile-back-btn:hover {
        color: var(--deep-forest);
    }

    .dest-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 15px;
    }

    .dest-item {
        font-size: 18px;
        gap: 12px;
        padding: 8px 0px;
    }

    .dest-icon {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 768px) {
    .dest-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .dest-item {
        font-size: 17px;
        gap: 12px;
        padding: 8px 0px;
    }

    .dest-icon {
        width: 40px;
        height: 40px;
    }

    .nav-primary-link {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .dest-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .dest-item {
        font-size: 15px;
        gap: 10px;
        padding: 6px 0px;
    }

    .dest-icon {
        width: 32px;
        height: 32px;
    }
}















/* --- CUSTOM BOOKING SEARCH BAR --- */
.booking-search-wrapper {
    width: 100%;
    padding: 20px 64px 20px 64px;
    /* Matches the hero margins */
    display: flex;
    justify-content: center;
    /* background-color: #ffffff; */
    margin-top: 138px;
}

.booking-search-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    padding: 10px 10px 10px 30px;
    width: 100%;
    max-width: 900px;
}

.search-input-group {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    gap: 15px;
}

.search-icon {
    color: var(--copper-solid);
    width: 20px;
    height: 20px;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.input-label {
    font-size: 11px;
    font-weight: 600;
    /* text-transform: uppercase; */
    color: var(--deep-forest);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.input-label.travel-protection {
    color: var(--deep-forest);
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}



.custom-search-input {
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--deep-forest);
    font-weight: 500;
    background: transparent;
    width: 100%;
}

.custom-search-input::placeholder {
    color: #ccc;
    font-weight: 400;
}

.search-divider {
    width: 1px;
    height: 40px;
    background: #eaeaea;
    margin: 0 20px;
}

.btn-search-submit {
    background: var(--copper-solid);
    /* Using brand system instead of bright red */
    color: white;
    border: none;
    border-radius: 40px;
    padding: 15px 30px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-search-submit:hover {
    background: var(--deep-forest);
    transform: translateY(-2px);
}

/* Custom Dropdown Styling */
.custom-dropdown {
    position: absolute;
    top: calc(100% + 20px);
    left: -10px;
    width: calc(100% + 40px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 15px 0;
    margin: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.custom-dropdown.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-dropdown li {
    padding: 12px 25px;
    font-size: 14px;
    color: var(--deep-forest);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.custom-dropdown li:hover {
    background: var(--soft-beige);
    color: var(--copper-solid);
}

/* --- ISLAND HERO SECTION (64px Margins) --- */
.hero-island-wrapper {
    padding: 0 64px 0px 64px;
    /* The requested 64px margins */
    width: 100%;
}



.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Keeps the shadow heavy on the bottom left for text */
    background: linear-gradient(to top right, rgba(10, 17, 13, 0.8) 0%, rgba(10, 17, 13, 0.2) 50%, transparent 100%);
    z-index: 2;
}

/* .hero-content {
    position: absolute;
    bottom: 60px;
    left: 60px;
    z-index: 4;
    text-align: left;
    color: #ffffff;
    max-width: 600px;
} */

.hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    font-size: 38px;
    /* Reduced from 46/54px to fit the framed layout elegantly */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Responsive Adjustments */
@media (max-width: 992px) {

    .booking-search-wrapper,
    .hero-island-wrapper {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 100px;
    }

    .hero-content {
        left: 40px;
        bottom: 40px;
    }

    .hero-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .booking-search-bar {
        flex-direction: column;
        align-items: stretch;
        border-radius: 24px;
        padding: 20px;
        gap: 15px;
    }

    .search-divider {
        width: 100%;
        height: 1px;
        margin: 5px 0;
    }

    .btn-search-submit {
        justify-content: center;
        margin-top: 10px;
    }

    .booking-search-wrapper,
    .hero-island-wrapper {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 50px;
    }

    .hero-framed {
        height: 500px;
        border-radius: 16px;
    }
}


/* --------------------------------------------------------------- CINEMATIC HERO CAROUSEL --- */
.hero-framed {
    position: relative;
    width: 100%;
    height: 360px;
    /* Fixed height for the boxed look */
    border-radius: 24px;
    /* Rounded corners like the uploaded image */
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Handles both videos and images seamlessly */
.hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Cinematic Gradient Overlay (Darker at bottom left for text readability) */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(10, 17, 13, 0.85) 0%, rgba(10, 17, 13, 0.3) 50%, rgba(10, 17, 13, 0.1) 100%);
    z-index: 2;
}

/* Bottom Left Content Positioning */
.hero-content {
    position: absolute;
    bottom: 50px;
    /* Distance from bottom */
    left: 88px;
    /* Distance from left */
    z-index: 4;
    text-align: left;
    /* Align text to the left edge */
    color: #ffffff;
    max-width: 1200px;
}

/* Reduced Title Size as requested */
.hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    font-size: 36px;
    /* Reduced from 54px */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Positioning the Client's Carousel Buttons on the Hero */
.hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Adds a subtle backdrop blur to the controls to make them pop against busy videos */
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.9);
}

/* Push buttons slightly inward */
.hero-nav-btn.btn-prev {
    left: 30px;
}

.hero-nav-btn.btn-next {
    right: 30px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .hero-content {
        left: 40px;
        bottom: 60px;
    }

    .hero-title {
        font-size: 38px;
    }
}

@media (max-width: 576px) {
    .hero-content {
        left: 20px;
        bottom: 40px;
    }

    .hero-title {
        font-size: 32px;
    }

    /* Optional: Hide arrows on very small screens, let users swipe (JS required for swipe) */
    .hero-nav-btn {
        display: none;
    }
}














/* --- 3D METALLIC COPPER BUTTON --- */
.btn-primary-copper {
    /* Layout & Typography */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    /* text-transform: uppercase; */
    text-decoration: none;
    color: #ffffff;
    border-radius: 12px;
    border: 1px solid #824719;
    /* Dark metallic outline */

    /* 1. The Metallic Surface (Gradient instead of solid color) */
    background: linear-gradient(180deg, #d89f72 0%, #be7c46 40%, #a35d26 100%);

    /* 2. The 3D Structure (Highlight, Block Thickness, and Drop Shadow) */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        /* Top edge highlight */
        0 4px 0 #733f15,
        /* 3D solid thickness */
        0 8px 15px rgba(0, 0, 0, 0.2);
    /* Soft drop shadow */

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    /* Embossed text effect */

    position: relative;
    overflow: hidden;
    /* Keeps the shine animation inside the button */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* 3. The Shine Beam Setup */
.btn-primary-copper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    /* Start off-screen to the left */
    width: 60%;
    height: 100%;
    /* Create a soft, semi-transparent white beam */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    /* Tilt the beam */
    z-index: 1;
}

/* --- HOVER STATE --- */
.btn-primary-copper:hover {
    color: #ffffff;
    /* Brighten the metal slightly */
    background: linear-gradient(180deg, #e3ad83 0%, #c98954 40%, #ad6831 100%);
    transform: translateY(-2px);
    /* Lift up */
    /* Increase the thickness and shadow on hover */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 6px 0 #733f15,
        0 12px 20px rgba(0, 0, 0, 0.25);
}

/* Trigger the Shine Animation on Hover */
.btn-primary-copper:hover::before {
    animation: copper-shine 0.7s ease-in-out;
}

/* --- ACTIVE (CLICK) STATE --- */
.btn-primary-copper:active {
    transform: translateY(4px);
    /* Physically push the button down */
    /* Flatten the 3D thickness completely */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        /* Add an inner shadow to look pressed */
        0 0px 0 #733f15,
        0 2px 5px rgba(0, 0, 0, 0.2);
}

/* The Animation Keyframes */
@keyframes copper-shine {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }

    /* Sweep entirely across to the right */
}
























/* --- SCROLL ANIMATION ENGINE --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    /* Starts slightly lower */
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Premium easing curve */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    /* Glides into place */
}

/* Staggered Delays for Grid Items */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

/* --- SECTION 2: THE CHRONICLES --- */
.section-padding {
    padding: 120px 0;
    background-color: var(--soft-beige);
}

.section-label {
    color: var(--copper-solid);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 48px;
    color: var(--deep-forest);
    line-height: 1.1;
    margin-bottom: 24px;
}

/* Editorial Masonry Grid */
.chronicles-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.story-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Grid Spanning */
.card-large {
    grid-column: span 8;
    height: 500px;
}

.card-tall {
    grid-column: span 4;
    height: 500px;
}

.card-wide {
    grid-column: span 12;
    height: 400px;
}

@media (max-width: 991px) {

    .card-large,
    .card-tall,
    .card-wide {
        grid-column: span 12;
        height: 400px;
    }
}

/* Image & Hover Effects */
.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

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

/* Content Overlays */
.story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(31, 58, 46, 0.9) 0%, rgba(31, 58, 46, 0) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.story-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--copper-solid);
    color: #fff;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
}

.story-quote {
    font-family: var(--font-heading);
    font-size: 24px;
    font-style: italic;
    margin-bottom: 12px;
}

.story-client {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1px;
    opacity: 0.9;
}


























/* --- TRUST & INTRODUCTION SECTION --- */
.trust-section {
    background-color: #ffffff;
    /* Crisp white to contrast the hero video */
    padding: 100px 0;
    position: relative;
}

/* The Monogram/Accent (Replaces the Nelson 'N') */
.brand-accent-mark {
    color: var(--copper-solid);
    font-size: 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.brand-accent-mark::before,
.brand-accent-mark::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: var(--copper-border);
    opacity: 0.5;
}

/* The Introduction Statement */
.trust-statement {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1.6;
    color: var(--deep-forest);
    max-width: 800px;
    margin: 0 auto 60px auto;
    text-align: center;
}

/* The Badges Grid */
.trust-badges-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* The Horizontal Connecting Line (Modernized from Nelson) */
.trust-badges-container::before {
    content: '';
    position: absolute;
    top: 40px;
    /* Aligns with the center of the circular icons */
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(166, 124, 82, 0.3), transparent);
    z-index: 1;
}

.trust-badge-item {
    text-align: center;
    position: relative;
    z-index: 2;
    background: #ffffff;
    /* Masks the line behind it */
    padding: 0 15px;
}

/* Modern Solid Badge instead of Dotted Borders */
.trust-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: var(--soft-beige);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
    color: var(--copper-solid);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
}

.trust-badge-item:hover .trust-icon-wrapper {
    transform: translateY(-8px) scale(1.05);
    background-color: var(--deep-forest);
    color: var(--soft-beige);
}

.trust-badge-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--deep-forest);
    margin-bottom: 8px;
}

.trust-badge-desc {
    font-size: 12px;
    font-weight: 400;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trust-statement {
        font-size: 22px;
        padding: 0 20px;
    }

    .trust-badges-container::before {
        display: none;
        /* Hide line on mobile stack */
    }

    .trust-badge-item {
        margin-bottom: 40px;
    }
}























/* --- VALUE PROPOSITION / TRUST BAR --- */
.value-props-section {
    /* background-color: #ffffff; */
    padding: 60px 0 60px 0;
    /* Ample breathing room */
}

.value-props-heading {
    font-family: var(--font-heading);
    font-size: 32px;
    color: var(--deep-forest);
    font-weight: 500;
    margin-bottom: 60px;
    letter-spacing: -0.5px;
    /* Pulls the serif letters together elegantly */
}

.value-props-row {
    align-items: center;
}

.value-prop-col {
    padding: 0 40px;
    /* Space between text and the vertical lines */
}

.value-prop-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #444444;
    /* Slightly softer than pure black for readability */
    margin: 0;
    font-weight: 400;
}

/* The elegant vertical dividers on desktop */
@media (min-width: 768px) {
    .value-prop-col.has-borders {
        border-left: 1px solid #838383;
        border-right: 1px solid #838383;
    }
}

/* Graceful mobile degradation */
@media (max-width: 767px) {
    .value-props-section {
        padding: 40px 0 60px 0;
    }

    .value-props-heading {
        font-size: 26px;
        margin-bottom: 40px;
        padding: 0 15px;
    }

    .value-prop-col {
        padding: 25px 20px;
    }

    /* Flip vertical borders to horizontal borders on mobile */
    .value-prop-col.has-borders {
        border-top: 1px solid #838383;
        border-bottom: 1px solid #838383;
    }
}



























/* --- DESTINATIONS CAROUSEL SECTION --- */
.destinations-section {
    /* The famous 50/50 split horizon line */
    background: linear-gradient(to bottom, var(--deep-forest) 55%, var(--soft-beige) 45%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.destinations-header {
    text-align: center;
    color: #ffffff;
    margin-bottom: 60px;
    position: relative;
    z-index: 10;
}

/* Base Title Styling */
.destinations-title {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* The Lines: Starting State (Width 0) */
.destinations-title::before,
.destinations-title::after {
    content: '';
    display: block;
    width: 0;
    /* Start hidden */
    height: 2px;
    background-color: var(--copper-solid);
    opacity: 0.6;
    /* This creates a very smooth, slightly decelerating growth animation */
    transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The Lines: Animated State (Triggered by JS) */
.destinations-title.lines-visible::before,
.destinations-title.lines-visible::after {
    width: 80px;
    /* Full width on desktop */
}

/* Responsive constraints */
@media (max-width: 768px) {

    .destinations-title.lines-visible::before,
    .destinations-title.lines-visible::after {
        width: 40px;
        /* Full width on mobile */
    }
}


.destinations-subtitle {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--copper-solid);
}

/* Carousel Container */
.carousel-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

/* The Track */
.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
    /* Masks the edges slightly for a smoother enter/exit */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.carousel-track {
    display: flex;
    gap: 32px;
    /* Slightly wider gap to match the wider cards */
    width: max-content;
    cursor: grab;
    will-change: transform;
}

.carousel-track:active {
    cursor: grabbing;
}

/* The Cards */
.destination-card {
    width: 420px;
    /* Wide, cinematic 16:9 ratio feel */
    height: 260px;
    position: relative;
    border-radius: 4px;
    /* Sharper corners feel more editorial/premium */
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    background-color: var(--deep-forest);
    /* Fills space before image loads */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.destination-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Image handling */
.destination-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    /* Prevents edge-bleeding on some browsers */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Text Overlay (Replaces the copied dotted circle) */
.card-overlay {
    position: absolute;
    inset: 0;
    /* Stretches to all 4 corners */
    background: linear-gradient(to top, rgba(31, 58, 46, 0.9) 0%, rgba(31, 58, 46, 0) 60%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: background 0.5s ease;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 32px;
    color: #ffffff;
    margin: 0;
    transform: translateY(20px);
    /* Pushed down initially */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}

.card-action {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--copper-solid);
    margin-top: 8px;
    opacity: 0;
    /* Hidden initially */
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover reveal */
.destination-card:hover .card-overlay {
    background: linear-gradient(to top, rgba(31, 58, 46, 0.95) 0%, rgba(31, 58, 46, 0.5) 50%, rgba(31, 58, 46, 0) 100%);
}

.destination-card:hover .card-action {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    /* This creates the professional stagger */
}

.destination-card:hover .card-title {
    transform: translateY(0);
    color: var(--copper-solid);
}



/* --- 3D METALLIC CAROUSEL BUTTONS --- */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Base vertical centering */
    width: 50px;
    height: 50px;
    border-radius: 50%;

    /* 1. The 3D Copper Ring (Bezel Effect) */
    background: linear-gradient(180deg, #e3ad83 0%, #c98954 40%, #ad6831 100%);
    border: 2px solid #be7c46;
    border-top-color: #e3ad83;
    border-bottom-color: #733f15;

    box-shadow:
        inset 0 1px 2px rgba(227, 173, 131, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.1);
    /* Base drop shadow */

    color: var(--soft-beige);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    overflow: hidden;
    /* Contains the shine beam */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Ensure the Lucide icon stays above the shine */
.carousel-btn i {
    position: relative;
    z-index: 2;
}

/* 2. The Shine Beam Setup */
.carousel-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 3;
}

/* --- HOVER STATE --- */
.carousel-btn:hover {
    color: #ffffff;

    /* Fill with the metallic gradient */
    background: linear-gradient(180deg, #e3ad83 0%, #c98954 40%, #ad6831 100%);

    /* Blend the border into the gradient */
    border-color: #c98954;
    border-top-color: #e3ad83;
    border-bottom-color: #ad6831;

    /* CRITICAL: Combine the 50% vertical centering with the 2px hover lift */
    transform: translateY(calc(-50% - 2px));

    /* The 3D Block Shadow */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 4px 0 #733f15,
        0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Trigger the Shine Animation */
.carousel-btn:hover::before {
    animation: copper-shine-circle 0.6s ease-in-out;
}

/* --- ACTIVE (CLICK) STATE --- */
.carousel-btn:active {
    /* Physically push down, maintaining the centering */
    transform: translateY(calc(-50% + 2px));

    /* Flatten the 3D block */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 0px 0 #733f15,
        0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Keep your existing positioning and media queries untouched */
.btn-prev {
    left: 10px;
}

.btn-next {
    right: 10px;
}

@media (max-width: 768px) {
    .destination-card {
        width: 260px;
        height: 380px;
    }

    .carousel-btn {
        display: none;
    }
}





/* --- AMBIENT BACKGROUND SVGS --- */
.bg-animated-svgs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    /* Constrain exactly to the green portion of your background */
    overflow: hidden;
    pointer-events: none;
    /* Allows users to click through them */
    z-index: 1;
    /* Sits behind the text and cards */
}

.ambient-svg {
    position: absolute;
    color: var(--copper-solid);
}

/* The Compass Animation */
.svg-compass {
    top: -20%;
    right: -5%;
    width: 500px;
    height: 500px;
    opacity: 0.15;
    /* Subtle watermark effect */
    animation: rotate-compass 90s linear infinite;
    /* Very slow, majestic spin */
}

/* The Topographic Waves Animation */
.svg-waves {
    top: 10%;
    left: -10%;
    width: 800px;
    height: auto;
    opacity: 0.1;
    animation: drift-waves 25s ease-in-out infinite alternate;
    /* Gentle drifting */
}

/* Make sure your existing header and carousel sit above the SVGs */
.destinations-header,
.carousel-container {
    position: relative;
    z-index: 10;
}

/* --- KEYFRAMES --- */
@keyframes rotate-compass {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes drift-waves {
    0% {
        transform: translateX(0) translateY(0) scale(1);
    }

    100% {
        transform: translateX(50px) translateY(-20px) scale(1.05);
    }
}

/* Hide on very small screens to maintain cleanliness */
@media (max-width: 768px) {
    .bg-animated-svgs {
        display: none;
    }
}


















/* --- THE EDITORIAL PLAQUE BANNER --- */
.offers-banner-section {
    padding: 0;
    position: relative;
}

.banner-carousel-wrapper {
    position: relative;
    width: 100%;
    /* Forces the carousel to take up the exact full height of the screen */
    height: 100vh;
    min-height: 600px;
    background-color: #000;
}

.banner-track {
    display: flex;
    height: 100%;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
    /* Ultra-smooth slide */
}

.banner-slide {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* The Image - Pure, Untouched, with Ken Burns Effect */
.banner-img-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.banner-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: slowZoom 25s infinite alternate linear;
}

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

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

/* --- THE EDITORIAL PLAQUE --- */
.editorial-plaque {
    position: absolute;
    /* Tighter positioning to the bottom left */
    bottom: 60px;
    left: 60px;
    background-color: var(--soft-beige);
    /* Reduced padding and max-width for a more compact, refined look */
    padding: 35px 45px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.plaque-heading {
    font-family: var(--font-heading);
    font-size: 36px;
    /* Reduced from 48px */
    line-height: 1.15;
    color: var(--deep-forest);
    margin: 0 0 16px 0;
}

.plaque-divider {
    width: 40px;
    /* Shorter divider line */
    height: 2px;
    background-color: var(--copper-solid);
    margin-bottom: 24px;
}

.plaque-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Scaled-down Pricing */
.plaque-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--deep-forest);
}

.price-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
}

.price-value {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 600;
    color: var(--copper-solid);
}

/* Reduced from 36px */
.price-suffix {
    font-size: 12px;
    color: #666;
}

/* A bespoke button designed specifically for the light plaque */
.btn-forest-luxury {
    background-color: var(--deep-forest);
    color: #ffffff;
    padding: 16px 36px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--deep-forest);
    transition: all 0.4s ease;
}

.btn-forest-luxury:hover {
    background-color: transparent;
    color: var(--deep-forest);
}

/* Minimalist Nav Arrows */
.banner-nav {
    position: absolute;
    /* Align to the bottom right */
    top: auto;
    bottom: 60px;
    transform: none;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: var(--deep-forest);
    /* Slightly smaller arrows to match the refined plaque */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.banner-nav:hover {
    background: var(--copper-solid);
    color: #ffffff;
    transform: translateY(-3px);
    /* Gentle lift instead of scaling */
}

/* Exact positioning for the right side */
.banner-nav.prev {
    left: auto;
    right: 120px;
}

.banner-nav.next {
    left: auto;
    right: 60px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .editorial-plaque {
        left: 30px;
        right: 30px;
        bottom: 30px;
        max-width: none;
        width: auto;
        padding: 30px;
    }

    .banner-nav {
        display: none;
    }
}

@media (max-width: 576px) {
    .plaque-action-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .plaque-heading {
        font-size: 32px;
    }
}

.banner-nav.prev:hover,
.banner-nav.next:hover {
    transform: scale(1.05);
}








































/* --- OUR SERVICE: ROUNDED LUXURY GRID --- */
.service-section {
    background-color: var(--deep-forest);
    padding: 64px 0;
    color: #ffffff;
}

.service-subtitle {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--copper-solid);
    margin-bottom: 16px;
}

/* --- THE TABS WITH ICONS --- */
.service-tabs-wrapper {
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.service-tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between SVG and text */
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding-bottom: 20px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* Tab Icon Sizing */
.tab-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
    transition: stroke 0.3s ease;
}

.tab-item:hover {
    color: #ffffff;
}

.tab-item.active {
    color: #ffffff;
}

/* Copper highlight for active icon */
.tab-item:hover .tab-icon,
.tab-item.active .tab-icon {
    stroke: var(--copper-solid);
}

.tab-item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--copper-solid);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: left;
}

.tab-item.active::after {
    transform: scaleX(1);
}

/* --- THE FLUSH CONTENT PANES (NOW ROUNDED) --- */
.service-content-wrapper {
    position: relative;
    min-height: 400px;
}

.service-pane {
    display: none;
    animation: fadeAndSlideUp 0.6s ease forwards;
}

.service-pane.active {
    display: block;
}

@keyframes fadeAndSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Restoring Design System: 12px Border Radius */
.flush-row {
    background-color: var(--dark-forest);

    /* Figma Spec */
    overflow: hidden;
    /* Ensures image and background clip to the rounded corners */
    /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); */
    /* Soft grounding shadow allowed with rounded corners */
}

.service-img-col {
    height: 100%;
    border-radius: 24px;
    height: 450px;
    overflow: hidden;
}

.service-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 25s: Ultra-slow so it doesn't make the user dizzy
       ease-in-out: Smooth acceleration and deceleration
       infinite alternate: Zooms in, then smoothly zooms back out forever
    */
    animation: ambient-zoom 4s ease-in-out infinite alternate;
    transform-origin: center center;
}

/* The Animation Engine */
@keyframes ambient-zoom {
    0% {
        transform: scale(1);
    }

    100% {
        /* 1.12 (12% zoom) is the sweet spot. It feels alive without losing image quality */
        transform: scale(1.12);
    }
}

/* Optional: Subtle tactile feedback on hover since we removed the zoom hover */
.service-pane:hover .service-img-col img {
    filter: brightness(1.05);
    /* Just a very subtle brightening when the user is reading that specific pane */
    transition: filter 0.4s ease;
}

.service-pane:hover .service-img-col img {
    transform: scale(1.05);
}

.service-text-col {
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Luxury SVG Accent in Text Column */
.pane-svg-accent {
    margin-bottom: 24px;
}

.pane-svg-accent svg {
    width: 36px;
    height: 36px;
    stroke: var(--copper-solid);
    stroke-width: 1.5px;
}

.pane-title {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 20px;
    color: #ffffff;
}

.pane-text {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

/* Restoring Design System: 8px Border Radius for Buttons */
.btn-outline-copper {
    align-self: flex-start;
    background: transparent;
    color: #ffffff;
    padding: 14px 32px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid var(--copper-border);
    border-radius: 8px;
    /* Figma Spec */
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-outline-copper:hover {
    background: var(--copper-solid);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(198, 139, 89, 0.2);
}

@media (max-width: 992px) {
    .service-tabs {
        justify-content: flex-start;
        padding-bottom: 5px;
    }

    .service-text-col {
        padding: 50px 40px;
    }

    .service-img-col {
        min-height: 350px;
    }
}







/* --- OUR SERVICE AMBIENT BACKGROUND --- */
.service-section {
    /* Ensure the section bounds the absolute background */
    position: relative;
    overflow: hidden;
}

.service-bg-svgs {
    position: absolute;
    inset: 0;
    /* Shorthand for top:0, left:0, bottom:0, right:0 - covers the whole section */
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Prevents the SVGs from blocking mouse clicks on your tabs/buttons */
    z-index: 1;
    /* Keep it below the main content container */
}

/* Base class for SVGs to inherit the Copper brand color */
.service-bg-svgs .ambient-svg {
    position: absolute;
    color: var(--copper-solid);
}

/* 1. Astrolabe Rings (Placed centrally, rotating) */
.service-svg-rings {
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    margin-top: -400px;
    /* Centers it perfectly */
    margin-left: -400px;
    opacity: 0.08;
    /* Very subtle watermark */
    animation: rotate-astrolabe 120s linear infinite;
    /* Ultra-slow, majestic spin */
}

/* 2. Constellation Nodes (Placed offset, floating) */
.service-svg-nodes {
    bottom: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
    opacity: 0.68;
    animation: float-nodes 2s ease-in-out infinite alternate;
}

/* --- KEYFRAMES --- */
@keyframes rotate-astrolabe {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.05);
    }

    /* Slight breathing effect while spinning */
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes float-nodes {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-40px) rotate(10deg);
    }

    /* Gentle drift up and tilt */
}

/* Hide on mobile to keep the focused content clean */
@media (max-width: 768px) {
    .service-bg-svgs {
        display: none;
    }
}













































/* --- THE CHRONICLES (STORYTELLING) SECTION --- */
/* --- THE CHRONICLES SECTION --- */
.chronicles-section {
    padding: 100px 0;
    background-color: #ffffff;
    /* Clean white to contrast previous dark sections */
}

/* Modifier for Left-Aligned Title Animation */
.destinations-title.title-left-aligned {
    justify-content: flex-start;
    flex-grow: 1;
    /* Allows it to push the arrows to the right */
}

/* Hide the left line, make the right line grow to fill the space */
.destinations-title.title-left-aligned::before {
    display: none;
}

.destinations-title.title-left-aligned.lines-visible::after {
    flex-grow: 1;
    /* Fills the empty space like the reference image */
    width: auto;
    margin-left: 20px;
}

/* Small Navigation Arrows (Matches Reference) */
.header-nav-controls {
    display: flex;
    gap: 10px;
}




/* --- 3D COPPER NAVIGATION ARROWS --- */
.nav-arrow-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--deep-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* 1. The 3D Copper Ring (Bezel Effect) */
    border: 2px solid #be7c46;
    border-top-color: #e3ad83;
    /* Light hits the top edge */
    border-bottom-color: #733f15;
    /* Shadow on the bottom edge */

    box-shadow:
        inset 0 1px 2px rgba(227, 173, 131, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.05);

    overflow: hidden;
    /* Crucial: Keeps the shine inside the circle */
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

/* Ensure the icon sits above the background but below the shine */
.nav-arrow-sm i {
    position: relative;
    z-index: 2;
}

/* 2. The Shine Beam Setup */
.nav-arrow-sm::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 3;
    /* Shine passes over the icon */
}

/* --- HOVER STATE --- */
.nav-arrow-sm:hover {
    color: #ffffff;

    /* Fill the ring with the metallic gradient */
    background: linear-gradient(180deg, #e3ad83 0%, #c98954 40%, #ad6831 100%);

    /* Blend the border */
    border-color: #c98954;
    border-top-color: #e3ad83;
    border-bottom-color: #ad6831;

    /* Scaled-down 3D Block Shadow for a 40px button */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 3px 0 #733f15,
        0 6px 12px rgba(0, 0, 0, 0.2);

    transform: translateY(-2px);
    /* Lift off the page */
}

/* Trigger the Shine Animation */
.nav-arrow-sm:hover::before {
    animation: copper-shine-circle 0.6s ease-in-out;
}

/* --- ACTIVE (CLICK) STATE --- */
.nav-arrow-sm:active {
    transform: translateY(1px);
    /* Physically push down */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 0px 0 #733f15,
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Specific keyframes for the smaller circular button */
@keyframes copper-shine-circle {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}







/* --- CAROUSEL & CARDS --- */
.chronicles-carousel-wrapper {
    overflow: hidden;
    margin: 0 -15px;
    /* Slight negative margin to allow shadow bleed */
    padding: 20px 15px;
}

.chronicles-track {
    display: flex;
    gap: 30px;
    width: max-content;
    will-change: transform;
}

.chronicle-card {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Image Wrapper with 12px Radius constraint */
.chronicle-img-wrapper {
    position: relative;
    width: 100%;
    height: 340px;
    /* Square-ish ratio like the reference */
    border-radius: 12px;
    /* Enforcing the design system */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: var(--soft-beige);
}

.chronicle-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Vertical Badge (Matching Reference) */
.vertical-badge {
    position: absolute;
    bottom: 20px;
    right: 0;
    background: #ffffff;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 12px 6px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

/* Hover Action Container */
.img-hover-action {
    position: absolute;
    inset: 0;
    background: rgba(31, 58, 46, 0.4);
    /* Deep forest overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
}

/* The Hover Interactions */
.chronicle-card:hover .chronicle-img-wrapper img {
    transform: scale(1.08);
}

.chronicle-card:hover .img-hover-action {
    opacity: 1;
}

/* Text Content */
.chronicle-info {
    padding-right: 20px;
}

.chronicle-title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--deep-forest);
    margin-bottom: 8px;
    line-height: 1.3;
}

.chronicle-meta {
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Bottom Action Line */
.footer-line {
    height: 1px;
    background-color: #eaeaea;
}






















/* --- THE CIRCULAR ANIMATED HOVER BUTTON --- */
.img-hover-action {
    position: absolute;
    inset: 0;
    background: rgba(31, 58, 46, 0.4);
    /* Dark forest overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 10;
}

.circle-btn-read {
    width: 90px;
    height: 90px;
    background: var(--copper-solid);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    /* Starts shrunken and pushed down slightly */
    transform: scale(0.5) translateY(30px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Buttery smooth easing */
    box-shadow: 0 10px 25px rgba(198, 139, 89, 0.4);
}

.circle-btn-read i {
    transition: transform 0.3s ease;
}

.circle-btn-text {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin-bottom: 2px;
}

/* 1. Reveal overlay and button when hovering the CARD */
.chronicle-card:hover .img-hover-action {
    opacity: 1;
}

/* 2. Scale the button up and into place */
.chronicle-card:hover .circle-btn-read {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 3. Micro-interaction when hovering the BUTTON ITSELF */
.circle-btn-read:hover {
    background: #ffffff;
    color: var(--copper-solid);
    transform: scale(1.08) translateY(0) !important;
    /* Slight pop */
}

/* Arrow shoots up and right on button hover */
.circle-btn-read:hover i {
    transform: translate(3px, -3px);
}

























/* --- LUXURY DEAL CARDS (MINIMALIST & COMPACT) --- */
.deals-section {
    background-color: var(--soft-beige);
}

.luxury-deal-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Softer, more minimal shadow */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.luxury-deal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* 1. Image Priority */
.deal-hero-img {
    position: relative;
    width: 100%;
    /* Increased image height slightly while reducing text height, giving the image massive visual priority */
    height: 280px;
    background-color: var(--deep-forest);
    overflow: hidden;
}

.deal-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.luxury-deal-card:hover .deal-hero-img img {
    transform: scale(1.05);
}

/* Scaled-down Badges */
.deal-badge-premium {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.save-text {
    background: var(--copper-solid);
    color: #fff;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.extra-text {
    background: #fff;
    color: var(--deep-forest);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Minimalist Glass Timer */
.glass-timer {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
    color: var(--deep-forest);
}

.time-segment {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

/* USING --font-body FOR NUMBERS AS REQUESTED */
.time-segment strong {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
}

.time-segment span {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: 500;
}

.colon {
    font-weight: 600;
    opacity: 0.3;
    padding-bottom: 2px;
    font-size: 12px;
}

.text-copper {
    color: var(--copper-solid);
}

/* 2. Compact Structured Content */
.deal-body {
    padding: 25px;
    /* Drastically reduced from 35px */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.deal-title {
    font-family: var(--font-heading);
    font-size: 20px;
    /* Reduced from 26px for elegance */
    color: var(--deep-forest);
    line-height: 1.3;
    margin-bottom: 8px;
    /* Tighter spacing */
}

.deal-location {
    font-size: 12px;
    /* Smaller metadata */
    color: #666;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Minimalist Tags */
.deal-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    /* Tighter spacing */
}

.tag-include {
    background: var(--soft-beige);
    color: var(--deep-forest);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tag-exclude {
    background: transparent;
    border: 1px solid #eaeaea;
    color: #a0a0a0;
    text-decoration: line-through;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Compact Itinerary List */
.deal-itinerary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 12px;
    /* Reduced font size */
    color: #555;
    line-height: 1.5;
}

.deal-itinerary-list li {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    /* Tighter list items */
}

.list-icon {
    color: var(--copper-solid);
    flex-shrink: 0;
    margin-top: 2px;
    width: 14px;
    height: 14px;
}

/* 3. Action Bar (Minimal Price & Button) */
.deal-checkout-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    border-top: 1px solid #eaeaea;
    padding-top: 15px;
    /* Tighter top padding */
}

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

/* USING --font-body FOR NUMBERS AS REQUESTED */
.price-strikethrough {
    font-family: var(--font-body);
    font-size: 12px;
    color: #888;
    text-decoration: line-through;
    margin-bottom: 2px;
}

.price-current {
    font-family: var(--font-body);
    /* Switched from --font-heading to --font-body */
    font-size: 32px;
    /* Reduced from 40px */
    font-weight: 600;
    /* Slightly lighter weight for an elegant sans-serif look */
    color: var(--deep-forest);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    /* Pulls numbers together cleanly */
}

.price-current .currency {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--copper-solid);
    vertical-align: top;
    margin-right: 2px;
}

.price-legal {
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Thinner, more elegant CTA button for this compact card */
.deal-checkout-row .btn-secondary-copper {
    padding: 10px 24px;
    font-size: 11px;
}

/* 4. Footer Trust Bar */
.deal-trust-footer {
    background: var(--deep-forest);
    padding: 12px 25px;
    /* Reduced padding */
    display: flex;
    justify-content: space-between;
    color: #ffffff;
}

.deal-trust-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    /* Smaller text */
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .deal-checkout-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .deal-checkout-row .btn-secondary-copper {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .deal-trust-footer {
        flex-direction: column;
        gap: 8px;
        padding: 15px 25px;
    }
}
































/* --- BENTO GRID: SIGNATURE STAYS --- */
.stays-section {
    background-color: #ffffff;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
    grid-auto-flow: dense;
}

.bento-item {
    position: relative;
    border-radius: 12px;
    /* Design System Constraint */
    overflow: hidden;
    background-color: var(--soft-beige);
}

/* Bento Variations */
.bento-tall {
    grid-row: span 2;
}

.bento-wide {
    grid-column: span 2;
}

.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bento-item:hover img {
    transform: scale(1.1);
}

/* Content Overlays */
.bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31, 58, 46, 0.8) 0%, rgba(31, 58, 46, 0) 60%);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bento-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--copper-solid);
    font-weight: 700;
    margin-bottom: 8px;
}

.bento-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 4px;
}

.bento-loc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
}

/* Reusing the Circle Button from the previous section */
.bento-item .img-hover-action {
    background: rgba(31, 58, 46, 0.4);
}

/* Responsive Bento */
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-wide,
    .bento-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 576px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }
}












































/* --- CLIENT LIFE MOMENTS SECTION --- */
.moments-section {
    background-color: var(--deep-forest);
    padding: 120px 0;
    color: #ffffff;
    overflow: hidden;
    /* Prevents horizontal scroll from carousel bleed */
}

.moments-intro-col {
    padding-right: 40px;
}

/* 1. The Luxury Rotating Stamp */
.rotating-stamp-link {
    display: inline-block;
    margin-bottom: 40px;
    text-decoration: none;
}

.rotating-stamp {
    position: relative;
    width: 110px;
    height: 110px;
    color: var(--copper-solid);
    transition: transform 0.3s ease;
}

.rotating-stamp:hover {
    transform: scale(1.05);
}

.stamp-svg {
    width: 100%;
    height: 100%;
    animation: stamp-spin 15s linear infinite;
    /* Slow, elegant rotation */
}

.stamp-svg text {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 2px;
    fill: var(--copper-solid);
    text-transform: uppercase;
}

.stamp-center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--copper-solid);
    width: 24px;
    height: 24px;
}

@keyframes stamp-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 2. Intro Typography */
.moments-title {
    font-family: var(--font-heading);
    font-size: 46px;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 20px;
}

.moments-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
}

/* Dark-mode variation for existing nav arrows */
.nav-arrow-sm.light {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.nav-arrow-sm.light:hover {
    background: var(--copper-solid);
    border-color: var(--copper-solid);
}

/* 3. The Carousel Track & Cards */
.moments-carousel-wrapper {
    /* Margin manipulation to let cards bleed off the right edge of the screen */
    margin-right: calc(-50vw + 50%);
    padding-right: calc(50vw - 50%);
    overflow: hidden;
}

.moments-track {
    display: flex;
    gap: 30px;
    width: max-content;
    will-change: transform;
}

.moment-card {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Editorial 4:5 Aspect Ratio Images */
.moment-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    /* Taller, more elegant than a square */
    border-radius: 12px;
    /* Design System Constraint */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: var(--dark-forest);
}

.moment-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover Interactions */
.moment-card:hover .moment-img-wrapper img {
    transform: scale(1.08);
}

.moment-caption {
    font-family: var(--font-heading);
    font-size: 22px;
    color: #ffffff;
    margin: 0;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

/* Subtle line animation under caption on hover */
.moment-caption::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--copper-solid);
    transition: width 0.3s ease;
    margin-left: 15px;
}

.moment-card:hover .moment-caption {
    color: var(--copper-solid);
}

.moment-card:hover .moment-caption::after {
    width: 40px;
}

/* Responsive */
@media (max-width: 992px) {
    .moments-intro-col {
        padding-right: 15px;
        margin-bottom: 50px;
    }

    .moments-carousel-wrapper {
        margin-right: -15px;
        padding-right: 15px;
    }
}





/* --- MOMENTS SECTION AMBIENT BACKGROUND --- */
.moments-section {
    position: relative;
    overflow: hidden;
}

.moments-bg-svgs {
    position: absolute;
    inset: 0;
    /* Covers the entire section (top, right, bottom, left) */
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Prevents clicks from being intercepted */
    z-index: 1;
    /* Sits behind the main container */
}

/* Base style inherits the Copper color */
.moments-bg-svgs .ambient-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--copper-solid);
}

/* 1. Ripples Animation */
.moments-svg-ripples {
    opacity: 0.12;
    /* Faint watermark */
    transform-origin: center center;
}

.ripple-1 {
    animation: ripple-pulse 12s infinite alternate ease-in-out;
    transform-origin: center;
}

.ripple-2 {
    animation: ripple-pulse 18s infinite alternate-reverse ease-in-out;
    transform-origin: center;
}

.ripple-3 {
    animation: rotate-slow 60s linear infinite;
    transform-origin: center;
}

.ripple-4 {
    animation: ripple-pulse 24s infinite alternate ease-in-out;
    transform-origin: center;
}

/* 2. Celebration Sparks Animation */
.moments-svg-sparks {
    opacity: 0.60;
    /* Slightly brighter for the sparks */
}

/* Stagger the sparks so they don't all float up at once */
.spark-1 {
    animation: float-up 8s infinite linear;
}

.spark-2 {
    animation: float-up 8s infinite linear 4s;
}

.spark-3 {
    animation: float-up 12s infinite linear 8s;
}

.spark-4 {
    animation: float-up 4s infinite linear 2s;
}

.spark-5 {
    animation: float-up 4s infinite linear 10s;
}

.wave-drift {
    animation: wave-breathe 8s infinite alternate ease-in-out;
}

/* --- KEYFRAMES --- */

/* Rings expanding and contracting */
@keyframes ripple-pulse {
    0% {
        transform: scale(0.2);
        stroke-width: 0.3;
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        stroke-width: 0.05;
        opacity: 0.2;
    }
}

/* Slow rotation for the dashed circle */
@keyframes rotate-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Sparks floating upward like champagne bubbles */
@keyframes float-up {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-150px) scale(0.5);
        opacity: 0;
    }
}

/* Breathing motion for the background curve */
@keyframes wave-breathe {
    0% {
        transform: translateY(0) scaleY(1);
        opacity: 0.3;
    }

    100% {
        transform: translateY(-20px) scaleY(1.1);
        opacity: 0.8;
    }
}

/* Performance cleanup for mobile */
@media (max-width: 768px) {
    .moments-bg-svgs {
        display: none;
        /* Keep mobile clean and fast */
    }
}






























/* --- DRAGGABLE TESTIMONIALS --- */
.testimonials-section {
    background-color: #ffffff;
    padding-bottom: 100px;
}

.testimonial-carousel-wrapper {
    overflow: hidden;
    width: 100%;
    cursor: grab;
    /* Shows the user they can drag */
    padding: 20px 0;
}

.testimonial-carousel-wrapper:active {
    cursor: grabbing;
}

.testimonial-track {
    display: flex;
    gap: 40px;
    /* Space between reviews */
    width: max-content;
    will-change: transform;
    /* Prevent user highlighting text while dragging */
    user-select: none;
    -webkit-user-select: none;
}

.testimonial-card {
    width: 400px;
    /* Fixed width for consistent dragging */
    flex-shrink: 0;
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    /* Soft shadow instead of borders for a cleaner sliding effect */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); */
    border: 1px solid rgba(0, 0, 0, 0.164);
}

.star-rating {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.star-icon {
    width: 14px;
    height: 14px;
    stroke: var(--copper-solid);
}

.star-icon.fill-copper {
    fill: var(--copper-solid);
}

.review-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.8;
    color: var(--deep-forest);
    font-weight: 400;
    margin-bottom: 25px;
}

.traveler-name {
    font-family: 'Brush Script MT', 'Caveat', cursive;
    font-size: 32px;
    color: var(--copper-solid);
    transform: rotate(-5deg);
}






















/* --- FULL WIDTH VIDEO CTA SECTION --- */
.video-cta-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    /* Takes up 80% of the screen height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    overflow: hidden;
}

/* Background Video Styling */
.cta-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta-video-bg video,
.cta-video-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay to darken the video slightly */
.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(31, 58, 46, 0.4), rgba(31, 58, 46, 0.7));
    z-index: 1;
}

/* Ensures content sits above the video */
.z-index-2 {
    z-index: 2;
}

/* The Central Plaque */
.cta-plaque {
    background: rgba(255, 255, 255, 0.95);
    /* Slight glass effect */
    backdrop-filter: blur(10px);
    padding: 70px 60px 50px 60px;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-top: 50px;
    /* Space for the floating stamp */
}

/* Centered Stamp at the top of the plaque */
.plaque-stamp-center {
    position: absolute;
    top: -55px;
    /* Pulls it up out of the box */
    left: 50%;
    transform: translateX(-50%);
    /* Perfectly centers it */
    background: #ffffff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 110px;
    height: 110px;
}

.cta-heading {
    font-family: var(--font-heading);
    font-size: 42px;
    line-height: 1.2;
    color: var(--deep-forest);
    margin-bottom: 16px;
}

.cta-subheading {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Fixed Buttons Container */
.cta-actions-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* New Outline Dark button to fix the broken styling */
.btn-outline-dark {
    background: transparent;
    color: var(--deep-forest);
    padding: 14px 36px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid var(--deep-forest);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-outline-dark:hover {
    background: var(--deep-forest);
    color: #ffffff;
}

/* Agent Availability Fixes */
.agent-availability {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.availability-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    animation: pulse-green 2s infinite;
}

.status-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--deep-forest);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .cta-plaque {
        padding: 60px 30px 40px 30px;
    }

    .cta-heading {
        font-size: 32px;
    }

    .cta-actions-row {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions-row a {
        width: 100%;
        text-align: center;
    }
}













/* --- LUXURY TERNARY BUTTON --- */
.btn-copper-luxury {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--copper-solid);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 6px 0;
    position: relative;
    cursor: pointer;
    /* Synchronized color transition */
    transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Ensure the Lucide icon aligns perfectly */
.btn-copper-luxury i {
    width: 18px;
    /* Slightly larger to balance the 16px text */
    height: 18px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The Animated Hairline Underline Setup */
.btn-copper-luxury::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--copper-solid);
    /* Retreats to the right on hover out */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease;
}

/* --- HOVER INTERACTIONS --- */

/* 1. Text and icon transition to brand dark color together */
.btn-copper-luxury:hover {
    color: var(--copper-solid);
}

/* 2. Arrow shoots diagonally top-right to match the icon's direction */
.btn-copper-luxury:hover i {
    transform: translate(4px, -4px);
}

/* 3. Underline draws out smoothly from left to right */
.btn-copper-luxury:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    background-color: var(--deep-forest);
    /* Matches the text hover color */
}







































/* --- GLOBAL LUXURY FOOTER --- */
.luxury-footer {
    background-color: #0a110d;
    /* An ultra-dark, almost black variant of Deep Forest */
    color: #ffffff;
    padding-top: 60px;
    font-family: var(--font-body);
}

/* Base Tier Styling (Creates the horizontal lines) */
.footer-tier {
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Elegant, thin dividers */
}

/* Remove bottom border from the very last tier */
.footer-tier:last-child {
    border-bottom: none;
    padding-bottom: 60px;
}

/* --- TIER 1: BRAND --- */
.footer-brand {
    padding-top: 0;
}

/* --- TIER 2: NAVIGATION --- */
.nav-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 30px;
    /* Vertical / Horizontal gap */
}

.primary-links {
    margin-bottom: 40px;
}

.primary-links a,
.secondary-links a {
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.primary-links a:hover,
.secondary-links a:hover {
    color: var(--copper-solid);
}

.nav-cluster-label {
    width: 100%;
    font-size: 10px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.secondary-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
}

/* --- TIER 3: CONTACT (3-COLUMN LAYOUT) --- */
.contact-block {
    text-align: center;
    padding: 20px 15px;
}

/* Vertical separator lines for desktop */
@media (min-width: 992px) {

    .left-block,
    .center-block {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.contact-label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* Reduced size from 28px to 22px to elegantly fit 3 columns */
.contact-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 22px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-value:hover {
    color: var(--copper-solid);
}

/* Specific requirement: Numbers must use font-body for pure readability */
.contact-value.use-body-font {
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 1px;
}

/* Styling for the new Address Block */
.address-text {
    font-size: 24px;
    /* Slightly larger to act as a visual anchor */
    color: rgba(255, 255, 255, 0.9);
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .contact-block {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 0;
    }

    .right-block {
        border-bottom: none;
        /* Last item doesn't need a border */
    }

    .address-text {
        font-size: 18px;
    }
}

/* --- TIER 4: LEGAL & SOCIAL --- */
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: var(--copper-solid);
    border-color: var(--copper-solid);
}

.legal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.legal-links a,
.legal-links .copyright {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: #ffffff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .nav-cluster {
        gap: 15px;
        flex-direction: column;
    }

    .left-block {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .contact-value {
        font-size: 22px;
    }

    .legal-links {
        flex-direction: column;
        gap: 15px;
    }
}





/* --- FOOTER AMBIENT BACKGROUND --- */
.luxury-footer {
    position: relative;
    overflow: hidden;
    /* Ensure your footer has a dark background so the copper lines pop */
    background-color: #0a110d;
}

.footer-bg-svgs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through to the links */
    z-index: 1;
}

.footer-bg-svgs .ambient-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Stretches the SVG to fill the entire footer height */
    color: var(--copper-solid);
}

/* The River Animation Styling */
.river-line {
    /* Prevents the SVG from looking pixelated when stretched */
    vector-effect: non-scaling-stroke;
}

/* Parallax Layering: Opacities and Speeds */
.back-wave {
    opacity: 0.05;
    animation: river-drift 20s linear infinite;
}

.mid-wave {
    opacity: 0.1;
    animation: river-drift 15s linear infinite reverse;
    /* Drifts opposite direction */
}

.front-wave {
    opacity: 0.12;
    animation: river-drift 8s linear infinite;
}

/* --- KEYFRAMES --- */
@keyframes river-drift {
    0% {
        transform: translateX(-10%);
    }

    50% {
        transform: translateX(5%);
    }

    /* Drifts right */
    100% {
        transform: translateX(-10%);
    }

    /* Drifts back left */
}

/* Optional: Keep it clean on mobile */
@media (max-width: 768px) {
    .footer-bg-svgs {
        opacity: 0.5;
        /* Dim them further on small screens so text remains legible */
    }
}






















































































































/* --- ENQUIRE PAGE HERO BANNER (CENTERED) --- */
.enquire-hero {
    min-height: 500px;
    height: 50vh;
    /* Slightly taller for grandeur */
    overflow: hidden;
    padding-top: 140px;
    padding-bottom: 60px;
}

.enquire-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Centered Vignette Gradient */
.hero-gradient-overlay.centered {
    position: absolute;
    inset: 0;
    /* Dark at the edges, slightly transparent in the dead center */
    background: radial-gradient(circle at center, rgba(10, 17, 13, 0.4) 0%, rgba(10, 17, 13, 0.85) 100%);
}

.enquire-hero-content {
    margin-top: -30px;
}

.luxury-badge {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--copper-solid);
    border: 1px solid rgba(201, 137, 84, 0.3);
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(10, 17, 13, 0.4);
    backdrop-filter: blur(4px);
}

.enquire-hero-title {
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 1.2;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* --- THE 'ASIA' HIGHLIGHT --- */
.highlight-asia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-family: var(--font-heading);
    font-size: 1.4em;
    /* Makes it 40% larger than the surrounding text */
    font-style: italic;

    /* Elegant Copper Text Gradient */
    /* background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: #fff;
    padding-top: 10px;
    position: relative;
}

/* Override the text-clip for the SVGs so they render correctly */
.highlight-asia svg {
    -webkit-text-fill-color: initial;
    color: var(--soft-beige);
    width: 35px;
    height: 35px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

/* Animations for the Luxury Stars */
.asia-flourish.left {
    animation: star-pulse-left 4s ease-in-out infinite;
}

.asia-flourish.right {
    animation: star-pulse-right 4s ease-in-out infinite 2s;
    /* 2s delay so they alternate */
}

@keyframes star-pulse-left {

    0%,
    100% {
        transform: scale(1) rotate(-15deg);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(201, 137, 84, 0.6));
    }
}

@keyframes star-pulse-right {

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

    50% {
        transform: scale(1.2) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(201, 137, 84, 0.6));
    }
}

/* Subtitle and Trust Bar */
.enquire-hero-subtitle {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
}

.enquire-features-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    background: rgba(10, 17, 13, 0.75);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 0;
}

.features-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 13px;
    color: #e0e0e0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
}

.feature-item i {
    color: var(--copper-solid);
}

.feature-dot {
    color: var(--copper-solid);
    opacity: 0.4;
    font-size: 10px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .enquire-hero-title {
        font-size: 42px;
    }

    .features-list {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .enquire-hero-title {
        font-size: 32px;
    }

    .highlight-asia {
        font-size: 1.2em;
        gap: 8px;
    }

    .highlight-asia svg {
        width: 25px;
        height: 25px;
    }

    .enquire-hero-subtitle {
        font-size: 15px;
    }

    .luxury-badge {
        font-size: 9px;
        line-height: 1.4;
        padding: 6px 12px;
    }

    /* Mobile scrollable strip */
    .features-list {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .feature-item {
        flex: 0 0 auto;
        background: rgba(255, 255, 255, 0.05);
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
    }

    .features-list::-webkit-scrollbar {
        display: none;
    }
}







































/* --- LUXURY ENQUIRY WIZARD --- */
.bg-soft-beige {
    background-color: var(--soft-beige);
}

.wizard-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 50px 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
}

/* Progress Bar */
.wizard-progress-wrapper {
    position: relative;
}

.wizard-progress-track {
    height: 3px;
    background: #eaeaea;
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}

.wizard-progress-fill {
    height: 100%;
    background: var(--copper-solid);
    width: 25%;
    /* Controlled by JS */
    transition: width 0.4s ease;
}

.wizard-steps-indicators {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a0a0a0;
    font-weight: 500;
}

.step-indicator.active {
    color: var(--deep-forest);
    font-weight: 700;
}

/* Step Visibility */
.wizard-step {
    display: none;
    animation: fadeIn 0.5s ease;
}

.wizard-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.step-title {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--deep-forest);
    margin-bottom: 30px;
}

/* Selectable Cards (Radios/Checkboxes) */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.selection-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.selection-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.selection-card {
    cursor: pointer;
    position: relative;
    display: block;
}

/* Hide default input circles */
.selection-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* The actual visible card */
.card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #eaeaea;
    padding: 16px 20px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--deep-forest);
    transition: all 0.3s ease;
    background: #ffffff;
}

.card-content i {
    color: #a0a0a0;
    width: 18px;
    transition: color 0.3s ease;
}

/* Selected/Hover States */
.selection-card:hover .card-content {
    border-color: var(--copper-solid);
}

.selection-card input:checked~.card-content {
    border-color: var(--copper-solid);
    background: rgba(190, 124, 70, 0.05);
    /* Very light copper tint */
    box-shadow: inset 0 0 0 1px var(--copper-solid);
}

.selection-card input:checked~.card-content i {
    color: var(--copper-solid);
}

/* Standard Inputs & Textareas */
.input-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    /* text-transform: uppercase; */
    color: var(--deep-forest);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.custom-text-input {
    width: 100%;
    border: 1px solid #eaeaea;
    padding: 15px 20px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--deep-forest);
    outline: none;
    transition: border 0.3s ease;
}

.custom-text-input:focus {
    border-color: var(--copper-solid);
}

/* Disclaimers */
.info-notice {
    display: flex;
    background: rgba(190, 124, 70, 0.08);
    padding: 20px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--deep-forest);
    line-height: 1.6;
}

.privacy-notice {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

/* Guest Counters */
.guest-counter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}

.guest-info h4 {
    font-family: var(--font-body);
    font-size: 16px;
    margin: 0 0 4px 0;
    color: var(--deep-forest);
}

.guest-info span {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-counter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #eaeaea;
    background: #fff;
    color: var(--deep-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-counter:hover {
    border-color: var(--copper-solid);
    color: var(--copper-solid);
}

.counter-input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--deep-forest);
    outline: none;
}

/* Footer Nav */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eaeaea;
    padding-top: 30px;
}

/* Reusing your secondary outline button style */
.btn-outline-copper {
    border: 1px solid var(--copper-solid);
    background: transparent;
    color: var(--deep-forest);
    padding: 14px 30px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 768px) {
    .wizard-container {
        padding: 30px 20px;
    }

    .selection-grid,
    .selection-grid.columns-4,
    .selection-grid.columns-2 {
        grid-template-columns: 1fr;
    }

    .wizard-steps-indicators {
        display: none;
        /* Hide text steps on mobile, keep progress bar */
    }
}





/* --- CUSTOM LUXURY SELECT DROPDOWNS --- */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

/* The Trigger (Looks like an input) */
.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
}

.custom-select-trigger .select-chevron {
    width: 18px;
    height: 18px;
    color: var(--deep-forest);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The Dropdown List */
.custom-select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    z-index: 100;

    /* NEW: Height constraint and scrolling */
    max-height: 280px;
    overflow-y: auto;

    /* NEW: Firefox Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--copper-solid) transparent;

    /* Hidden by default with animation prep */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- NEW: WEBKIT CUSTOM SCROLLBAR (Chrome, Safari, Edge) --- */
.custom-select-options::-webkit-scrollbar {
    width: 6px;
    /* Thin, elegant width */
}

.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
    /* Prevents the scrollbar from overlapping the rounded top/bottom corners */
}

.custom-select-options::-webkit-scrollbar-thumb {
    background-color: var(--copper-solid);
    border-radius: 10px;
    /* Soft rounded pill shape */
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
    background-color: #a35d26;
    /* Darkens slightly when the user grabs it */
}

/* Option Items (Remains the same) */
.custom-select-options li {
    padding: 12px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--deep-forest);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.custom-select-options li:hover {
    background: var(--soft-beige);
    color: var(--copper-solid);
}

.custom-select-options li.active {
    background: rgba(190, 124, 70, 0.05);
    /* Very light copper tint */
    color: var(--copper-solid);
    font-weight: 600;
}

/* --- OPEN STATE TRIGGERS (Remains the same) --- */
.custom-select-wrapper.is-open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-wrapper.is-open .custom-select-trigger {
    border-color: var(--copper-solid);
}

.custom-select-wrapper.is-open .select-chevron {
    transform: rotate(180deg);
    color: var(--copper-solid);
}








/* --- ENQUIRY FORM AMBIENT BACKGROUND --- */
.enquiry-bg-svgs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Crucial: Allows users to click the form through the SVGs */
    z-index: 1;
    opacity: 0.12;
    /* Subtle watermark effect against the beige background */
}

.enquiry-bg-svgs .ambient-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--copper-solid);
}

.enquiry-contour {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
    /* Keeps lines crisp regardless of screen size */
}

.dashed-ring {
    stroke-dasharray: 4 12;
    stroke-width: 1px;
}

/* --- KEYFRAMES --- */
.contour-waves {
    animation: drift-contours 35s ease-in-out infinite alternate;
}

.contour-rings {
    animation: rotate-rings 100s linear infinite;
    transform-origin: 85% 15%;
    /* Matches the cx/cy of the circles */
}

@keyframes drift-contours {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-40px) scale(1.02);
    }

    /* Gentle breathing drift */
}

@keyframes rotate-rings {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

    /* Ultra-slow majestic spin */
}

/* Hide on mobile to keep the form distraction-free and performant */
@media (max-width: 768px) {
    .enquiry-bg-svgs {
        display: none;
    }
}




/* --- CUSTOM SELECT DROPDOWN FIX --- */
select.custom-text-input {
    /* 1. Hide the stubborn native browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 2. Add a custom Lucide-style chevron as a background image */
    /* Note: The stroke='%231f3a2e' matches your Deep Forest green hex code */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 16px;

    /* 3. Position the new arrow 20px from the right side, matching your padding */
    background-position: right 20px center;

    /* 4. Increase right padding so long text doesn't overlap the new icon */
    padding-right: 45px;

    /* Fix for IE/Edge to remove native arrow */
    cursor: pointer;
}

select.custom-text-input::-ms-expand {
    display: none;
}







































/* --- VIETNAM PAGE: SPECIFIC STYLES --- */

/* Search Bar Hover State */
.tour-search-field {
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.tour-search-field:hover {
    background-color: var(--soft-beige);
}

/* Quick Nav Teardrop Icons (From Client Wireframe) */
.quick-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.quick-nav-item:hover {
    transform: translateY(-5px);
}

.ani-oval {
    width: 72px;
    height: 88px;
    background: var(--deep-forest);
    /* Client's specific custom teardrop shape */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(31, 58, 46, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.quick-nav-item:hover .ani-oval {
    background: var(--copper-solid);
    box-shadow: 0 12px 30px rgba(198, 139, 89, 0.3);
}

.ani-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--deep-forest);
    text-align: center;
    transition: color 0.3s ease;
}

.quick-nav-item:hover .ani-label {
    color: var(--copper-solid);
}

/* Image Hover Zoom */
.about-image-wrapper:hover img {
    transform: scale(1.05);
}

/* Mobile Search Bar Tweaks */
@media (max-width: 991px) {
    .tour-search-field {
        border-bottom: 1px solid #eaeaea;
        border-radius: 0;
    }

    .tour-search-field:last-of-type {
        border-bottom: none;
    }
}













/* --- ADVANCED TOUR SEARCH INPUTS & DROPDOWNS --- */
.search-invisible-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--deep-forest);
    font-weight: 500;
    cursor: pointer;
}

.search-invisible-input::placeholder {
    color: var(--deep-forest);
    opacity: 0.9;
}

/* Make the first input typable */
.search-invisible-input:not([readonly]) {
    cursor: text;
}

.custom-search-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 0;
    width: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid #eaeaea;
    padding: 15px 0;
    z-index: 1000;

    /* Animation states */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Scrolling */
    max-height: 350px;
    overflow-y: auto;
}

/* Align the last dropdown to the right so it doesn't fall off the screen */
.custom-search-dropdown.right-align {
    left: auto;
    right: 0;
}

/* Active Class toggled by JavaScript */
.custom-search-dropdown.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-heading {
    display: block;
    padding: 0 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #a0a0a0;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-list li {
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--deep-forest);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-list li:hover {
    background: var(--soft-beige);
    color: var(--copper-solid);
}

/* Search Dropdown Custom Scrollbar */
.custom-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.custom-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.custom-search-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--copper-solid);
    border-radius: 10px;
}





















/* --- VIETNAM PAGE: SECTION 4, 5, 6 STYLES --- */

/* When To Visit Cards */
.when-card {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.when-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06) !important;
}

.verdict-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
}

.verdict-great {
    background: rgba(31, 58, 46, 0.1);
    color: var(--deep-forest);
}

.verdict-caution {
    background: rgba(198, 139, 89, 0.1);
    color: var(--copper-solid);
}

.verdict-avoid {
    background: rgba(192, 57, 43, 0.1);
    color: #C0392B;
}

/* Flight Tabs */
.flight-tabs {
    border-bottom: 1px solid #eaeaea;
}

.flight-tabs .nav-link {
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 24px;
    font-weight: 500;
    background: transparent;
    transition: all 0.3s ease;
}

.flight-tabs .nav-link:hover {
    color: var(--deep-forest);
}

.flight-tabs .nav-link.active {
    color: var(--deep-forest);
    border-bottom-color: var(--copper-solid);
    font-weight: 600;
}

/* Make flight tabs horizontally scrollable on mobile without wrapping */
@media (max-width: 768px) {
    .flight-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: none !important;
        padding-bottom: 4px !important;
        scrollbar-width: none;
        /* Firefox */
    }

    .flight-tabs::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .flight-tabs .nav-item {
        flex-shrink: 0 !important;
    }

    .flight-tabs .nav-link {
        padding: 10px 16px !important;
        /* Slightly more compact for smaller viewports */
    }
}

.flight-row {
    transition: background 0.2s ease;
    font-size: 14px;
}

.flight-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

.flight-chip {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.chip-direct {
    background: rgba(31, 58, 46, 0.1);
    color: var(--deep-forest);
}

.chip-stop {
    background: rgba(198, 139, 89, 0.1);
    color: var(--copper-solid);
}

/* Package Cards */
.pkg-card {
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pkg-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.pkg-img-wrapper {
    height: 280px;
    position: relative;
    overflow: hidden;
}

.pkg-img-wrapper img {
    transition: transform 0.6s ease;
}

.pkg-card:hover .pkg-img-wrapper img {
    transform: scale(1.05);
}

.incl-chip {
    font-size: 11px;
    padding: 6px 12px;
    background: rgba(31, 58, 46, 0.05);
    color: var(--deep-forest);
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}





/* Flight Section */
.f-row-x {
    background: var(--bg);
    display: grid;
    grid-template-columns: 1.6fr 0.75fr 0.75fr 0.75fr 0.75fr 1fr 0.85fr;
    align-items: center;
    padding: 0.75rem 1.1rem;
    gap: 0.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.f-row-x.head-x {
    background: var(--deep-forest);
    border-bottom: none;
}

.f-row-x.head-x span {
    font-size: 0.65rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.f-row-x.head-x .f-airline {
    color: #fff;
    font-weight: 600;
    font-size: 0.7rem;
}

.f-row-x .f-airline {
    font-weight: 600;
    color: var(--deep-forest);
    font-size: 0.85rem;
}

.f-row-x .f-via {
    color: var(--muted);
    font-size: 0.8rem;
}

.c-lcc {
    background: rgba(181, 146, 74, 0.15);
    color: var(--copper-solid);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.c-full {
    background: rgba(31, 58, 46, 0.1);
    color: var(--deep-forest);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.chip {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.c-direct {
    background: rgba(31, 58, 46, 0.05);
    color: var(--deep-forest);
}

.c-stop {
    background: #f1f3f5;
    color: #495057;
    border: 1px solid #e9ecef;
}

.c-na {
    color: #ccc;
}

.f-row-x.f-hidden {
    display: none;
}

.view-more-btn {
    width: 100%;
    margin-top: 0;
    padding: 1rem 1.2rem;
    background: rgba(31, 58, 46, 0.03);
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--deep-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
    border-radius: 0 0 8px 8px;
}

.view-more-btn:hover {
    background: rgba(31, 58, 46, 0.08);
    color: var(--primary-pink);
}

.view-more-btn .vmb-arrow {
    display: inline-block;
    transition: transform 0.25s;
    font-style: normal;
    font-size: 1.2rem;
    line-height: 0.5;
}

.view-more-btn.expanded .vmb-arrow {
    transform: rotate(180deg);
}

.city-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
}

.city-tabs::-webkit-scrollbar {
    display: none;
}

.city-tab {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid #eaeaea;
    border-radius: 30px;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.city-tab:hover {
    border-color: var(--copper-solid);
    color: var(--copper-solid);
}

.city-tab.active {
    background: var(--deep-forest);
    color: #fff;
    border-color: var(--deep-forest);
}

.flight-panel {
    display: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #eaeaea;
}

.flight-panel.show {
    display: block;
    animation: fadeIn 0.4s ease;
}

.adl-note {
    background: #fff3cd;
    color: #856404;
    padding: 12px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 1px solid #ffeeba;
}

@media (max-width: 992px) {
    .f-row-x {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }

    .f-row-x.head-x {
        display: none;
    }

    .f-row-x {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        padding: 1.5rem;
    }

    .f-row-x>span {
        flex: 0 0 45%;
        margin-bottom: 10px;
    }

    .f-row-x .f-airline {
        flex: 0 0 100%;
        font-size: 1.1rem;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .f-row-x>span:nth-child(2)::before {
        content: "To SGN: ";
        font-size: 0.7rem;
        color: #999;
        display: block;
        margin-bottom: 4px;
    }

    .f-row-x>span:nth-child(3)::before {
        content: "To PQC: ";
        font-size: 0.7rem;
        color: #999;
        display: block;
        margin-bottom: 4px;
    }

    .f-row-x>span:nth-child(4)::before {
        content: "To DAD: ";
        font-size: 0.7rem;
        color: #999;
        display: block;
        margin-bottom: 4px;
    }

    .f-row-x>span:nth-child(5)::before {
        content: "To HAN: ";
        font-size: 0.7rem;
        color: #999;
        display: block;
        margin-bottom: 4px;
    }

    .f-row-x .f-via::before {
        content: "Via: ";
        font-size: 0.7rem;
        color: #999;
        display: inline-block;
        margin-right: 5px;
    }

    .f-row-x .f-via {
        flex: 0 0 100%;
        order: 10;
        margin-top: 10px;
        background: #f8f9fa;
        padding: 8px;
        border-radius: 4px;
    }

    .f-row-x>span:last-child {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        flex: auto;
        margin: 0;
    }
}










/* --- RESTORED WIREFRAME PACKAGE CARDS --- */
.pkg-card-new {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pkg-card-new:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.pkg-img-wrap {
    position: relative;
    overflow: hidden;
    height: 260px;
}

.pkg-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pkg-card-new:hover .pkg-img-wrap img {
    transform: scale(1.05);
}

/* Badges & Timers */
.pkg-disc {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #C0392B;
    /* Client's Red */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    line-height: 1.1;
}

.pkg-timer {
    position: absolute;
    bottom: 12px;
    left: 14px;
    display: flex;
    gap: 6px;
    align-items: flex-end;
    z-index: 2;
}

.timer-seg {
    text-align: center;
    background: rgba(31, 58, 46, 0.85);
    /* Deep Forest */
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: 4px;
}

.timer-seg .t-num {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    font-family: var(--font-heading);
}

.timer-seg .t-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    margin-top: 2px;
}

.timer-dot {
    color: #fff;
    font-weight: 700;
    margin-bottom: 5px;
}

/* Extra Badge (Egg Shape) */
.pkg-extra {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.pkg-extra-inner {
    background: #fff;
    border: 3px solid #eaeaea;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    width: 68px;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.pkg-extra-label {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--copper-solid);
    font-weight: 600;
}

.pkg-extra-pct {
    font-size: 22px;
    font-weight: 700;
    color: var(--copper-solid);
    line-height: 1;
}

.pkg-extra-off {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--copper-solid);
    font-weight: 600;
}

/* Body Content */
.pkg-body-new {
    padding: 24px 24px 0;
}

.pkg-name-new {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--deep-forest);
    margin-bottom: 12px;
    line-height: 1.2;
}

.pkg-inclusions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.incl-chip {
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(31, 58, 46, 0.05);
    color: var(--deep-forest);
    border-radius: 20px;
    font-weight: 500;
}

.pkg-location,
.pkg-meta {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pkg-meta i,
.pkg-location i {
    color: var(--copper-solid);
}

.pkg-divider {
    height: 1px;
    background: #eaeaea;
    margin: 16px 0;
}

/* Pricing Row */
.pkg-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 20px;
}

.pkg-was {
    font-size: 13px;
    color: #aaa;
    text-decoration: line-through;
    margin-bottom: 2px;
}

.pkg-now-price {
    font-size: 32px;
    font-weight: 600;
    color: var(--copper-solid);
    font-family: var(--font-body);
    line-height: 1;
}

.pkg-pp-label {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pkg-actions-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.btn-book {
    padding: 10px 24px;
    /* border: 1px solid var(--copper-solid); */
    color: var(--copper-solid);
    background: none;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    border-radius: 4px;
}

.btn-book:hover {
    background: var(--copper-solid);
    color: #fff;
}

.btn-detail {
    font-size: 12px;
    color: var(--deep-forest);
    text-decoration: none;
    border-bottom: 1px solid var(--deep-forest);
    padding-bottom: 2px;
    font-weight: 500;
}

/* Trust Strip & Upgrade Bar */
.pkg-trust-strip {
    display: flex;
    border-top: 1px solid #eaeaea;
    background: rgba(31, 58, 46, 0.02);
}

.pkg-trust-item {
    flex: 1;
    text-align: center;
    font-size: 10px;
    padding: 12px 6px;
    color: var(--deep-forest);
    border-right: 1px solid #eaeaea69;
}

.pkg-trust-item:last-child {
    border-right: none;
}

.pkg-trust-item strong {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

.pkg-upgrade-strip {
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eaeaea;
    background: #fff;
}

.pkg-upgrade-strip span {
    font-size: 12px;
    color: var(--muted);
}

.pkg-upgrade-strip .upgrade-price {
    font-size: 15px;
    font-weight: 500;
    color: var(--deep-forest);
    font-family: var(--font-body);
}

.pkg-upgrade-strip .upgrade-price span {
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
    font-family: var(--font-body);
}

/* Most Popular Badge */
.popular-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--deep-forest);
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 16px;
    z-index: 10;
    font-weight: 600;
}









/* --- NEW ANIMATED DISCOUNT BADGE (Top Left) --- */
/* --- RED RIBBON DISCOUNT BADGE (Top Left) --- */
.pkg-animated-badge {
    position: absolute;
    top: 20px;
    left: 0;
    /* Flush with the left edge */
    background: linear-gradient(135deg, #C0392B, #96281B);
    /* Rich red from your image */
    color: #ffffff;
    /* Extra padding on the right to make room for the pointed cut */
    padding: 8px 24px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;

    /* This creates the outward-pointing arrow/ribbon shape on the right edge */
    clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%);

    /* Gentle breathing animation */
    animation: badge-pulse 2s infinite alternate;
    transform-origin: left center;
}

/* Stacked Text Styling */
.pkg-animated-badge .badge-val {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.pkg-animated-badge .badge-lbl {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* The Shine Sweep Effect */
.pkg-animated-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    animation: badge-shine 4s infinite;
}

/* Animations */
@keyframes badge-pulse {
    0% {
        transform: scale(1);
    }

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

@keyframes badge-shine {
    0% {
        left: -100%;
    }

    15% {
        left: 200%;
    }

    100% {
        left: 200%;
    }

    /* Long pause between shines */
}

/* The Shine Sweep Effect */
.pkg-animated-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    animation: badge-shine 3s infinite;
}

@keyframes badge-pulse {
    0% {
        transform: scale(1);
    }

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

@keyframes badge-shine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}














/* --- CRAFT YOUR ESCAPE FORM SPLIT --- */
@media (min-width: 768px) {
    .form-col-left {
        border-right: 1px solid #eaeaea;
        padding-right: 30px !important;
    }

    .form-col-right {
        padding-left: 30px !important;
    }
}



























:root {
    /* Color Palette based on image */
    --deep-forest: #1F3A2E;
    --primary-pink: #ea90ad;
    --dark-brown: #3d1a0a;

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    /* Fallback */
}

/* Helper Classes */
.bg-deep-forest {
    background-color: var(--deep-forest);
}

.cursor-pointer {
    cursor: pointer;
}

/* ==========================================================================
   CLIENT EXACT BUTTON CSS (Enquire Now)
   ========================================================================== */
.nav-btn {
    padding: 0.45rem 1.2rem;
    border: 1px solid #ea90ad;
    font-size: 0.80rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3d1a0a;
    background: #ea90ad;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 600;
    display: inline-block;
    border-radius: 8px;
}

.nav-btn:hover {
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #3d1a0a;
}

/* ==========================================================================
   1. TOP DARK GREEN NAVBAR (Grid Based)
   ========================================================================== */
.top-navbar {
    height: 90px;
    z-index: 4050;
    /* High z-index to stay above hero sections */
    position: sticky;
    /* Makes it stick */
    top: 0;
    /* Sticks exactly to the top */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.212);
}

.navbar-grid {
    display: grid;
    /* 1fr for sides, auto for logo: forces absolute center without absolute positioning */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
}

.nav-link-item {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.nav-link-item:hover {
    opacity: 0.7;
}

.menu-trigger {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Logo sits inside the flow, preventing overlapping */
.main-logo {
    height: 60px;
    /* Adjust this value to scale your logo appropriately */
    width: auto;
    object-fit: contain;
    display: block;
}

/* Responsive adjustment for Mobile/Tablet */
@media (max-width: 991px) {
    .navbar-grid {
        grid-template-columns: auto 1fr auto;
        /* Adjusts grid for mobile layout */
        gap: 15px;
    }

    .nav-left,
    .nav-right {
        justify-content: center !important;
    }
}

/* ==========================================================================
   2. SECONDARY WHITE NAVBAR
   ========================================================================== */
.secondary-navbar {
    height: 60px;
    /* z-index: 90; */
    position: relative;
}

.sec-nav-link {
    font-family: var(--font-heading);
    font-size: 20px;
    color: #111111;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sec-nav-link:hover {
    color: var(--deep-forest);
}

/* ==========================================================================
   3. SPLIT-SCREEN HERO SECTION
   ========================================================================== */
.split-hero-section {
    width: 100%;
    /* The 70vh is now applied directly in the HTML via style tag, 
       but if you want it in CSS, uncomment the line below */
    /* height: 70vh; */
}

/* Left Content Column */
.hero-content-col {
    flex: 0 0 45%;
    /* Takes up 45% of width on desktop */
    padding: 60px 80px;
}

.hero-content-inner {
    max-width: 600px;
    margin-left: auto;
    /* Pushes content towards the split line */
    margin-right: 0;
}

.breadcrumbs {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: capitalize;
    letter-spacing: 0.5px;
}


.breadcrumbs a {
    color: rgba(255, 255, 255, 0.7);
    /* Matches your existing breadcrumb text color */
    text-decoration: none;
    /* Removes the default underline */
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: #ffffff;
    /* Turns bright white when the mouse hovers over it */
    text-decoration: underline;
    /* Optional: adds underline on hover for better UX */
}


.hero-title {
    font-family: var(--font-body);
    /* Looks like Poppins Bold in the image */
    font-size: clamp(32px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

/* Per client request: Paragraph matches "Why Vietnam" size */
.hero-paragraph {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.hero-bullets {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.hero-bullets li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.bullet-dot {
    margin-right: 12px;
    font-size: 18px;
    line-height: 1;
}

/* Hero Action Buttons */
.btn-hero-solid {
    background-color: #ffffff;
    color: var(--deep-forest);
    border: 1px solid #ffffff;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.btn-hero-solid:hover {
    background-color: transparent;
    color: #ffffff;
}

.btn-hero-outline {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.btn-hero-outline:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Right Image Column */
.hero-image-col {
    flex: 0 0 55%;
    /* Takes up 55% of width on desktop */
    min-height: 400px;
    /* Ensures it doesn't collapse on mobile */
}

/* Responsive Adjustments for Mobile/Tablet */
@media (max-width: 991px) {
    .split-hero-section {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
    }

    .split-hero-section .row {
        height: auto !important;
    }

    .split-hero-section [class*="col-lg-7"] {
        height: auto !important;
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .split-hero-section [class*="col-lg-5"] {
        height: 280px !important;
        /* Elegant picture banner height on mobile */
    }

    .hero-content-col {
        padding: 50px 30px;
    }

    .hero-content-inner {
        margin: 0 auto;
        /* Center content on mobile */
    }

    .sec-nav-link {
        font-size: 14px;
        padding: 10px 0;
    }

    .secondary-navbar {
        height: auto;
        padding: 10px 0;
    }
}






/* --- UPDATED CLIENT FLIGHT CHIPS --- */
.flight-chip.client-chip {
    background-color: #f1f3f5;
    color: #495057;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 5px 12px;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.5px;
}




/* --- VIEW MORE FLIGHTS BUTTON --- */
.hidden-flight-row {
    display: none !important;
}

.btn-view-more-flights {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    background-color: transparent;
    color: var(--copper-solid);
    border: 1px solid var(--copper-solid);
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-view-more-flights:hover {
    background-color: var(--copper-solid);
    color: #ffffff;
}










/* --- UPDATED PACKAGE BUTTONS (CLIENT SPEC) --- */
.pkg-actions-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    /* Forces both buttons to be the exact same width */
    min-width: 150px;
}

.btn-book {
    padding: 10px 16px;
    /* border: 1.5px solid #ea90ad; */
    /* Pink border */
    color: #3d1a0a;
    background: #ffffff;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 4px;
    text-align: center;
}

.btn-book:hover {
    background: #ea90ad;
    /* Pink hover */
    color: #3d1a0a;
}

.btn-detail {
    padding: 10px 16px;
    border: 1.5px solid var(--deep-forest);
    /* Green border */
    color: var(--deep-forest);
    background: #ffffff;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 4px;
    text-align: center;
}

.btn-detail:hover {
    background: var(--copper-solid);
    /* Green hover */
    color: #ffffff;
}







/* --- SCENIC PLACES SECTION --- */
.sc-arrow-new:hover {
    background: var(--copper-solid) !important;
}

@media (max-width: 768px) {
    .scenic-carousel-new {
        height: 300px !important;
    }

    .sc-arrow-new {
        width: 36px !important;
        height: 36px !important;
    }

    .scenic-name-new h3 {
        font-size: 20px !important;
    }
}




/* --- BULLETPROOF NAVBAR Z-INDEX FIX --- */
.top-navbar,
.header-wrapper,
#main-header {
    position: fixed;
    /* Or sticky, depending on your layout */
    width: 100%;
    z-index: 9990 !important;
    /* Forces the main navbar to stay above everything */
}

.secondary-navbar {
    position: relative;
    z-index: 9989 !important;
    /* Keeps the white secondary bar right below the main one */
}

/* Ensure the mobile offcanvas menu still sits above the navbar */
.luxury-offcanvas {
    z-index: 9999 !important;
}















































/* ==========================================================================
   CLIENT GLOBAL UPDATE: PINK HOVER STATES (ITEM 5)
   ========================================================================== */
:root {
    --primary-pink: #ea90ad;
    --dark-brown: #3d1a0a;
}

/* Buttons */
.btn-primary-copper:hover,
.btn-secondary-copper:hover,
.btn-outline-copper:hover {
    background: var(--primary-pink) !important;
    border-color: var(--primary-pink) !important;
    color: var(--dark-brown) !important;
    box-shadow: 0 8px 20px rgba(234, 144, 173, 0.3) !important;
}

/* Remove the old copper shine animations on hover for these buttons */
.btn-primary-copper:hover::before,
.btn-secondary-copper:hover::before {
    display: none !important;
}

/* Text Links */
.nav-link-simple:hover,
.bottom-nav-bar a:hover,
.sec-nav-link:hover,
.nav-learn-item:hover,
.dest-item:hover,
.breadcrumbs a:hover,
.footer-navigation a:hover,
.social-links a:hover {
    color: var(--primary-pink) !important;
}

/* Social & Circular Buttons */
.social-links a:hover {
    background-color: var(--primary-pink) !important;
    border-color: var(--primary-pink) !important;
    color: var(--dark-brown) !important;
}

.circle-btn-read:hover {
    background: var(--primary-pink) !important;
    color: var(--dark-brown) !important;
}

/* Luxury Arrow Links */
.btn-copper-luxury:hover {
    color: var(--primary-pink) !important;
}

.btn-copper-luxury:hover::after {
    background-color: var(--primary-pink) !important;
}

/* Service Tabs */
.tab-item:hover,
.tab-item.active {
    color: var(--primary-pink) !important;
}

.tab-item:hover .tab-icon,
.tab-item.active .tab-icon {
    stroke: var(--primary-pink) !important;
}

.tab-item::after {
    background-color: var(--primary-pink) !important;
}
























































/* ==========================================================================
   GROUP TOURS PAGE CSS
   Prefixed with .gt- to avoid conflicts with index.html styles
   Uses Asia Travels variables from style.css
   ========================================================================== */

.gt-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.gt-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.gt-d1 {
    transition-delay: .12s;
}

.gt-d2 {
    transition-delay: .22s;
}

.gt-d3 {
    transition-delay: .32s;
}

.gt-d4 {
    transition-delay: .42s;
}

.gt-d5 {
    transition-delay: .52s;
}

@keyframes gt-gA {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(60px, 50px);
    }
}

@keyframes gt-gB {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-50px, -60px);
    }
}




/* --- MISSING REVEAL ANIMATIONS --- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



.gt-container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 5rem;
}

/* HERO */
.gt-hero {
    position: relative;
    background: var(--deep-forest);
    overflow: hidden;
    padding: 3.2rem 0 3rem;
}

.gt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255, 255, 255, 0.013) 60px, rgba(255, 255, 255, 0.013) 120px);
    pointer-events: none;
}

.gt-hero-wm {
    position: absolute;
    right: -0.02em;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-heading);
    font-size: clamp(100px, 14vw, 200px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(198, 139, 89, 0.2);
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.04em;
}

.gt-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.gt-glow-a {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(198, 139, 89, 0.15) 0%, transparent 70%);
    top: -80px;
    right: 100px;
    animation: gt-gA 16s ease-in-out infinite alternate;
}

.gt-glow-b {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(31, 58, 46, 0.18) 0%, transparent 70%);
    bottom: -60px;
    left: 0;
    animation: gt-gB 20s ease-in-out infinite alternate;
}

.gt-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}

.gt-hero-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--copper-solid);
    margin-bottom: 0.7rem;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.1s forwards;
}

.gt-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
    opacity: 0;
    animation: fadeUp 0.6s ease 0.2s forwards;
}

.gt-hero-title em {
    font-style: italic;
    color: var(--copper-solid);
}

.gt-hero-left {
    display: flex;
    flex-direction: column;
}

.gt-hero-ctas {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.3s forwards;
}

/* Buttons */
.gt-btn-gold {
    padding: .9rem 2.2rem;
    background: var(--primary-pink);
    color: var(--dark-brown);
    font-size: 0.80rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 5px;
    text-decoration: none;
    transition: background .25s, transform .2s;
}

.gt-btn-gold:hover {
    background: #ffffff;
    transform: translateY(-2px);
}

.gt-btn-ghost {
    padding: .9rem 2.2rem;
    background: transparent;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--primary-pink);
    border-radius: 5px;
    text-decoration: none;
    transition: border-color .25s, color .25s, background .25s, transform .2s;
}

.gt-btn-ghost:hover {
    background: var(--primary-pink);
    color: var(--dark-brown);
    transform: translateY(-2px);
}

/* STRIP */
.gt-strip {
    background: var(--deep-forest);
    padding: 1.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gt-strip-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.gt-strip-label {
    font-size: 0.57rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gt-strip-sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.gt-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.84rem;
    white-space: nowrap;
    margin: 0;
}







/* --- MARQUEE STRIP ANIMATION --- */
.gt-marquee-container {
    overflow: hidden;
    white-space: nowrap;
    background: var(--deep-forest);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    width: 100%;
}

.gt-marquee-track {
    display: flex;
    width: max-content;
    /* Adjust '30s' to make the scroll faster or slower */
    animation: marquee-scroll 30s linear infinite;
}

/* Pause the marquee when the user hovers over it */
.gt-marquee-track:hover {
    animation-play-state: paused;
}

.gt-marquee-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 2rem;
    /* Ensures consistent spacing where the loops connect */
}

/* The infinite loop keyframe */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Scrolls exactly 1/2 of the track (since we have 2 identical sets) */
        transform: translateX(-50%);
    }
}

/* Make sure the existing items stay vertically aligned inside the new flex layout */
.gt-strip-label,
.gt-strip-item,
.gt-strip-sep {
    display: inline-flex;
    align-items: center;
    margin: 0;
}










/* SECTIONS */
.gt-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--copper-solid);
    margin-bottom: 1rem;
    display: block;
}

.gt-sec-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.8rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--deep-forest);
}

.gt-sec-title strong {
    font-weight: 600;
}

.gt-sec-title em {
    font-style: italic;
    color: var(--copper-solid);
}

/* GROUP PANELS */
.gt-groups-sec {
    background: var(--soft-beige);
    padding: 6rem 0 7rem;
}

.gt-groups-header {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 5rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
}

.gt-groups-header-right p {
    font-size: 0.98rem;
    color: var(--muted);
    line-height: 1.9;
    border-top: 1px solid var(--border);
    padding-top: 1.3rem;
}

.gt-group-panels {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 5rem;
}

.gt-group-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    background: var(--deep-forest);
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.gt-group-panel:first-child {
    border-radius: 6px 6px 0 0;
}

.gt-group-panel:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 6px 6px;
}

.gt-group-panel.open {
    box-shadow: 0 8px 40px rgba(30, 77, 58, 0.13);
    position: relative;
    z-index: 2;
}

/* TRIGGER */
.gt-gp-trigger {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.9rem 2.5rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .22s, border-color .22s;
}

.gt-gp-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    /* border-left-color: var(--copper-solid); */
}

.gt-group-panel.open .gt-gp-trigger {
    background: #13241c;
    /* border-left-color: var(--copper-solid); */
}

.gt-gp-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: background .22s;
}

.gt-gp-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gt-gp-badge {
    font-size: 0.57rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--copper-solid);
    margin-bottom: 0.1rem;
    opacity: 0.75;
}

.gt-gp-name {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 400;
    color: #fff;
    line-height: 1;
}

.gt-gp-tagline {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.4);
}

.gt-gp-right {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-shrink: 0;
}

.gt-gp-pax {
    text-align: center;
    padding: 0.6rem 1.1rem;
    border: 1px solid rgba(198, 139, 89, 0.35);
    border-radius: 4px;
    background: rgba(198, 139, 89, 0.1);
}

.gt-gp-pax-num {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    color: var(--copper-solid);
    line-height: 1;
}

.gt-gp-pax-lbl {
    font-size: 0.54rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--copper-solid);
    opacity: 0.6;
}

.gt-gp-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: transform .35s ease, background .22s, color .22s;
    flex-shrink: 0;
}

.gt-group-panel.open .gt-gp-arrow {
    transform: rotate(180deg);
    background: var(--copper-solid);
    border-color: var(--copper-solid);
    color: #fff;
}

/* BODY */
.gt-gp-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.gt-group-panel.open .gt-gp-body {
    max-height: 5000px;
}

.gt-gp-body-inner {
    display: flex;
    flex-direction: column;
    border-top: 2px solid rgba(255, 255, 255, 0.08);
    background-color: var(--deep-forest);
}

.gt-gp-close {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1.4rem;
    z-index: 20;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    padding: 0.38rem 0.9rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background .2s;
}

.gt-gp-close:hover {
    background: var(--primary-pink);
    color: var(--dark-brown);
}

.gt-group-panel.open .gt-gp-close {
    display: flex;
}

/* FEATURE CARDS */
.gt-gp-feat-section {
    background: var(--deep-forest);
    padding: 2.2rem 2.5rem 2rem;
}

.gt-gp-sidebar-label {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 1.5rem;
    display: block;
}

.gt-gp-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    /* background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08); */
    border-radius: 5px;
    overflow: hidden;
}

.gt-gp-feat-card {
    background: #13241c;
    overflow: hidden;
    transition: background .25s;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

.gt-gp-feat-card:hover {
    background: #1a3025;
}

.gt-gf-img {
    height: 150px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.gt-gf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
    filter: brightness(0.8);
}

.gt-gp-feat-card:hover .gt-gf-img img {
    transform: scale(1.06);
    filter: brightness(0.9);
}

.gt-gf-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31, 58, 46, 0.85) 0%, rgba(31, 58, 46, 0.1) 60%);
}

.gt-gf-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
}

.gt-gf-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gt-gf-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.gt-gf-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.gt-gf-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.7;
    margin-top: 0.1rem;
}

.gt-gp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gt-gp-pill {
    background: rgba(198, 139, 89, 0.13);
    border: 1px solid rgba(198, 139, 89, 0.22);
    color: var(--copper-solid);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: 3px;
}

/* DESTINATIONS */
.gt-gp-destinations {
    background: var(--deep-forest);
    padding: 2.4rem 2.5rem;
}

.gt-gp-dest-title {
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--copper-solid);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.gt-gp-dest-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(198, 139, 89, 0.3);
}

/* DESTINATION GRID */
.gt-dest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.gt-dest-card {
    background: #13241c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .28s, box-shadow .28s, border-color .28s;
    position: relative;
}

.gt-dest-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
    border-color: rgba(198, 139, 89, 0.4);
}

.gt-dest-card-img {
    height: 96px;
    overflow: hidden;
    position: relative;
    background: #13241c;
}

.gt-dest-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
    display: block;
}

.gt-dest-card:hover .gt-dest-card-img img {
    transform: scale(1.07);
}

.gt-dest-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(19, 36, 28, 0.75) 0%, transparent 55%);
}

.gt-dest-card-flag {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    font-size: 1.05rem;
    line-height: 1;
}

.gt-dest-card-info {
    padding: 0.7rem 0.75rem;
}

.gt-dest-card-country {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.13rem;
}

.gt-dest-card-cities {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.5;
}

/* SEE MORE / COLLAPSE DESTINATIONS */
.gt-dest-see-more {
    grid-column: 1/-1;
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
}

.gt-dest-see-more-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(198, 139, 89, 0.35);
    color: var(--copper-solid);
    font-size: 0.63rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    cursor: pointer;
    transition: background .22s, color .2s;
}

.gt-dest-see-more-btn:hover {
    background: var(--primary-pink);
    border-color: var(--primary-pink);
    color: var(--dark-brown);
}

.gt-dest-collapse-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.gt-dest-collapse-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.45rem 1.1rem;
    border-radius: 30px;
    cursor: pointer;
    transition: background .22s;
}

.gt-dest-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.gt-gp-dest-cta {
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.gt-gp-dest-cta-text {
    flex: 1;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.gt-gp-dest-cta-text strong {
    color: #fff;
}

.gt-gp-cta-btn {
    background: var(--primary-pink);
    color: var(--dark-brown);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background .22s;
    white-space: nowrap;
    flex-shrink: 0;
}

.gt-gp-cta-btn:hover {
    background: #e0607f;
    color: #fff;
}







/* ==========================================================================
   UI IMPROVEMENTS: LUXURY CARD ACCORDION
   ========================================================================== */

/* Separate the accordion panels into floating cards */
.gt-group-panels {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 80px;
}

.gt-group-panel {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    /* Premium rounded corners */
    background: #182d24 !important;
    /* Slightly lighter than deep-forest for depth */
    margin-bottom: 0 !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Open state elevation */
.gt-group-panel.open {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    border-color: var(--primary-pink) !important;
    /* Client's pink highlight on open */
    transform: scale(1.01);
    /* Slight pop-out effect */
}

.gt-group-panel.open .gt-gp-trigger {
    background: transparent !important;
    border-left-color: transparent !important;
}

/* Refine the inner feature cards (Add rounded corners to match site) */
.gt-gp-feat-card {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: #11221b;
}

.gt-gf-img {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Upgrade the Pax Counter */
.gt-gp-pax {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

.gt-gp-pax-num {
    color: #ffffff !important;
}

.gt-gp-pax-lbl {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Hover effects for the trigger row */
.gt-gp-trigger {
    border-radius: 16px;
}

.gt-gp-trigger:hover .gt-gp-arrow {
    background: var(--primary-pink);
    border-color: var(--primary-pink);
    color: var(--dark-brown);
}

/* Make the pills look cleaner */
.gt-gp-pill {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 6px 12px;
}

/* CTA Button inside the panel */
.gt-gp-cta-btn {
    border-radius: 8px;
}









/* ==========================================================================
   NEW CLIENT LAYOUT: TRIGGER HERO & FEATURE STRIPS
   ========================================================================== */

/* Remove old padding to accommodate full-width images */
.gt-group-panel .gt-gp-trigger {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    gap: 0;
    cursor: pointer;
    border-left: none;
    transition: none;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden;
}

.gt-group-panel.open .gt-gp-trigger {
    background: transparent !important;
}

/* The Internal Panel Hero Image */
.gt-gp-hero {
    position: relative;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
}

.gt-gp-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.7s ease;
}

.gt-group-panel:hover .gt-gp-hero img {
    transform: scale(1.04);
}

.gt-gp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6, 26, 15, 0.9) 0%, rgba(6, 26, 15, 0.7) 35%, rgba(6, 26, 15, 0.2) 65%, transparent 100%);
}

.gt-gp-hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 3rem;
    max-width: 650px;
}

.gt-gp-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.gt-gp-hero-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    margin-bottom: 1.2rem;
    line-height: 1.5;
    font-weight: 300;
}

.gt-gp-hero-sub span {
    margin: 0 6px;
    color: var(--copper-solid);
    font-weight: bold;
}

.gt-gp-hero-cta {
    display: inline-flex;
    align-items: center;
    background: var(--primary-pink);
    color: var(--dark-brown);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    width: fit-content;
    transition: background 0.3s;
}

.gt-gp-hero-cta:hover {
    background: #e0607f;
    color: #fff;
}

/* The 4-Column Feature Strip */
.gt-gp-feat-strip {
    background: var(--soft-beige);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.gt-gp-feat-strip-item {
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.gt-gp-feat-strip-item:last-child {
    border-right: none;
}

.gt-gp-feat-strip-text .fs-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--deep-forest);
    line-height: 1.3;
}

.gt-gp-feat-strip-text .fs-sub {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-top: 2px;
}

/* The Bottom Trigger Bar (Icon, Name, Pax) */
.gt-gp-trigger-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.8rem 2.5rem;
    background: #11221b;
    width: 100%;
}

.gt-group-panel.open .gt-gp-trigger-bar {
    background: #0a1511;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gt-gp-trigger-bar-left {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 0;
    flex: 1;
}

.gt-gp-trigger-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.gt-gp-explore-btn {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: transparent;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.35rem 0.35rem 0.35rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.gt-gp-explore-btn:hover {
    border-color: var(--primary-pink);
    color: var(--primary-pink);
}

/* Mobile Responsiveness for new internal elements */
@media(max-width: 900px) {
    .gt-gp-feat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .gt-gp-feat-strip-item:nth-child(2) {
        border-right: none;
    }

    .gt-gp-feat-strip-item:nth-child(3),
    .gt-gp-feat-strip-item:nth-child(4) {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .gt-gp-hero-content {
        padding: 2rem;
    }

    .gt-gp-trigger-bar {
        padding: 1rem 1.5rem;
    }
}

@media(max-width: 620px) {
    .gt-gp-hero {
        min-height: 280px;
        height: 300px;
    }

    .gt-gp-hero-title {
        font-size: 2.2rem;
    }

    .gt-gp-pax {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.8rem;
    }

    .gt-gp-pax-num {
        font-size: 1.2rem;
    }

    .gt-gp-pax-lbl {
        font-size: 0.5rem;
    }

    .gt-gp-explore-btn {
        display: flex;
        font-size: 0.58rem;
        padding: 0.35rem 0.35rem 0.35rem 1rem;
        gap: 0.6rem;
    }

    .gt-gp-trigger-bar {
        padding: 1rem;
    }
}

























/* INCLUSIONS DEEP */
.gt-incl-section {
    background: #0f1f18;
    background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.8'%3E%3Cpath d='M50 50 Q 70 30, 90 50 Q 70 70, 50 50 M70 35 L 70 65' transform='rotate(45 70 50)'/%3E%3Cpath d='M220 60 Q 230 50, 240 60 Q 230 70, 220 60'/%3E%3Cpath d='M30 250 L 60 200 L 90 250 M50 230 L 70 230'/%3E%3Cg transform='translate(250, 250)'%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='0' cy='-6' r='2'/%3E%3Ccircle cx='0' cy='6' r='2'/%3E%3Ccircle cx='-6' cy='0' r='2'/%3E%3Ccircle cx='6' cy='0' r='2'/%3E%3C/g%3E%3Ccircle cx='150' cy='150' r='1'/%3E%3Ccircle cx='100' cy='120' r='0.5'/%3E%3Ccircle cx='200' cy='180' r='0.5'/%3E%3Cpath d='M150 280 L 150 240 M140 270 L 150 255 L 160 270 M135 260 L 150 245 L 165 260'/%3E%3Cpath d='M200 20 Q 210 10, 220 20'/%3E%3Cpath d='M80 130 Q 85 120, 90 130 Q 85 140, 80 130' transform='rotate(-20 85 130)'/%3E%3C/g%3E%3C/svg%3E");
    padding: 8rem 0;
    position: relative;
}

.gt-incl-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 5rem;
}

.gt-incl-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
    margin-bottom: 4rem;
}

.gt-incl-header-right {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.47);
    line-height: 1.9;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.2rem;
}

.gt-incl-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    background: transparent;
}

.gt-incl-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s, background 0.3s;
    display: flex;
    flex-direction: column;
}

.gt-incl-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary-pink);
    transform: translateY(-10px);
}

.gt-ic-img-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.gt-ic-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.gt-incl-card:hover .gt-ic-img-wrap img {
    transform: scale(1.15);
}

.gt-ic-content {
    padding: 2.5rem 2.2rem;
    position: relative;
    flex: 1;
}

.gt-ic-icon-box {
    width: 56px;
    height: 56px;
    background: #0f1f18;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(198, 139, 89, 0.4);
    position: absolute;
    top: 172px;
    /* 200px (img height) - 28px (half overlap) */
    left: 2.2rem;
    z-index: 5;
    transition: all 0.3s ease;
}

.gt-incl-card:hover .gt-ic-icon-box {
    transform: scale(1.1);
    border-color: var(--primary-pink);
    background: #182d24;
}

.gt-ic-num {
    position: absolute;
    top: 10px;
    right: 20px;
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 600;
    color: #fff;
    opacity: 0.12;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

.gt-ic-icon {
    font-size: 2.1rem;
    margin-bottom: 0.9rem;
    display: block;
}

.gt-ic-title {
    font-size: 1.02rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.55rem;
}

.gt-ic-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.85;
}

/* HOW IT WORKS */
.gt-how-section {
    background: var(--soft-beige);
    padding: 7rem 0;
}

.gt-how-grid {
    max-width: 1380px;
    margin: 3.5rem auto 0;
    padding: 0 5rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    overflow: hidden;
}

.gt-how-step {
    padding: 2.2rem 1.7rem;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    transition: background .28s;
}

.gt-how-step:last-child {
    border-right: none;
}

.gt-how-step:hover {
    background: rgba(31, 58, 46, 0.04);
}

.gt-how-step-n {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: rgba(198, 139, 89, 0.15);
    line-height: 1;
    margin-bottom: 0.9rem;
}

.gt-how-step-icon {
    font-size: 1.5rem;
    margin-bottom: 0.65rem;
    display: block;
}

.gt-how-step-title {
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--deep-forest);
    margin-bottom: 0.38rem;
}

.gt-how-step-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.8;
}

/* TESTIMONIALS */
.gt-t-section {
    background: #fff;
    padding: 7rem 0;
}

.gt-t-grid {
    max-width: 1380px;
    margin: 3.5rem auto 0;
    padding: 0 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.gt-t-card {
    background: var(--soft-beige);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 2rem;
    transition: transform .3s, box-shadow .3s;
    position: relative;
}

.gt-t-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(30, 77, 58, 0.08);
}

.gt-t-type {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--copper-solid);
    background: #fff;
    padding: .28rem .65rem;
    border-radius: 3px;
    border: 1px solid rgba(198, 139, 89, 0.3);
}

.gt-t-qm {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 600;
    color: rgba(31, 58, 46, 0.2);
    line-height: .7;
    margin-bottom: 0.9rem;
}

.gt-t-text {
    font-size: 0.96rem;
    color: #444;
    line-height: 1.85;
    margin-bottom: 1.4rem;
    font-style: italic;
}

.gt-t-author {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.gt-t-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--deep-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    color: var(--copper-solid);
    flex-shrink: 0;
}

.gt-t-name {
    font-size: .9rem;
    font-weight: 500;
    color: var(--deep-forest);
}

.gt-t-meta {
    font-size: .77rem;
    color: #888;
}

/* CTA */
.gt-cta-section {
    background: var(--deep-forest);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.gt-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255, 255, 255, 0.013) 60px, rgba(255, 255, 255, 0.013) 120px);
}

.gt-cta-wm {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: clamp(140px, 25vw, 380px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(198, 139, 89, 0.1);
    user-select: none;
    pointer-events: none;
}

.gt-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 660px;
    margin: 0 auto;
    padding: 0 2rem;
}

.gt-cta-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--copper-solid);
    margin-bottom: 1.4rem;
    display: block;
}

.gt-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: 1.05;
    color: #fff;
    margin-bottom: 1.6rem;
}

.gt-cta-title em {
    font-style: italic;
    color: var(--copper-solid);
}

.gt-cta-sub {
    font-size: .88rem;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.85;
    margin-bottom: 2.8rem;
}

.gt-cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.gt-cb-gold {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .95rem 2.2rem;
    background: var(--primary-pink);
    color: var(--dark-brown);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    text-decoration: none;
    transition: background .25s, transform .2s;
}

.gt-cb-gold:hover {
    background: #e0607f;
    color: #fff;
    transform: translateY(-2px);
}

.gt-cb-ghost {
    padding: .95rem 2.2rem;
    background: transparent;
    color: #fff;
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    border: 1px solid var(--primary-pink);
    border-radius: 5px;
    text-decoration: none;
    transition: background .25s, transform .2s;
}

.gt-cb-ghost:hover {
    background: var(--primary-pink);
    color: var(--dark-brown);
    transform: translateY(-2px);
}

/* MOBILE ADJUSTMENTS */
@media(max-width:1100px) {
    .gt-gp-feat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gt-dest-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:900px) {

    .gt-container,
    .gt-hero-inner,
    .gt-strip-inner,
    .gt-groups-header,
    .gt-incl-inner {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .gt-group-panels {
        padding: 0 2rem;
    }

    .gt-groups-header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gt-how-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .gt-t-grid {
        grid-template-columns: 1fr 1fr;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .gt-incl-header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gt-incl-cards {
        grid-template-columns: 1fr 1fr;
    }

    .gt-gp-dest-cta {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

@media(max-width:620px) {
    .gt-hero-inner {
        padding: 4rem 1.5rem;
    }

    .gt-gp-trigger {
        grid-template-columns: 50px 1fr;
        gap: 1rem;
    }

    .gt-gp-right {
        display: none;
    }

    .gt-dest-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gt-how-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gt-t-grid {
        grid-template-columns: 1fr;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .gt-incl-cards {
        grid-template-columns: 1fr;
    }

    .gt-cta-btns {
        flex-direction: column;
        width: 100%;
    }
}



























/* ==========================================================================
   FLIGHTS PAGE SPECIFIC UI (TABLES & AIRLINES)
   ========================================================================== */
.compare-section {
    padding: 0 2.5rem 2.5rem;
    margin-top: 1rem;
    background-color: var(--deep-forest);
}

.gt-table-label {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--copper-solid);
    margin-bottom: 1.5rem;
    display: block;
}

.feat-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    overflow: hidden;
    background: #11221b;
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); */
}

.feat-table th {
    background: linear-gradient(180deg, rgba(198, 139, 89, 0.15) 0%, rgba(198, 139, 89, 0.05) 100%);
    color: var(--copper-solid);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1.6rem 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.feat-table td {
    padding: 1.4rem 1.8rem;
    text-align: left;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.feat-table td:first-child {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.02);
    width: 260px;
}

.feat-table tr:last-child td {
    border-bottom: none;
}

.feat-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.gp-airlines {
    padding: 2.4rem 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 2rem;
    background-color: var(--deep-forest);
}

.airline-region-label {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
    display: block;
    margin-top: 1.5rem;
}

.airline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.airline-card {
    background: #11221b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: all 0.3s ease;
}

.airline-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-pink);
}

.airline-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: rgba(198, 139, 89, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--copper-solid);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.airline-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.airline-card-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #fff;
    line-height: 1.1;
    color: #f1f3f5;
}

.airline-card-hub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.3;
}

@media(max-width: 1100px) {
    .airline-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 900px) {
    .airline-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feat-table td:first-child {
        white-space: normal;
        width: auto;
    }
}

@media(max-width: 620px) {
    .airline-grid {
        grid-template-columns: 1fr;
    }
}
























/* --- DYNAMIC FLIGHT LEGS STYLING --- */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid #eaeaea;
    }
}

.flight-leg-card {
    transition: all 0.3s ease;
    animation: slideDownFade 0.4s ease forwards;
}

.remove-leg-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--deep-forest);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    z-index: 10;
    transition: all 0.2s ease;
}

.remove-leg-btn:hover {
    background: var(--primary-pink);
    color: #ffffff;
    border-color: var(--primary-pink);
    transform: scale(1.1);
}

#add-flight-btn-wrapper button:hover {
    background: rgba(198, 139, 89, 0.05);
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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




















/* --- DYNAMIC FLIGHT LEGS & AUTOCOMPLETE --- */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid #eaeaea;
    }
}

.flight-leg-card {
    transition: all 0.3s ease;
    animation: slideDownFade 0.4s ease forwards;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.remove-leg-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--deep-forest);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    z-index: 10;
    transition: all 0.2s ease;
}

.remove-leg-btn:hover {
    background: var(--primary-pink);
    color: #ffffff;
    border-color: var(--primary-pink);
    transform: scale(1.1);
}

/* Custom Autocomplete Dropdown */
.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
}

.autocomplete-dropdown.show {
    display: block;
    animation: slideDownFade 0.2s ease forwards;
}

.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 13px;
    color: var(--deep-forest);
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.autocomplete-item:hover {
    background: var(--soft-beige);
    color: var(--copper-solid);
}

/* Custom Scrollbar for Dropdown */
.autocomplete-dropdown::-webkit-scrollbar {
    width: 5px;
}

.autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--copper-solid);
    border-radius: 10px;
}




























































/* ==========================================================================
   VIETNAM PACKAGES PAGE CSS
   ========================================================================== */

/* Utility Classes (Replacing Inline CSS) */
.text-copper {
    color: var(--copper-solid) !important;
}

.text-green {
    color: #27ae60 !important;
}

.text-pink {
    color: var(--primary-pink) !important;
}

.text-forest {
    color: var(--deep-forest) !important;
}

.bg-forest {
    background-color: var(--deep-forest) !important;
}

.bg-copper {
    background-color: var(--copper-solid) !important;
}

.bg-beige {
    background-color: var(--soft-beige) !important;
}

.font-heading {
    font-family: var(--font-heading) !important;
}

.font-body {
    font-family: var(--font-body) !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.ls-2 {
    letter-spacing: 2px !important;
}

.ls-3 {
    letter-spacing: 3px !important;
}

.opacity-85 {
    opacity: 0.85 !important;
}

/* Icon Sizes */
.icon-sm {
    width: 14px;
    height: 14px;
}

.icon-md {
    width: 18px;
    height: 18px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 30px;
    height: 30px;
}

/* Section Headers */
.vp-header-divider {
    width: 40px;
    height: 2px;
    background-color: var(--copper-solid);
    display: inline-block;
}

.vp-sec-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 0;
    font-family: var(--font-heading);
    color: var(--deep-forest);
}

.vp-sec-title em {
    color: var(--primary-pink);
    font-style: italic;
}

.vp-header-desc {
    font-size: 1.05rem;
    opacity: 0.85;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 2rem;
    color: var(--text-muted);
}

/* Package Panels Overrides */
.gt-group-panels {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 80px;
}

.gt-group-panel {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.gt-group-panel.open {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--primary-pink) !important;
    transform: scale(1.01);
}

/* Hero Inside Panel */
.vp-hero {
    position: relative;
    height: 320px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.vp-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.gt-group-panel:hover .vp-hero img {
    transform: scale(1.04);
}

.vp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15, 36, 24, 0.95) 0%, rgba(15, 36, 24, 0.8) 40%, rgba(15, 36, 24, 0.1) 100%);
}

.vp-hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 3.5rem;
    max-width: 700px;
}

.vp-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.vp-hero-route {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.vp-hero-route i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--copper-solid);
}

/* Pricing Block on Hero */
.vp-price-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1.5rem;
}

.vp-price-was {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: line-through;
}

.vp-price-now {
    font-family: var(--font-body);
    font-size: 2.5rem;
    color: var(--copper-solid);
    line-height: 1;
    font-weight: 600;
}

.vp-price-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
}

/* Animated Discount Ribbon */
.vp-ribbon {
    position: absolute;
    top: 25px;
    left: 0;
    background: linear-gradient(135deg, #C0392B, #96281B);
    color: #ffffff;
    padding: 10px 30px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
    animation: ribbon-pulse 2s infinite alternate;
}

.vp-ribbon-right {
    left: auto !important;
    right: 0 !important;
    padding: 10px 20px 10px 30px !important;
    clip-path: polygon(15px 0%, 100% 0%, 100% 100%, 15px 100%, 0% 50%) !important;
}

/* Ensure popular variant also works with right alignment if needed */
.vp-ribbon-right.popular {
    padding-bottom: 15px !important;
}

.vp-ribbon-val {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.vp-ribbon-lbl {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 2px;
}

.vp-ribbon.popular {
    padding-bottom: 15px;
}

@keyframes ribbon-pulse {
    0% {
        transform: scale(1);
    }

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

/* Trust Strip */
.vp-trust-strip {
    display: flex;
    background: var(--deep-forest);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vp-trust-item {
    flex: 1;
    text-align: center;
    padding: 15px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
}

.vp-trust-item:last-child {
    border-right: none;
}

.vp-trust-item span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Panel Trigger Bar */
.vp-trigger-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 2.5rem;
    background: var(--soft-beige);
    cursor: pointer;
}

.gt-group-panel.open .vp-trigger-bar {
    background: #f0e9dc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vp-trigger-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vp-trigger-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 8px 24px;
    border: 1.5px solid var(--copper-solid);
    border-radius: 50px;
    transition: all 0.3s ease;
    background: transparent;
}

.vp-trigger-right:hover {
    background: #e0607f;
    border-color: #e0607f;
    box-shadow: 0 4px 12px rgba(224, 96, 127, 0.3);
}

.vp-trigger-right:hover span {
    color: #ffffff !important;
}

.vp-trigger-right:hover .vp-arrow {
    border-color: #ffffff !important;
    color: #ffffff !important;
    background: transparent !important;
}

.vp-trigger-btn {
    background: var(--primary-pink);
    color: var(--dark-brown);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vp-trigger-btn:hover {
    background: #e0607f;
    color: #fff;
}

.vp-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--copper-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--copper-solid);
    transition: all 0.3s;
}

.gt-group-panel.open .vp-arrow {
    transform: rotate(180deg);
    background: var(--copper-solid);
    color: #fff;
}

/* Panel Body Inner */
.vp-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gt-group-panel.open .vp-body {
    max-height: 15000px;
}

.vp-body-inner {
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Section Labels */
.vp-section-label {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--deep-forest);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.vp-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eaeaea;
}

/* Itinerary Timeline */
.itinerary-timeline {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid var(--copper-solid);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.day-item {
    position: relative;
}

.day-marker {
    position: absolute;
    left: -52px;
    top: 0;
    background: var(--copper-solid);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 20px;
    border: 3px solid #fff;
    letter-spacing: 1px;
}

.day-content {
    background: var(--soft-beige);
    border-radius: 12px;
    padding: 1.8rem;
    border: 1px solid #eaeaea;
}

.day-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--deep-forest);
    margin-bottom: 1rem;
    font-weight: 600;
}

.day-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.meal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--deep-forest);
}

/* Tables */
.hotel-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
}

.hotel-table th {
    background: var(--deep-forest);
    color: #fff;
    padding: 15px 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.hotel-table td {
    padding: 20px;
    border-bottom: 1px solid #eaeaea;
    vertical-align: top;
}

.hotel-table tr:last-child td {
    border-bottom: none;
}

.hotel-table td p {
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.hotel-table td strong {
    color: var(--deep-forest);
}

/* Quick Info Grid */
.quick-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 2rem;
}

.quick-info-card {
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.qi-icon {
    width: 40px;
    height: 40px;
    background: rgba(198, 139, 89, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--copper-solid);
    flex-shrink: 0;
}

.qi-text h6 {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 2px 0;
    letter-spacing: 1px;
}

.qi-text p {
    font-size: 14px;
    font-weight: 600;
    color: var(--deep-forest);
    margin: 0;
}

/* Shared Inclusions / Exclusions */
.inc-exc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.inc-box {
    background: rgba(42, 107, 82, 0.05);
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid var(--green);
}

.exc-box {
    background: rgba(192, 57, 43, 0.05);
    padding: 2rem;
    border-radius: 12px;
    /* border-left: 4px solid #C0392B; */
}

.inc-list li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.inc-list li i {
    margin-top: 3px;
    flex-shrink: 0;
}

@media(max-width: 992px) {
    .vp-hero-content {
        padding: 2rem;
        max-width: 100%;
    }

    .vp-body-inner {
        padding: 2rem;
    }

    .quick-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inc-exc-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media(max-width: 768px) {
    .vp-main-hero {
        height: 50vh !important;
        min-height: 360px;
    }

    .vp-hero {
        height: 300px;
    }

    .vp-hero-content {
        padding: 1.5rem;
        justify-content: flex-end;
        background: linear-gradient(to top, rgba(15, 36, 24, 0.9) 0%, rgba(15, 36, 24, 0.4) 60%, transparent 100%);
    }

    .vp-hero::after {
        background: linear-gradient(to top, rgba(15, 36, 24, 0.8) 0%, transparent 100%);
    }

    .vp-main-hero .vp-hero-content {
        justify-content: center;
        background: rgba(15, 36, 24, 0.4);
    }

    .vp-price-now {
        font-size: 2rem;
    }

    .vp-trust-strip {
        flex-wrap: wrap;
    }

    .vp-trust-item {
        flex: 0 0 50%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 12px 5px;
    }

    .vp-trust-item:nth-child(2) {
        border-right: none;
    }

    .vp-trust-item:last-child {
        flex: 0 0 100%;
        border-bottom: none;
    }

    .vp-trigger-bar {
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        padding: 1.5rem;
        text-align: center;
    }

    .vp-trigger-left {
        flex-direction: column;
        gap: 0.5rem;
    }

    .day-marker {
        position: relative;
        left: 0;
        display: inline-block;
        margin-bottom: 15px;
    }

    .itinerary-timeline {
        padding-left: 0;
        border-left: none;
    }

    .day-content {
        padding: 1.2rem;
    }

    .hotel-table thead {
        display: none;
    }

    .hotel-table,
    .hotel-table tbody,
    .hotel-table tr,
    .hotel-table td {
        display: block;
        width: 100%;
    }

    .hotel-table tr {
        border-bottom: 2px solid var(--soft-beige);
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .hotel-table td {
        border-bottom: none;
        padding: 10px 0;
    }

    .hotel-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        color: var(--copper-solid);
        font-weight: 700;
        margin-bottom: 5px;
        letter-spacing: 1px;
    }
}

@media(max-width: 576px) {
    .quick-info-grid {
        grid-template-columns: 1fr;
    }

    .vp-hero-title {
        font-size: 1.6rem;
    }

    .vp-price-now {
        font-size: 1.8rem;
    }

    .vp-trigger-right {
        width: 100%;
        justify-content: center;
    }

    .vp-main-hero h1 {
        font-size: 2.2rem !important;
    }
}

/* --- ADDITIONAL UTILITY CLASSES --- */
.cursor-pointer {
    cursor: pointer;
}

.text-13 {
    font-size: 13px;
}

.text-12 {
    font-size: 12px;
}

.ls-1 {
    letter-spacing: 1px;
}

.vp-ribbon-popular {
    padding-bottom: 15px;
}

.vp-ribbon-badge {
    font-size: 8px;
    color: #C0392B;
    line-height: 1.5;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 700;
}


























































/* ==========================================================================
   PACKAGE INNER TABS & DETAILS UI
   ========================================================================== */

/* Inner Tabs Navigation */
.vp-inner-tabs {
    display: flex;
    border: 2px solid var(--deep-forest);
    border-radius: 8px;
    margin-bottom: 2.5rem;
    overflow: hidden;
}

.vp-tab-btn {
    flex: 1;
    padding: 16px;
    background: transparent;
    border: none;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--deep-forest);
    cursor: pointer;
    transition: all 0.3s ease;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.vp-tab-btn:last-child {
    border-right: none;
}

.vp-tab-btn.active {
    background: var(--deep-forest);
    color: #fff;
}

.vp-tab-btn:hover:not(.active) {
    background: rgba(31, 58, 46, 0.05);
}

/* Tab Content Areas */
.vp-tab-pane {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.vp-tab-pane.active {
    display: block;
}

/* Updated Itinerary Timeline */
.day-content {
    background: var(--soft-beige);
    border-radius: 12px;
    padding: 1.8rem;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.day-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--deep-forest);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.day-marker {
    background: var(--copper-solid);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    top: 15px;
    /* Aligns better with content */
}

/* Dates & Prices Section */
.dp-wrapper {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.dp-selectors {
    flex: 1;
    min-width: 300px;
}

.dp-label {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--deep-forest);
    font-weight: 600;
    margin-bottom: 1rem;
}

.dp-year-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.dp-year-item {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--deep-forest);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s;
    width: max-content;
}

.dp-year-item.active {
    background: rgba(198, 139, 89, 0.1);
    color: var(--copper-solid);
}

.dp-month-select {
    border: 1px solid var(--copper-solid);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 14px;
    width: 100%;
    outline: none;
    color: var(--deep-forest);
    background-color: #fff;
    cursor: pointer;
}

/* Price Card */
.dp-price-card {
    background: var(--deep-forest);
    color: #fff;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    text-align: center;
    width: 320px;
    flex-shrink: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.dp-price-label {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.dp-price-val {
    font-size: 3rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--copper-solid);
    margin: 5px 0;
    line-height: 1;
}

.dp-price-sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
}

.dp-price-btn {
    background: var(--primary-pink);
    color: var(--dark-brown);
    border: none;
    padding: 14px 24px;
    width: 100%;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px;
    transition: all 0.3s;
}

.dp-price-btn:hover {
    background: #fff;
    color: var(--deep-forest);
}

/* Included & Excluded Section */
.ie-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
}

.ie-box {
    background: #fdfbf7;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #eaeaea;
}

.ie-heading {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--deep-forest);
    margin-bottom: 1.8rem;
}

.ie-block {
    display: flex;
    gap: 15px;
    margin-bottom: 1.8rem;
    align-items: flex-start;
}

.ie-icon {
    color: var(--deep-forest);
    flex-shrink: 0;
    margin-top: 2px;
}

.ie-content h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--deep-forest);
    margin-bottom: 5px;
}

.ie-content p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.ie-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ie-list li {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.5;
}

.ie-list li i {
    flex-shrink: 0;
    margin-top: 2px;
}

.ie-list.inc li i {
    color: var(--deep-forest);
}

/* Excluded X styling matching client doc */
.ie-list.exc li i {
    color: #8e651a;
    background: #f5edd8;
    border-radius: 50%;
    padding: 3px;
    width: 18px;
    height: 18px;
}

@media(max-width: 992px) {
    .ie-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .dp-wrapper {
        flex-direction: column;
    }

    .dp-price-card {
        width: 100%;
    }

    .vp-inner-tabs {
        flex-direction: column;
    }

    .vp-tab-btn {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}










































































































/* ==========================================================================
   PREMIUM TOUR DETAIL PAGE (INTREPID STYLE)
   ========================================================================== */

/* --- Typography & Branding Variables --- */
.text-copper {
    color: var(--copper-solid);
}

.text-forest {
    color: var(--deep-forest);
}

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

.bg-forest {
    background-color: var(--deep-forest);
}

.bg-copper {
    background-color: var(--copper-solid);
}

.bg-beige {
    background-color: var(--soft-beige);
}

body {
    background-color: #ffffff;
    font-family: var(--font-body);
}

/* --- Layout Grid --- */
.tour-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px 0px 20px;
    /* Accounts for fixed navbar */
}

/* Header Area */
.tour-header {
    margin-bottom: 2rem;
}

.tour-breadcrumbs {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: #666;
    font-weight: 500;
}

.tour-breadcrumbs a {
    color: var(--copper-solid);
    text-decoration: none;
}

.tour-breadcrumbs a:hover {
    color: var(--deep-forest);
}

.tour-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--deep-forest);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.tour-subtitle {
    font-size: 1.1rem;
    color: #555;
}

/* --- Top Split Section (Gallery/Desc + Sidebar) --- */
.tour-top-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 4rem;
}

/* --- Left Column: Gallery --- */
.tour-left-col {
    min-width: 0;
}

.tour-gallery-wrapper {
    margin-bottom: 2.5rem;
}

.main-image-container {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.btn-view-all-photos {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: #ffffff;
    color: var(--deep-forest);
    border: 1px solid #eaeaea;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.btn-view-all-photos:hover {
    background: var(--primary-pink);
    color: var(--dark-brown);
}

.thumbnail-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.thumbnail-track {
    flex: 1;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    cursor: grab;
    user-select: none;
    min-width: 0;
}

.thumbnail-track.dragging {
    cursor: grabbing;
    scroll-behavior: auto !important;
    /* Extremely important: disables scroll inertia lag while actively dragging */
}

.thumbnail-track::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Chrome/Safari/Opera */
}

.thumbnail-track img {
    width: 100px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    flex-shrink: 0;
}

.thumbnail-track img:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.thumbnail-track img.active {
    opacity: 1;
    border-color: var(--copper-solid);
    box-shadow: 0 4px 10px rgba(184, 134, 84, 0.15);
}

/* --- Navigation Button Styling --- */
.thumb-carousel-btn {
    display: none;
    /* Managed dynamically via JavaScript on overflow */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--deep-forest);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    z-index: 10;
}

.thumb-carousel-btn:hover {
    background: var(--primary-pink);
    border-color: var(--primary-pink);
    color: var(--dark-brown);
    box-shadow: 0 4px 12px rgba(234, 144, 173, 0.25);
    transform: scale(1.05);
}

/* --- Main Image Hover Nav Buttons --- */
.main-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    color: var(--deep-forest);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    z-index: 5;
    opacity: 0;
}

.main-image-container:hover .main-nav-btn {
    opacity: 1;
}

.main-prev-btn {
    left: 15px;
}

.main-next-btn {
    right: 15px;
}

.main-nav-btn:hover {
    background: var(--primary-pink);
    border-color: var(--primary-pink);
    color: var(--dark-brown);
    box-shadow: 0 6px 20px rgba(234, 144, 173, 0.35);
    transform: translateY(-50%) scale(1.05);
}

/* --- Premium 3D Vertical Gallery Modal --- */
.vertical-3d-modal .modal-dialog {
    max-width: 650px;
    /* Elegant, medium sized layout */
    margin: 2rem auto;
}

.vertical-3d-modal .modal-content {
    background: #ffffff;
    /* Clean, pristine white modal card background */
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Soft subtle light border */
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    /* Soft, luxurious shadow */
    overflow: hidden;
}

.vertical-3d-modal .modal-header {
    background: transparent;
    border: none;
    padding: 1.2rem 1.2rem 0 1.2rem;
    display: flex;
    justify-content: flex-end;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--deep-forest);
    /* Match website brand dark forest color */
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.modal-close-btn:hover {
    background-color: var(--primary-pink);
    color: var(--dark-brown);
    transform: rotate(90deg);
}

/* 3D Scroll Container */
.vertical-3d-gallery-container {
    perspective: 1200px;
    /* Setup the camera perspective context */
    max-height: 60vh;
    overflow-y: scroll;
    padding: 80px 40px;
    /* Gives margin breathing room for rotating elements */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 45px;
    -ms-overflow-style: none;
    /* Hide scrollbar on IE/Edge */
    scrollbar-width: none;
    /* Hide scrollbar on Firefox */
}

.vertical-3d-gallery-container::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar to preserve immersive UI */
}

/* 3D Item Wrapper */
.gallery-3d-item {
    position: relative;
    width: 100%;
    height: 280px;
    /* Medium landscape photo block */
    border-radius: 12px;
    overflow: hidden;
    transform-style: preserve-3d;
    /* Allows child translations in Z-axis */
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    /* Fluid dynamic scroll translation */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.gallery-3d-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Luxury Card Text Overlays */
.gallery-3d-item .item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transform: translateZ(30px);
    /* Extends out slightly further in 3D perspective layer! */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* --- Left Column: Description & Highlights --- */
.tour-desc-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 3rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--deep-forest);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.highlight-item {
    display: flex;
    gap: 15px;
    margin-bottom: 1.5rem;
}

.highlight-item i {
    color: var(--copper-solid);
    flex-shrink: 0;
    margin-top: 3px;
}

.highlight-item p {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

.sticky-sidebar {
    position: sticky;
    top: 130px;
    /* Stays below navbar */
}

.booking-widget {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 2rem;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.01);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.booking-widget:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.01);
}

/* Premium Pricing Header (at the top) */
.widget-pricing-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1eeea;
}

.price-strike-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.25rem;
}

.price-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #fff0ed;
    color: #E26D5C;
    padding: 3px 8px;
    border-radius: 4px;
}

.price-strike {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
}

.price-strike-currency {
    font-size: 0.85em;
    text-decoration: line-through;
}

.price-main-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price-main {
    font-family: var(--font-body);
    font-size: 3rem;
    font-weight: 600;
    color: var(--deep-forest);
    line-height: 1;
    letter-spacing: -0.5px;
}

.price-currency {
    font-size: 0.55em;
    font-weight: 600;
    vertical-align: super;
    position: relative;
    top: -0.15em;
    margin-right: 1px;
}

.price-meta {
    font-size: 0.75rem;
    color: #777;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modern 2-Column Stats Grid */
.widget-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    padding: 0;
    border-top: none;
    border-bottom: none;
}

.w-stat-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: none;
    padding: 0;
}

.w-stat-row i {
    color: var(--copper-solid);
    margin-top: 2px;
    flex-shrink: 0;
}

.w-stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.w-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    font-weight: 600;
    line-height: 1;
}

.w-stat-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--deep-forest);
    line-height: 1.2;
}

/* Full-width Stat Row for style/theme */
.w-stat-row.style-full-width {
    grid-column: span 2;
    padding-top: 0.75rem;
    border-top: 1px dashed #eaeaea;
}

/* CTA Wrapper styling */
.widget-cta-wrapper {
    margin-top: 1.5rem;
}

.btn-enquire-full {
    display: block;
    width: 100%;
    background: var(--copper-solid);
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid var(--copper-solid);
    box-shadow: 0 4px 15px rgba(184, 134, 84, 0.2);
    transition: all 0.3s ease;
}

.btn-enquire-full:hover {
    background: var(--primary-pink) !important;
    border-color: var(--primary-pink) !important;
    color: var(--dark-brown) !important;
    box-shadow: 0 8px 20px rgba(234, 144, 173, 0.3) !important;
    transform: translateY(-1px);
}

/* --- Full Width Bottom Sections --- */
.full-width-section {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 4.5rem;
    margin-bottom: 4.5rem;
}

/* --- Premium Timeline Itinerary (Redesigned & Ultra-Clean) --- */
.itinerary-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
    margin-top: 2rem;
}

.itinerary-left-image-col {
    position: sticky;
    top: 120px;
    /* Aligns perfectly with the scrolled sticky navbar */
}

.itinerary-sticky-image-wrapper {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.itinerary-sticky-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accordion-timeline {
    position: relative;
    padding-left: 0;
}

/* Continuous background vertical line */
.accordion-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    /* Centered with the 24px marker */
    top: 24px;
    bottom: 24px;
    width: 2px;
    background-color: var(--copper-solid);
    opacity: 0.15;
}

.accordion-timeline .timeline-item {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0;
    background: transparent;
    position: relative;
    padding-left: 0;
    margin-bottom: 0;
}

.accordion-timeline .timeline-item:last-child {
    border-bottom: none;
}

/* Flex-based Header with marker alignment */
.accordion-timeline .accordion-button {
    padding: 1.5rem 0;
    background: transparent !important;
    border: none;
    box-shadow: none !important;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
    text-align: left;
    color: inherit;
}

/* Hide default Bootstrap chevron */
.accordion-timeline .accordion-button::after {
    display: none !important;
}

.accordion-timeline .accordion-button:not(.collapsed) {
    background: transparent !important;
}

/* Marker containing the node */
.timeline-marker {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-top: 4px;
    /* Align nicely with stacked header text */
    position: relative;
    z-index: 2;
}

.timeline-node {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid var(--copper-solid);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-timeline .accordion-button:not(.collapsed) .timeline-node {
    background-color: var(--copper-solid);
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(184, 134, 84, 0.15);
}

/* Stacked text layout (Best UX Practice) */
.timeline-header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-day {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--copper-solid);
    line-height: 1.2;
}

.timeline-title-text {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--deep-forest);
    line-height: 1.3;
    transition: color 0.3s;
}

.accordion-timeline .accordion-button:not(.collapsed) .timeline-title-text {
    color: var(--copper-solid);
}

/* Custom interactive dropdown button on the far right */
.timeline-dropdown-btn {
    margin-left: auto;
    /* Pushes the dropdown button to the far right */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fcfaf7;
    border: 1px solid #eaeaea;
    color: var(--copper-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-dropdown-btn i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects */
.accordion-timeline .accordion-button:hover .timeline-dropdown-btn {
    border-color: var(--copper-solid);
    background-color: #fffaf5;
}

/* Expanded styles */
.accordion-timeline .accordion-button:not(.collapsed) .timeline-dropdown-btn {
    background-color: var(--copper-solid);
    border-color: var(--copper-solid);
    color: #ffffff;
}

.accordion-timeline .accordion-button:not(.collapsed) .timeline-dropdown-btn i {
    transform: rotate(180deg);
}

/* Clean, simplified body content aligned with the text */
.accordion-timeline .accordion-body {
    padding: 0 0 2rem 40px;
    /* Align perfectly with .timeline-header-content */
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

.accordion-timeline .meals-included {
    margin-top: 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
}

.accordion-timeline .meals-included strong {
    color: var(--deep-forest);
}

/* --- Premium Bento Inclusions Grid --- */
.bento-inclusions-container {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
    background: #FAF8F5;
    /* Extremely premium ivory/warm cream background */
    border-radius: 16px;
    padding: 3.5rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.inclusions-column {
    display: flex;
    flex-direction: column;
}

.inclusions-row-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.bento-card {
    background: transparent;
}

.bento-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.2rem;
}

.bento-card-header h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--deep-forest);
    margin: 0;
}

.icon-copper {
    color: var(--copper-solid);
    flex-shrink: 0;
}

.bento-card-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.bento-card-content p.bold-text {
    font-weight: 600;
    color: var(--deep-forest);
    margin-bottom: 0.4rem;
}

.bento-card-content p.sub-text {
    font-size: 0.85rem;
    color: #777;
    margin-top: 0.25rem;
}

.meals-highlight {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--deep-forest);
}

.transport-block,
.accommodation-block {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.accommodation-block {
    margin-bottom: 0;
}

/* Right Column: Activities */
.activities-column {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    padding-left: 4rem;
    display: flex;
    flex-direction: column;
}

.activities-block {
    flex: none;
}

.activities-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.06);
    margin: 2.5rem 0;
}

.activity-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.activity-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.activity-list li::before {
    content: '•';
    position: absolute;
    left: 5px;
    color: var(--copper-solid);
    font-weight: bold;
}

.show-all-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--copper-solid);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.show-all-link:hover {
    color: var(--primary-pink);
}

.activity-list li.hidden-activity {
    display: none !important;
}

.activities-block.show-all .activity-list li.hidden-activity {
    display: list-item !important;
    animation: fadeInActivity 0.4s ease forwards;
}

@keyframes fadeInActivity {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* --- Refined Exclusions --- */
.exclusions-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 4rem;
    margin-top: 2rem;
}

.exclusions-list li {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.exclusions-list li:nth-last-child(-n+2) {
    border-bottom: none;
}

.exclusions-list li i {
    color: #E26D5C;
    /* Elegant soft coral instead of harsh red */
    flex-shrink: 0;
    margin-top: 4px;
}

/* Bento Exclusions Block under Accommodation */
.bento-card.exclusions-block {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 2.5rem;
    margin-top: 2.5rem;
}

.icon-red {
    color: #D32F2F;
    flex-shrink: 0;
}

.red-title {
    color: #D32F2F !important;
}

.bento-exclusions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bento-exclusions-list li {
    display: flex;
    gap: 18px;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed #E5DFD5;
    align-items: flex-start;
}

.bento-exclusions-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bento-exclusions-list .exclusion-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #FFF3F1;
    color: #E26D5C;
    flex-shrink: 0;
    margin-top: 2px;
}

.bento-exclusions-list .exclusion-icon-wrapper i {
    width: 13px;
    height: 13px;
    stroke-width: 3px;
}

.bento-exclusions-list .exclusion-text {
    font-size: 0.95rem;
    color: #4A4A4A;
    line-height: 1.6;
}

.bento-exclusions-list .exclusion-text strong {
    color: var(--deep-forest);
    font-weight: 600;
    margin-right: 4px;
}


/* CTA Form Area */
.cta-form-container {
    background: var(--deep-forest);
    padding: 4rem;
    border-radius: 16px;
    color: #fff;
}

.cta-form-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-form-subtitle {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
}

.custom-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 12px 0;
    outline: none;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.custom-input:focus {
    border-bottom-color: var(--copper-solid);
}

.custom-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btn-submit-cta {
    background: var(--copper-solid);
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit-cta:hover {
    background: var(--primary-pink) !important;
    border-color: var(--primary-pink) !important;
    color: var(--dark-brown) !important;
    box-shadow: 0 8px 20px rgba(234, 144, 173, 0.3) !important;
}

/* --- Responsiveness --- */
@media(max-width: 992px) {
    .tour-top-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sticky-sidebar {
        position: relative;
        top: 0;
        max-width: 500px;
        margin: 0 auto;
    }

    .main-image-container {
        height: 350px;
    }

    .bento-inclusions-container {
        grid-template-columns: 1fr;
        padding: 2.5rem;
        gap: 3rem;
    }

    .activities-column {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding-top: 2.5rem;
    }

    .exclusions-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cta-form-container {
        padding: 2rem;
    }

    .itinerary-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .itinerary-left-image-col {
        position: static;
        display: none;
    }
}

@media(max-width: 768px) {
    .accordion-timeline::before {
        display: none;
    }

    .timeline-marker {
        display: none;
    }

    .accordion-timeline .accordion-button {
        gap: 0.5rem;
        padding: 1.25rem 0;
    }

    .accordion-timeline .accordion-body {
        padding-left: 0;
    }

    .timeline-dropdown-btn {
        margin-top: 0;
    }

    /* Main Gallery Navigation on Touch Screens */
    .main-nav-btn {
        opacity: 1 !important;
        width: 36px !important;
        height: 36px !important;
    }

    .main-prev-btn {
        left: 8px !important;
    }

    .main-next-btn {
        right: 8px !important;
    }

    /* Touch Friendly Thumbnail Track (edge-to-edge scroll) */
    .thumb-carousel-btn {
        display: none !important;
        /* Hide arrows on touch screens */
    }

    .thumbnail-carousel-container {
        gap: 0 !important;
    }

    .thumbnail-track {
        padding: 4px 0 !important;
    }
}

@media(max-width: 576px) {
    .main-image-container {
        height: 250px;
    }

    .btn-view-all-photos {
        bottom: 12px !important;
        right: 12px !important;
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
    }

    .tour-main-title {
        font-size: 2rem;
    }

    .widget-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .w-stat-row.style-full-width {
        border-top: none;
        padding-top: 0;
    }

    .inclusions-row-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bento-inclusions-container {
        padding: 1.5rem;
    }
}

/* --- Premium Luxury Upgrade & Private Groups Section --- */
.luxury-enhancements-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.luxury-stacked-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.luxury-block {
    position: relative;
    background: #FAF9F6;
    border: 1px solid #EAE6DF;
    border-radius: 16px;
    padding: 3.5rem 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

.luxury-block-title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    color: var(--deep-forest);
    font-weight: 700;
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.luxury-block-text {
    font-size: 1.05rem;
    color: #4A4A4A;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.luxury-block-text:last-child {
    margin-bottom: 0;
}

.luxury-subblock {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(166, 124, 82, 0.25);
}

.luxury-subblock-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--deep-forest);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.group-features-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.feature-icon i {
    color: var(--copper-solid);
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.feature-item p {
    font-size: 0.95rem;
    color: #4A4A4A;
    line-height: 1.65;
    margin: 0;
}

.min-passengers-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(198, 139, 89, 0.08);
    color: var(--copper-solid);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 1rem;
    align-self: flex-start;
}

.min-passengers-notice i {
    width: 15px;
    height: 15px;
}

.luxury-cta-block {
    max-width: 800px;
    margin: 4.5rem auto 0 auto;
    background: linear-gradient(135deg, #1F3A2E 0%, #12241D 100%);
    color: #ffffff;
    border-radius: 24px;
    padding: 3.5rem 3rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(198, 139, 89, 0.3);
    box-shadow: 0 20px 40px rgba(12, 36, 29, 0.12);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.luxury-cta-block:hover {
    transform: translateY(-4px);
    border-color: rgba(198, 139, 89, 0.6);
    box-shadow: 0 25px 50px rgba(198, 139, 89, 0.15);
}

.luxury-cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 100%, rgba(198, 139, 89, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 0% 0%, rgba(198, 139, 89, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
}

.luxury-cta-block::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-top: 1px solid rgba(198, 139, 89, 0.25);
    border-right: 1px solid rgba(198, 139, 89, 0.25);
    pointer-events: none;
    transition: all 0.5s ease;
}

.luxury-cta-block:hover::after {
    width: 50px;
    height: 50px;
    border-color: rgba(198, 139, 89, 0.5);
}

.cta-eyebrow {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--copper-solid);
    font-weight: 600;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 2;
}

.cta-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 2;
    line-height: 1.3;
}

.cta-message {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 2.25rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.cta-button-container {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.btn-primary-copper.luxury-cta-btn {
    padding: 14px 32px;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .luxury-block {
        padding: 2.25rem 1.75rem;
    }

    .luxury-block-title {
        font-size: 1.4rem;
    }

    .luxury-subblock-title {
        font-size: 1.2rem;
    }

    .luxury-block-text {
        font-size: 0.98rem;
    }

    .luxury-cta-block {
        padding: 2.5rem 1.75rem;
        margin: 3rem 1.5rem 0 1.5rem;
    }
}

/* ==========================================================================
   LUXURY QUICK NAV TABS BAR (DATES, ITINERARY, INCLUSIONS)
   ========================================================================== */
.luxury-tabs-section {
    background-color: var(--deep-forest);
    padding: 24px;
    border-radius: 16px;
    margin-top: 35px;
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(31, 58, 46, 0.12);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(198, 139, 89, 0.15);
}

.luxury-tabs-outer {
    width: 100%;
    border: 1.5px solid rgba(198, 139, 89, 0.45);
    border-radius: 50px;
    padding: 4px;
    background: transparent;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.luxury-tabs-inner {
    background-color: #FAF6EE;
    border: 1px solid var(--copper-solid);
    border-radius: 46px;
    display: flex;
    align-items: center;
    padding: 6px 36px 6px 8px;
    /* Symmetrical: Left is 8px + 28px (ornament) = 36px. Right is 36px padding. */
}

.luxury-tabs-ornament {
    background-color: var(--deep-forest);
    border: 1px solid var(--copper-solid);
    border-radius: 30px;
    height: 48px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    flex-shrink: 0;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.luxury-tabs-ornament-star {
    color: var(--copper-solid);
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 3px rgba(198, 139, 89, 0.6);
}

.luxury-tabs-links {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;
}

.luxury-tab-item {
    text-align: center;
    text-decoration: none !important;
    color: var(--deep-forest) !important;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 500;
    padding: 8px 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 30px;
    white-space: nowrap;
    flex: none;
}

.luxury-tab-item:hover {
    color: var(--copper-solid) !important;
    transform: translateY(-1px);
    text-shadow: 0 1px 2px rgba(198, 139, 89, 0.15);
}

.luxury-tab-item.active {
    color: var(--copper-solid) !important;
    font-weight: 700;
}

.luxury-tab-divider {
    width: 1px;
    height: 38px;
    background: linear-gradient(to bottom, transparent, var(--copper-solid) 30%, var(--copper-solid) 70%, transparent);
    opacity: 0.7;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.luxury-tab-divider-diamond {
    position: absolute;
    color: var(--copper-solid);
    font-size: 9px;
    background: #FAF6EE;
    padding: 4px 0;
    line-height: 1;
    text-shadow: 0 0 2px rgba(198, 139, 89, 0.5);
}

/* Responsiveness for tabs */
@media (max-width: 768px) {
    .luxury-tabs-section {
        padding: 16px 12px;
        border-radius: 12px;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .luxury-tabs-outer {
        border-radius: 30px;
        padding: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar for clean premium look */
    }

    .luxury-tabs-outer::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari/Opera */
    }

    .luxury-tabs-inner {
        border-radius: 28px;
        padding: 4px 16px;
        width: max-content;
        min-width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .luxury-tabs-ornament {
        display: none;
        /* Hide ornament on mobile to save space */
    }

    .luxury-tabs-ornament-star {
        font-size: 10px;
    }

    .luxury-tab-item {
        font-size: 0.9rem;
        padding: 6px 8px;
        white-space: nowrap;
        /* Keep tabs on a single row */
    }

    .luxury-tab-divider {
        height: 28px;
    }

    .luxury-tab-divider-diamond {
        font-size: 7px;
    }
}


/* --- Premium Booking CTA Banner Section --- */
.booking-cta-section {
    position: relative;
    padding: 0 15px;
    margin-top: 3.5rem;
    margin-bottom: 5.5rem;
}

.booking-cta-banner {
    position: relative;
    background: radial-gradient(circle at 75% 50%, #03341b 0%, #011108 100%);
    border: 1.5px solid #8c6527;
    border-radius: 15px;
    /* Slight corner radius exactly as in image */
    padding: 3.5rem 3.5rem 4rem 3.5rem;
    overflow: visible;
    /* allows Quick Quote button to align beautifully at bottom */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(4, 46, 26, 0.45);
}

/* Inner gold border */
.booking-cta-banner::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1.5px solid #8c6527;
    border-radius: 10px;
    /* inner border corner radius perfectly parallel */
    pointer-events: none;
    z-index: 2;
}

.banner-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: 15px;
}

.banner-bg-silhouette {
    position: absolute;
    bottom: 12px;
    left: 30px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.18;
}

.banner-container {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    z-index: 3;
}

/* --- Left Column styles --- */
.banner-left {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.8rem;
    padding-left: 0.5rem;
}

.star-ornament-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
}

.star-ornament-container .divider-line {
    position: absolute;
    z-index: 1;
}

.star-ornament-container svg {
    position: relative;
    z-index: 2;
}

.booking-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.booking-main-title {
    font-family: var(--font-heading);
    /* Playfair Display */
    font-size: 4.8rem;
    /* Massive title as in image */
    font-weight: 600;
    background: linear-gradient(to bottom, #fff3d1 0%, #dda244 50%, #966b24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    letter-spacing: 1px;
    line-height: 1.05;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.booking-subtitle {
    font-family: var(--font-body);
    /* Poppins */
    font-size: 0.95rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0.25rem 0 0 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.85;
}

.gold-line-ornament {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* --- Divider line in center --- */
.banner-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 150px;
    width: 40px;
}

.divider-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(140, 101, 39, 0.6) 15%, rgba(140, 101, 39, 0.6) 85%, transparent);
}

.divider-ornament {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Right Column styles --- */
.banner-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
    padding-right: 0.5rem;
}

.seats-alert-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.seats-alert {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: #dfba73;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.seats-sparkle {
    display: flex;
    align-items: center;
}

/* ✦ ENQUIRE NOW Button - MATCHES DESIGN EXACTLY ✦ */
.btn-gold-enquire {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(to bottom, #ffebc2 0%, #dda244 40%, #b27a23 90%, #835411 100%);
    border: 1.5px solid #fff5cc;
    border-radius: 12px;
    /* Slight rounded rectangle as in image */
    padding: 16px 48px;
    color: #01140b !important;
    /* dark forest green text */
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    white-space: nowrap;
    /* Keep enquire now content strictly on a single line */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(221, 162, 68, 0.2),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    z-index: 1;
}

/* Inner thin border inside the button */
.btn-gold-enquire::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(1, 20, 11, 0.4);
    /* Thin line border inside the button */
    border-radius: 9px;
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.3s ease;
}

/* Rose Pink Hover Effect */
.btn-gold-enquire:hover {
    transform: translateY(-2px);
    background: linear-gradient(to bottom, #ffccd5 0%, #ff6b8b 40%, #d81b60 90%, #880e4f 100%);
    border-color: #ffb3c1;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(216, 27, 96, 0.45),
        0 0 25px rgba(255, 107, 139, 0.4),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6);
}

.btn-gold-enquire:hover::before {
    border-color: rgba(255, 255, 255, 0.45);
}

.btn-gold-enquire:hover .btn-emblem-svg {
    fill: #ffffff;
}

.btn-emblem-svg {
    fill: #01140b;
    opacity: 0.95;
    flex-shrink: 0;
    transition: fill 0.3s ease;
}

.availability-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: #dfba73;
    margin: 0;
    letter-spacing: 1.5px;
    opacity: 0.85;
    text-transform: uppercase;
}

.availability-alert svg {
    flex-shrink: 0;
}

/* Overlapping Quick Quote Static Label Centered */
.quick-quote-container {
    position: absolute;
    bottom: -18px;
    /* sits perfectly overlapping the bottom border */
    left: 50%;
    /* Centered horizontally under the entire banner! */
    transform: translateX(-50%);
    z-index: 5;
}

.quick-quote-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #011108;
    /* Fuses into the banner color style */
    border: 1.5px solid #8c6527;
    border-radius: 8px;
    /* Slightly rounded corners */
    padding: 8px 22px;
    color: #dfba73 !important;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    /* It is not a button, disables click and default pointer cursor */
}

/* Responsive adjustment for CTA Banner */
@media (max-width: 992px) {
    .banner-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .booking-cta-banner {
        padding: 3rem 2rem 4rem 2rem;
    }

    .banner-left {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 0;
    }

    .star-ornament-container {
        display: none;
        /* Hide vertical sparkle line on mobile for clean layout */
    }

    .banner-divider {
        height: auto;
        width: 100%;
        margin: 0.5rem 0;
    }

    .banner-divider .divider-line {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(140, 101, 39, 0.8) 20%, rgba(140, 101, 39, 0.8) 80%, transparent);
    }

    .banner-divider .divider-ornament {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        flex-direction: row;
    }

    .quick-quote-container {
        position: static;
        transform: none;
        margin-top: 1.5rem;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .booking-main-title {
        font-size: 3.5rem;
    }

    .btn-gold-enquire {
        font-size: 1.6rem;
        padding: 14px 36px;
    }
}

/* Mobile responsive adjustment for CTA Banner (down to 320px) */
@media (max-width: 576px) {
    .booking-cta-banner {
        padding: 2.25rem 1rem 3.25rem 1rem !important;
    }

    .booking-cta-banner::before {
        top: 4px !important;
        left: 4px !important;
        right: 4px !important;
        bottom: 4px !important;
    }

    .booking-main-title {
        font-size: 2.2rem !important;
    }

    .booking-subtitle {
        font-size: 0.78rem !important;
        letter-spacing: 1px !important;
    }

    .btn-gold-enquire {
        font-size: 1.15rem !important;
        padding: 12px 18px !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .btn-gold-enquire::before {
        top: 3px !important;
        left: 3px !important;
        right: 3px !important;
        bottom: 3px !important;
        border-radius: 7px !important;
    }

    .btn-gold-enquire .btn-emblem-svg {
        width: 14px !important;
        height: 14px !important;
    }

    .seats-alert-container {
        gap: 6px !important;
    }

    .seats-alert {
        font-size: 0.8rem !important;
        letter-spacing: 1px !important;
    }

    .seats-sparkle svg {
        width: 16px !important;
        height: 16px !important;
    }

    .availability-alert {
        font-size: 0.72rem !important;
        letter-spacing: 0.8px !important;
        gap: 6px !important;
    }

    .availability-alert svg {
        width: 12px !important;
        height: 14px !important;
    }

    .quick-quote-container {
        margin-top: 1rem !important;
    }

    .quick-quote-label {
        padding: 6px 16px !important;
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }
}

/* Extreme Narrow Screen Adjustments (down to 320px) */
@media (max-width: 500px) {
    .tour-page-container {
        padding: 110px 12px 0px 12px !important;
    }

    .tour-breadcrumbs {
        white-space: normal !important;
        word-break: break-word !important;
        display: flex !important;
        flex-wrap: wrap !important;
        line-height: 1.4 !important;
        gap: 2px !important;
    }

    .tour-main-title {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
    }

    .main-image-container {
        height: 200px !important;
    }

    .luxury-tabs-section {
        display: block !important;
        /* Force block layout so children are strictly bounded by parents */
        padding: 12px 8px !important;
    }

    .luxury-tabs-outer {
        width: 100% !important;
        max-width: 100% !important;
    }

    .luxury-tabs-inner {
        padding: 4px 10px !important;
    }

    .luxury-tab-item {
        font-size: 0.8rem !important;
        padding: 6px 6px !important;
    }

    .luxury-tab-divider {
        height: 22px !important;
    }

    .luxury-tab-divider-diamond {
        font-size: 6px !important;
    }

    .tour-desc-text {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .section-title {
        font-size: 1.6rem !important;
    }

    .highlight-item {
        gap: 10px !important;
    }

    .highlight-item p {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
    }
}

/* Custom Header Navbar Responsiveness (down to 320px) */
@media (max-width: 576px) {
    .top-navbar {
        height: 70px !important;
    }

    .navbar-grid {
        gap: 12px !important;
    }

    .main-logo {
        height: 44px !important;
                height: 85px !important;
        top: 10px;
        position: absolute;
        margin-left: -30px;
    }

    .top-navbar .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .menu-trigger {
        font-size: 11px !important;
        gap: 4px !important;
    }

    .nav-btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
    }
}

@media (max-width: 400px) {
    .tour-page-container {
        padding: 95px 10px 0px 10px !important;
    }

    .luxury-tabs-section {
        padding: 10px 4px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .luxury-tab-item {
        font-size: 0.72rem !important;
        padding: 4px 4px !important;
    }

    .top-navbar {
        height: 60px !important;
    }

    .main-logo {
        height: 38px !important;
    }

    .navbar-grid {
        gap: 8px !important;
    }

    .menu-trigger {
        font-size: 10px !important;
    }

    .nav-btn {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
}

/* ==========================================================================
   Header Mobile Responsiveness (Aligns index.html with Vietnam.html mobile)
   ========================================================================== */
@media (max-width: 991px) {
    .header-wrapper {
        position: sticky !important;
        top: 0 !important;
        z-index: 4050 !important;
    }

    .top-bar {
        height: 70px !important;
        padding: 0 15px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
    }

    .header-left {
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    .header-right {
        gap: 10px !important;
        justify-content: flex-end !important;
    }

    /* Hide social icons on mobile to match Vietnam.html layout */
    .header-right .d-flex {
        display: none !important;
    }

    /* Transform centered logo from absolute hanging plate to inline flex-centered cell */
    .center-logo-wrapper {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        z-index: auto !important;
    }

    .hanging-logo {
        width: auto !important;
        height: 85px !important;
        position:absolute;
        top : 10px;
        /* Matches .main-logo height on mobile */
        object-fit: contain !important;
    }

    /* Align scroll shrink state to match normal on mobile */
    .header-wrapper.scrolled .hanging-logo {
        height: 85px !important;
        width: auto !important;
        top: 10px !important;
    }
}

@media (max-width: 400px) {
    .top-bar {
        height: 60px !important;
    }

    .hanging-logo {
        height: 38px !important;
    }

      .hanging-logo {
        width: auto !important;
        height: 85px !important;
        position:absolute;
        top : 10px;
        /* Matches .main-logo height on mobile */
        object-fit: contain !important;
    }

    /* Align scroll shrink state to match normal on mobile */
    .header-wrapper.scrolled .hanging-logo {
        height: 85px !important;
        width: auto !important;
        top: 10px !important;
    }
}

/* ==========================================================================
   FLIGHTS & GROUP TOUR PAGES RESPONSIVENESS OVERRIDES
   ========================================================================== */

@media (max-width: 991px) {

    /* 1. Hero Section Layout Adjustments */
    .gt-hero {
        margin-top: 0 !important;
        padding-top: 1.5rem !important;
    }

    .gt-hero-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 1.5rem !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .gt-hero-left {
        padding-top: 0 !important;
        width: 100% !important;
    }

    .gt-hero-title {
        font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
        line-height: 1.2 !important;
    }

    /* 2. Selection Grids Scaling */
    .selection-grid,
    .selection-grid.columns-3,
    .selection-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 768px) {

    /* 1. Section Title Downscaling (Overrides Inline Styles) */
    .gt-sec-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .gt-how-section {
        padding: 4rem 0 !important;
    }

    /* 2. Selection Grids collapsing to 1 Column */
    .selection-grid,
    .selection-grid.columns-2,
    .selection-grid.columns-3,
    .selection-grid.columns-4 {
        grid-template-columns: 1fr !important;
    }

    /* 3. Flights Feature Grid Stacking & Destinations Spacing */
    .gt-gp-feat-section,
    .gt-gp-destinations {
        padding: 1.5rem 1.2rem !important;
    }

    .gt-gp-feat-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Hide the panel Close button inside the accordion body on mobile */
    .gt-gp-close,
    .gt-group-panel.open .gt-gp-close {
        display: none !important;
    }

    /* 4. "How It Works" Steps - 2-Column Responsive Cards on Mobile */
    .gt-how-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        padding: 0 !important;
        /* Removes desktop 5rem side padding that squeezed mobile cards */
        gap: 12px !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .gt-how-step {
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 8px !important;
        padding: 1.5rem 1.2rem !important;
        border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    .gt-how-step:last-child {
        grid-column: span 2 !important;
    }

    /* 5. Feature Comparison Tables Collapse (No horizontal scrolling) */
    .compare-section {
        padding: 0 1.5rem 2rem !important;
    }

    .feat-table {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .feat-table thead,
    .feat-table th {
        display: none !important;
    }

    .feat-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .feat-table tr {
        display: flex !important;
        flex-direction: column !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        padding: 1.25rem !important;
        gap: 0.65rem !important;
    }

    .feat-table td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    /* First td becomes the primary header card label */
    .feat-table td:first-child {
        font-size: 0.95rem !important;
        color: var(--copper-solid) !important;
        font-weight: 600 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.25rem !important;
        background: transparent !important;
        width: 100% !important;
    }

    /* Column labels injection for the 3-column table (Full-service vs Budget) */
    #panel-fullservice .feat-table tr td:nth-child(2)::before {
        content: "Full-Service Airlines:" !important;
        display: block !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--primary-pink) !important;
        margin-bottom: 0.2rem !important;
    }

    #panel-fullservice .feat-table tr td:nth-child(3)::before {
        content: "Budget Airlines:" !important;
        display: block !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: rgba(255, 255, 255, 0.4) !important;
        margin-bottom: 0.2rem !important;
        margin-top: 0.6rem !important;
    }
}

@media (max-width: 576px) {

    /* 1. Downscale Header Overlay Text to Prevent Clamping/Wrapping */
    .gt-gp-hero-title {
        font-size: 1.5rem !important;
    }

    .gt-gp-hero-sub {
        font-size: 0.78rem !important;
        margin-bottom: 0.8rem !important;
    }

    .gt-gp-hero-content {
        padding: 1.25rem !important;
    }

    /* 2. Hero Section Buttons - Premium Stacked Thumb CTA Controls */
    .gt-hero-ctas {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.8rem !important;
    }

    .gt-hero-ctas .gt-btn-gold,
    .gt-hero-ctas .gt-btn-ghost {
        width: 100% !important;
        text-align: center !important;
        padding: 1rem 1.5rem !important;
    }

    /* 3. Enquiry Wizard Spacing Adjustments */
    .wizard-container {
        padding: 24px 16px !important;
    }

    .counter-controls {
        gap: 8px !important;
    }

    .btn-counter {
        width: 32px !important;
        height: 32px !important;
    }

    .counter-input {
        width: 36px !important;
    }

    .guest-counter-wrapper {
        padding: 12px !important;
    }

    /* 4. Wizard Navigation Footer Stacking */
    .wizard-footer {
        flex-direction: column-reverse !important;
        gap: 12px !important;
        align-items: stretch !important;
        padding-top: 20px !important;
    }

    .wizard-footer .btn-outline-copper,
    .wizard-footer .btn-primary-copper {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        /* Clears ms-auto */
    }
}

@media (max-width: 480px) {

    /* 1. Downscale section Title more for extremely narrow viewports */
    .gt-sec-title {
        font-size: 1.8rem !important;
    }

    /* 2. Feat Strip items visual refinement */
    .gt-gp-feat-strip-item {
        padding: 0.5rem !important;
    }

    .gt-gp-feat-strip-item i {
        width: 18px !important;
        height: 18px !important;
    }

    .fs-label {
        font-size: 0.6rem !important;
    }

    .fs-sub {
        display: none !important;
        /* Hide details on super narrow screen */
    }

    /* 3. Steps list margin scaling for extreme mobile screens */
    .gt-how-grid {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        gap: 8px !important;
    }

    .gt-how-step {
        padding: 1.2rem 1rem !important;
    }
}


    #scrollProgress {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: none;
    z-index: 9999;
}

/*#scrollProgress svg {*/
/*    transform: rotate(-90deg);*/
/*}*/

#scrollProgress circle {
    fill: none;
    stroke-width: 4;
}

#scrollProgress .bg {
    stroke: #e5e5e5;
}

#scrollProgress .progress {
    stroke: #00aa9e;
    stroke-linecap: round;
    stroke-dasharray: 163.36; /* 2 * π * 26 */
    stroke-dashoffset: 163.36;
    transition: stroke-dashoffset 0.1s linear;
}

#scrollProgress span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #00aa9e;
    font-weight: bold;
}


[id] {
    scroll-margin-top: 120px;
}




















/* ==============================

================================
*/



/* --- LUXURY ENQUIRY WIZARD --- */
.bg-soft-beige {
    background-color: var(--soft-beige);
}

.wizard-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 50px 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
}

/* Progress Bar */
.wizard-progress-wrapper {
    position: relative;
}

.wizard-progress-track {
    height: 3px;
    background: #eaeaea;
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}

.wizard-progress-fill {
    height: 100%;
    background: var(--copper-solid);
    width: 25%;
    /* Controlled by JS */
    transition: width 0.4s ease;
}

.wizard-steps-indicators {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a0a0a0;
    font-weight: 500;
}

.step-indicator.active {
    color: var(--deep-forest);
    font-weight: 700;
}

/* Step Visibility */
.wizard-step {
    display: none;
    animation: fadeIn 0.5s ease;
}

.wizard-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.step-title {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--deep-forest);
    margin-bottom: 30px;
}

/* Selectable Cards (Radios/Checkboxes) */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.selection-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.selection-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.selection-card {
    cursor: pointer;
    position: relative;
    display: block;
}

/* Hide default input circles */
.selection-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* The actual visible card */
.card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #eaeaea;
    padding: 16px 20px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--deep-forest);
    transition: all 0.3s ease;
    background: #ffffff;
}

.card-content i {
    color: #a0a0a0;
    width: 18px;
    transition: color 0.3s ease;
}

/* Selected/Hover States */
.selection-card:hover .card-content {
    border-color: var(--copper-solid);
}

.selection-card input:checked~.card-content {
    border-color: var(--copper-solid);
    background: rgba(190, 124, 70, 0.05);
    /* Very light copper tint */
    box-shadow: inset 0 0 0 1px var(--copper-solid);
}

.selection-card input:checked~.card-content i {
    color: var(--copper-solid);
}

/* Standard Inputs & Textareas */
.input-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    /* text-transform: uppercase; */
    color: var(--deep-forest);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.custom-text-input {
    width: 100%;
    border: 1px solid #eaeaea;
    padding: 15px 20px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--deep-forest);
    outline: none;
    transition: border 0.3s ease;
}

.custom-text-input:focus {
    border-color: var(--copper-solid);
}

/* Disclaimers */
.info-notice {
    display: flex;
    background: rgba(190, 124, 70, 0.08);
    padding: 20px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--deep-forest);
    line-height: 1.6;
}

.privacy-notice {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

/* Guest Counters */
.guest-counter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}

.guest-info h4 {
    font-family: var(--font-body);
    font-size: 16px;
    margin: 0 0 4px 0;
    color: var(--deep-forest);
}

.guest-info span {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-counter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #eaeaea;
    background: #fff;
    color: var(--deep-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-counter:hover {
    border-color: var(--copper-solid);
    color: var(--copper-solid);
}

.counter-input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--deep-forest);
    outline: none;
}

/* Footer Nav */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eaeaea;
    padding-top: 30px;
}

/* Reusing your secondary outline button style */
.btn-outline-copper {
    border: 1px solid var(--copper-solid);
    background: transparent;
    color: var(--deep-forest);
    padding: 14px 30px;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 768px) {
    .wizard-container {
        padding: 30px 20px;
    }

    .selection-grid,
    .selection-grid.columns-4,
    .selection-grid.columns-2 {
        grid-template-columns: 1fr;
    }

    .wizard-steps-indicators {
        display: none;
        /* Hide text steps on mobile, keep progress bar */
    }
}





/* --- CUSTOM LUXURY SELECT DROPDOWNS --- */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

/* The Trigger (Looks like an input) */
.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
}

.custom-select-trigger .select-chevron {
    width: 18px;
    height: 18px;
    color: var(--deep-forest);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The Dropdown List */
.custom-select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    z-index: 100;

    /* NEW: Height constraint and scrolling */
    max-height: 280px;
    overflow-y: auto;

    /* NEW: Firefox Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--copper-solid) transparent;

    /* Hidden by default with animation prep */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- NEW: WEBKIT CUSTOM SCROLLBAR (Chrome, Safari, Edge) --- */
.custom-select-options::-webkit-scrollbar {
    width: 6px;
    /* Thin, elegant width */
}

.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
    /* Prevents the scrollbar from overlapping the rounded top/bottom corners */
}

.custom-select-options::-webkit-scrollbar-thumb {
    background-color: var(--copper-solid);
    border-radius: 10px;
    /* Soft rounded pill shape */
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
    background-color: #a35d26;
    /* Darkens slightly when the user grabs it */
}

/* Option Items (Remains the same) */
.custom-select-options li {
    padding: 12px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--deep-forest);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.custom-select-options li:hover {
    background: var(--soft-beige);
    color: var(--copper-solid);
}

.custom-select-options li.active {
    background: rgba(190, 124, 70, 0.05);
    /* Very light copper tint */
    color: var(--copper-solid);
    font-weight: 600;
}

/* --- OPEN STATE TRIGGERS (Remains the same) --- */
.custom-select-wrapper.is-open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-wrapper.is-open .custom-select-trigger {
    border-color: var(--copper-solid);
}

.custom-select-wrapper.is-open .select-chevron {
    transform: rotate(180deg);
    color: var(--copper-solid);
}








/* --- ENQUIRY FORM AMBIENT BACKGROUND --- */
.enquiry-bg-svgs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Crucial: Allows users to click the form through the SVGs */
    z-index: 1;
    opacity: 0.12;
    /* Subtle watermark effect against the beige background */
}

.enquiry-bg-svgs .ambient-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--copper-solid);
}

.enquiry-contour {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
    /* Keeps lines crisp regardless of screen size */
}

.dashed-ring {
    stroke-dasharray: 4 12;
    stroke-width: 1px;
}

/* --- KEYFRAMES --- */
.contour-waves {
    animation: drift-contours 35s ease-in-out infinite alternate;
}

.contour-rings {
    animation: rotate-rings 100s linear infinite;
    transform-origin: 85% 15%;
    /* Matches the cx/cy of the circles */
}

@keyframes drift-contours {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-40px) scale(1.02);
    }

    /* Gentle breathing drift */
}

@keyframes rotate-rings {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

    /* Ultra-slow majestic spin */
}

/* Hide on mobile to keep the form distraction-free and performant */
@media (max-width: 768px) {
    .enquiry-bg-svgs {
        display: none;
    }
}




/* --- CUSTOM SELECT DROPDOWN FIX --- */
select.custom-text-input {
    /* 1. Hide the stubborn native browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 2. Add a custom Lucide-style chevron as a background image */
    /* Note: The stroke='%231f3a2e' matches your Deep Forest green hex code */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 16px;

    /* 3. Position the new arrow 20px from the right side, matching your padding */
    background-position: right 20px center;

    /* 4. Increase right padding so long text doesn't overlap the new icon */
    padding-right: 45px;

    /* Fix for IE/Edge to remove native arrow */
    cursor: pointer;
}

select.custom-text-input::-ms-expand {
    display: none;
}


/* Custom Checkbox Color */
.custom-checkbox {
    accent-color: var(--deep-forest);
    width: 16px;
    height: 16px;
    cursor: pointer;
}


 .new-dest-grid {
                                display: grid;
                                grid-template-columns: repeat(1, 1fr) !important;
                                gap: 15px 30px;
                            }

                            .at-dest-list {
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                gap: 12px 16px;
                            }

                            .at-dest-row {
                                position: relative;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 56px;
                                border-radius: 8px;
                                overflow: hidden;
                                text-decoration: none;
                                isolation: isolate;
                            }

                            .at-dest-row img {
                                position: absolute;
                                inset: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                z-index: 0;
                            }

                            .at-dest-row::before {
                                content: "";
                                position: absolute;
                                inset: 0;
                                background: rgba(30, 77, 59, 0.55);
                                z-index: 1;
                                transition: background 0.3s ease;
                            }

                            .at-dest-row:hover::before {
                                background: rgba(181, 146, 74, 0.65);
                            }

                            .at-dest-name {
                                position: relative;
                                z-index: 2;
                                font-family: 'Playfair Display', Georgia, serif;
                                font-weight: 700;
                                font-size: 17px;
                                color: #F8F5EF;
                                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
                            }

/* ------------NAV MENU---------------- */

/* IMPORTANT: The parent bar must allow things to "spill out" */
.bottom-nav-bar {
    overflow: visible !important; /* Prevents the dropdown from being cut off */
}

/* Parent Item */
.bottom-nav-bar ul .asia-dropdown-item {
    position: relative !important;
    display: inline-block; /* Ensure it has a proper footprint */
    padding-bottom: 20px; 
    margin-bottom: -20px; /* Bridge the gap to the dropdown */
}

/* Dropdown Container */
.bottom-nav-bar .asia-dropdown-box {
    position: absolute !important;
    top: 35px !important; /* Adjust this based on your nav height */
    left: 0 !important;
    width: 750px !important;
    background: #ffffff !important;
    padding: 25px !important;
    
    /* Display Logic */
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevents accidental hover when hidden */
    
    transform: translateY(15px);
    transition: all 0.3s ease-in-out;
    
    z-index: 999999 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid #eee; /* Makes it visible against light backgrounds */
}

/* Show on Hover */
.bottom-nav-bar ul .asia-dropdown-item:hover .asia-dropdown-box {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Grid Layout - Forced height to prevent "line" look */
.bottom-nav-bar .asia-dropdown-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    min-height: 100px; /* Ensures it's not a thin line even if loading */
}

/* Premium Card Design */
.bottom-nav-bar .asia-dropdown-card {
    position: relative !important;
    display: block !important;
    height: 120px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #333; /* Fallback color */
    text-decoration: none !important;
}

.bottom-nav-bar .asia-dropdown-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease;
    opacity: 0.8; /* Dimmed for text readability */
}

/* Text Overlay */
.bottom-nav-bar .asia-dropdown-card span {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    z-index: 5;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

/* Hover Zoom Effect */
.bottom-nav-bar .asia-dropdown-card:hover img {
    transform: scale(1.1);
    opacity: 1;
}