/* Landing New CSS */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    overflow-x: hidden;
}

/* Force full width layout for homepage */
#wrapper,
#page-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix navbar for homepage */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1030;
    /* Bootstrap standard z-index for fixed navbar */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Make nav links white on landing page */
.navbar .nav-links li a {
    color: #fff !important;
}

/* Keep active link or hover distinct if needed, or let them inherit/override. 
   User asked for "unselected status" to be white. 
   Usually active might have a different color (like gold #bfa15f). 
   Let's ensure we don't accidentally override the active state if it relies on specificity, 
   but !important might override it. 
   Let's check if there is an active class style. 
   Safe bet is to target :not(.active) if we want to strictly follow "unselected", 
   but usually "all text white" for a transparent header implies base color.
   I'll stick to base color white. If active needs to be gold, I should ensure it's preserved.
   I'll add a rule for .active to ensure it stays gold if that's the design.
*/
.navbar .nav-links li a.active {
    color: #bfa15f !important;
}

.navbar .lang-btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar .navbar-logo span {
    color: #fff !important;
    transition: color 0.3s;
}

/* Transparent Dropdown for Unscrolled Navbar */
.navbar:not(.scrolled) .dropdown-menu {
    background-color: transparent !important;
    border: 1px solid #fff !important;
    box-shadow: none !important;
}

.navbar:not(.scrolled) .dropdown-menu li a {
    color: #fff !important;
    background: transparent;
}

.navbar:not(.scrolled) .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #bfa15f !important;
    /* Keep gold hover or white? User said white text style. Let's keep gold hover for consistency with nav links active state? Or plain white? Global has gold hover. Let's keep gold hover for accent. */
}

/* Scrolled State for Navbar */
.navbar.scrolled {
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled .nav-links li a {
    color: #777 !important;
    /* Original gray/dark color */
}

.navbar.scrolled .nav-links li a.active {
    color: #bfa15f !important;
    /* Keep active gold */
}

.navbar.scrolled .navbar-logo span {
    color: #777 !important;
    /* Restore dark text */
}

.navbar.scrolled .lang-btn {
    color: #777 !important;
    border-color: #e7eaec !important;
    /* Original border color */
}

.navbar.scrolled .mobile-menu-btn {
    color: #777 !important;
}

.navbar,
.navbar .nav-links li a,
.navbar .navbar-logo span,
.navbar .lang-btn {
    transition: all 0.3s ease;
}

/* -- Mobile Header Styles for Landing Page -- */

/* Unscrolled State */
.navbar:not(.scrolled) .mobile-menu-btn {
    color: #fff !important;
}

.navbar:not(.scrolled) .lang-btn-mobile {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar:not(.scrolled) .dropdown-menu-mobile {
    background-color: transparent !important;
    border: 1px solid #fff !important;
    box-shadow: none !important;
    position: absolute;
    /* Ensure it floats if needed, though global has it */
}

.navbar:not(.scrolled) .dropdown-menu-mobile li a {
    color: #fff !important;
}

/* Scrolled State Extras */
.navbar.scrolled .lang-btn-mobile {
    color: #777 !important;
    border-color: #ddd !important;
}

/* Ensure mobile menu drawer itself (the links) isn't affected by transparency issues if it opens */
/* Global CSS handles the .nav-links mobile drawer background (white). */
@media (max-width: 992px) {
    .navbar:not(.scrolled) .nav-links {
        background-color: rgba(0, 0, 0, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}


/* -- Typography & Common -- */
.section-header-home {
    text-align: left;
    margin-bottom: 50px;
}

.section-header-home .subtitle {
    font-size: 14px;
    color: #bfa15f;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
}

.section-header-home .title {
    font-size: 36px;
    font-weight: 300;
    color: #333;
    margin-bottom: 20px;
}

.section-header-home .desc {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    max-width: 600px;
}

.section-home {
    padding: 100px 0;
}

/* -- 1. Hero Section -- */
.home-hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    /* Background handled by carousel now */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

#heroCarousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.carousel-indicators {
    z-index: 10;
    bottom: 100px;
    /* Position above the scroll indicator */
}

.carousel-indicators li {
    box-sizing: content-box !important;
    width: 30px !important;
    height: 3px !important;
    border-radius: 0 !important;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: none;
    border-right: none;
    cursor: pointer;
}

.carousel-indicators .active {
    background-color: #fff;
    width: 30px !important;
    height: 3px !important;
}

.carousel-inner,
.carousel-item {
    height: 100%;
}

.carousel-item {
    background-size: cover;
    background-position: center;
    transition: transform 2s ease, opacity .5s ease-out;
    /* Smooth slide/fade hybrid */
}

/* Ideally use a better bg if available */
.home-hero-section .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Dark overlay */
    z-index: 1;
    pointer-events: none;
    /* Allow clicks to pass through to carousel */
}

.home-hero-section .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

.hero-logo-text {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.app-text .title {
    font-size: 36px;
    font-weight: 300;
    color: #333;
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Source Han Serif CN', '思源宋体', serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 1.4;
    margin-bottom: 40px;
}

.btn-hero-gold {
    display: inline-block;
    padding: 12px 40px;
    background-color: #bfa15f;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-hero-gold:hover {
    background-color: #a88d50;
    color: #fff;
    text-decoration: none;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 2px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
}

.scroll-line {
    width: 100%;
    height: 50%;
    background: #fff;
    animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* -- 2. Social -- */
.section-social {
    background-color: #f7f7f7;
    background-image: radial-gradient(circle at 1px 1px, #e5e5e5 1px, transparent 0);
    background-size: 20px 20px;
    padding: 100px 0;
}

.section-social .section-header-home {
    margin-bottom: 60px;
}

.section-social .section-header-home .subtitle {
    color: #333;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-transform: none;
    font-family: "Georgia", "Times New Roman", serif;
    /* Serif font for subtitle to match design */
}



.section-social .section-header-home .title {
    font-size: 36px;
    font-weight: 300;
    color: #333;
    margin-bottom: 20px;
}

.section-social .section-header-home .desc {
    color: #666;
    font-size: 16px;
    font-weight: 300;
}

.social-grid {
    display: flex;
    gap: 20px;
    margin-top: 50px;
    width: 100%;
}

.social-card {
    position: relative;
    overflow: hidden;
    height: 400px;
    /* Adjust height based on image aspect ratio */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Flex Expansion Effect */
    flex: 1;
    min-width: 0;
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.social-card:hover {
    flex: 2;
}

.social-card .card-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Default dampened state */
    filter: brightness(0.6);
    /* Silky smooth transition */
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.social-card:hover .card-img {
    /* Restore to full brightness and scale */
    transform: scale(1.05);
    filter: brightness(1);
}

.social-card .card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.social-card h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-family: "Georgia", "Times New Roman", serif;
}

.social-card p {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 300;
    letter-spacing: 0.5px;
}


/* -- 3. Cross-Border Tourism -- */
.section-travel {
    position: relative;
    padding: 100px 0;
    color: #fff;
    background-image: url('/static/img/landing/tourism_bg.png');
    /* Use a dark city bg */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.travel-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Darken the background */
    z-index: 0;
}

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

.travel-header {
    margin-bottom: 50px;
    padding-left: 20px;
}

.travel-header .title {
    font-size: 36px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 20px;
}

.travel-header .subtitle {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    opacity: 0.8;
}

/* Slider Layout */
.travel-slider {
    position: relative;
    width: 100%;
    /* overflow: hidden; Intentionally visible for "next" cards, or handled by wrapper */
}

/* Navigation */
.slider-nav {
    position: absolute;
    top: -80px;
    /* Align with header roughly or top right */
    right: 20px;
    display: flex;
    gap: 15px;
}

.nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.nav-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* Cards Wrapper */
.travel-cards-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-left: 20px;
    /* Align with header */
    width: 100%;
    /* Ensure full width */
    transition: transform 0.5s ease;
}

/* Card Styling */
.travel-card {
    position: relative;
    height: 480px;
    transition: all 0.5s ease;
    flex-shrink: 0;
    overflow: hidden;
    /* Hide overflowing text during transition */
}

/* Active Card (Split Layout) */
.travel-card.active {
    width: 900px;
    /* Large width */
    background: #fff;
    display: flex;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.travel-card.active .card-image {
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.travel-card .card-info {
    /* Hidden by default */
    width: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    transition: width 0.5s ease, opacity 0.3s ease 0.2s;
    /* Delayed fade in */
}

.travel-card.active .card-info {
    width: 50%;
    opacity: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #333;
}

.travel-card.active .card-info h3 {
    font-size: 32px;
    font-family: "Georgia", "Times New Roman", serif;
    margin-bottom: 25px;
    font-weight: 400;
    white-space: nowrap;
    /* Prevent wrap during transition */
}

.travel-card.active .card-info p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    min-width: 300px;
    /* Prevent reflow */
}

/* Next/Inactive Card (Image Only) */
.travel-card.next {
    width: 320px;
    opacity: 0.8;
}

.travel-card.next:hover {
    opacity: 1;
}

.travel-card.next .card-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}


/* -- 4. Payment -- */
/* -- 4. Payment -- */
.section-payment {
    background: url('/static/img/landing/payment_bg.png') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
}

.section-payment .section-header-home .title {
    font-size: 36px;
    font-weight: 300;
    color: #333;
    margin-bottom: 20px;
}

.section-payment .section-header-home .subtitle {
    font-size: 16px;
    font-weight: 300;
    color: #666;
    line-height: 1.8;
    max-width: 600px;
    text-transform: none;
}

.payment-content {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 50px;
}

.payment-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* Optional rounded corners */
}

.payment-shield-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Add subtle float animation or shadow if desired */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

.payment-features {
    flex: 1;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Space between cards */
}

.payment-card {
    background: #fff;
    padding: 25px 30px;
    border-radius: 4px;
    /* Slightly rounded */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    /* Very subtle shadow */
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.payment-card:last-child {
    margin-bottom: 0;
}

.payment-card .icon {
    width: 40px;
    /* Smaller container */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bfa15f;
    /* Gold */
    font-size: 24px;
    margin-right: 20px;
    /* Remove circle bg from previous design if moving to cleaner look, or keep */
    /* background: #fdfbf7; 
       border-radius: 50%; */
}

.payment-card .text h4 {
    font-size: 18px;
    margin: 0;
    color: #333;
    font-weight: 400;
}


/* -- 5. Featured Routes -- */
.section-featured-routes {
    background: url('/static/img/product/aichat_sec1_bg.png') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
}

.section-featured-routes .section-header-home {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.view-all-link {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.view-all-link:hover {
    color: #000;
}

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

.home-route-card {
    background: #fff;
    /* Box shadow optional */
    transition: transform 0.3s ease;
}

.home-route-card:hover {
    transform: translateY(-5px);
}

.home-route-card .route-img {
    height: 250px;
    background-size: cover;
    background-position: center;
}

.home-route-card .route-info {
    padding: 20px;
}

.home-route-card h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
}

.home-route-card .price {
    font-size: 20px;
    color: #bfa15f;
    font-weight: 700;
}

.home-route-card .price span {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}


/* -- 6. Chat X -- */
/* -- 6. Chat X -- */
.section-chatx {
    background: #f5f5f5;
    padding: 80px 0;
}

/* Stretch items to match height */
.chatx-content-wrapper {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.chatx-articles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.article-item {
    background: transparent;
}

.article-header {
    display: flex;
    align-items: center;
    background: #fdfdfd;
    padding: 15px 20px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 16px;
    color: #555;
    border-left: 3px solid transparent;
}

/* Active State */
.article-item.active .article-header {
    background: #c5a47e;
    color: #333;
    font-weight: 500;
}

.article-item .icon {
    margin-right: 15px;
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.article-body {
    display: none;
    background: #f9f9f9;
    padding: 20px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

.article-item.active .article-body {
    /* display: block;  <-- Removing this to let JS animate */
    background: #fff;
}

.chatx-image-display {
    flex: 1.2;
    /* height: auto; -> Not needed if we rely on stretch, but we want it to NOT have intrinsic height */
    position: relative;
    overflow: hidden;
}

.chatx-image-display img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.chatx-image-display:hover img {
    transform: scale(1.05);
    /* Subtle zoom */
}

.btn-chatx {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #333;
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s;
}

.btn-chatx:hover {
    background: #333;
    color: #fff;
}


/* -- 7. App Download -- */
.section-app-download {
    background: url('/static/img/landing/download.png') no-repeat center center !important;
    background-size: cover !important;
    padding: 100px 0;
}

.app-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fbfd;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.map-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    opacity: 0.1;
    pointer-events: none;
}

.app-text {
    position: relative;
    z-index: 2;
    max-width: 50%;
}

.app-text .desc {
    font-size: 16px;
    font-weight: 300;
    color: #666;
    line-height: 1.8;
    max-width: 600px;
}

.app-buttons {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    padding: 10px 25px;
    background: #fff;
    border: 1px solid #e1e1e1;
    color: #333;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    gap: 10px;
    transition: all 0.3s;
}

.btn-download:hover {
    border-color: #bfa15f;
    color: #bfa15f;
}

.app-qr {
    position: relative;
    z-index: 2;
    text-align: center;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.app-qr p {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
}


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

    /* Fixed Social Grid for Mobile */
    .social-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 30px;
    }

    .social-card {
        height: 300px;
        flex: none;
        width: 100%;
    }

    .social-card:hover {
        flex: 1;
        /* Disable hover expansion on mobile */
    }

    /* Fixed Travel Section for Mobile */
    .section-travel {
        padding: 50px 0;
        height: auto;
        overflow: visible;
    }

    .travel-slider {
        overflow: visible;
    }

    .slider-nav {
        display: none;
        /* Hide arrows */
    }

    .travel-cards-wrapper {
        flex-direction: column;
        /* Stack vertically */
        padding-left: 0;
        gap: 40px;
    }

    .travel-card,
    .travel-card.active,
    .travel-card.next {
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        opacity: 1;
        box-shadow: none;
        margin-bottom: 20px;
    }

    /* Make Image Visible */
    .travel-card .card-image,
    .travel-card.active .card-image,
    .travel-card.next .card-image {
        width: 100%;
        height: 250px;
        /* Fixed height for image */
    }

    /* Make Info Always Visible */
    .travel-card .card-info,
    .travel-card.active .card-info,
    .travel-card.next .card-info {
        width: 100%;
        opacity: 1;
        padding: 30px 20px;
        display: block;
        background: rgba(255, 255, 255, 0.95);
        /* Ensure readability */
        height: auto;
    }

    .travel-card .card-info h3,
    .travel-card.active .card-info h3,
    .travel-card.next .card-info h3 {
        font-size: 24px;
        margin-bottom: 15px;
        color: #333;
        font-family: inherit;
        font-weight: 500;
        white-space: normal;
    }

    .travel-card .card-info p,
    .travel-card.active .card-info p,
    .travel-card.next .card-info p {
        font-size: 16px;
        color: #666;
        line-height: 1.8;
        white-space: normal;
        min-width: 0;
    }

    .routes-grid {
        grid-template-columns: 1fr;
    }

    .lifestyle-slider {
        flex-direction: column;
        height: auto;
    }

    .lifestyle-info {
        width: 100%;
        padding: 40px 20px;
    }

    .lifestyle-images {
        height: 300px;
    }

    .payment-content {
        flex-direction: column;
        align-items: stretch;
    }

    .payment-features {
        padding-left: 0;
        margin-top: 40px;
        width: 100%;
    }

    .chatx-content-wrapper {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .chatx-articles {
        width: 100%;
        margin-top: 20px;
    }

    .chatx-image-display {
        width: 100%;
        height: 250px;
        flex: none;
    }

    .app-content {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .app-text {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .app-buttons {
        justify-content: center;
    }
}

/* Phone Specific */
@media (max-width: 576px) {
    .social-grid {
        grid-template-columns: 1fr;
    }

    .social-card {
        height: 280px;
    }
}

/* -- 5. New Seasonal Route Section -- */
.section-seasonal-route {
    padding: 0;
    width: 100%;
    margin-bottom: 0;
}

/* 
   The design shows a full width banner image with text overlay.
   I'll set a placeholder background color/gradient or image.
   Since user said they'll provide image later, I'll use a placeholder.
*/
.seasonal-route-bg {
    width: 100%;
    height: 500px;
    /* Adjust height based on design ratio, looks like a banner */
    background: linear-gradient(90deg, rgba(191, 161, 95, 1) 0%, rgba(191, 161, 95, 0.95) 40%, rgba(191, 161, 95, 0) 100%), url('/static/img/landing/sec5_bg_final.png') no-repeat center center;
    /* Fallback color similar to image tone */
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
}

.seasonal-content {
    max-width: 100%;
    padding: 120px 0 50px 0;
    color: #333;
    /* Dark text as seen in design */
    text-align: left;
}

.seasonal-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 300;
    line-height: 1.2;
}

.seasonal-desc-group p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #000;
    margin-bottom: 12px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.8;
}

.seasonal-cta-wrapper {
    margin-top: 50px;
}

.seasonal-cta {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px;
    color: #333;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    font-weight: 300;
    letter-spacing: 0px;
}

/* Responsive */
@media (max-width: 768px) {
    .seasonal-title {
        font-size: 32px;
    }

    .seasonal-desc-group p {
        font-size: 16px;
    }

    .seasonal-cta {
        font-size: 22px;
    }

    .seasonal-route-bg {
        height: auto;
        padding: 50px 0;
        background: #bfa15f;
        background-size: cover;
    }

    .seasonal-content {
        padding: 60px 20px;
    }
}

/* -- 6. Chat X (Redesign) -- */
.section-chatx {
    position: relative;
    padding: 100px 0 60px 0;
    /* Reduced bottom padding */
    background-color: #fff;
    overflow: hidden;
}

/* Background Decoration */
.chatx-bg-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fill the entire section */
    background: url('/static/img/landing/new_sec_6_bg.png') no-repeat bottom center;
    background-size: cover;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

/* Content Container */
.section-chatx .container {
    position: relative;
    z-index: 1;
}

.chatx-text-col {
    padding-right: 5%;
    padding-top: 100px;
    /* Increased to 100px to move content further down */
    /* Adjusted from 40px for better vertical balance with the card */
}

.chatx-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 36px;
    /* Matched to seasonal-title */
    color: #333;
    margin-bottom: 30px;
    line-height: 1.2;
}

.chatx-desc {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: #000;
    /* Matched to Section 5 */
    letter-spacing: 2px;
    /* Matched to Section 5 */
    text-align: justify;
}

.chatx-card-slider {
    position: relative;
    width: 100%;
    height: 550px;
    /* Reduced to tighten layout */
}

.chatx-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 0;
}

.chatx-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 1;
}

.chatx-image-wrapper {
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.chatx-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chatx-card-content {
    padding: 30px 40px 40px 40px;
}

.chatx-image-caption {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    /* Slight increase for focus */
    color: #444;
    /* Darker for better contrast on white */
    line-height: 2;
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 0;
    font-weight: 300;
}

/* Navigation Buttons */
.chatx-nav-container {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 30px;
    /* Reduced to keep buttons close to text */
}

.chatx-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    font-size: 20px;
}

.chatx-nav-btn:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

@media (max-width: 768px) {
    .chatx-title {
        font-size: 32px;
        text-align: left;
    }

    .chatx-desc {
        text-align: left;
        margin-bottom: 40px;
    }

    .chatx-text-col {
        padding-right: 15px;
        margin-bottom: 30px;
    }

    .chatx-bg-decoration {
        height: 30%;
    }
}

/* -- 7. Loyalty Rewards -- */
.section-loyalty {
    position: relative;
    padding: 120px 0;
    background-color: #fdfaf5;
    overflow: hidden;
}

.loyalty-bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/static/img/landing/new_sec_7_bg.png') no-repeat center center;
    background-size: cover;
    z-index: 0;
}

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

.loyalty-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 38px;
    color: #1a1a1a;
    margin-bottom: 80px;
    letter-spacing: 1px;
}

.loyalty-text-col {
    padding-right: 40px;
}

.loyalty-desc {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #444;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.loyalty-desc-secondary {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #444;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 1px;
}

.loyalty-card-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease;
}

.loyalty-card-wrapper:hover {
    transform: translateY(-5px);
}

.loyalty-card-wrapper img {
    width: 100%;
    display: block;
}

.loyalty-card-overlay {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 50%;
}

.loyalty-card-overlay .card-text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 32px;
    color: #d4af37;
    /* Golden color to match the card theme */
    font-weight: 600;
    letter-spacing: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Removed loyalty-footer-bar as content moved to text column */

/* Mobile Adjustments for Loyalty Section */
@media (max-width: 768px) {
    .section-loyalty {
        padding: 60px 0;
    }

    .loyalty-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .loyalty-text-col {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .loyalty-card-overlay .card-text {
        font-size: 16px;
    }

    .loyalty-footer-bar {
        margin-top: 50px;
        padding: 15px 20px;
    }

    .loyalty-footer-bar p {
        font-size: 16px;
    }
}