/* Trek Detail Header (White) */
.header-white {
    position: absolute; /* Keep absolute to sit on top if needed, or relative if layout requires. User asked for specific look. Usually detail pages might overlay or stack. Let's keep existing behavior but add bg. */
    background-color: var(--color-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-white .nav-link {
    color: var(--color-text);
}

.header-white .nav-link:hover {
    color: var(--color-primary);
}

.header-white .icon-btn i,
.header-white .mobile-menu-btn i {
    color: var(--color-text);
}



/* Trek Hero Image Slider */
.trek-hero-slider {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 400px;
    max-height: 600px;
    overflow: hidden;
}

.trek-overview-section,
.trek-itinerary-section,
.trek-pricing-section{
    padding: 0;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    /* Mobile: Scrollable Native Slider */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.slider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.slide {
    position: relative;
    flex: 0 0 100%; /* Mobile: Full width per slide */
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* Force stop at each slide */
    opacity: 1; /* Always visible */
}

/* Remove active class dependency for mobile visibility */
.slide.active {
    opacity: 1;
    z-index: 2;
}

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

/* Slide Counter (Mobile) */
.slide-counter {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    color: var(--color-white);
    padding: 8px 16px;
    border-radius: 24px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation Arrows (Hidden on Mobile) */
.slider-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slider-nav:hover {
    background: var(--color-white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.slider-nav i {
    color: var(--color-text);
    font-size: 1.1rem;
}

.slider-nav.prev {
    left: 24px;
}

.slider-nav.next {
    right: 24px;
}

/* Sub Navigation */
.trek-sub-nav {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--color-white);
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0;
}

.trek-sub-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
}

.sub-nav-list {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.sub-nav-list a {
    text-decoration: none;
    color: var(--color-text-light);
    font-weight: 600;
    font-size: var(--font-size-body);
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    transition: color 0.3s;
}

.sub-nav-list a.active,
.sub-nav-list a:hover {
    color: var(--color-primary);
}

.sub-nav-list a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
}

.sub-nav-action {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sub-nav-price {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.sub-nav-price strong {
    font-size: 1.2rem;
    color: var(--color-text);
}

.sub-nav-btn {
    display: flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-text);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(255, 183, 3, 0.3);
}

.sub-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 183, 3, 0.4);
}

.sub-nav-btn i {
    font-size: 1.1rem;
    font-weight: 600;
    margin-right: 0.6rem;
}

/* Page Layout */
.trek-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.section {
    scroll-margin-top: 150px;
}

.trek-main {
    min-width: 0;
    /* Prevent overflow issues */
}

/* Sidebar & Booking Card */
.trek-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.booking-card {
    background: var(--color-white);
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 1.5rem;
    /* Reduced padding for compact look */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: sticky;
    /* Make it sticky */
    top: 70px;
    /* Offset for header + subnav */
}

.booking-header {
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
}

.booking-header .label {
    display: block;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
}

.booking-header .price {
    display: flex;
    align-items: flex-start;
    color: var(--color-text);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.booking-header .currency {
    font-size: 1.5rem;
    margin-top: 0.2rem;
}

.booking-header .amount {
    font-size: 2.5rem;
}

.booking-header .per-person {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}

.booking-usps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.usp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-small);
    color: var(--color-text);
    font-weight: 500;
}

.usp i {
    color: #22c55e;
}

.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.form-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.3s;
    background: #f9f9f9;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
}

.trip-btn {
    background: var(--color-text);
    color: var(--color-white);
    border: none;
    padding: 1rem;
    /* border-radius: 8px; */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.trip-btn:hover {
    background: var(--color-primary);
    color: var(--color-text);
}

.booking-contact {
    margin-top: 1.5rem;
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}

.booking-contact a {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
    margin-top: 0.25rem;
}

.sidebar-widget {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
}

.sidebar-widget h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.why-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.why-list i {
    color: var(--color-primary);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Main Content Sections */
.trek-main h2 {
    font-size: var(--font-size-h2);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.trek-main h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
}

.highlight-intro {
    font-size: var(--font-size-h3);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Specs Grid */
.trek-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    background: #fafafa;
    padding: 1.2rem .6rem;
    border-radius: 12px;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.spec-item i {
    font-size: 1.4rem;
    color: var(--color-primary);
    background: #fff;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.spec-item span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-item strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text);
}

.divider {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 3rem 0;
}

/* Timeline Itinerary - Refined */
.timeline-itinerary {
    position: relative;
    padding-left: 0;
    margin-top: 2rem;
}

.timeline-itinerary::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 10px;
    /* Center of the 40px marker */
    width: 2px;
    background: #e5e5e5;
    z-index: 0;
}

.timeline-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 2rem;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 21px;
    height: 21px;
    background: var(--color-white);
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 4px #fff;
    /* White halo to separate from line */
}

.timeline-item:hover .timeline-marker {
    background: var(--color-primary);
}

.itinerary-item {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.itinerary-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.itinerary-header {
    background: transparent;
    padding: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: .75rem;
}

.day-badge {
    display: inline-block;
    background: #f0f0f0;
    padding: 4px 4px;
    width: 55px;
    text-align: center;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-light);
    flex-shrink: 0;
    margin-bottom: 0;
}

.timeline-item:hover .day-badge {
    background: var(--color-primary);
    color: var(--color-text);
}

.itinerary-header h3 {
    font-size: var(--font-size-h4);
    font-weight: 700;
    margin: 0;
}

.itinerary-toggle {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-text-light);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.itinerary-item.active .itinerary-toggle {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.itinerary-item.active .itinerary-content {
    display: block;
}

.itinerary-content {
    display: none;
    /* Controlled by JS */
    padding: 0 1.5rem 1.5rem;
}

.itinerary-stats {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}

.itinerary-stats i {
    color: var(--color-primary);
    margin-right: 0.5rem;
}

/* Pricing Grid */
/* Pricing Grid */
.pricing-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.pricing-card {
    background: #fff;
    padding: 1.8rem;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: fit-content;
}

.pricing-card.included {
    background: linear-gradient(to bottom right, #ffffff, #f0fdf4);
    border: 1px solid rgba(34, 197, 94, 0.2);
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.08); /* Soft green glow */
}

.pricing-card.excluded {
    background: #fff;
    border: 1px solid rgba(239, 68, 68, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.pricing-card h3 {
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 1rem;
    letter-spacing: -0.5px;
}

.pricing-card.included h3 {
    color: #15803d; /* Darker green for text */
}

.pricing-card.included h3 i {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
}

.pricing-card.excluded h3 {
    color: #991b1b;
}

.pricing-card.excluded h3 i {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-card li {
    position: relative;
    padding: 0.85rem 0 0.85rem 2.2rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Custom Icons via Pseudo-element */
.pricing-card.included ul li::before {
    content: '\f00c'; /* FontAwesome Check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.9rem;
    color: #22c55e;
    font-size: 1rem;
}

.pricing-card.excluded ul li::before {
    content: '\f00d'; /* FontAwesome Cross */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 2px;
    top: 0.9rem;
    color: #ef4444;
    font-size: 1rem;
    opacity: 0.8;
}

.pricing-card li:last-child {
    border-bottom: none;
}

/* Responsive Media Queries */
@media (min-width: 992px) {

    /* Trek Hero Slider Desktop Overrides */
    .trek-hero-slider {
        height: 75vh;
        max-height: 800px;
    }

    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Move to bottom left */
        top: auto;
        bottom: 40px;
        transform: none;
    }

    .slider-nav:hover {
        transform: scale(1.1); /* Remove translateY ref */
    }

    .slider-nav.prev {
        left: 40px; /* Base left */
        right: auto;
    }

    .slider-nav.next {
        left: 100px; /* Spaced out from prev */
        right: auto;
    }

    .slide-counter {
        display: none;
    }

    .slider-track {
        display: flex; /* Ensure flex layout */
        gap: .25rem;
        /* Desktop: Disable native scroll, use transform */
        overflow-x: visible; 
        scroll-snap-type: none;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        padding-right: 0; /* Clear padding */
    }

    .slide {
        position: relative;
        /* Desktop: 2.5 images = 40% width each */
        width: 40%;
        min-width: 40%;
        flex: 0 0 40%; /* Force strict width */
        opacity: 1 !important;
    }
}

/* Tablet Overrides (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .trek-hero-slider {
        height: 60vh;
    }
    
    /* Show Nav Buttons (Same style as Desktop) */
    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        top: auto;
        bottom: 40px;
        transform: none;
    }
    .slider-nav:hover { transform: scale(1.1); }
    .slider-nav.prev { left: 40px; right: auto; }
    .slider-nav.next { left: 100px; right: auto; }

    /* Hide Counter */
    .slide-counter { display: none; }

    /* Track: JS Loop Mode */
    .slider-track {
        display: flex;
        gap: .25rem; /* Match user's desktop preference */
        overflow-x: visible;
        scroll-snap-type: none;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        padding-right: 0;
    }
    
    .slide {
        width: 50%; /* 2 images shown */
        min-width: 50%;
        flex: 0 0 50%;
        opacity: 1 !important;
    }
}

/* Restoring Desktop Layout Overrides */
@media (min-width: 992px) {
    /* Layout overrides */
    .trek-layout {
        grid-template-columns: 2fr 1fr;
        padding-top: 4rem;
    }

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

    .pricing-container {
        grid-template-columns: 1fr 1fr;
    }

    /* Itinerary Desktop Layout Override */
    .itinerary-header {
        justify-content: flex-start;
        gap: 0; /* Remove default gap, control manually */
    }

    .itinerary-header .day-badge {
        margin-right: 1.5rem; /* Space between badge and title */
    }

    .itinerary-toggle {
        margin-left: auto; /* Push to far right */
    }
}

@media (max-width: 991px) {
    .trek-sub-nav .sub-nav-action {
        display: none;
        /* Hide book button in subnav on mobile to save space */
    }

    .sub-nav-list {
        width: 100%;
        overflow-x: auto;
        /* Scrollable tabs */
        padding-bottom: 0;
        gap: 1.5rem;
    }

    .sub-nav-list a {
        white-space: nowrap;
        padding: 0.5rem 0;
        font-size: 1rem;
    }

    .trek-sidebar {
        order: 1;
    }
}

/* CTA Styles reused */
.trek-cta {
    background: linear-gradient(135deg, var(--color-text) 0%, #2d2d2d 100%);
    color: var(--color-white);
    padding: 4rem 0;
    text-align: center;
    margin-top: 2rem;
}

.cta-content h2 {
    margin-bottom: 1rem;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--color-primary);
    color: var(--color-text);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 2rem;
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 0.35rem 1.2rem;
    border-radius: 50px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 2100;
    padding: 10px;
}

.lightbox-nav {
    position: static;
    transform: none;
    background: none;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background 0.3s;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav.prev,
.lightbox-nav.next {
    position: static;
    left: auto;
    right: auto;
}

.lightbox-counter {
    position: static;
    transform: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    width: auto;
}
/* Safari Redesign */

/* Access Grid */
.safari-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.access-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.access-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--color-primary);
}

.access-icon {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: inline-block;
}

.access-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.access-card p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0;
}

/* Season Highlight */
.season-highlight {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border-left: 5px solid var(--color-primary);
    padding: 1.25rem 1rem;
    border-radius: 8px;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.season-icon {
    font-size: 1.5rem;
    color: #eab308; /* Darker yellow/sun color */
    flex-shrink: 0;
}

.season-content h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.season-content p {
    margin: 0;
    color: var(--color-text);
}

/* Info Cards Grid (Replaces Pricing Grid for Safari) */
.safari-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .safari-info-grid {
        grid-template-columns: 1fr;
    }
}

.info-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.8rem;
    height: 100%;
}

.info-card h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    color: var(--color-text);
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 1rem;
}

.info-card h3 i {
    color: var(--color-primary);
}

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

.info-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.info-list li::before {
    font-family: "Font Awesome 6 Free";
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1.1rem;
    position: absolute;
    left: 0;
    top: 0;
}
.info-list li:nth-child(1)::before { content: '\f017'; }
.info-list li:nth-child(2)::before { content: '\f6ec'; }
.info-list li:nth-child(3)::before { content: '\f1ad'; }
.info-list li:nth-child(4)::before { content: '\f0c0'; }
.info-list li:nth-child(5)::before { content: '\f70c'; }
.info-card.perfect-for {
    background: #f8fbff; /* Very light blue tint */
    border-color: #dbeafe;
}

.info-card.perfect-for h3 i {
    color: #3b82f6; /* Blue heart/icon */
}

.info-card.perfect-for .info-list li::before {
    color: #3b82f6;
    content: '\f00c'; /* Checkmark */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1rem;
    top: 0.3rem;
}

/* Comparison Section (Bardia vs Chitwan) - Mobile First */
.comparison-container {
    display: grid;
    grid-template-columns: 1fr; /* Stacked by default */
    gap: 2rem; 
    align-items: center;
    margin-top: 2rem;
    position: relative;
}

.comparison-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.5rem; /* User preference for mobile padding */
    position: relative;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 2;
}

/* Base card coloring (Mobile) */
.bardia-card {
    border: 2px solid #e1f5fe;
    background: linear-gradient(to bottom right, #ffffff, #f1f8e9);
}

.chitwan-card {
    border: 2px solid #fff3e0;
    background: linear-gradient(to bottom left, #ffffff, #fff8e1);
}

.vs-badge {
    /* Hidden or simplified on mobile */
    display: none; 
}

.card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: max-content; /* User preference */
}

/* Specific Badge Colors */
.bardia-card .card-badge {
    background: #2e7d32;
}

.chitwan-card .card-badge {
    background: #f57c00;
}

/* Header & List Items */
.card-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
}

.card-header i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

.bardia-card .card-header i { color: #2e7d32; }
.chitwan-card .card-header i { color: #f57c00; }

.card-header h3 {
    font-size: 1.1rem;
    margin: 0;
}

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

.comparison-list li {
    display: grid;
    grid-template-columns: 5px 90px 1fr; /* Icon | Title | Desc */
    gap: 1rem;
    align-items: baseline;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(0,0,0,0.05); /* Optional alignment guide */
}

.comparison-list li:last-child {
    border-bottom: none;
}

.comparison-list li i {
    margin-top: 3px;
    justify-self: center;
}

.comp-title {
    font-weight: 700;
    color: var(--color-text);
}

.comp-desc {
    color: var(--color-text-light);
}

/* Mobile check: if screen is very narrow, maybe adjust title width */
@media (max-width: 400px) {
    .comparison-list li {
        grid-template-columns: 20px 1fr; /* Icon | Content */
        grid-template-areas: 
            "icon title"
            "icon desc";
        gap: 0.25rem 1rem;
    }
    
    .comparison-list li i {
        grid-area: icon;
    }
    
    .comp-title {
        grid-area: title;
    }
    
    .comp-desc {
        grid-area: desc;
    }
}

.bardia-card .comparison-list li i { color: #2e7d32; }
.chitwan-card .comparison-list li i { color: #f57c00; }


/* Desktop / Tablet Landscape Overrides (Min-Width) */
@media (min-width: 1100px) {
    .comparison-container {
        grid-template-columns: 1fr auto 1fr; /* Side by Side with VS in middle */
        gap: 0;
    }

    .comparison-card {
        padding: 1.5rem; /* Reduced padding for desktop to prevent overflow */
    }

    .bardia-card {
        margin-right: -5px; /* Reduced overlap */
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding-right: 2.5rem; /* Reduced space for badge */
    }

    .chitwan-card {
        margin-left: -5px; /* Reduced overlap */
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding-left: 2.5rem; /* Reduced space for badge */
    }

    .vs-badge {
        display: flex; /* Show badge on desktop */
        background: var(--color-white);
        color: var(--color-text);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 1.2rem;
        z-index: 10;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border: 4px solid #fff;
        font-style: italic;
        position: relative;
    }

    .vs-badge::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 100%;
       height: 100%;
       border-radius: 50%;
       border: 1px solid #e0e0e0;
       z-index: -1;
    }
}