:root {
    /* Kept original background and structure */
    --primary-bg: #ffffff;
    --text-dark: #11142d;
    --text-muted: #555870;
    
    /* Rebranded Theme Colors from Logo */
    --accent-gold: #D4AF37;       /* Luxury Metallic Gold */
    --accent-gold-hover: #AA7C11; /* Dark Deep Gold for interactions */
    --accent-teal: #005F54;       /* Deep Emerald/Teal */
    --accent-teal-hover: #004D40; /* Darker Emerald for hover states */
    
    --border-radius-lg: 40px;
    --border-radius-md: 20px;
    --font-main: 'Urbanist', 'DM Sans', sans-serif;
    --font-cursive: 'Reenie Beanie', cursive; /* Used for the elegant handwritten style look */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--primary-bg);
    color: var(--text-dark);
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- Header / Navigation (Fixed & Non-Scrolling) --- */
/* --- Header / Navigation (Fixed & Non-Scrolling) --- */
header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 5%;
    background-color: #ffffff; 
    position: fixed; /* Fixed position so it stays on screen while scrolling */
    top: 0;
    left: 0;
    z-index: 100;    /* Increased z-index to make sure it floats over everything else */
    
    /* මෙතනට සියුම් ලා බෝඩරය සහ premium shadow එකක් එකතු කළා */
    border-bottom: 1px solid rgba(0, 95, 84, 0.08); 
    box-shadow: 0 4px 20px rgba(17, 20, 45, 0.02);
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--accent-teal); /* Changed to brand Teal */    
    font-weight: 600;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--accent-gold-hover); 
}

.nav-links i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.nav-links li:hover i {
    transform: rotate(180deg);
}

/* Logo Configuration */
.logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #f7f5fa;
    padding: 15px 30px 15px 30px; 
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0; 
    height: 130px; 
}

/* Custom image icon sizing and alignment */
.btn-icon {
    width: 25px;         /* Adjust this number depending on how big you want your icons */
    height: 25px;        /* Keeps the image perfectly square */
    object-fit: contain; /* Prevents your image from stretching distortion */
    display: inline-block;
    vertical-align: middle; 
}

/* Adds a tiny gap between the text and your login image */
.btn-login .btn-icon {
    margin-right: 8px;
}

/* Adds a tiny gap between the text and your search image */
.btn-search .btn-icon {
    margin-left: 10px;
}

/* --- Updated Logo Styles --- */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 100%; 
}

.logo-image {
    height: 100px; 
    width: auto;  
    display: block;
    object-fit: contain;
}

/* Right Nav Utilities */
.nav-right {
    display: flex;
    align-items: center;
    gap: 30px; /* Increased gap to comfortably fit both search and call features */
}

/* --- Inline Header Search Bar --- */
.header-search-container {
    display: flex;
    align-items: center;
}

.header-search-form {
    display: flex;
    align-items: center;
    background-color: #ffffff; /* Matches your search-field background */
    border-radius: 20px;
    padding: 8px 18px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.header-search-form:focus-within {
    border-color: var(--accent-teal);
    background-color: #fff;
}

.header-search-form input {
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--text-dark);
    width: 140px; /* Clean, compact sizing for basic header search */
    transition: width 0.3s ease;
}

.header-search-form input:focus {
    width: 180px; /* Smoothly expands slightly when interacting */
}

.header-search-btn {
    border: none;
    background: transparent;
    color: var(--accent-teal);
    cursor: pointer;
    font-size: 14px;
    padding-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.header-search-btn:hover {
    color: var(--accent-gold-hover);
}
 
.contact-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phone-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;    
    text-decoration: none;
    color: var(--accent-teal); /* Changed icon to brand Teal */
}

.phone-details span {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
}

.phone-details strong {
    font-size: 15px;
    color: var(--accent-teal-hover);
}

.lang-select {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.3s ease;
}

.lang-select:hover {
    color: var(--accent-gold-hover); /* Gold hover effect */
}

.btn-login {
    background-color: var(--accent-teal); /* Changed to Teal */
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background-color: var(--accent-teal-hover);
    transform: translateY(-2px);
}
/* --- Premium Hero Auto-Slider Section Architecture --- */
.hero-container {
    padding: 0 5%;
    margin-top: 110px; /* Buffer spacing clears your fixed desktop nav */
    position: relative;
}

.hero-slider-wrapper {
    width: 100%;
    height: 580px; /* Enhanced height profile for premium look */
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
 }

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: scale(1.08);
    transition: transform 6s cubic-bezier(0.1, 1, 0.1, 1);
}

/* Subtle zoom effect when a slide goes active */
.hero-slide.active .slide-bg {
    transform: scale(1);
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
}

/* --- Premium Travel Typography Enhancements --- */
.hero-title {
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 68px;
    font-weight: 700; /* Bolder weight for luxury editorial look */
    letter-spacing: -1px; /* Tighter modern spacing profile */
    line-height: 0.9;
     user-select: none;
}

.hero-title span {
    font-family: var(--font-cursive);
    color: var(--accent-gold); 
    font-size: 105px;
    font-weight: 400;
    display: inline-block;
    letter-spacing: 0px;
    margin: 0 8px;
    vertical-align: middle;
    text-shadow: none;
}

/* --- Interactive Navigation Dots --- */
.slider-dots {
    position: absolute;
    bottom: 75px; /* Safely nested above floating engine container */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 4;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.dot.active {
    background-color: var(--accent-gold);
    width: 32px; /* Expands dynamically into an elegant pill shape */
    border-radius: 20px;
    border-color: var(--accent-gold);
}

/* --- Mobile Media Query Overrides (Injected Parity fixes) --- */
@media screen and (max-width: 768px) {
    .hero-container {
        margin-top: 90px;
    }

    .hero-slider-wrapper {
        height: 480px;
        border-radius: var(--border-radius-md);
    }

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

    .hero-title span {
        font-size: 62px;
        display: block; /* Stacks display for tight screens */
        margin: 5px 0;
    }

    .slider-dots {
        bottom: 90px; /* Safely clears the mobile block stacked form factor */
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
    
    .dot.active {
        width: 24px;
    }
}

.search-engine-wrapper {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 1000px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 15px 20px;
    border-radius: var(--border-radius-md);
    z-index: 5;
    box-sizing: border-box;
}

.search-engine {
    display: grid;
    /* Aligned: 2 columns split evenly, button fits content naturally */
    grid-template-columns: 1fr 1fr auto; 
    gap: 15px;
    align-items: center;
}
.search-field {
    background: #f1f0f6;
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
}

.search-field:hover {
    background: #e6e4ee;
}

.search-field i.field-icon {
    color: var(--accent-teal); /* Changed search icons to accent teal */
    font-size: 16px;
}

.field-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.field-info label {
    font-size: 12px;
    color: #8a8d9f;
    font-weight: 500;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-info select, .field-info input {
    border: none;
    background: transparent;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    outline: none;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.search-field i.chevron-icon {
    color: var(--text-dark);
    font-size: 12px;
    pointer-events: none;
}

.btn-search {
    background-color: var(--accent-gold); /* Changed to Luxury Gold */
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 60px;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
 }

.btn-search:hover {
    background-color: var(--accent-gold-hover);
     transform: translateY(-1px);
}

/* --- Content Spacer for Layout Realism --- */
.section-spacer {
    height: 120px;
}

/* --- Desktop Defaults for New Elements --- */
.mobile-menu-trigger {
    display: none; /* Hidden on Desktop */
    cursor: pointer;
}

.menu-img-btn {
    width: 30px; /* Adjust size of your menu image here */
    height: auto;
    object-fit: contain;
    display: block;
}
/* ========================================================= */
/* --- Mobile Mode (Media Query) Optimized & Completed --- */
/* ========================================================= */
@media screen and (max-width: 768px) {
    header {
        padding: 15px 5%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between; 
    }

    /* 1. Standardized Sizing for All Interactive Header Elements */
    .mobile-menu-trigger,
    .header-search-btn,
    .phone-icon {
        width: 28px;            /* Forces exact uniform width */
        height: 28px;           /* Forces exact uniform height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important; /* Removes circle backgrounds for mobile parity */
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        box-shadow: none !important;
    }

    /* Standardizing inner graphic assets inside those wrappers */
    .menu-img-btn,
    .header-search-btn .btn-icon {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Standardizing FontAwesome vector icon sizing inside the phone link */
    .phone-icon i {
        font-size: 21px;       /* Matches visual weight with 32px image assets */
        line-height: 1;
        color: var(--accent-teal);
    }

    /* 2. Hide the standard Desktop Text Links */
    .nav-links {
        display: none; 
    }

    /* 3. Force Logo exactly to the middle */
    .logo-container {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        height: 100px; 
        padding: 10px 15px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    .logo-image {
        height: 80px; 
    }

    /* Right utilities layout alignment */
    .nav-right {
        z-index: 15;
        display: flex;
        align-items: center;
        gap: 15px; /* Comfortable spacing between Search and Call icons */
    }

    /* Remove background wrapping for minimal mobile icon footprint */
    .header-search-form {
        background-color: transparent;
        border: none;
        padding: 0;
    }

    /* Hide standard input fields on mobile header */
    .header-search-form input {
        display: none;
    }

    /* Hide call text values */
    .phone-details {
        display: none; 
    }

    
    /* Resets floating engine container to a smooth block stack underneath banner */
    .search-engine-wrapper {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        margin-top: -60px; /* Shifts upwards gracefully into banner space */
        padding: 20px 15px;
        background: rgba(255, 255, 255, 0.95);
    }

    /* Grid structure collapses from row format straight to a 1-column layout stack */
    .search-engine {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Padding adjustments on select items for cleaner input fields */
    .search-field {
        padding: 14px 16px;
    }

    /* Standardizes search button height when block stacked natively */
    .btn-search {
        padding: 15px 0;
        justify-content: center;
        height: 52px;
        width: 100%;
    }

    /* Adjusts top margin buffer below engine structure */
    .section-spacer {
        height: 40px;
    }
}


/* ========================================================= */
/* --- Mobile Slide Drawer Core Styling Architecture ---     */
/* ========================================================= */

/* Backdrop overlay mask to blur background content when menu opens */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 20, 45, 0.4); /* Uses your text-dark color variable softly */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 998; /* Right below the menu drawer layer */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The structural layout layer for the slide drawer container */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -320px; /* Hidden completely off-screen by default */
    width: 300px;
    height: 100vh;
    background-color: #ffffff;
     z-index: 999; /* Higher priority layer value over your fixed desktop header */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 24px;
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Dynamic Active State Engine Triggers --- */
.mobile-drawer.active {
    left: 0; /* Slides smooth-in directly from the left hand viewport border */
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- Internal Core Element Architecture Styling --- */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f0f6;
    padding-bottom: 20px;
}

.drawer-logo .logo-image {
    height: 65px;
    width: auto;
    object-fit: contain;
}

.close-drawer-btn {
    background: #f1f0f6;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--accent-teal-hover);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-drawer-btn:hover {
    background-color: var(--accent-teal);
    color: #ffffff;
}

/* Stacked Mobile Links styling alignment */
.drawer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    flex-grow: 1;
}

.drawer-links li a {
    text-decoration: none;
    font-size: 19px;
    font-weight: 500;
    color: var(--accent-teal-hover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: transparent;
    transition: all 0.25s ease;
}

/* Beautiful custom highlight treatment on hover inside the mobile drawer */
.drawer-links li a:hover {
    color: var(--accent-gold-hover);
    background-color: #f7f5fa;
    padding-left: 22px; /* Smooth interactive text indentation offset nudge */
}

.drawer-links li a i {
    font-size: 13px;
    color: #8a8d9f;
    transition: transform 0.25s ease;
}

.drawer-links li a:hover i {
    color: var(--accent-gold);
    transform: translateX(4px);
}

/* Bottom utility drawer spacing footer block */
.drawer-footer {
    border-top: 1px solid #f1f0f6;
    padding-top: 20px;
}

.contact-info-vertical span {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.contact-info-vertical strong {
    font-size: 18px;
    color: var(--accent-teal);
    font-weight: 700;
}

/* Pin back application layout rules for scrolling management on open body states */
body.drawer-open {
    overflow: hidden;
}







/* ========================================================= */
/* --- Premium Destinations Section Layout Styles ---        */
/* ========================================================= */
.destinations-container {
    width: 100%;
    padding: 60px 5% 20px 5%;
    background-color: #f7f5fa;
}

.destinations-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px auto;
}

.destinations-header .sub-title {
    font-family: var(--font-cursive);
    color: var(--accent-gold);
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.destinations-header .main-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.destinations-header .section-desc {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}

/* Flexbox/Grid responsive cards design alignment */
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card item structural engine wrapper */
.destination-card {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    border: 1px solid #f1f0f6;
    overflow: hidden;
    padding: 0 0 20px 0;
    box-shadow: 0 10px 30px rgba(17, 20, 45, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Removes default browser link underlines */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Luxury Clickable Interactive States */
.destination-card:hover {
     border-color: rgba(0, 95, 84, 0.15); /* Soft premium teal border break on hover */
 }

 

/* Dynamic custom framing look extracted directly from your reference mockup */
.card-image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-bottom-left-radius: 50% 18%; /* Emulates the premium smooth concave swoop curve */
    border-bottom-right-radius: 50% 18%;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Pill design badges rebranded from Purple into brand accent styles */
.card-badge {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-teal); /* Brand Teal Primary */
    color: #ffffff;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 22px;
    border-radius: 20px;
    white-space: nowrap;
     z-index: 2;
    transition: background-color 0.3s ease;
}

.destination-card:hover .card-badge {
    background-color: var(--accent-teal-hover);
}

.card-info-pane {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.tour-count {
    background-color: #f7f5fa;
    color: var(--text-dark);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid #edeaf2;
    letter-spacing: 0.2px;
}

/* ========================================================= */
/* --- Responsive Parity Rule Breakpoints (Mobile Look) ---  */
/* ========================================================= */
@media screen and (max-width: 1024px) {
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr); /* Scales to 2 items wide on tables */
        gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .destinations-container {
        padding: 40px 5% 10px 5%;
    }

    .destinations-header {
        margin-bottom: 35px;
    }

    .destinations-header .sub-title {
        font-size: 32px;
    }

    .destinations-header .main-title {
        font-size: 32px;
    }

    .destinations-grid {
        grid-template-columns: 1fr; /* Cascades cleanly to single columns on small devices */
        gap: 25px;
        max-width: 400px; /* Prevents stretching on tall mobile ports */
    }

    .card-image-wrapper {
        height: 210px;
    }
}



/* ========================================================= */
/* --- Premium Promotional CTA Banner Section Styles ---     */
/* ========================================================= */
.promo-banner-container {
    width: 100%;
    padding: 40px 5%;
    background-color: var(--primary-bg);
}

.promo-banner-card {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 35% 65%; /* Creates the specific split ratio from your mockup */
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(17, 20, 45, 0.06);
}

/* --- Left Panel: Offer Details --- */
.promo-offer-side {
    background-color: var(--accent-teal-hover); /* Deep luxury navy contrast base */
    padding: 50px 40px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Subtle background compass watermark effect using an integrated pseudo-element */
.promo-offer-side::before {
    content: '\f14e'; /* FontAwesome compass glyph */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 180px;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    z-index: -1;
}

.promo-content-wrapper {
    width: 100%;
}

.promo-sub-tag {
    display: block;
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.promo-discount-title {
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

/* Rebranded interactive call to action button elements */
.btn-promo-details {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--accent-gold); /* Rebranded to your luxury gold */
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-promo-details:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-2px);
 }

.btn-promo-details i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-promo-details:hover i {
    transform: translateX(4px); /* Interactive arrow shift nudge */
}

/* --- Right Panel: Image Display & Typography --- */
.promo-image-side {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.promo-image-content {
    text-align: center;
    z-index: 2;
    width: 100%;
}

.promo-cursive-text {
    color: #ffffff;
    font-family: var(--font-cursive);
    font-size: 54px;
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 1px;
    user-select: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.promo-cursive-text span {
    font-family: var(--font-main);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    text-transform: capitalize;
}

/* ========================================================= */
/* --- Responsive Layout Breakpoints (Mobile Consistency) --- */
/* ========================================================= */
@media screen and (max-width: 992px) {
    .promo-banner-card {
        grid-template-columns: 1fr; /* Collapses split cells down into individual vertical blocks */
    }

    .promo-offer-side {
        padding: 45px 35px;
        text-align: center;
        justify-content: center;
    }

    .promo-offer-side::before {
        font-size: 140px;
        left: auto;
        right: -20px;
    }

    .promo-image-side {
        padding: 80px 40px;
    }

    .promo-cursive-text {
        font-size: 46px;
    }

    .promo-cursive-text span {
        font-size: 38px;
    }
}

@media screen and (max-width: 576px) {
    .promo-banner-container {
        padding: 20px 5%;
    }

    .promo-discount-title {
        font-size: 26px;
    }

    .promo-image-side {
        padding: 60px 20px;
    }

    .promo-cursive-text {
        font-size: 38px;
    }

    .promo-cursive-text span {
        font-size: 30px;
    }
}








/* ========================================================= */
/* --- Premium Tour Listings Section Styles ---              */
/* ========================================================= */
.packages-container {
    width: 100%;
    padding: 60px 5% 40px 5%;
    background-color: var(--primary-bg);
}

.packages-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px auto;
}

.packages-header .sub-title {
    font-family: var(--font-cursive);
    color: var(--accent-gold);
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 5px;
}

.packages-header .main-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.packages-header .section-desc {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* Structural Layout Configuration for standard 4-Column Grid matrix */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card Module Component Wrapper (Converted to fully clickable Anchor) */
.package-card {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    border: 1px solid #f1f0f6;
    overflow: hidden;
     display: flex;
    flex-direction: column;
    text-decoration: none; /* Removes browser default link underlines entirely */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.package-card:hover {
     border-color: rgba(0, 95, 84, 0.15); /* Soft premium teal border break on hover */
 }

/* Card Image Frame & Custom Concave Frame Trim */
.pkg-img-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom-left-radius: 50% 12%;
    border-bottom-right-radius: 50% 12%;
}

.pkg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Upper Overlay Floating Labels & Tags */
.ribbon {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
 }

.tag-new { background-color: #2e7d32; } 
.tag-featured { background-color: var(--accent-gold); }

.discount-pill {
    position: absolute;
    top: 45px;
    left: 15px;
    background-color: #d32f2f; 
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
 }

/* Price Badge Overlays rebranded from Neon Purple to Teal theme colors */
.price-badge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-teal);
    color: #ffffff;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 15px;
    padding: 8px 20px;
    border-radius: 20px;
    white-space: nowrap;
     z-index: 2;
    transition: background-color 0.3s ease;
}

.price-badge del {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 5px;
    font-weight: 500;
}

.price-badge span {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.package-card:hover .price-badge {
    background-color: var(--accent-teal-hover);
}

/* Content & Details Panel Elements */
.pkg-content {
    padding: 25px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Clean Title Typography (Inherits styling directly from clickable card) */
.pkg-title {
    margin-bottom: 15px;
    line-height: 1.4;
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 700;
    transition: color 0.3s ease;
}

/* Title flips beautifully to brand teal when whole card is hovered */
.package-card:hover .pkg-title {
    color: var(--accent-teal);
}

.pkg-meta {
    margin-top: auto;
    border-top: 1px solid #f1f0f6;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meta-item {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-item i {
    color: var(--accent-teal);
    font-size: 14px;
}

/* Section Bottom Trigger View Button Footer */
.packages-footer {
    text-align: center;
    margin-top: 50px;
}

.btn-all-listings {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--accent-teal);
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-all-listings:hover {
    background-color: var(--accent-teal-hover);
    transform: translateY(-2px);
 }

.btn-all-listings i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-all-listings:hover i {
    transform: translateX(5px);
}

/* ========================================================= */
/* --- Responsive Fluid Adaptive Matrix Media Breakpoints --- */
/* ========================================================= */
@media screen and (max-width: 1100px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 25px;
    }
}

@media screen and (max-width: 768px) {
    .packages-container {
        padding: 40px 5% 20px 5%;
    }

    .packages-header .main-title {
        font-size: 32px;
    }

    .packages-grid {
        grid-template-columns: 1fr; 
        max-width: 420px;
    }
    
    .pkg-img-wrapper {
        height: 220px;
    }
}









/* ========================================================= */
/* --- Premium Features & Stats Section Layout Styles ---    */
/* ========================================================= */
.features-container {
    width: 100%;
    padding: 60px 5% 40px 5%;
    background-color: var(--primary-bg);
}

.features-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px auto;
}

.features-header .sub-title {
    font-family: var(--font-cursive);
    color: var(--accent-gold);
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 5px;
}

.features-header .main-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.features-header .section-desc {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* --- Features 3x2 Checkerboard Grid Layout --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 80px auto;
}

.feature-box {
    height: 280px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(17, 20, 45, 0.02);
}

/* Image Element Panels Styles */
.feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.box-img:hover .feature-img {
    transform: scale(1.06);
}

/* Text Content Card Block Panels Styles */
.box-card {
    background-color: var(--accent-teal); /* Brand Teal Base Primary */
    color: #ffffff;
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

/* Elegant compass watermark inside the cards matching luxury mockup geometry */
.box-card::after {
    content: '\f14e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: -15px;
    right: -15px;
    font-size: 110px;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    z-index: -1;
    transition: transform 0.4s ease;
}

.box-card:hover {
    background-color: var(--accent-teal-hover);
    transform: translateY(-4px);
}

.box-card:hover::after {
    transform: rotate(30deg) scale(1.1);
}

.card-inner {
    width: 100%;
}

.icon-wrap {
    font-size: 42px;
    color: var(--accent-gold); /* Golden Accent Accents */
    margin-bottom: 15px;
    display: inline-block;
}

.card-title {
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.card-text {
    font-family: var(--font-main);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    max-width: 240px;
    margin: 0 auto;
}


 /* --- Data Counter Matrix Footer Section --- */
.stats-counter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid #f1f0f6;
    padding-top: 50px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.stat-icon-pane {
    font-size: 32px;
    color: var(--accent-teal);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-details {
    position: relative;
}

/* Layered text counter styling (Giant subtle number background) */
.stat-number-bg {
    font-family: var(--font-main);
    font-size: 46px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(17, 20, 45, 0.12); /* Modern geometric wireframe look */
    line-height: 1;
    position: relative;
    user-select: none;
    height: 50px; /* Span layer එක නිසා උස ප්‍රමාණය fix කලා */
}

/* අලුතින් දාපු Span Layer එක - මේකෙන් තමයි පොඩි අංකය ලොකු එකට උඩින් (Top) පේන්නේ */
.stat-front-num {
    position: absolute;
    left: 0;
    top: 0; /* උඩින්ම පටන් ගන්න (Top alignment) */
    color: var(--accent-teal-hover);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    z-index: 2; /* ලොකු අකුරට උඩින්ම තියාගන්න */
}

.stat-label {
    display: block;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 5px; /* Span එකට කැපෙන්නේ නැති වෙන්න margin එක 5px කලා */
    white-space: nowrap;
}

/* ========================================================= */
/* --- Mobile Responsive Mode (Max-width: 768px) --- */
/* ========================================================= */
@media screen and (max-width: 768px) {
    /* 1. මුළු බාර් එකම තනි තීරුවකට හැරවීම සහ මැදට ගැනීම */
    .stats-counter-bar {
        grid-template-columns: 1fr;
        display: grid;
        gap: 35px;
        max-width: 300px; /* මැද තියාගන්න container එක ලිමිට් කලා */
        margin: 0 auto;
        padding-top: 35px;
    }

    /* 2. අයිකන් එක සහ විස්තර vertical column එකක් කර මැදට දැමීම */
    .stat-item {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    /* 3. විස්තර ඇතුළත් block එක මැදට කිරීම */
    .stat-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* 4. ලොකු පසුබිම් අංකය text-align center කිරීම */
    .stat-number-bg {
        text-align: center;
        width: 100%;
        display: block;
    }

    /* 5. CRITICAL FIX: Absolute වෙලා තියෙන පොඩි අංකය (span) හරියටම මැදට ගැනීම */
    .stat-front-num {
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        width: 100%;
        text-align: center;
    }

    /* 6. යටින් තියෙන ලේබල් එක මැදට ගැනීම */
    .stat-label {
        text-align: center;
        margin-top: 8px;
        white-space: normal; /* මොබයිල් එකේ ඉඩ මදි වුනොත් ලස්සනට පේළි දෙකකට කැඩෙන්න */
    }
}

/* ========================================================= */
/* --- Responsive Fluid Breakpoints (Adaptive Viewports) --- */
/* ========================================================= */
@media screen and (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* Scales to 2 items wide on standard tablets */
    }
    
   
}

@media screen and (max-width: 768px) {
    .features-container {
        padding: 40px 5% 10px 5%;
    }

    .features-header .main-title {
        font-size: 32px;
    }

    .features-grid {
        grid-template-columns: 1fr; /* Stack into single column grid cleanly */
        max-width: 400px;
        margin-bottom: 50px;
    }
    
    .feature-box {
        height: 250px;
    }

    /* Keeps image cards and color text cards structurally ordered on screens */
    .features-grid .feature-box:nth-child(1) { order: 1; }
    .features-grid .feature-box:nth-child(2) { order: 2; }
    .features-grid .feature-box:nth-child(3) { order: 4; } /* Rearranges elements cleanly */
    .features-grid .feature-box:nth-child(4) { order: 3; }
    .features-grid .feature-box:nth-child(5) { order: 5; }
    .features-grid .feature-box:nth-child(6) { order: 6; }

     
    .stat-item {
        justify-content: flex-start;
    }
}






/* ========================================================= */
/* --- Premium Client Testimonials Section Styles ---       */
/* ========================================================= */
.testimonials-container {
    width: 100%;
    padding: 80px 5% 50px 5%;
    background-color: #f7f6f9;
    overflow: hidden; /* Keeps sneaky horizontal scrollbars invisible */
}

.testimonials-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.testimonials-header .sub-title {
    font-family: var(--font-cursive);
    color: var(--accent-gold);
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 5px;
}

.testimonials-header .main-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.testimonials-header .section-desc {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* --- NEW SLIDER WRAPPER SYSTEM --- */
.testimonials-wrapper {
    max-width: 1200px;
    margin: 0 auto 30px auto;
    overflow: hidden; /* Masks out cards out side the active screen space */
    position: relative;
}

/* Single line row track containing all review cards */
.testimonials-slider-row {
    display: flex;
    gap: 30px;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Luxury Card Structuring */
.testimonial-card {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    border: 1px solid #f1f0f6;
    padding: 35px 30px;
     display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s, box-shadow 0.3s;
    
    /* Configures cards to show 3 columns cleanly on desktop sizes */
    flex: 0 0 calc((100% - 60px) / 3); 
    box-sizing: border-box;
}

.testimonial-card:hover {
     border-color: rgba(0, 95, 84, 0.15);
 }

/* Top profile alignment elements */
.card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.client-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client-avatar-letter {
    width: 55px;
    height: 55px;
    background-color: var(--accent-teal, #005f54); 
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(17, 20, 45, 0.08);
    text-transform: uppercase;
}

.client-meta .client-name {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 2px;
}

.client-meta .client-role {
    display: block;
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.quote-icon-wrap {
    font-size: 32px;
    color: rgba(17, 20, 45, 0.08);
    line-height: 1;
    transition: color 0.3s ease;
}

.testimonial-card:hover .quote-icon-wrap {
    color: rgba(0, 95, 84, 0.15);
}

.testimonial-text {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 25px;
    flex-grow: 1;
}

.star-rating {
    display: flex;
    gap: 4px;
}

.star-rating i {
    color: #ffb300;
    font-size: 14px;
}

/* --- Slider Navigation Dots --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.t-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(17, 20, 45, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.t-dot:hover, .t-dot.active {
    background-color: var(--accent-teal, #005f54);
}

.t-dot.active {
    width: 24px;
    border-radius: 10px;
}

/* ========================================================= */
/* --- Responsive Fluid Breakpoints (Adaptive Mechanics) --- */
/* ========================================================= */

/* Tablet Mode: Shows 2 cards perfectly on screen */
@media screen and (max-width: 1024px) {
    .testimonial-card {
        flex: 0 0 calc((100% - 30px) / 2);
    }
}

/* Mobile Mode: Shows 1 card by 1 card completely centered */
@media screen and (max-width: 768px) {
    .testimonials-container {
        padding: 50px 4% 40px 4%;
    }

    .testimonials-header .main-title {
        font-size: 32px;
    }
    
    .testimonials-slider-row {
        gap: 20px; /* Thinner gaps on smaller phones */
    }

    .testimonial-card {
        flex: 0 0 100%; /* Forces card to capture full phone viewport width */
        padding: 30px 22px;
    }
}





/* ========================================================= */
/* --- Premium App Banner & Footer Section Layout Styles ---  */
/* ========================================================= */
.main-footer-wrapper {
    width: 100%;
    background-color: #0b0e1e; /* Luxury deep dark midnight background */
    padding: 0 5% 60px 5%;
    position: relative;
    margin-top: 180px; /* Generous gap allowance ensures space for the overlapping floating app card */
}

/* --- Overlapping Floating Mobile App Promotion Banner --- */
.app-banner-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    top: -100px; /* Pulls the item up across the section boundary line */
    z-index: 10;
}

.app-banner-inner {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-teal-hover) 100%);
    border-radius: var(--border-radius-md);
    padding: 40px 60px;
    display: grid;
    grid-template-columns: 28% 44% 28%;
    align-items: center;
    gap: 30px;
     position: relative; /* Fixed valid stacking context */
    overflow: hidden; /* Keeps watermark pseudo-elements masked cleanly inside card borders */
}

/* Subtle background compass watermark effect using an integrated pseudo-element */
.app-banner-inner::before {
    content: '\f14e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 200px;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    z-index: 1;
}

.app-mockup-side {
    position: relative;
    height: 140px;
    z-index: 2;
}

.app-mockup-img {
    position: absolute;
    bottom: -40px; /* Offsets device screens to burst out from the frame organically */
    left: 0;
    width: 100%;
    height: auto;
    max-width: 260px;
    object-fit: contain;
}

.app-info-side {
    position: relative;
    z-index: 2;
}

.app-info-side .app-tagline {
    display: block;
    color: var(--accent-gold);
    font-family: var(--font-cursive);
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.app-info-side .app-title {
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* --- Premium Dynamic Contact Core Layout --- */
.app-contact-side {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    width: 90%;
}

.app-contact-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 25px;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.app-contact-link:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

.app-phone-icon {
    width: 45px;
    height: 45px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal);
    font-size: 16px;
}

.app-phone-details span {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-main);
}

.app-phone-details strong {
    display: block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
    font-family: var(--font-main);
    transition: color 0.3s ease;
}

.app-contact-link:hover .app-phone-details strong {
    color: var(--accent-gold);
}

/* --- Main Footer Grid Directory --- */
.footer-content-grid {
    display: grid;
    grid-template-columns: 32% 18% 28% 18%;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: -30px auto 0 auto;
    padding-top: 20px;
}

.footer-heading {
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
}

/* Clean editorial style highlight accent lines beneath column titles */
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 35px;
    height: 2px;
    background-color: var(--accent-gold);
}

/* --- Column 1: Brand Space & Newsletter Input Bar --- */
.footer-logo-img {
    height: 160px;
    width: auto;
    margin-bottom:1px;
}

.brand-pitch {
    color: #a5a8bd;
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.newsletter-form {
    display: flex;
    width: 100%;
    max-width: 320px;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 6px 6px 6px 20px;
    margin-bottom: 25px;
}

.newsletter-form input {
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-main);
    font-size: 15px;
    color: var(--text-dark);
    flex-grow: 1;
    width: 40%;
}

.newsletter-form button {
    background-color: var(--accent-teal);
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: var(--accent-teal-hover);
}

.social-links-row {
    display: flex;
    gap: 12px;
}

.social-links-row a {
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.social-links-row a:hover {
    background-color: var(--accent-gold);
    color: var(--text-dark);
    transform: translateY(-3px);
}

/* --- Navigation & Generic Link Lists Directory --- */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 12px;
}

.footer-links-list li a {
    color: #a5a8bd;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.25s ease;
    display: inline-block;
}

.footer-links-list li a:hover {
    color: var(--accent-gold);
    padding-left: 5px; /* Subtle responsive micro-nudge indents */
}

/* --- Contact & Business Info Profiles Lists --- */
.footer-info-address {
    font-style: normal;
}

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

.footer-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: #a5a8bd;
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.footer-info-list li a {
    color: #a5a8bd;
    text-decoration: none;
    transition: color 0.25s ease;
    font-weight: 600;
}

.footer-info-list li a:hover {
    color: var(--accent-gold);
}

.info-icon {
    color: var(--accent-gold);
    font-size: 18px;
    margin-top: 3px;
    width: 20px;
    text-align: center;
}

.closed-tag {
    color: #ff5252;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ========================================================= */
/* --- Responsive Fluid Breakpoints (Adaptive Scaffolds) --- */
/* ========================================================= */
@media screen and (max-width: 1024px) {
    .app-banner-inner {
        grid-template-columns: 1fr;
        padding: 40px;
        text-align: center;
        justify-items: center;
    }

    .app-mockup-side {
        display: none; /* Safely drops device imagery out on layouts to prioritize copy text readability */
    }

    .app-contact-side {
        justify-content: center;
        width: 100%;
    }

    .footer-content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .main-footer-wrapper {
        margin-top: 120px;
    }
}

@media screen and (max-width: 600px) {
    .main-footer-wrapper {
        padding: 0 5% 40px 5%;
        margin-top: 80px;
    }

    .app-banner-container {
        top: -50px;
    }

    /* 1. Fully Center Overlapping Floating App Promotion Components */
    .app-banner-inner {
        grid-template-columns: 1fr;
        padding: 35px 20px;
        gap: 20px;
        text-align: center;
        justify-items: center;
    }

    .app-info-side .app-title {
        line-height: 1.3;
    }

    .app-contact-side {
        justify-content: center; /* Center contact element blocks on mobile matrices */
        width: 100%;
    }

    .app-contact-link {
        width: auto;
        max-width: 280px;
    }

    /* 2. Transform Footer Directory Cells into Clean Centered Layout Blocks */
    .footer-content-grid {
        grid-template-columns: 1fr; /* Collapses structural columns straight down into single layout blocks */
        gap: 40px;
        margin-top: -10px;
        text-align: center; /* Cascades inline component alignment properties directly to center */
    }

    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center; /* Anchors structural sub-containers exactly in the middle of cell matrix */
        width: 100%;
    }

    /* 3. Center Column Titles and Shift Decorative Accent Underline Markers */
    .footer-heading {
        margin-bottom: 25px;
        display: inline-block;
    }

    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%); /* Shifts absolute geometric line anchors exactly under text centerpoints */
        bottom: -6px;
    }

    /* 4. Center Brand Pitch, Forms, and Icon Vectors inside Column 1 */
    .footer-logo-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .brand-pitch {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .newsletter-form {
        margin-left: auto;
        margin-right: auto; /* Forces structural input containers to anchor dead-center */
    }

    .social-links-row {
        justify-content: center; /* Pulls flexible dynamic brand icons together inside framework bounds */
        width: 100%;
    }

    /* 5. Center Lists and Align Flexbox Contact Icons */
    .footer-links-list {
        width: 100%;
    }

    .footer-links-list li a:hover {
        padding-left: 0; /* Disables side nudge effect on mobile to prevent asymmetric vibration shifts */
        color: var(--accent-gold);
    }

    .footer-info-address {
        width: 100%;
    }

    .footer-info-list {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers flexible contact blocks */
        width: 100%;
    }

    .footer-info-list li {
        flex-direction: column; /* Stacks icons vertically directly over copy text lines for clean geometric balance */
        align-items: center;
        gap: 8px;
        text-align: center;
        width: 100%;
    }

    .info-icon {
        margin-top: 0;
        width: auto;
    }
}

/* --- Premium Footer Bottom Credits Bar --- */
.footer-bottom-bar {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0 auto;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Soft elegant top boundary line */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-main);
    font-size: 14px;
}

.copyright-text {
    color: #a5a8bd;
    margin: 0;
}

.developer-text {
    color: #a5a8bd;
    margin: 0;
    letter-spacing: 0.5px;
}

.developer-text a {
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

 

/* --- Responsive Adaptations for Mobile Layouts --- */
@media screen and (max-width: 600px) {
    .footer-bottom-bar {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        margin-top: 40px;
        padding-top: 20px;
    }
}

/* --- LUXURY OVERHAULED DROP LIST STYLING SYSTEM --- */

.search-field.custom-dropdown {
    position: relative; /* Anchor alignment scope for custom drop panels */
}

/* Selected layout node tracking styling details */
.dropdown-selected-val {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    padding: 2px 0;
    user-select: none;
}

/* Floating custom list panel design base - Fully Glassmorphic & Smooth */
.dropdown-custom-list-pane {
    position: absolute;
    top: calc(100% + 8px); /* Locks cleanly exactly right under wrapper container */
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 95, 84, 0.12); /* Delicate Brand Teal hint border outline */
    border-radius: 16px;
    padding: 8px;
    list-style: none;
    box-shadow: 0 15px 40px rgba(17, 20, 45, 0.12); /* Dynamic deep rich vector shadows shadow layer */
    z-index: 99;
    
    /* Animation Initialization Properties matrix definitions */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Active trigger classes mapping node bounds state engine updates */
.search-field.custom-dropdown.active-drop .dropdown-custom-list-pane {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Twist custom chevron indicator arrow directly over gold schema */
.search-field.custom-dropdown.active-drop i.chevron-icon {
    color: var(--accent-gold) !important;
    transform: rotate(180deg);
}

/* Individual Option Items Layout Structure updates */
.dropdown-custom-list-pane li {
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Luxury hover styling maps dynamic accent fields properties cleanly */
.dropdown-custom-list-pane li:hover {
    background-color: var(--accent-teal); /* Full Brand Deep Emerald on hover */
    color: #ffffff; /* Contrast text switch crisp output view */
    padding-left: 20px; /* Micro interactive indentation movement shift hint */
}

/* Active parameter context indicator overlay design token track states */
.dropdown-custom-list-pane li.selected-option {
    background-color: #f1f0f6;
    color: var(--accent-teal-hover);
    font-weight: 700;
}
@media screen and (max-width: 600px) {
    .main-footer-wrapper {
        padding: 0 5% 40px 5%;
        margin-top: 80px;
    }

    .app-banner-container {
        top: -50px;
    }

    .app-banner-inner {
        padding: 30px 20px;
        gap: 20px;
    }

    .app-info-side .app-title {
        font-size: 24px;
    }

    .app-badges-side .store-badge img {
        height: 38px;
    }

    .footer-content-grid {
        grid-template-columns: 1fr; /* Falls down completely straight into stacked columns on small displays */
        gap: 35px;
        margin-top: -10px;
    }

    .footer-heading {
        margin-bottom: 20px;
    }
}




/* ========================================================= */
/* --- Premium Luxury Search Modal Styles                    --- */
/* ========================================================= */

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000; /* High index to float cleanly over your fixed 100 z-index header */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.0s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
}

/* Active State Trigger */
.search-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Glassmorphic Smooth Backdrop */
.search-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 14, 30, 0.75); /* Rich deep midnight base */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Absolute Floating Close Trigger Button */
.search-modal-close {
    position: absolute;
    top: 30px;
    right: 5%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2002;
    transition: all 0.3s ease;
}

.search-modal-close:hover {
    background: var(--accent-gold);
    color: #11142d;
    transform: rotate(90deg);
}

/* Core Interface Content Box Container */
.search-modal-content {
    position: relative;
    width: 90%;
    max-width: 850px;
    z-index: 2001;
    transform: translateY(30px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.search-modal.active .search-modal-content {
    transform: translateY(0) scale(1);
}

/* Input Structural Wrapper Base */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: var(--border-radius-lg);
    padding: 10px 10px 10px 30px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.search-main-icon {
    font-size: 24px;
    color: var(--accent-teal);
    margin-right: 15px;
}

.search-input-wrapper input {
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    flex-grow: 1;
    width: 50%;
    padding-right: 15px;
}

.search-input-wrapper input::placeholder {
    color: #a5a8bd;
    font-weight: 500;
}

/* Premium Primary Submission Button inside search field */
.search-modal-submit-btn {
    background-color: var(--accent-teal);
    color: #ffffff;
    border: none;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    padding: 16px 35px;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-modal-submit-btn:hover {
    background-color: var(--accent-teal-hover);
 }

/* Luxury Shortcuts Typography & Tags */
.search-suggestions {
    margin-top: 35px;
    padding: 0 10px;
    text-align: left;
}

.search-suggestions h3 {
    font-family: var(--font-main);
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.suggestion-tags a {
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.suggestion-tags a i {
    color: var(--accent-gold);
    font-size: 12px;
}

.suggestion-tags a:hover {
    background: #ffffff;
    color: var(--text-dark);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* ========================================================= */
/* --- FIXED & OPTIMIZED ADAPTIVE MOBILE OVERRIDES          --- */
/* ========================================================= */
@media screen and (max-width: 768px) {
    /* Shifts layout alignment to top so virtual keyboards won't block the UI */
    .search-modal {
        align-items: flex-start;
        padding-top: 90px;
    }

    /* Clean compact absolute placement for close button */
    .search-modal-close {
        top: 20px;
        right: 4%;
        width: 38px;
        height: 38px;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.15);
    }
    
    .search-modal-content {
        width: 92%;
    }
    
    /* Sleek downsized input structure box layout */
    .search-input-wrapper {
        padding: 6px 6px 6px 16px;
        border-radius: 24px;
    }
    
    .search-main-icon {
        font-size: 16px;
        margin-right: 8px;
    }
    
    /* Highly readable yet properly scaled mobile input typography */
    .search-input-wrapper input {
        font-size: 16px;
        padding-right: 8px;
    }
    
    /* Clean, non-bulky submission CTA block layout button */
    .search-modal-submit-btn {
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 20px;
    }
    
    /* Compact suggestion drawer space rules */
    .search-suggestions {
        margin-top: 24px;
        padding: 0 4px;
    }
    
    .search-suggestions h3 {
        font-size: 12px;
        margin-bottom: 10px;
        letter-spacing: 0.5px;
    }
    
    /* Micro tight spacing framework to stop excessive vertical tag wrap */
    .suggestion-tags {
        gap: 8px;
    }
    
    .suggestion-tags a {
        padding: 6px 12px;
        font-size: 12px;
        gap: 5px;
    }

    .suggestion-tags a i {
        font-size: 10px;
    }
}



/* ========================================================= */
/* --- Premium About Us Section Layout Styles -------------- */
/* ========================================================= */
.about-container {
    width: 100%;
    padding: 60px 5%;
    background-color: var(--primary-bg);
}

.about-grid {
    display: grid;
    grid-template-columns: 48% 52%;
    gap: 50px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

/* --- Left Panel: Image Matrix & Floating Badge Geometry --- */
.about-image-side {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: flex-start;
}

.about-img-frame {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(17, 20, 45, 0.08);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.primary-frame {
    width: 75%;
    height: 420px;
    top: 0;
    left: 0;
    border-radius: var(--border-radius-md);
    border-bottom-left-radius: 50% 12%; /* Emulates your signature concave trim style */
    border-top-right-radius: 50% 12%;
    z-index: 1;
}

.secondary-frame {
    width: 60%;
    height: 300px;
    bottom: 0;
    right: 0;
    border-radius: var(--border-radius-md);
    border-top-left-radius: 50% 15%;
    border-bottom-right-radius: 50% 15%;
    border: 6px solid #ffffff; /* Premium physical overlapping boundary divider */
    z-index: 2;
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-img-frame:hover .about-img {
    transform: scale(1.05);
}

/* Luxury Watermark Floating Badge Element */
.about-floating-badge {
    position: absolute;
    bottom: 40px;
    left: 20px;
    background-color: var(--accent-gold);
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 12px 35px rgba(17, 20, 45, 0.15);
    z-index: 3;
    animation: floatingNudge 4s ease-in-out infinite;
}

.badge-inner-circle {
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

.badge-big-num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    font-family: var(--font-main);
}

.badge-label-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    line-height: 1.2;
    font-family: var(--font-main);
}

@keyframes floatingNudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- Right Panel: Typography & Value Matrices --- */
.about-content-side {
    display: flex;
    flex-direction: column;
}

.about-sub-title {
    font-family: var(--font-cursive);
    color: var(--accent-gold);
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 5px;
}

.about-main-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.about-main-title span {
    font-family: var(--font-cursive);
    color: var(--accent-teal);
    font-size: 54px;
    font-weight: 400;
    display: inline-block;
}

.about-pitch-text {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 30px;
}

/* 2x1 Internal Cards Framework Grid */
.about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.about-pillar-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.pillar-icon-box {
    width: 45px;
    height: 45px;
    background-color: rgba(0, 95, 84, 0.06); /* Soft teal transparent tint */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal);
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.about-pillar-card:hover .pillar-icon-box {
    background-color: var(--accent-teal);
    color: #ffffff;
}

.pillar-details h4 {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pillar-details p {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* Action Footer Sub-Row Alignment Elements */
.about-action-row {
    display: flex;
    align-items: center;
    gap: 40px;
    border-top: 1px solid #f1f0f6;
    padding-top: 30px;
}

.btn-about-explore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--accent-teal);
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-about-explore:hover {
    background-color: var(--accent-teal-hover);
    transform: translateY(-2px);
}

.btn-about-explore i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-about-explore:hover i {
    transform: translateX(5px);
}

.about-signature-block {
    display: flex;
    flex-direction: column;
}

.sig-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 600;
}

.sig-name {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}

/* ========================================================= */
/* --- New Additions: Heritage Badge & Leadership Team ----- */
/* ========================================================= */

/* --- Heritage Est. 2018 Badge Placement --- */
.about-heritage-badge {
    position: absolute;
    bottom: -10px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 4;
}

.about-heritage-badge .heritage-line {
    width: 35px;
    height: 1px;
    background-color: var(--accent-gold);
    opacity: 0.6;
}

.about-heritage-badge .heritage-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    font-family: var(--font-main);
}

/* --- Executive Leadership Matrix Layout --- */
.about-leadership-team {
    margin-top: 15px;
    margin-bottom: 35px;
    padding-top: 25px;
    border-top: 1px solid #f1f0f6;
}

.leadership-section-title {
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-teal);
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.leader-node {
    background: #ffffff;
    border: 1px solid #eef0f6;
    padding: 16px;
    border-radius: var(--border-radius-md);
     transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.leader-node:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 95, 84, 0.15);
 }

.leader-meta {
    display: flex;
    flex-direction: column;
}

.leader-role {
    font-family: var(--font-main);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-gold);
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
}

.leader-name {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}
 
/* ========================================================= */
/* --- Responsive Adaptive Matrix Breakpoints -------------- */
/* ========================================================= */

@media screen and (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr; /* Cascades cleanly to stacked cells on tablets */
        gap: 40px;
    }

    .about-image-side {
        height: 460px;
        max-width: 600px;
        margin: 0 auto; /* Centers complex relative blocks smoothly */
    }
    
    .primary-frame { height: 380px; }
    .secondary-frame { height: 260px; }

    .about-heritage-badge {
        bottom: -25px;
        right: 20px;
    }
}

@media screen and (max-width: 768px) {
    .about-container {
        padding: 40px 5% 20px 5%;
    }

    /* Keep font sizes full-scale as requested; aligning layout fields to center */
    .about-sub-title,
    .about-main-title,
    .about-pitch-text {
        text-align: center;
    }

    .about-main-title span {
        display: inline-block;
    }

    /* Pillars Grid Adjustment */
    .about-pillars-grid {
        grid-template-columns: 1fr; /* Collapses to single list column stack on mobile ports */
        gap: 20px;
    }
    
    .about-pillar-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Heritage Est Badge alignment adaptation on mobile */
    .about-heritage-badge {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 480px auto 0 auto;
        justify-content: center;
        width: 100%;
    }

    /* --- New Mobile Alignment: Leadership Section --- */
    .about-leadership-team {
        text-align: center;
    }

    .leadership-grid {
        grid-template-columns: 1fr; /* Collapse nodes cleanly */
        gap: 12px;
     }

    .leader-node {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .leader-meta {
        align-items: center; /* Centers both text layers inside flex matrix */
    }

    /* Footer Action Alignment Row */
    .about-action-row {
        flex-direction: column;
        align-items: center; /* Centers button and signature unit */
        text-align: center;
        gap: 24px;
    }
    
    .btn-about-explore {
        width: 100%;
        justify-content: center;
    }
    
    .about-signature-block {
        align-items: center;
    }
}


/* ========================================================= */
/* --- Premium Vision & Mission Section Layout Styles ------ */
/* ========================================================= */
.vision-mission-container {
    width: 100%;
    padding: 60px 5%;
    background-color: var(--primary-bg);
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Core Card Structural Engine Wrapper ---------------- */
.vm-card {
    position: relative;
    border-radius: var(--border-radius-md);
    padding: 50px 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(17, 20, 45, 0.03);
    border: 1px solid #f1f0f6;
    background-color: #ffffff;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
}

/* Split Treatment Theme Layout Styles */
.vision-box-card {
    border-bottom-left-radius: 50% 8%; /* Concave dynamic framing accent lookup parity */
    border-top-right-radius: 50% 8%;
}

.mission-box-card {
    border-top-left-radius: 50% 8%;
    border-bottom-right-radius: 50% 8%;
}

/* Subtle Geometric Vector Watermarks Layer */
.vm-watermark {
    position: absolute;
    bottom: -30px;
    right: -20px;
    font-size: 160px;
    color: rgba(17, 20, 45, 0.02);
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    transition: transform 0.5s ease, color 0.4s ease;
}

/* --- Interactive Luxury Hover States --------------------- */
.vm-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 95, 84, 0.15);
    box-shadow: 0 20px 45px rgba(0, 95, 84, 0.04);
}

.vm-card:hover .vm-watermark {
    color: rgba(0, 95, 84, 0.04);
    transform: scale(1.05) rotate(-10deg);
}

/* --- Internal Element Architecture Typography ------------ */
.vm-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.vm-icon-frame {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 95, 84, 0.06); /* Premium transparent teal tint */
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal);
    font-size: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.vm-card:hover .vm-icon-frame {
    background-color: var(--accent-teal);
    color: #ffffff;
}

.vm-cursive-tag {
    font-family: var(--font-cursive);
    color: var(--accent-gold);
    font-size: 34px;
    font-weight: 400;
}

.vm-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.vm-text {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 35px;
    flex-grow: 1; /* Pushes the metric line evenly down for card balance */
}

/* Bottom Metric Isolation Boundary Row */
.vm-footer-metric {
    border-top: 1px solid #f1f0f6;
    padding-top: 18px;
    margin-top: auto;
}

.metric-line {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-teal-hover);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
/* ========================================================= */
/* --- Responsive Adaptive Vision & Mission Breakpoints --- */
/* ========================================================= */

@media screen and (max-width: 1024px) {
    .vm-grid {
        grid-template-columns: 1fr; /* Stack vision and mission cards neatly */
        gap: 30px;
        max-width: 650px;
    }
}

@media screen and (max-width: 768px) {
    .vision-mission-container {
        padding: 40px 5% 40px 5%;
    }

    /* Core Card Alignment Adjustments for Mobile centering */
    .vm-card {
        padding: 40px 24px;
        align-items: center;
        text-align: center;
    }

    /* Reversing asymmetric signature radius styles for a cleaner look on mobile if needed, or keeping parity */
    .vision-box-card,
    .mission-box-card {
        border-radius: var(--border-radius-md); /* Smooth, uniform look on mobile viewports */
    }

    /* Center Header Components */
    .vm-card-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 15px;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    /* Keep all typography values at full scale; enforce text-align */
    .vm-cursive-tag {
        font-size: 34px; /* Retained full scale */
    }

    .vm-title {
        font-size: 36px; /* Retained full scale */
        text-align: center;
    }

    .vm-text {
        font-size: 15px; /* Retained full scale */
        text-align: center;
        margin-bottom: 25px;
    }

    /* Bottom Metric Isolation Boundary Centering */
    .vm-footer-metric {
        width: 100%;
        text-align: center;
    }

    .metric-line {
        font-size: 12px; /* Retained full scale */
        display: block;
        text-align: center;
    }

    /* Hide large watermarks on small ports to avoid overflow or clipping bugs */
    .vm-watermark {
        display: none;
    }
}


/* ========================================================= */
/* --- Premium Contact Us Section Layout Styles ------------ */
/* ========================================================= */
.contact-section-container {
    width: 100%;
    padding: 60px 5%;
    background-color: #f7f5fa; /* Matches your Destinations section background context background */
}

.contact-section-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

/* --- Left Column: Narrative Ledger Architecture ---------- */
.contact-ledger-side {
    display: flex;
    flex-direction: column;
}

.contact-sec-sub {
    font-family: var(--font-cursive);
    color: var(--accent-gold);
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 5px;
}

.contact-sec-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.contact-sec-title span {
    font-family: var(--font-cursive);
    color: var(--accent-teal);
    font-size: 54px;
    font-weight: 400;
}

.contact-sec-desc {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 35px;
}

/* Informational Info Matrices Row Items */
.contact-channels-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.channel-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 16px;
    border: 1px solid #f1f0f6;
    text-decoration: none; /* Safely strips anchor definitions */
    box-shadow: 0 8px 25px rgba(17, 20, 45, 0.01);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.channel-icon-wrap {
    width: 46px;
    height: 46px;
    background-color: rgba(0, 95, 84, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal);
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.channel-details {
    display: flex;
    flex-direction: column;
}

.channel-details span {
    font-family: var(--font-main);
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 2px;
}

.channel-details strong {
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 600;
    transition: color 0.25s ease;
}

/* Interactive Clickable Anchor Channel State Adjustments */
/* Desktop-only hover states to prevent "sticky link selections" on mobile devices */
@media (hover: hover) {
    .clickable-channel:hover {
        transform: translateX(6px);
        border-color: rgba(0, 95, 84, 0.15);
        box-shadow: 0 12px 30px rgba(0, 95, 84, 0.03);
    }

    .clickable-channel:hover .channel-icon-wrap {
        background-color: var(--accent-teal);
        color: #ffffff;
    }

    .clickable-channel:hover .channel-details strong {
        color: var(--accent-teal);
    }
}




/* --- Right Column: Engine Inquiry Form Desk Styles ----- */
.contact-form-wrapper {
    background: #ffffff;
    border-radius: var(--border-radius-md);
    border: 1px solid #f1f0f6;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(17, 20, 45, 0.03);
}

.luxury-contact-engine {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-input-group label {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f1f0f6; /* Standard f1f0f6 matching your search nodes layout tracking */
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.input-field-wrapper:focus-within {
    border-color: var(--accent-teal);
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 95, 84, 0.03);
}

.input-icon {
    position: absolute;
    left: 18px;
    color: var(--accent-teal);
    font-size: 15px;
    pointer-events: none;
}

.input-field-wrapper input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 14px 18px 14px 48px; /* Safe padding indentation preserves spacing from vectors */
    border-radius: 12px;
}

/* Textarea Layout Configurations overrides */
.textarea-wrapper {
    align-items: flex-start;
}

.textarea-wrapper .input-icon {
    top: 16px;
}

.input-field-wrapper textarea {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 14px 18px 14px 48px;
    resize: none;
}

.input-field-wrapper input::placeholder,
.input-field-wrapper textarea::placeholder {
    color: #8a8d9f;
    font-weight: 500;
}

/* Dual Column Alignment Spacing Matrix */
.form-dual-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Submission Interactive Transmit Action Elements Button */
.btn-submit-contact {
    background-color: var(--accent-gold); /* Standard Gold Accent luxury theme primary signature */
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 16px 0;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-top: 10px;
    width: 100%;
    -webkit-tap-highlight-color: transparent; /* Clean interaction highlight on iOS devices */
}

@media (hover: hover) {
    .btn-submit-contact:hover {
        background-color: var(--accent-gold-hover);
        transform: translateY(-1px);
    }
    
    .btn-submit-contact:hover i {
        transform: translate(3px, -3px); /* Interactive cinematic trajectory vector angle blast */
    }
}

.btn-submit-contact i {
    font-size: 13px;
    transition: transform 0.3s ease;
}


/* ========================================================= */
/* --- Responsive Adaptive Contact Section Breakpoints ----- */
/* ========================================================= */

@media screen and (max-width: 1024px) {
    .contact-section-grid {
        grid-template-columns: 1fr; /* Stacks the ledger side and form wrapper cleanly */
        gap: 40px;
    }
}
@media screen and (max-width: 768px) {
    .contact-section-container {
        padding: 45px 4%;
    }

    /* Elegant fluid sizing overrides prevent typography overflow on tight viewports */
    .contact-sec-sub {
        font-size: 28px;
    }

    .contact-sec-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .contact-sec-title span {
        font-size: 38px;
    }

    .contact-sec-desc {
        font-size: 15px;
        margin-bottom: 30px;
    }

    /* Narrative text alignment changes to center for optimal mobile balance */
    .contact-sec-sub,
    .contact-sec-title,
    .contact-sec-desc {
        text-align: center;
    }

    /* Channel info card item stacks */
    .contact-channels-list {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        gap: 12px;
    }

    .channel-card {
        justify-content: flex-start; /* Ensures inner details flow naturally from the left icon */
        text-align: left;
        padding: 14px 18px;
    }
    
    /* Touch active state feedback replaces desktop hover effects */
    .clickable-channel:active {
        transform: scale(0.99);
        background-color: #faf9fc;
    }

    /* Form Area Spacing Adjustments */
    .contact-form-wrapper {
        padding: 30px 20px;
        border-radius: 20px; /* Gives a smooth, modern mobile panel appearance */
    }

    /* Break dual layouts (Name/Email or Subject/Phone fields) down into standalone full width tracks */
    .form-dual-fields {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* --- CRITICAL: Enforce explicit Left Alignment for form labels --- */
    .form-input-group {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .form-input-group label {
        font-size: 12px;
        text-align: left;
        align-self: flex-start;
        width: 100%;
    }

    /* Structural inputs retain max dimensions */
    .input-field-wrapper {
        width: 100%;
    }

    .input-field-wrapper input,
    .input-field-wrapper textarea {
        font-size: 16px; /* Optimized at 16px to explicitly prevent native iOS zoom-on-focus behaviors */
    }

    /* Action submit row setups */
    .btn-submit-contact {
        font-size: 15px; 
        padding: 15px 0;
        width: 100%;
        justify-content: center;
    }
    
    .btn-submit-contact:active {
        transform: translateY(1px);
        filter: brightness(0.95);
    }
}
 /* --- SUPER MICRO BREAKPOINT (Optimized precisely for 320px screens) --- */
@media screen and (max-width: 340px) {
    .contact-section-container {
        padding: 35px 10px; /* Ultra compact safety spacing */
    }

    .contact-sec-sub {
        font-size: 24px; /* Scaled down script font */
    }

    .contact-sec-title {
        font-size: 26px; /* Avoids massive multi-line split wraps */
    }

    .contact-sec-title span {
        font-size: 30px;
    }

    .contact-form-wrapper {
        padding: 20px 12px; /* Pulls elements closer to secure usable horizontal real estate */
        border-radius: 14px;
    }

    .channel-card {
        gap: 10px; /* Tightens icon and text alignment */
        padding: 12px 12px;
        border-radius: 12px;
    }

    .channel-icon-wrap {
        width: 38px;  /* Slims down icons gracefully */
        height: 38px;
        font-size: 15px;
    }

    .channel-details strong {
        font-size: 14px; /* Keeps long email strings/phone numbers from forcing layouts to break */
        word-break: break-word; /* Hard fallback wrapper to prevent horizontal overflow */
    }
    
    .input-field-wrapper input, 
    .input-field-wrapper textarea {
        padding: 12px 12px 12px 40px; /* Brings left icon spacing down beautifully */
    }
    
    .input-icon {
        left: 14px;
    }
}


/* ========================================================= */
/* --- Live Search Results Dropdown Architecture ----------- */
/* ========================================================= */

.search-results-wrapper {
    margin-top: 25px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 95, 84, 0.12);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 30px 70px rgba(11, 14, 30, 0.35);
    max-height: 480px;
    overflow-y: auto;
    text-align: left;
    animation: modalSlideUp 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

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

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f0f6;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.search-results-header span:first-child {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-results-header .results-count {
    font-family: var(--font-main);
    color: var(--accent-teal);
    font-size: 13px;
    font-weight: 600;
}

/* Scrollbar customization for clean webkit layouts */
.search-results-wrapper::-webkit-scrollbar {
    width: 6px;
}
.search-results-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.search-results-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 95, 84, 0.2);
    border-radius: 10px;
}
.search-results-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--accent-teal);
}

/* Card Results Architecture Layout Matrix */
.search-results-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Premium Split Card Element */
.result-item-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border: 1px solid #f1f0f6;
    border-radius: 16px;
    padding: 12px 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.result-item-card:hover {
    transform: translateX(6px);
    border-color: rgba(0, 95, 84, 0.18);
    box-shadow: 0 10px 25px rgba(0, 95, 84, 0.04);
    background-color: #fcfbfe;
}

.result-img-box {
    width: 90px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #f1f0f6;
}

.result-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-info-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.result-title {
    font-family: var(--font-main);
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    transition: color 0.25s ease;
}

.result-item-card:hover .result-title {
    color: var(--accent-teal);
}

.result-mini-badge {
    background-color: var(--accent-gold);
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.result-route-details {
    font-family: var(--font-main);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.result-meta-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 2px;
}

.result-meta-unit {
    font-family: var(--font-main);
    color: var(--accent-teal);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Empty State Handling Interface */
.search-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-family: var(--font-main);
}

.search-empty-state i {
    font-size: 32px;
    color: var(--accent-gold);
    margin-bottom: 12px;
}

.search-empty-state p {
    font-size: 15px;
    font-weight: 500;
}

/* ========================================================= */
/* --- Responsive Results Adaptive Overrides --------------- */
/* ========================================================= */
@media screen and (max-width: 768px) {
    .search-results-wrapper {
        max-height: 380px;
        padding: 16px;
        margin-top: 15px;
    }

    .result-item-card {
        gap: 12px;
        padding: 10px;
    }

    .result-img-box {
        width: 70px;
        height: 60px;
    }

    .result-title {
        font-size: 15px;
    }

    .result-route-details {
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}










.client-avatar-letter {
    width: 50px;
    height: 50px;
    background-color: var(--accent-teal-hover); /* You can change this to any color theme matching Tourex */
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
    text-transform: uppercase;
}

/* --- Active Page Navigation Styling Hooks --- */

/* 1. Desktop Nav Links Active State */
.nav-links a.active-nav {
    color: var(--accent-gold-hover); /* Locks onto the luxury dark gold look */
    position: relative;
}

 
/* 2. Mobile Off-Canvas Drawer Links Active State */
.drawer-links li a.active-nav {
    color: var(--accent-gold-hover) !important;
    background-color: #f7f5fa; /* Activates default luxury background panel highlight */
  }

.drawer-links li a.active-nav i {
    color: var(--accent-gold) !important;
 }



 
/* ========================================================================== */
/* --- Premium Luxury Toast System Engine (Global Desktop Base) ---           */
/* ========================================================================== */
.luxury-toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.luxury-toast {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 16px 24px;
    min-width: 300px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 35px rgba(17, 20, 45, 0.08);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: auto;
    will-change: transform, opacity;
}

.luxury-toast.toast-show {
    transform: translateY(0);
    opacity: 1;
}

 

.luxury-toast.toast-success i {
    color: var(--accent-teal);
}

 

.luxury-toast.toast-error i {
    color: #e36b2e;
}

.toast-msg-content {
    font-family: var(--font-main);
    font-size: 14px;          /* Maintained at full luxury scale */
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    word-wrap: break-word;    /* Defends structural alignment against text overflow */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* --- Submit Button Processing State Mechanics --- */
.btn-submit-booking.is-processing {
    background-color: var(--text-muted) !important;
    pointer-events: none !important;
    transform: none !important;
    opacity: 0.8;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.toast-spinner {
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ========================================================================== */
/* --- Mobile Viewports Layout Adaptation Breakpoint (768px) ---              */
/* ========================================================================== */
@media screen and (max-width: 768px) {
    .luxury-toast-container {
        bottom: 20px;          /* Comfortable clearance above mobile safari/chrome navbars */
        right: 4%;             /* Clean percentage matching main container boundaries */
        left: 4%;
        align-items: center;   /* Anchors elements symmetrically into center screen axis */
    }

    .luxury-toast {
        width: 100%;           /* Stretches fluidly to dynamic container bounds */
        min-width: 0;          /* Removes rigid structural desktop locks */
        max-width: 500px;      /* Restricts awkward horizontal blowouts on wider handhelds */
        padding: 16px 20px;    /* Optimizes side spacing grid matrices slightly */
        
        /* Premium slide-up notification transition engine customized for mobile */
        transform: translateY(30px); 
        box-shadow: 0 12px 30px rgba(17, 20, 45, 0.12);
    }
    
    .luxury-toast.toast-show {
        transform: translateY(0);
    }
}


























 
.destinations-fade .destinations-header {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.destinations-fade.active .destinations-header {
    opacity: 1;
    transform: translateY(0);
}

 
.destinations-fade .reveal-card {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}


.destinations-fade.active .reveal-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}
 
.destination-card {
    overflow: hidden;
}
.destination-card .card-img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.destination-card:hover .card-img {
    transform: scale(1.08);
}


 
.promo-banner-container {
    overflow: hidden;
}

 
.promo-split .promo-offer-side {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

 
.promo-split .promo-image-side {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

 
.promo-split.active .promo-offer-side,
.promo-split.active .promo-image-side {
    opacity: 1;
    transform: translateX(0);
}

 
.promo-split .promo-cursive-text {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;  
}

.promo-split.active .promo-cursive-text {
    opacity: 1;
    transform: scale(1);
}



 
 
.packages-container {
    overflow: hidden;
}

/* 1. Header Effect - Fade in with a tiny blur slide */
.packages-slide .packages-header {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-20px);
    transition: opacity 1s ease, filter 1s ease, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.packages-slide.active .packages-header {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

 
.packages-slide .reveal-pkg-card {
    opacity: 0;
    transform: translateX(100px) rotate(1deg);  
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
 
.packages-slide.active .reveal-pkg-card {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}

 
.packages-slide .reveal-btn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.6s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.6s;
}

.packages-slide.active .reveal-btn {
    opacity: 1;
    transform: translateY(0);
}

 
.package-card {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}
.package-card:hover {
    transform: translateY(-8px);
}



 
.features-section .box-img.reveal-box {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

 
.features-section .box-card.reveal-box {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

 
.features-section.active .reveal-box {
    opacity: 1;
    transform: scale(1) translateY(0);
}
 
.features-section.active .reveal-box:nth-child(1) { transition-delay: 0.1s; }
.features-section.active .reveal-box:nth-child(2) { transition-delay: 0.2s; }
.features-section.active .reveal-box:nth-child(3) { transition-delay: 0.3s; }
.features-section.active .reveal-box:nth-child(4) { transition-delay: 0.4s; }
.features-section.active .reveal-box:nth-child(5) { transition-delay: 0.5s; }
.features-section.active .reveal-box:nth-child(6) { transition-delay: 0.6s; }


/* --- 2. Stats Bar Animation --- */
.features-section .reveal-stats {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.5s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

.features-section.active .reveal-stats {
    opacity: 1;
    transform: translateY(0);
}





/* --- About Us Section Animations --- */

.about-container {
    overflow: hidden;
}

 
.about-reveal .reveal-primary {
    opacity: 0;
    transform: translateX(-60px) rotate(-1deg);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

 
.about-reveal .reveal-secondary {
    opacity: 0;
    transform: translate(40px, 40px) rotate(1deg);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; /* 0.2s delay */
}

 
.about-reveal .reveal-badge {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s; 
}

/* Active States for Left Side */
.about-reveal.active .reveal-primary {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}
.about-reveal.active .reveal-secondary {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}
.about-reveal.active .reveal-badge {
    opacity: 1;
    transform: scale(1);
}


 
.about-reveal .about-content-animate > * {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

 
.about-reveal.active .about-content-animate > h3 { transition-delay: 0.1s; }
.about-reveal.active .about-content-animate > h2 { transition-delay: 0.2s; }
.about-reveal.active .about-content-animate > p  { transition-delay: 0.3s; }
.about-reveal.active .about-content-animate > .about-pillars-grid { transition-delay: 0.4s; }
.about-reveal.active .about-content-animate > .about-action-row { transition-delay: 0.5s; }

.about-reveal.active .about-content-animate > * {
    opacity: 1;
    transform: translateY(0);
}





/* --- Vision & Mission Section Animations --- */

.vision-mission-container {
    overflow: hidden;
    perspective: 1000px; 
}

 
.vm-reveal .reveal-vision {
    opacity: 0;
    transform: translateX(-120px) rotateY(-8deg);
    transition: opacity 1.3s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

 
.vm-reveal .reveal-mission {
    opacity: 0;
    transform: translateX(120px) rotateY(8deg);
    transition: opacity 1.3s cubic-bezier(0.25, 1, 0.5, 1) 0.15s; 
    will-change: transform, opacity;
}

 
.vm-reveal.active .reveal-vision,
.vm-reveal.active .reveal-mission {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
}

 
.vm-reveal .vm-watermark {
    opacity: 0;
    transform: scale(0.6) rotate(-10deg);
    transition: opacity 1.2s ease 0.5s, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}

.vm-reveal.active .reveal-vision .vm-watermark,
.vm-reveal.active .reveal-mission .vm-watermark {
    opacity: 0.08;  
    transform: scale(1) rotate(0deg);
}


/* --- Premium Contact Section Animations --- */

.contact-section-container {
    overflow: hidden;
}

/* --- Left Column: Ledger Titles & Info Cascade --- */
.contact-reveal-pane .ledger-animate > * {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Left components load wave sequence delays */
.contact-reveal-pane.active .ledger-animate > h3 { transition-delay: 0.1s; }
.contact-reveal-pane.active .ledger-animate > h2 { transition-delay: 0.2s; }
.contact-reveal-pane.active .ledger-animate > p  { transition-delay: 0.3s; }
.contact-reveal-pane.active .ledger-animate > .contact-channels-list { transition-delay: 0.4s; }

.contact-reveal-pane.active .ledger-animate > * {
    opacity: 1;
    transform: translateX(0);
}

/* Channel blocks cascade delay effect inside their container */
.contact-reveal-pane .channel-card {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.contact-reveal-pane.active .channel-card:nth-child(1) { transition-delay: 0.45s; }
.contact-reveal-pane.active .channel-card:nth-child(2) { transition-delay: 0.55s; }
.contact-reveal-pane.active .channel-card:nth-child(3) { transition-delay: 0.65s; }
.contact-reveal-pane.active .channel-card:nth-child(4) { transition-delay: 0.75s; }

.contact-reveal-pane.active .channel-card {
    opacity: 1;
    transform: translateY(0);
}


/* --- Right Column: Luxury Form Panel Reveal --- */
.contact-reveal-pane .form-slide-animate {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.contact-reveal-pane.active .form-slide-animate {
    opacity: 1;
    transform: translateX(0);
}

/* Luxury Interactive Polish: Input text focused tracking transition */
.input-field-wrapper {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}
.input-field-wrapper:focus-within {
    transform: translateY(-2px);
}