/* 1. FORCE THE BODY TO ZERO (Removes that 20px white gap) */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: clip; /* Prevents horizontal scrolling/white gaps */
}

body { margin: 0; padding: 0; font-family: 'Century Gothic', sans-serif; background-color: #FFD400; }

    header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        background-color: #bc1d23;
        transition: transform 0.4s ease-in-out; 
        transform: translateY(0);
z-index: 9999; /* Increased to stay above the jump-menu and maps */
    }

/* 1. Reset the main header grid */
.header-main {
    height: 119px;
    display: grid;
    grid-template-columns: auto 1fr auto; /* Logo | Space | Nav & Search */
    align-items: center; /* THE FIX: Centers everything vertically in the red bar */
    padding: 0 40px;
    color: #ffffff;
    box-sizing: border-box;
}

    .branding { display: flex; align-items: center; gap: 20px; }
    
    /* Brand Specs: 20pt, Normal Weight */
    .brand-name { 
        font-size: 1.8rem; 
        font-weight: normal; 
        margin: 0; 
        line-height: 1.1; 
        white-space: nowrap; 
    }
    
    /* Payoff Specs: 14pt */
    .payoff { 
        font-size: 1.2rem; 
        display: block; 
        margin-top: 2px; 
        white-space: nowrap; 
    }

    .right-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    .utils-row { display: flex; align-items: center; gap: 15px; }
    .search-container { display: flex; align-items: center; }
    .search-box { width: 200px; height: 30px; border: 1pt solid #7a1d23; padding: 0 10px; box-sizing: border-box;outline: none; }
    .search-btn { width: 35px; height: 30px; background-color: #ffcb05; border: 1pt solid #7a1d23; cursor: pointer; }

    /* DESKTOP MENU */

    .desktop-nav a { color: #ffffff; text-decoration: none; font-size: 12pt; text-transform: uppercase; white-space: nowrap; }

    /* HAMBURGER: Hidden on desktop */
    #hamburger-icon {
        display: none; 
        font-size: 35px;
        cursor: pointer;
        background: none;
        border: none;
        color: white;
    }


#mobile-menu {
    display: flex; /* Always flex, never none */
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #bc1d23;
    z-index: 15000;
    padding-top: 100px;
    overflow-y: auto;
    text-align: center;
    transform: translateY(-100%); /* Hidden off-screen by default */
    transition: transform 0.35s ease;
    visibility: hidden; /* Prevents tab-focus when hidden */
    transition: transform 0.35s ease, visibility 0.35s ease;
}

#mobile-menu.open {
    transform: translateY(0);
    visibility: visible;
}

/* Home, About, Contact links AND the Accordion Buttons */
/* Ensure all links and buttons are identical blocks */
#mobile-menu a, .accordion {
    display: block;
    width: 100%;
    padding: 20px 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 20pt;
    font-family: 'Century Gothic', sans-serif;
    border: none;
    background: none;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
    
    /* THE FIX: Force everything to the center */
    text-align: center; 
}

/* --- MOBILE ACCORDION BUTTON FIX --- */
.accordion {
    background-color: transparent;
    color: white;
    cursor: pointer;
    padding: 20px 0;
    width: 100%;
    border: none;
    outline: none;
    font-size: 20pt;
    font-family: 'Century Gothic', sans-serif;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    
    /* THE FIX: Force absolute centering */
    display: block !important;
    text-align: center !important; 
    margin: 0 auto !important;
}

/* This adds the arrow and ensures it stays centered with the word */
.accordion::before {
    content: '▾ ';
    color: #fee200;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 50pt; /* Large and visible */
    color: #ffffff !important;
    cursor: pointer;
    line-height: 1;
    z-index: 2100;
}


    /* THE STRIPS */
    .strip { height: 6px; width: 100%; }
    .black { background-color: #000000; }
    .yellow { background-color: #fff200; }
    .blue { background-color: #3c73a5; }
    .green { background-color: #36fd00; }

    /* RESPONSIVE TRIGGER */
    @media (max-width: 1100px) {
        .desktop-nav { display: none; }
        #hamburger-icon { display: block; }
    }


 /* Content Section 1 Background */
    #content-section-1b {
        background-color: #ffd400;
        width: 100%;
        min-height: 0px;
        padding-top: 67px; /* Adjusting for the y: 805 vs map end */
        padding-bottom:100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #000000;
        overflow-x: hidden;
    }


    #content-section-1 {
        background-color: #ffd400;
        width: 100%;
        min-height: 0px;
        padding-top: 10px; /* Adjusting for the y: 805 vs map end */
        padding-bottom:100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #000000;
        overflow-x: hidden;
    }

    .container-wide {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
        box-sizing: border-box;
    }

h1.main-title {
    font-family: 'Century Gothic', sans-serif;
    font-weight: normal;
    font-size: 4rem;
    line-height: 4rem;
    
    /* THE FIX: Remove absolute X positioning logic */
    display: block;      /* Ensures it behaves like a box */
    margin-left: auto;   /* Automatically calculates left space */
    margin-right: auto;  /* Automatically calculates right space */
    text-align: center;  /* Centers the text inside the box */
    
    max-width: 874px;    /* Keeps the width from your InDesign specs */
    margin-top: 10px;    /* This is your Y positioning (872px - 805px) */
    margin-bottom: 60px;
}



h2.main-h2-title {
    font-family: 'Century Gothic', sans-serif;
    font-weight: normal;
    font-size: 3rem;
    line-height: 3rem;
    
    /* THE FIX: Remove absolute X positioning logic */
    display: block;      /* Ensures it behaves like a box */
    margin-left: auto;   /* Automatically calculates left space */
    margin-right: auto;  /* Automatically calculates right space */
    text-align: center;  /* Centers the text inside the box */
    
    max-width: 874px;    /* Keeps the width from your InDesign specs */
    margin-top: 0px;    /* This is your Y positioning (872px - 805px) */
    margin-bottom: 60px;
}

    /* Paragraphs */
    .intro-p {
        font-size: 1.4rem;
        line-height: 1.8rem;
        max-width: 1200px;
        margin-bottom: 30px;
        text-align: center;
margin-left: auto;
    margin-right: auto;
    }


/* Base Mockup Styles */
    .phone-mockup {
        width: 1000px;
        height: auto;
        margin: 50px 0;
    }

    /* Hide the mobile image by default on desktop */
    .mobile-only { display: none; }

    @media (max-width: 1100px) {
    
    * 1. Force the desktop image container to take up zero space */
    #desktop-hero-container {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Fix the specific section ID (1b) padding */
    #content-section-1b {
        padding-top: 5px !important;
    }

    /* 3. Tighten the space around the mobile-only phone image */
    .mobile-only {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important; /* Reduces the gap below the phone */
    }

    /* 4. Remove the header's own top margin */
    h2.main-h2-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    
  
    }


    /* Comparison Columns */
    .product-grid {
        display: flex;
        justify-content: center;
        gap: 100px;
        margin-top: -20px;
        flex-wrap: wrap;
    }

    .product-col {
        width: 470px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    /* Yellow Circles */
    .promo-circle {
        width: 110px;
        height: 110px;
        background-color: #fff200;
        border: 5pt solid #ffffff;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        z-index: 2;
    }

    /* Product Headers & Text */
    h3.product-title { font-size: 18pt; font-weight: bold; margin: 20px 0; }
    .product-desc { font-size: 14pt; line-height: 20pt; margin-bottom: 30px; }

    /* Buttons */
    .download-btn {
        width: 330px;
        height: 84px;
        background-color: #bc1d23 !important;
        color: #ffffff !important;
        border: none;
        font-family: 'Century Gothic', sans-serif;
        font-size: 12pt;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
    .download-btn:hover { color: #e74747; !important }


    .download-btn-yellow {
        width: 330px;
        height: 84px;
        background-color: #ffdd00 !important;
        color: #000000 !important;
        border: none;
        font-family: 'Century Gothic', sans-serif;
        font-size: 12pt;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
    .download-btn-yellow:hover { color: #e74747; !important }

    .file-specs { font-size: 12pt; margin: 15px 0; line-height: 1.2; }
    .qr-code { width: 225px; height: 225px; margin-top: 20px; }

    @media (max-width: 1100px) {
        h1.main-title { font-size: 32pt; padding: 0 20px; }
        .intro-p { font-size: 18pt; padding: 0 20px; }
        .product-grid { gap: 50px; }
    }




#content-section-2 {
        background-color: #ffd400;
        width: 100%;
        padding: 80px 0; /* Changed padding to handle sides via margin */
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-x: hidden; /* Safety break for any horizontal bleeding */
    }

    h2.section-title {
        font-family: 'Century Gothic', sans-serif;
        font-weight: normal;
        font-size: 30pt;
        line-height: 36pt;
        text-align: center;
        margin-bottom: 40px;
        max-width: 841px;
        padding: 0 20px; /* Safety padding for mobile */
    }

    .section-intro {
        font-size: 14pt;
        line-height: 20pt;
        max-width: 1200px;
        margin-bottom: 60px;
        text-align: center;
        padding: 0 20px; /* Safety padding for mobile */
    }

    /* 🛠️ RESPONSIVE GRID Logic 🛠️ */
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Uses flexible 'fr' units instead of exact pixels */
        max-width: 1100px; /* Your original W: 507 + Gap: 40, rounded up */
        gap: 40px;
        justify-content: center;
        margin: 0 auto;
        padding: 0 20px; /* Gutter when grid gets tight on desktop */
        box-sizing: border-box;
    }

.card {
        background-color: #e7bd1d;
        width: 100%; 
        /* THE FIX: Remove min-height to let the card shrink-wrap the button */
        height: auto; 
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px; 
        box-sizing: border-box;
        justify-content: flex-start; 
        /* Optional: Add a subtle shadow to make the cards "pop" off the yellow background */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

.card-header-bg {
    background-color: #bc1d23 !important;
    height: 35px !important;      /* Reduced from 67px */
    margin-top: 0px !important;   /* Move it to the very top of the card */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.card-header-bg h3 {
    color: #ffffff !important;
    font-size: 1.2rem !important; /* Slightly smaller to fit the thinner bar */
    margin: 0 !important;         /* Remove all space around the text */
    padding: 0 !important;        /* Remove all internal space */
    line-height: 35px !important; /* Matches the height of the red bar exactly */
    text-align: center !important;
}

    /* The most critical fix for images */
    .card-img { 
        width: 100%; /* Flexible: stretches to the card's inner width */
        max-width: 460px; /* Your original design spec */
        height: auto; /* CRITICAL: Height is automatic to keep aspect ratio */
        aspect-ratio: 460 / 307; /* Maintains your design proportions (1.5:1) */
        margin-top: 20px; 
        object-fit: cover; /* Keeps image looking good if it stretches slightly */
    }

.card-text {
        font-size: 14pt;
        line-height: 18pt;
        width: 100%;
        max-width: 460px;
        margin-top: 20px;
        /* Set a fixed margin here to control the gap to the button */
        margin-bottom: 25px; 
        text-align: center;
        flex-grow: 0; /* Prevents the text box from growing to fill space */
    }

.card-btn {
        background-color: #bc1d23;
        color: #ffffff;
        width: 264px;
        height: 67px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        font-size: 14pt;
        text-decoration: none;
        margin-top: 10px; 
        /* This controls the EXACT gap between the button and the bottom edge */
        margin-bottom: 25px; 
        transition: color 0.3s;
    }


    .card-btn:hover { color: #ff8f8f; }

    /* 📱 MOBILE Layout (Below 1000px) 📱 */
    @media (max-width: 1000px) {
        .cards-grid { 
            grid-template-columns: 1fr; /* Stacks cards in one column */
            max-width: 600px; /* Tightens the single column view */
        }
        .card { 
            width: 100%; 
            height: auto; 
            min-height: unset; /* Height is now fluid */
            padding-bottom: 30px; 
        }
    }


footer {
        width: 100%;
        font-family: 'Century Gothic', sans-serif;
    }

    /* 1. Affiliate Disclosure Section */
    .affiliate-disclosure {
        background-color: #33689e;
        color: #ffffff;
        padding: 40px 20px;
        text-align: center;
    }

    .affiliate-disclosure h4 {
        color: #f6f723;
        font-size: 16pt; /* Adjusted for web hierarchy */
        font-weight: bold;
        margin: 0 0 15px 0;
        text-transform: uppercase;
    }

    .affiliate-disclosure p {
        font-size: 14pt; /* Balanced for readability */
        line-height: 1.5;
        max-width: 1000px;
        margin: 0 auto 15px auto;
    }

    .affiliate-disclosure a {
        color: #f6f723;
        font-weight: bold;
        text-decoration: none;
        font-size: 12pt;
        transition: color 0.3s;
    }

    .affiliate-disclosure a:hover {
        color: #ffffff;
    }

    /* 2. Main Red Footer */
    .footer-main-red {
        background-color: #bc1d23;
        padding: 40px 20px;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-logo {
        width: 100px;
        height: 100px;
        background: #ffd400; /* Placeholder if logo is transparent */
        margin-bottom: 15px;
    }

.footer-brand {
        font-size: 24pt;
        margin: 0; /* Ensures no extra space above or below */
        font-weight: normal;
        line-height: 1.1; /* Keeps the line height tight */
    }

    .footer-payoff {
        font-size: 16pt;
        margin: 2px 0 30px 0; /* 2px top margin creates the tight gap you're looking for */
        line-height: 1;
    }

    /* Footer Nav */
    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-bottom: 30px;
        max-width: 1200px;
    }

    .footer-nav a {
        color: #ffffff;
        text-decoration: none;
        font-size: 12pt; /* Adjusted for menu scale */
        text-transform: uppercase;
        white-space: nowrap;
    }

    .footer-nav a:hover {
        text-decoration: none;
    }

    /* Share Row */
    .footer-share {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }

    /* 3. Bottom Copyright Strip */
    .footer-copyright {
        background-color: #ffd400;
        color: #000000;
        text-align: center;
        padding: 20px 0;
        font-size: 12pt;
    }


    .footer-contribute {
        background-color: #19ffc1;
        color: #000000;
        text-align: center;
        padding: 20px 0;
        font-size: 12pt;
    }


    /* 3. Bottom Copyright Strip */
    .footer-copyright {
        background-color: #ffd400;
        color: #000000;
        text-align: center;
        padding: 20px 0;
        font-size: 12pt;
    }



    /* The Decorative Strips */
    .f-strip { height: 6px; width: 100%; }

    @media (max-width: 768px) {
        .footer-nav { flex-direction: column; gap: 10px; }
        .footer-brand { font-size: 24pt; }
    }

/* Container Fixes */
.map-anchor { margin-top: 143px; width: 100%; }
section { width: 100%; position: relative; } /* No more absolute positioning for sections */

/* H1 Strip */
.h1-strip { background-color: #ffd400; padding: 60px 20px; text-align: center; }
.hostel-h1 { font-size: 36pt; font-weight: normal; }

/* 3D Map */
.map-3d-section { height: auto; max-width: 1920px; margin: 0 auto; }
.map-3d-image { width: 100%; height: auto; display: block; }

/* Hostel List Grid */
.hostel-list-section { background-color: #ffd400; padding: 50px 20px; }
.list-inner-container { max-width: 1200px; margin: 0 auto; }
.columns-wrapper { display: flex; justify-content: center; gap: 100px; margin-top: 40px; }

/* Hostel Listing */
.listing-block { background-color: #e7bd1d; padding: 80px 20px; }
.listing-inner { max-width: 1200px; margin: 0 auto; }
.hostel-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 40px; }
.thumb { width: 250px; height: 250px; object-fit: cover; }

/* Final Strip */
.final-strip { background-color: #ffcb05; padding: 40px 0; text-align: center; }

/* 📱 MOBILE RESPONSIVENESS 📱 */
@media (max-width: 1000px) {
    .columns-wrapper { flex-direction: column; gap: 40px; align-items: center; }
    .hostel-h1 { font-size: 28pt; }
    .thumb { width: 45%; height: auto; aspect-ratio: 1/1; }
    .listing-content { padding: 0 10px; }
}

/* --- HOSTEL LISTING SPECIFIC STYLES --- */

.hostel-container-1200 {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px; /* Safety gutter for mobile */
    box-sizing: border-box;
}

/* SECTION: Yellow Header & Breadcrumb */
.region-header-section {
    background-color: #ffd400;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px 0;
}

.breadcrumb-nav {
    font-family: 'Century Gothic', sans-serif;
    font-size: 12pt;
    color: #000000;
    margin-bottom: 20px;
}

.breadcrumb-nav .bc-link {
    font-weight: bold;
    text-decoration: underline;
    color: #0000f6;
}

/* Region Title (H1) */
.region-title {
    font-family: 'Century Gothic', sans-serif;
    font-size: 36pt; /* Scaled for web prominence */
    font-weight: normal;
    margin: 0;
    color: #000000;
    text-transform: uppercase;
}

/* Responsive adjustments for the title */
@media (max-width: 768px) {
    .region-title { font-size: 24pt; }
    .region-header-section { min-height: auto; }
}

/* --- 3D MAP SECTION - MATCHING YELLOW --- */
.map-3d-section {
    background-color: #ffd400 !important; /* THE FIX: Matches your H1 strip */
    width: 100% !important;
    padding-bottom: 60px; /* Adds space below the map before the next section */
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.map-3d-image {
    width: 1200px !important; /* Your new requested width */
    height: auto;
    max-width: 100% !important; /* Ensures it doesn't break on mobile */
    display: block;
    /* Optional: If the JPG has a white "box" around it, 
       this ensures it blends or stays crisp */
    background-color: #ffffff; 
}

.map-image {
    width: 600px !important; /* Your new requested width */
    height: auto;
    max-width: 100% !important; /* Ensures it doesn't break on mobile */
    display: block;
    /* Optional: If the JPG has a white "box" around it, 
       this ensures it blends or stays crisp */
    background-color: #ffffff; 
    align-items: center;
}

/* --- HOSTEL LIST SECTION (Yellow Strip) --- */

.hostel-list-section {
    background-color: #ffd400;
    width: 100%;
    min-height: auto !important;
    padding: 10px 0 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* This centers the 1200px container on the page */
}

/* Force the text inside columns to align left */
.hostel-col {
    text-align: left; /* THE FIX: Ensures headers and lists align left */
}

.hostel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px; /* Adjusted gap to better match your X: 440 and X: 1011 coordinates */
    max-width: 1100px;
    width: 100%;
    margin-top: 40px;
}

/* Headers: 14pt Bold Black - Aligned Left */
.hostel-list-section h2 {
    font-family: 'Century Gothic', sans-serif;
    font-size: 18pt;
    font-weight: bold;
    color: #000000;
    margin: 30px 0 10px 0;
    text-transform: uppercase;
    text-align: left;
}

/* Lists - Aligned Left */
.hostel-list-section ul {
    list-style-type: disc;
    padding-left: 18px; /* Room for the bullet */
    margin: 0;
    text-align: left;
}

/* Update specifically for the Hostel List Links */
.hostel-list-section li a {
    font-family: 'Century Gothic', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;      /* THE FIX: Ensures Century Gothic Bold */
    color: #0000f6;         /* Your specific Blue */
    text-decoration: none;
    display: inline-block;  /* Helps with click-target sizing */
    line-height: 1.5;
}

.hostel-list-section li a:hover {
    color: #000000;         /* Optional: Hover effect for better UX */
}

/* --- HOSTEL DETAIL SECTION --- */
.hostel-detail-section {
    background-color: #e7bd1d;
    padding: 80px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Image Row */
.thumb-row {
    display: flex;
    justify-content: center;
    gap: 66px; /* Matches your coordinate spacing approx */
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.thumb-link img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border: 0px solid #ffffff;
    transition: transform 0.2s;
}

.thumb-link img:hover { transform: scale(1.02); }

/* Typography */
.detail-h2 {
    font-family: 'Century Gothic', sans-serif;
    font-size: 24pt;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
}



/* Ensure the text paragraphs don't feel "cramped" */
.detail-p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 25px;
    word-wrap: break-word; /* Prevents long URLs from breaking the layout */
    text-align: left;
    margin-bottom: 20px;
}

.detail-p strong { font-weight: bold; }

/* Links */
.blue-link {
    color: #0000e0;
    font-weight: bold;
    text-decoration: none;
}

/* Booking Buttons */
.booking-btn-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.book-btn {
    width: 268px;
    height: 92px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: 'Arial Black', sans-serif;

}



/* --- HOSTEL DETAIL SECTION - FINAL POLISH --- */
.hostel-detail-section {
    background-color: #ffcb05 !important;
    padding: 80px 0 !important;
    width: 100% !important;
    display: block;
    box-sizing: border-box; /* CRITICAL: Padding stays inside the 100% width */
}

/* THE CONTAINER: This adds the "Safe Zone" for text on mobile */
.container-wide {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
    text-align: center;
}


/* HOSTEL LISTING CONTAINER */
.container-wide-hostels {
    max-width: 900px;
    margin: 0 10px 0 10px;
    padding: 0 25px; /* THE FIX: Keeps text from hitting the screen edges */
    box-sizing: border-box;
background-color: #fff200;
    border: 0px solid #daa339 !important;
    border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}



/* IMAGE ROW: Spacing for stacked images */
.thumb-row {
    width: 100%;
    margin: 0 auto 50px auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap; /* Allows wrapping */
    justify-content: center;
    gap: 20px; /* THE FIX: Vertical and Horizontal space between images */
}

.thumb-link {
    display: block !important; /* Changed to block for cleaner stacking */
    width: 250px !important;
    height: 250px !important;
    margin: 0; /* Let the "gap" in the parent handle the spacing */
}

.thumb-link img {
    width: 100% !important;
    height: 100% !important;
    border: 0px solid #ffffff !important;
    display: block !important;
    object-fit: cover;
}

/* 🟦 THE BUTTONS: IRON-CLAD RECTANGLES */
.booking-btn-container {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important; 
    gap: 20px !important;
    margin: 80px auto !important;
    width: 100%;
}

@media (max-width: 1100px) {
    .booking-btn-container {
        margin: 20px auto !important;
    }
}

/* Force the Rectangle Shape */
#btn-booking-com, #btn-hostelworld-com, #btn-getyourguide-com {
    display: flex !important; /* Keep flex for vertical centering */
    justify-content: center !important;
    align-items: center !important;
    
    /* Exact InDesign Dimensions */
    width: 268px !important;
    min-width: 268px !important;
    height: 92px !important;
    min-height: 92px !important;
    
    /* Typography */
    text-decoration: none !important;
    font-family: 'Arial Black', sans-serif !important;
    font-size: 14pt !important;
    text-align: center !important;
    border: none !important;
    border-radius: 0 !important; /* Sharp corners like InDesign */
    cursor: pointer;
}

/* Booking.com Colors */
#btn-booking-com {
    background-color: #253c7e !important;
    color: #ffffff !important;
}
#btn-booking-com span.dot-com {
    color: #4d9ed7 !important;
}

/* Hostelworld Colors */
#btn-hostelworld-com {
    background-color: #f3724a !important;
    color: #ffffff !important;
}

/* GetYourGuide Colors */
#btn-getyourguide-com {
    background-color: #ff5534 !important;
    color: #ffffff !important;
}

/* Hover States */
#btn-booking-com:hover { color: #4d9ed7 !important; }
#btn-hostelworld-com:hover { color: #f39c8c !important; }
#btn-getyourguide-com { color: #ffffff !important; }

/* Responsive: Smaller titles on phones */
@media (max-width: 600px) {
    .detail-h2 { font-size: 20pt; text-align: center; }
    .detail-p { font-size: 14pt; } /* Slightly smaller text for readability */
}

/* --- BOTTOM BREADCRUMB STRIP --- */
.bottom-breadcrumb-strip {
    background-color: #1d4a93 !important;
    width: 100% !important;
    height: 107px !important; /* Your InDesign height */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0;
    box-sizing: border-box;
}

.bottom-breadcrumb-nav {
    font-family: 'Century Gothic', sans-serif;
    font-size: 16pt;
    color: #ffffff;
    text-align: center;
}

/* Hyperlink Styles (Reusing your Blue Bold Underlined Specs) */
.bottom-breadcrumb-nav a {
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.bottom-breadcrumb-nav span {
    margin: 0 5px;
}

/* --- LIGHTBOX OVERLAY --- */
#lightbox-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 10000; /* Above everything else */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dark transparent background */
    justify-content: center;
    align-items: center;
}

#lightbox-img {
    max-width: 90%;
    max-height: 80%;
    border: 5px solid #ffffff;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* THE CLOSE BUTTON (X) */
#lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

#lightbox-close:hover { color: #fee200; } /* Turns yellow on hover */

/* --- COMPONENT: HERO IMAGE --- */
.hero-section {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0; /* Removes any tiny ghost-padding at the bottom of images */
    overflow: hidden;
}

.hero-img-fluid {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Desktop Logic (1920x662) */
@media (min-width: 768px) {
    .hero-img-fluid {
        aspect-ratio: 1920 / 662; 
        max-height: 662px;
    }
}

/* Mobile Logic (Switch to Square) */
@media (max-width: 767px) {
    .hero-img-fluid {
        aspect-ratio: 1 / 1; /* Forces the square shape */
        width: 100%;
    }
}

/* --- COMPONENT: YELLOW BUTTON SECTION --- */
.hostel-directory-section {
    background-color: #ffd400;
    width: 100%;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.directory-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 25px; /* Mobile safety padding */
    text-align: center;
    box-sizing: border-box;
}

.directory-h1 {
    font-family: 'Century Gothic', sans-serif;
    font-size: 18pt;
    font-weight: normal;
    color: #000000;
    margin-bottom: 30px;
}

.directory-p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 16pt;
    color: #000000;
    line-height: 1.5;
    margin-bottom: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* The Blue Hyperlink Style */
.directory-p a {
    color: #0000e0;
    font-weight: bold;
    text-decoration: underline;
}

/* THE BUTTON GRID */
.button-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 26px 36px; /* Vertical gap 26px, Horizontal gap 36px */
    width: 100%;
    max-width: 1165px; /* Matches your 3 buttons + gaps */
    margin: 0 auto;
}

.red-directory-btn {
    background-color: #bc1d23;
    width: 100%;
    height: 93px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: 'Century Gothic', sans-serif;
    font-size: 16pt;
    color: #ffffff;
    transition: color 0.3s ease;
}

.red-directory-btn:hover {
    color: #ff8f8f;
}

/* RESPONSIVE: Stacking for Mobile */
@media (max-width: 1024px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    .button-grid {
        grid-template-columns: 1fr; /* 1 column on phones */
    }
    .directory-h1 { font-size: 16pt; }
}

/* --- COMPONENT: TOP PICS GRID --- */
.card-grid {
    display: grid;
    /* Forces 2 columns of 507px on desktop */
    grid-template-columns: repeat(2, 507px); 
    /* Gap: 46px horizontal and vertical */
    gap: 46px; 
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* THE CARD - This fixes the background and centering */
.hostel-card {
    background-color: #fcaf17 !important; 
    width: 507px;
    /* CHANGE 1: Remove the 776px fixed height so it hugs the content */
    height: 100%; 
    /* CHANGE 2: Sets top/sides to 24px, but the bottom to 30px to control space below the button */
    padding: 24px 24px 30px 24px; 
    display: flex;
    flex-direction: column;
    align-items: center;    
    text-align: center;     
    box-sizing: border-box;
    position: relative;
}

/* Internal Elements */
.card-location-tag {
    background-color: #bc1d23;
    width: 460px;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
color: #ffffff;
}


.hostel-card-header {
    color: #000000;
    /* CHANGE 1: Reduce this height (was likely 50px or 60px) */
    height: 20px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    /* CHANGE 2: Reduce margin-top to move it closer to the image */
    margin-top: 15px;
    margin-bottom: 0px !important;
    width: 100%;
    font-size: 1.4rem !important;
}

/* Line 1269 (The heading inside the bar) */
.hostel-card-header h3 {
    margin: 0 !important; /* This kills the "ghost" space above and below the text */
    padding: 0;
    font-size: 1.5rem !important;
    font-weight: bold;
    text-transform: uppercase;
}

.card-img {
    width: 460px;
    height: 307px;
    object-fit: cover;
    margin-bottom: 10px;
}

.hostel-card p {
    width: 460px;
    font-family: 'Century Gothic', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0px;
}

.card-btn {
    background-color: #bc1d23;
    width: 264px;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff !important;
    text-decoration: none;
    /* CHANGE 3: Forces exactly 25px of space ABOVE the button */
    margin-top: 25px !important; 
    /* CHANGE 4: Kills any inherited bottom margins */
    margin-bottom: 0 !important; 
}

/* RESPONSIVE STACKING */
@media (max-width: 1100px) {
    .card-grid {
        grid-template-columns: 1fr;
        max-width: 507px;
    }
}

/* --- COMPONENT: REGIONS MAP HERO --- */
.tm-hero-map-section {
    width: 100%;
    line-height: 0;
    overflow: hidden;
margin-top:143px;
}

.tm-hero-map-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.tm-hero-map-img-2 {
    width: 100%;
    height: 1230 px;
    display: block;
    object-fit: cover;
}

@media (min-width: 768px) { .tm-hero-map-img { aspect-ratio: 1920 / 634; } }
@media (max-width: 767px) { .tm-hero-map-img { aspect-ratio: 1 / 1; } }



/* --- COMPONENT: TABLE MOUNTAIN HERO --- */
.tm-hero-section {
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.tm-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.tm-hero-img-2 {
    width: 100%;
    height: 1230 px;
    display: block;
    object-fit: cover;
}

@media (min-width: 768px) { .tm-hero-img { aspect-ratio: 1920 / 780; } }
@media (max-width: 767px) { .tm-hero-img { aspect-ratio: 1 / 1; } }


/* --- COMPONENT: OVERLAY CARD SECTION --- */
.about-section {
    background-color: #fee200 !important;
    width: 100%;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.about-h2-title {
    font-family: 'Century Gothic', sans-serif;
    font-size: 24pt;
    margin-bottom: 30px;
    text-align: center;
}

.about-p-text {
    font-family: 'Century Gothic', sans-serif;
    font-size: 14pt;
    max-width: 1200px;
    padding: 0 40px;
    text-align: center;
    margin-bottom: 60px;
}

/* THE GRID */
.overlay-grid {
    display: grid;
    grid-template-columns: repeat(3, 380px);
    gap: 30px;
    justify-content: center;
}

/* THE CARD CONTAINER */
.card-wrapper {
    width: 380px;
    height: 380px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    overflow: hidden;
}

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

/* THE BACKGROUND IMAGE */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #666; /* Placeholder grey if image fails */
    object-fit: cover;
    z-index: 1;
}

/* THE 60% TRANSPARENT SQUARE */
.glass-box {
    position: relative;
    z-index: 2;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.6); /* 60% Transparency */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical Center */
    align-items: center;     /* Horizontal Center */
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.glass-box h3 {
    font-family: 'Century Gothic', sans-serif;
    font-size: 18pt;
    margin: 0 0 10px 0;
}

.glass-box p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 14pt;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

/* THE RED BUTTON */
.red-explore-btn {
    background-color: #bc1d23;
    width: 212px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Century Gothic', sans-serif;
    font-size: 12pt;
    transition: color 0.3s ease;
}

.red-explore-btn:hover {
    color: #da8293 !important;
}

/* MOBILE STACKING */
@media (max-width: 1200px) {
    .overlay-grid { grid-template-columns: repeat(2, 380px); }
}
@media (max-width: 800px) {
    .overlay-grid { grid-template-columns: 1fr; }
}


.pdf-download-section {
    background-color: #ffe300 !important;
    width: 100%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Keeps the phone image centered at the bottom */
    box-sizing: border-box;
}

.pdf-row-container {
    max-width: 1400px;
    width: 100%;
    display: flex;
    flex-direction: row;      /* Side-by-side on desktop */
    justify-content: center;  /* Centers the whole group */
    align-items: center;      /* THE FIX: Vertically aligns centers of QR, Text, and Button */
    gap: 50px;                /* Space between the three elements */
    padding: 0 40px;
    margin-bottom: 50px;      /* Space before the phone image */
    box-sizing: border-box;
}

.pdf-qr-wrapper {
    flex: 0 0 174px;
}

.pdf-text-main {
    flex: 0 1 600px; /* Text can shrink but won't exceed 600px */
    text-align: center;
}

.pdf-btn-wrapper {
    flex: 0 0 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Typography & Buttons */
.pdf-h2 {
    font-family: 'Century Gothic', sans-serif;
    font-size: 24pt;
    font-weight: bold;
    margin: 0 0 15px 0;
}

.pdf-p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 14pt;
    margin: 0;
}

.pdf-download-btn {
    background-color: #bc1d23;
    width: 330px;
    height: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Century Gothic', sans-serif;
    font-size: 12pt;
    transition: color 0.3s ease;
}

.pdf-download-btn:hover {
    color: #ff8f8f !important;
}

.btn-subtext {
    font-family: 'Century Gothic', sans-serif;
    font-size: 12pt;
    margin: 10px 0 0 0;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1100px) {
    .pdf-row-container {
        flex-direction: column; /* Stacks them on smaller screens */
        gap: 40px;
    }
    .pdf-text-main {
        max-width: 100%;
    }
}

/* --- COMPONENT: HORIZONTAL GALLERY --- */
.gallery-section {
    background-color: #000000;
    width: 100%;
    padding: 5px 0; /* Reduced top/bottom padding */
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.gallery-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* THE FIX: Bigger, even black lines between images */
    gap: 10px; 
    padding: 0; 
    scrollbar-width: none;
}

.gallery-container::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    flex: 0 0 150px;
    height: 150px;
    cursor: pointer;
    object-fit: cover;
    display: block;
}

/* THE FIX: Buttons now overlay the images */
.gallery-nav-btn {
    position: absolute;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    color: white;
    border: none;
    font-size: 40px;
    cursor: pointer;
    width: 60px;
    height: 150px; /* Matches image height */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

.gallery-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.btn-left { left: 0; }
.btn-right { right: 0; }

.jump-menu-section { background: #000; width: 100%; position: relative; display: flex; align-items: center; padding: 10px 0; }

/* --- THE SCROLLING STRIP --- */
.jump-menu-container {
position: relative;   /* This MUST be here for z-index to work */
    z-index: 1001;        /* Higher than Mama Africa (900) */
    display: flex !important;
    flex-wrap: nowrap !important; 
    overflow-x: auto !important; 
    gap: 15px;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
position: relative; /* or fixed/absolute depending on your layout */
    z-index: 10000 !important; /* Higher than Mama Africa's 900 */

scrollbar-width: auto; /* For Firefox */
    scrollbar-color: #999 #333; /* Black handle, Grey track for Firefox */
    padding-bottom: 10px; /* Adds space so the scrollbar doesn't touch the cards */
    -ms-overflow-style: auto; /* For IE/Edge */
    
    /* Remove any 'justify-content: center' if you have it here, 
       as it prevents scrolling in many browsers */
}



/* --- THE CARDS --- */
.jump-card {
    flex: 0 0 auto !important; /* Prevents cards from squishing */
position: relative; /* THIS IS THE MAGIC FIX */
    display: block;
    flex: 0 0 auto;
    width: 150px;       /* Or whatever your card width is */
    border-radius: 0px; /* Optional: keeps corners neat */
    overflow: hidden;
    text-decoration: none;
}

/* --- THE ACTIVE ITEM --- */
.active-hostel {
    border: 2px solid #bc1d23 !important;
    font-weight: bold !important;
    border-radius: 15px !important; /* THE FIX: Rounded corners */
    padding: 8px 15px;
    background-color: rgba(188, 29, 35, 0.1); /* Optional: very light red tint */
}

.jump-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- ACTIVE CARD: red border on the image --- */
.jump-card--active .jump-card-img {
    outline: 5px solid #FF0000;
    outline-offset: -5px;
}

.jump-card-overlay { 
    position: absolute; bottom: 0px; left: 0; width: 100%;
    background: rgba(0, 0, 0, 0.7); color: #fff; 
    font-family: 'Century Gothic', sans-serif; font-size: 10pt !important; 
    text-align: center; padding: 5px 0 !important; font-weight: bold; 
}


.jump-arrow { position: absolute; z-index: 10; background: rgba(0,0,0,0.8); color: #fff; border: none; width: 40px; height: 150px; cursor: pointer; font-size: 24px; }
.btn-l { left: 0; } .btn-r { right: 0; }


/* HERO SECTION */
.hero-viewer {
    width: 100%;
    height: 790px;
    overflow: hidden;
    background: #000;
}

#main-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* THUMBNAIL TRACK */
.thumb-nav-section {
    background-color: #000;
    width: 100%;
    padding: 10px 0; /* 10px black line above/below */
    position: relative;
    display: flex;
    align-items: center;
}

.thumb-container {
    display: flex;
    flex-direction: row;     /* Forces horizontal line */
    flex-wrap: nowrap;       /* Prevents images from dropping to a new line */
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;               /* The ONLY space that should exist */
    padding: 0 50px;
    scrollbar-width: none;
    align-items: center;     /* Keeps them vertically centered in the black bar */
}


.thumb-container::-webkit-scrollbar { display: none; }

.thumb-item {
    flex: 0 0 100px;         /* Forces width to stay exactly 100px */
    width: 100px;
    height: 100px;
    cursor: pointer;
    object-fit: cover;
    display: block;          /* Removes the "inline" behavior that causes gaps */
    border: none;
    padding: 0;
    margin: 0;               /* Ensures no extra margin is creeping in */
}

.thumb-item:hover { opacity: 0.7; }

/* ARROW BUTTONS */
.nav-arrow {
    position: absolute;
    z-index: 10;
    background: rgba(0,0,0,0.8);
    color: #fff;
    border: none;
    width: 40px;
    height: 100px;
    cursor: pointer;
    font-size: 24px;
}

.arrow-l { left: 0; }
.arrow-r { right: 0; }

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .hero-viewer {
        height: 100vw; /* Square on mobile */
    }
    .thumb-item {
        flex: 0 0 80px;
        height: 80px;
    }
    .nav-arrow { height: 80px; }
}


/* --- MEGA MENU BASE --- */
/* 2. Fix the Navigation bar container */
.desktop-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* Keeps Home/About/Regions in a straight line */
    gap: 30px;
    height: 100%; /* Spans the full height to prevent gaps */
}

/* 3. Fix the individual items (Regions/Advice) */
.nav-item {
    position: static;
    height: 119px; 
    display: flex;
    align-items: center; /* Centers the words within the 119px box */
}

/* Ensure the mega menu still starts exactly at the bottom of the red header */
.mega-menu {
    display: none;
    position: fixed;
    top: 119px; 
    left: 0;
    width: 100%;
    background: #ffcb05;
    padding: 30px 10%;
    box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border-top: 5px solid #000000;
    border-bottom: 5px solid #000000;
    z-index: 10000;
}


/* This ensures that as long as the mouse is anywhere in the vertical 
   space of the header OR the menu, it stays open */
.nav-item:hover .mega-menu,
.mega-menu:hover {
    display: grid !important;
}

/* Ensure the columns don't get too squashed on smaller laptops */
.mega-col {
    min-width: 200px;
}

/* --- THE HOVER TRIGGER --- */
.nav-item:hover .mega-menu {
    display: grid; /* Shows the columns when hovering */
}

/* --- MENU STYLING --- */
.mega-col h3 {
    color: #bc1d23; /* Header Red */
    font-size: 16pt;
    margin-bottom: 18px;
    border-bottom: 1px solid #000000;
    padding-bottom: 5px;
}

.mega-col a {
    display: block;
    color: #000000 !important; /* Dark text for readability on white background */
    padding: 8px 0;
    font-size: 16pt;
    text-decoration: none;
}

.mega-col a:hover {
    color: #FFFFFF !important;
    text-decoration: none;
}

/* 1. Header Grid Alignment */
.header-main {
    height: 119px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* This locks everyone to the center line */
    padding: 0 40px;
    background-color: #bc1d23;
}

.branding {
    display: flex;
    align-items: center; /* Centers the logo with the text */
    gap: 15px;
}

/* Ensure the payoff line doesn't push the branding down */
.brand-name-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



/* THE WRAPPER - This is usually where the white gap lives */
.hostel-jump-section {
    display: flex !important;
    align-items: center;
    background-color: #000000 !important; /* Pure black */
    width: 100%;
    height: 80px;           /* Fixed height */
    margin: 40px 0;         /* This creates space OUTSIDE the bar */
    padding: 0 !important;  /* This kills space INSIDE the bar */
    overflow: hidden;
    box-sizing: border-box;
    margin-top:0px;
    margin-bottom:0px;
}

/* THE SCROLLER - Eliminating internal line-height gaps */
.hostel-jump-container {
    display: flex;
    align-items: center;
    height: 100%;
    flex-grow: 1;
    overflow-x: auto;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 10px 0 0px;
    scrollbar-width: none;
    background-color: #000000; /* Matching background */
}

.hostel-jump-container::-webkit-scrollbar {
    display: none;
}

/* THE LINKS - Forcing them to stay inside the 50px */
.hostel-jump-container a {
    font-size: 16pt; /* Increase this number for larger text, decrease for smaller */
    color: #001eff; /* Blue */
    text-decoration: none;
    font-weight: regular;
    padding: 0 20px;
    margin: 0;
    line-height: 50px; /* Vertically centers the text within the 50px height */
    display: inline-block;
    vertical-align: middle;
}

/* THE BUTTONS - Forcing them to be 100% height of the black bar */
.jump-btn {
    background-color: #000000 !important;
    color: #fee200; /* Kodak Yellow */
    border: none;
    height: 50px;   /* Explicitly match the section height */
    padding: 0 20px;
    cursor: pointer;
    font-size: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Styling the 'Read More' Button */
details summary {
    list-style: none; /* Removes the default arrow */
    cursor: pointer;
    background-color: #bc1d23; /* Kodak Yellow */
    color: #ffffff;
    padding: 12px 20px;
    font-weight: regular;
    text-align: center;
    border: 0px solid #000;
    border-radius: 0px;
    display: inline-block;
    transition: all 0.2s ease;
    margin-top: 10px;
    margin-bottom: 70px;
}

@media (max-width: 1100px) {
    details summary {
        margin-bottom: 15px;
    }
    .tour-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .region-header-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

details summary:hover {
    background-color: #bc1d23;
    color: #e76b70;
}

/* The Expanded Area */
details[open] summary {
    background-color: #d40000; /* International Flag Red when open */
    color: #fff;
    margin-bottom: 15px;
}

.hostel-specs {
    background: #f9f9f9;
    border-left: 5px solid #FFD700;
    padding: 20px;
    margin-top: -5px;
    border-radius: 0 0 5px 5px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

/* Styling your Scorecard Rows */
.rating-row {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}


.yellow-menu-backdrop {
    display: none;
}

@media (min-width: 768px) {
    .yellow-menu-backdrop {
        display: block;
        background-color: #ffd400; /* Matches your About section yellow */
        width: 100%;
        height: 140px; 
        margin-bottom: -140px; 
    }
}

#quick-jump-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bc1d23 !important; 
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Soft shadow for depth */
    border: none !important;              /* Removed border */
    box-sizing: border-box;
}

#quick-jump-menu a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: normal !important;        /* 16pt Regular */
    font-size: 1rem !important;
    text-transform: uppercase;
    padding: 10px 30px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

#quick-jump-menu a:last-child {
    border-right: none;
}

/* DESKTOP: Square Sticky Bar */
@media (min-width: 768px) {
    #quick-jump-menu {
        position: -webkit-sticky;
        position: sticky;
        top: 83px !important;
        width: max-content !important;
        margin: 40px auto !important;
        border-radius: 0 !important;      /* Removed rounded corners */
        height: 60px;
    }
}


@media (max-width: 767px) {
    #quick-jump-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 65px;
        border-radius: 0 !important;      /* Removed rounded corners */
    }
        #quick-jump-menu a {
        font-size: 16pt !important;
        padding: 10px 15px;
    }
    body { padding-bottom: 70px; } 
}


#quick-jump-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bc1d23 !important; 
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: none !important;              /* Removed border */
    box-sizing: border-box;
    border-radius: 0 !important;           /* Square corners */
}

#quick-jump-menu a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: normal !important;        /* 16pt Regular */
    font-size: 1rem !important;
    text-transform: uppercase;
    padding: 10px 30px;
}



@media (min-width: 1101px) {
    #hamburger-icon { display: none; }
    .desktop-nav { display: block; }
    
    #quick-jump-menu {
        position: -webkit-sticky;
        position: sticky;
        top: 130px !important;
        width: max-content !important;
        margin: 40px auto !important;
        height: 60px;
    }
}

/* MOBILE & TABLET (1100px and below) */
@media (max-width: 1100px) {
    /* Hide desktop nav and show hamburger */
    .desktop-nav { display: none !important; }
    #hamburger-icon { display: block !important; }

    /* Adjust header grid so logo and hamburger stay on ends */
    .header-main {
        grid-template-columns: 1fr auto; 
        padding: 0 20px;
    }

    /* Square Bottom Bar for Mobile */
    #quick-jump-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 65px;
        margin: 0 !important;
        z-index: 3000;
    }
    
    /* Extra padding so the bottom bar doesn't cover content */
    body { padding-bottom: 70px; } 

    /* Hide the yellow backdrop on mobile since menu moves to bottom */
    .yellow-menu-backdrop { display: none; }
}


.desktop-nav {
    display: flex;
    flex-direction: row; /* Forces links into a line */
    gap: 20px;           /* Adds space between links */
    align-items: center;
}

.desktop-nav a { 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 12pt; 
    text-transform: uppercase; 
    white-space: nowrap; 
}

/* --- UPDATE: The Square Quick-Jump Menu --- */
#quick-jump-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bc1d23 !important; 
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: none !important;              /* 1. Remove border */
    border-radius: 0 !important;           /* 2. Remove rounded corners (Square) */
    box-sizing: border-box;
}

#quick-jump-menu a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: normal !important;        /* 3. Regular weight */
    font-size: 1rem !important;            /* 4. 16pt size */
    text-align: center;
    text-transform: uppercase;
    padding: 10px 30px;
    border-right: 2px solid rgba(255,255,255,0.3);
}

#quick-jump-menu-2 a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: normal !important;        /* 3. Regular weight */
    font-size: 0.8rem !important;            /* 4. 16pt size */
    text-align: center;
    text-transform: uppercase;
    padding: 10px 30px;
    border-right: 2px solid rgba(255,255,255,0.3);
}

#quick-jump-menu a:last-child {
    border-right: none;
}

#quick-jump-menu-2 a:last-child {
    border-right: none;
}

/* DESKTOP: Sticky behavior above 1100px */
@media (min-width: 1101px) {
    #quick-jump-menu {
        position: -webkit-sticky;
        position: sticky;
        top: 50px !important;
        width: max-content !important;
        margin: 40px auto !important;
        height: 60px;
    }
}

/* MOBILE: Fixed bottom bar below 1100px */
@media (max-width: 1100px) {
    #quick-jump-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 65px;
        border-radius: 0 !important;
    }
    body { padding-bottom: 70px; } 
}


.parallax-window {
    /* The height of the photo section */
    height: 900px;

    /* The Parallax Magic */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Centering the optional text */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.parallax-window-2 {
    /* The height of the photo section */
    height: 660px;

    /* The Parallax Magic */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Centering the optional text */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.parallax-window-3 {
    /* The height of the photo section */
    height: 1400px;

    /* The Parallax Magic */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Centering the optional text */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.parallax-window-4 {
    /* The height of the photo section */
    height: 1100px;

    /* The Parallax Magic */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Centering the optional text */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.parallax-window-4 {
    /* The height of the photo section */
    height: 600px;

    /* The Parallax Magic */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Centering the optional text */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.parallax-text {
    color: white;
    font-size: 24pt;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* MOBILE FIX: Parallax 'fixed' breaks on iOS and causes massive zoom */
@media (max-width: 1100px) {
    .parallax-window,
    .parallax-window-2,
    .parallax-window-3,
    .parallax-window-4,
    .parallax-section {
        background-attachment: scroll;
        background-size: 250%;
        background-repeat: no-repeat;
        background-color: #000;
        height: auto;
        min-height: 400px;
    }
}


/* Container styling */
.back-to-top {
  position: fixed;
  bottom: 30px; /* Distance from bottom */
  right: 30px;  /* Distance from right */
  width: 50px;
  height: 50px;
  background-color: #d32f2f; /* Red background */
  border: 2px solid #ffeb3b; /* Yellow border */
  border-radius: 50%;        /* Makes it round */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  /* Initial state: hidden */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* The arrow (drawn with CSS borders) */
.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #ffffff; /* Yellow arrow */
  margin-bottom: 4px; /* Slight adjustment for visual center */

}

/* Hover effect */
.back-to-top:hover {
  background-color: #5f8950; /* Black background on hover */
  transform: translateY(-5px); /* Gentle lift */
}

/* Visibility class triggered by JS */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 190px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
}

.cookie-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #1a1a1a; /* Dark background to pop */
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none; /* Hidden by default */
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
    min-width: 300px;
}

.cookie-content a {
    color: #ffd700; /* Use a highlight color like Kodak Yellow */
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: 0.2s;
}

.accept { background: #ffd700; color: #000; }
.decline { background: #444; color: #fff; }

.cookie-btn:hover { opacity: 0.9; transform: translateY(-1px); }


/* This targets all unordered lists on your site */
ul {
    text-align: left;
    display: inline-block; /* Keeps the list block from stretching if centered */
    vertical-align: top;
    width: 100%; /* Ensures it takes up the full container width */
}

li {
    text-align: left;
    margin-left: 20px; /* Gives the bullets some breathing room */
}


/* 1. The main section container */
.tour-section {
    background-color: #ffd400; /* Match your site's gold */
    width: 100%;
    box-sizing: border-box;
}

/* 2. The grid setup */
.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px); 
    gap: 25px;
    margin: 0 auto;
    justify-content: center; /* Centers the cards */
    max-width: 1100px;
}

/* 3. The card design */
.tour-card {
    text-decoration: none;
    color: #333;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff; /* White card on yellow bg looks crisp */
    width: 300px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.tour-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* 4. The Image & Attribution */
.tour-image {
    position: relative;
    height: 180px;
    background-size: cover;
    background-position: center;
}

.img-attr {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 9px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
}

.tour-info {
    padding: 20px;
}

.tour-info h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.tour-price {
    font-weight: bold;
    color: #27ae60; /* Professional green for pricing */
    margin: 0;
}

/* 5. Mobile Responsiveness */
@media (max-width: 350px) {
    .tour-grid { grid-template-columns: 1fr; }
    .tour-card { width: 100%; }
}

.parallax-section {
    position: relative; /* Essential to anchor the credit */
    min-height: 400px; /* Or whatever height you are using */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-attribution {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7); /* Subtle white */
    background: rgba(0, 0, 0, 0.4); /* Darker backing so it's readable over light sky */
    padding: 3px 8px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    z-index: 5;
}

.parallax-attribution a {
    color: #fff;
    text-decoration: underline;
}

/* This is for your big Parallax Backgrounds */
.parallax-section {
    position: relative !important; /* Forces the container to be the 'anchor' */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.parallax-attribution {
    position: absolute;
    bottom: 15px; /* Distance from bottom */
    right: 15px;  /* Distance from right */
    background: rgba(0, 0, 0, 0.7); /* Darker black so it stands out */
    color: #ffffff !important;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 999; /* Makes sure it stays on TOP of the image */
    font-family: Arial, sans-serif;
    pointer-events: auto; /* Ensures the link is clickable */
}

.parallax-attribution a {
    color: #ffd700; /* Your site yellow so the link is visible */
    text-decoration: underline;
}

/* Styles for the map fallback image */
.map-fallback-img {
    width: 100%;
    height: auto; /* Maintains aspect ratio of the images */
    display: block;
}

/* 1. Fix the top margin and centering */
#map-visual {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    line-height: 0; /* Extra insurance against bottom gaps */
}

/* 2. Fix the white strip below the map */
#region-map iframe {
    display: block; /* Removes the "text-line" gap at the bottom */
    width: 100%;
    margin-bottom: 0;
}

#map-fallback img {
    display: block;
    width: 100%;
}

@media (max-width: 1100px) {
    /* 1. Hide desktop nav, show hamburger */
    .desktop-nav { display: none !important; }
    #hamburger-icon { display: block !important; }

    /* 2. The Centered Stack Layout */
    .header-main {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative; /* Crucial for floating the hamburger */
        height: auto; /* Lets the red bar grow to fit the stacked items */
        padding: 15px 20px 20px 20px;
    }

    /* 3. Stack the Logo and Text */
    .branding {
        display: flex;
        flex-direction: column; /* Stacks logo on top of text */
        align-items: center;
        gap: 5px;
        text-align: center;
    }

    /* 4. Scale down the Logo */
    .branding img {
        width: 55px !important; /* Overrides your inline HTML style */
        height: 55px !important;
    }

    /* 5. Scale down the Text */
    .brand-name {
        font-size: 1.4rem; /* Scales it to fit narrow phone screens */
        white-space: normal; /* Allows it to wrap if absolutely necessary */
        line-height: 1.2;
    }
    
    .payoff {
        font-size: 0.9rem;
    }

    /* 6. Float the Hamburger Menu to the Top Right */
    .right-stack {
        position: absolute;
        top: 20px;
        right: 20px;
        margin: 0;
        padding: 0;
    }
    
    #hamburger-icon {
        font-size: 32px;
        margin-top: 5px;
    }
    
    /* ... Keep your other existing mobile rules here (like the bottom jump menu) ... */
}


/* Home, About, Contact links AND the Accordion Buttons */
#mobile-menu a, .accordion {
    display: block;
    width: 100%;
    padding: 20px 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 16pt; /* Changed from 20pt */
    font-family: 'Century Gothic', sans-serif;
    /* ... rest of your code stays the same ... */
}


/* --- FIX FOR GOOGLE MAP OVERLAP --- */
@media screen and (max-width: 900px) {

    #map-visual, .map-container, #region-map {
        margin-top: 27px !important; 
    }

    .map-section {
        padding-top: 20px;
    }


/* MOBILE MENU — Accordion & Panel */
#mobile-menu a, .accordion {
    display: block;
    width: 100%;
    padding: 18px 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 15pt;
    font-family: 'Century Gothic', sans-serif;
    border: none;
    background: none;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}

.accordion {
    background-color: transparent;
    outline: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: block !important;
    text-align: center !important;
}

.accordion::before {
    content: '▾ ';
    color: #fee200;
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: #90161a;
    overflow: visible;
}

.panel a {
    display: block;
    padding: 12px 0;
    font-size: 11pt;
    color: #eee;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}


@media (max-width: 767px) {
    .jump-card {
        width: 100px;
    }
    .jump-card-overlay {
        font-size: 7pt !important;
        padding: 5px 0;
    }
}


@media (max-width: 1100px) {
    h1.main-title {
        font-size: 2.5rem !important;
        line-height: 2.7rem !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    h2.main-title {
        font-size: 2.5rem !important;
        line-height: 2.7rem !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    h3.main-title {
        font-size: 2.5rem !important;
        line-height: 2.7rem !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    h4.main-title {
        font-size: 1.1rem !important;
        line-height: 1.3rem !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    .intro-p {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 1100px) {
    .jump-card-overlay {
        font-size: 0.7rem !important;
    }
    #quick-jump-menu a {
        font-size: 1rem !important;
        padding: 10px 10px;
    }
}
@media (max-width: 1100px) {
    .hostel-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    .hostel-col {
        width: 100% !important;
    }
    .hostel-list-section ul {
        padding-left: 20px !important;
    }
    .hostel-list-section li {
        margin-bottom: 6px !important;
    }
    .hostel-list-section li a {
        display: inline !important;
        line-height: 1.6 !important;
    }
    #quick-jump-menu a {
        font-size: 1rem !important;
        padding: 10px 10px;
    }
}
@media (max-width: 1100px) {
    .affiliate-disclosure {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .footer-main-red {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    footer {
        overflow-x: hidden !important;
    }
    .footer-copyright {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
    #quick-jump-menu a {
        font-size: 0.8rem !important;
        padding: 10px 10px;
    }
}
@media (max-width: 1100px) {
    #gyg-heading {
        font-size: 1.9rem !important;
        line-height: 2.3rem !important;
        padding: 0 15px !important;
        margin-top: 0px !important;
    }
}

@media (max-width: 1100px) {
    .product-col {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 15px !important;
    }
    .product-grid {
        gap: 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1100px) {
    .hostel-card {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    .card-location-tag {
        width: 100% !important;
    }
    .card-img {
        width: 100% !important;
        height: auto !important;
    }
    .hostel-card p {
        width: 100% !important;
    }
    .card-grid {
        max-width: 100% !important;
        padding: 20px 15px !important;
    }
}

@media (max-width: 1100px) {
    .top-pics-section {
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .card-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 20px 15px !important;
    }
}

@media (max-width: 1100px) {
    .region-header-section .intro-p[style] {
        margin-top: 20px !important;
    }
    .region-header-section .download-btn[style] {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }
}


/* --- ADVICE PAGE JUMP MENU CLONE --- */
.advice-menu-section {
    background: #000;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.advice-menu-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 15px;
    padding: 10px 20px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome/Safari */
.advice-menu-container::-webkit-scrollbar {
    display: none;
}

.advice-card {
    flex: 0 0 auto !important;
    position: relative;
    display: block;
    width: 150px;
    height: 150px; /* Force the square shape from your original CSS */
    overflow: hidden;
    text-decoration: none !important;
}

.advice-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.advice-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-family: 'Century Gothic', sans-serif;
    font-size: 10pt !important;
    text-align: center;
    padding: 5px 0 !important;
    font-weight: bold;
}

/* Duplicating your exact mobile overrides */
@media (max-width: 767px) {
    .advice-card {
        width: 100px;
        height: 100px;
    }
    .advice-card-overlay {
        font-size: 7pt !important;
    }
}


/* This forces the container to align to the left, regardless of JS */
#advice-jump-fixed {
    justify-content: flex-start !important;
    scroll-snap-type: none !important;
}


/* --- THE FILM STRIP FIX --- */
#advice-jump-fixed {
    /* 1. The Layout */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 15px;
    padding: 30px 20px 30px 20px !important; /* Extra padding top/bottom for the holes */
    
    /* 2. The Film Holes (Top and Bottom) */
    background-color: #000;
    background-image: 
        linear-gradient(to right, #ffdc00 0px, #ffdc00 12px, transparent 12px, transparent 24px),
        linear-gradient(to right, #ffdc00 0px, #ffdc00 12px, transparent 12px, transparent 24px);
    background-repeat: repeat-x, repeat-x;
    background-size: 24px 12px, 24px 12px; /* 12px squares */
    background-position: 0 8px, 0 calc(100% - 8px); /* 8px from top and bottom */
}

/* Ensure the cards don't overlap the holes */
.jump-card {
    margin-top: 5px;
    margin-bottom: 5px;
}


@media (max-width: 1100px) {
    #quick-jump-menu {
        justify-content: space-evenly !important;
    }
    #quick-jump-menu a {
        font-size: 1rem !important;
        padding: 10px 0 !important;
        flex: 1 !important;
        text-align: center !important;
        border-right: 1px solid rgba(255,255,255,0.3) !important;
    }
    #quick-jump-menu a:last-child {
        border-right: none !important;
    }
}


@media (max-width: 1100px) {
    .jump-card {
        width: 140px !important;
    }
}

@media (min-width: 1101px) {
    #quick-jump-menu a {
        font-size: 1rem !important;
    }
}



body:not(:has(#quick-jump-menu)) {
    padding-bottom: 0 !important;
}


/* FINAL OVERRIDE BLOCK - Place at the very end of style.css */
@media (max-width: 1100px) {
    /* 1. Remove the gap from the section itself */
    #content-section-1 {
        padding-top: 0 !important;
    }

    /* 2. Kill the 30px margin below the hero image container */
    #desktop-hero-container {
        margin-bottom: 0 !important;
    }

    /* 3. Remove any remaining top margin on the headline */
    h2.main-h2-title {
        margin-top: 0 !important;
    }

    /* 4. Ensure the mobile image doesn't have its own margins */
    .mobile-only {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}



/* HORIZONTAL REGIONAL MENU MOBILE FIX - COMPACT VERSION */
@media (max-width: 1100px) {

    /* 1. Collapse the empty black space left behind by moving the menu */
    .jump-menu-section {
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* 2. Pin the Regional Menu & Adjust Background/Padding */
    #top-jump {
        position: fixed !important;
        bottom: 65px !important; /* Sits exactly on top of the 65px red menu */
        left: 0 !important;
        width: 100vw !important;
        z-index: 9998 !important;
        margin: 0 !important;
        
        /* Reduce the black space above and below the images */
        padding-top: 12px !important; 
        padding-bottom: 5px !important;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.4) !important;
        
        /* Make the yellow film holes smaller (8px tall) and push them to the very edges */
        background-size: 24px 8px, 24px 8px !important; 
        background-position: 0 2px, 0 calc(100% - 2px) !important;
    }

    /* 3. Shrink the images by making the cards narrower */
    #top-jump .jump-card {
        width: 95px !important; /* Shrunk down from 140px */
        min-width: 95px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Ensure the image scales correctly within the new smaller card */
    #top-jump .jump-card img {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 2px !important; /* Tighter gap between image and text */
    }

    /* 4. Keep the text legible but compact */
    #top-jump .jump-card span,
    #top-jump .jump-card div {
        font-size: 11px !important; 
        line-height: 1.1 !important;
        margin-top: 0 !important;
    }

    /* 5. Add extra padding to the bottom of the page so nothing is hidden */
    body {
        padding-bottom: 200px !important;
    }
}


/* Add to the end of your @media (max-width: 1100px) block */
#quick-jump-menu, #top-jump {
    transition: transform 0.3s ease-in-out !important;
}

.hide-bottom-menu {
    transform: translateY(150%) !important;
}


/* 1. Push the attribution text back */
.parallax-attribution {
    position: absolute !important;
    z-index: 5 !important; /* Low number so it stays behind menus */
}

/* 2. Ensure the navigation menus are definitely in front */
#top-jump {
    z-index: 9998 !important; /* High number */
}

#quick-jump-menu {
    z-index: 9999 !important; /* Highest number */
}

/* 3. If the attribution is still showing over the menu, 
      we must ensure the parallax container isn't forcing it forward */
.parallax-window, .parallax-container, [class*="parallax"] {
    z-index: 1 !important;
}


/* Update your existing #top-jump block inside the @media query */
#top-jump {
    /* ... your existing rules (position, bottom, etc.) ... */

    /* Hides scrollbar for Chrome, Safari, and Opera */
    -webkit-overflow-scrolling: touch; /* Makes scrolling feel "rubbery" and smooth on iPhones */
}

#top-jump::-webkit-scrollbar {
    display: none !important;
}

/* Hides scrollbar for IE, Edge, and Firefox */
#top-jump {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}

/* --- MAP OFFLINE FALLBACK SYSTEM --- */

/* The outer container for the map and its fallback */
.map-visual { 
    position: relative; 
    width: 100%; 
    margin: 40px auto; 
    overflow: hidden;
}

/* The actual Google My Map iframe */
.region-map { 
    display: block; 
    width: 100%; 
}

/* The fallback image that appears when offline */
.map-fallback { 
    display: none; /* Hidden by default; JavaScript shows this when offline */
    width: 100%; 
}

.map-fallback img {
    width: 100%;
    height: auto;
    display: block;
}


/* --- 1. THE LAYERS (Ensures Hamburger is Clickable) --- */
#mainHeader { z-index: 1000 !important; }
#mobile-menu { z-index: 2000 !important; } 
.hamburger { 
    z-index: 2001 !important; 
    position: relative; 
    cursor: pointer; 
    display: block;
}

/* --- 2. MOBILE VIEW (Under 1024px) --- */
@media screen and (max-width: 1023px) {
    #desktop-sticky-group { position: relative; }

    /* Keeps the red menu fixed to the bottom on mobile */
    #quick-jump-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        width: 100%;
        z-index: 999 !important;
        top: auto !important;
    }
}

/* --- 3. DESKTOP VIEW (1024px and up) --- */
@media screen and (min-width: 1024px) {
    #desktop-sticky-group {
        position: -webkit-sticky;
        position: sticky;
        top: 119px; /* This sits it perfectly under your 119px header */
        z-index: 900;
    }

    /* Reset internal items so they don't fight the group container */
    #top-jump, #quick-jump-menu {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
    }
}

.mama-guide-container {
    position: fixed;
    bottom: -100px; /* Hidden off-screen initially */
    left: 20px; /* Or 'right: 20px' if you prefer that margin */
    z-index: 2000; /* Ensure she's on top of everything */
    opacity: 0;
    transition: bottom 0.5s ease-out, opacity 0.5s ease-out;
    display: flex;
    align-items: flex-end; /* Align bubble to the bottom of the face */
}

/* When the trigger is hit, this class is added */
.mama-guide-container.active {
    bottom: 20px; /* Slides into view */
    opacity: 1;
}

.mama-content {
    display: flex;
    align-items: center; /* Aligns face and bubble horizontally */
    gap: 15px; /* Spacing between face and bubble */
}

.mama-face {
    height: 100px; /* Size the face appropriately for a margin */
    width: auto;
    filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.1)); /* Optional shadow for depth */
}

.mama-bubble {
    background-color: #000; /* Black rectangle, matching your site aesthetic */
    color: #FFD700; /* Kodak Yellow text */
    padding: 15px 20px;
    border-radius: 5px; /* Subtle rectangular feel */
    border: 2px solid #FFD700; /* Yellow border to make it pop */
    width: 250px; /* Define width so text wraps nicely */
    font-family: Arial, sans-serif;
    position: relative;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
}

.mama-bubble p {
    margin: 0 0 10px 0; /* Tight spacing for the question */
    font-weight: bold;
    font-size: 14px;
}

.mama-link {
    color: #ffffff; /* White link text */
    text-decoration: underline;
    font-size: 14px;
    font-weight: bold;
}

/* Line 587 in style.css */
.jump-menu-container {
    position: relative; /* or fixed/absolute depending on your layout */
    z-index: 1100 !important; /* Higher than Mama Africa's 900 */
}

/* Ensure the quick-jump-menu is also elevated */
#quick-jump-menu {
    position: fixed;
    z-index: 1200 !important; 
}

#ma {
    z-index: 500 !important;
}

.jump-menu-container, 
#quick-jump-menu,
#mobile-menu {
    z-index: 2000 !important;
}

/* Ensure the Quick Jump button is the highest layer */
#quick-jump-menu {
    z-index: 1100 !important;
}


/* 1. Target ONLY the horizontal scrolling bar */
.jump-menu-container {
    position: relative !important; 
    z-index: 1010 !important; /* Just high enough to beat the character */
    background: #000; /* Ensure it's solid so she can't be seen through it */
}

/* 2. Target ONLY the yellow Jump to Section button */
#quick-jump-menu {
    position: fixed !important;
    z-index: 1020 !important; 
}

/* 3. Ensure Mama Africa is lower but still above the page content */
#ma {
    z-index: 900 !important;
}

/* 4. Ensure the Mobile Header/Red Block stays at its own layer */
header, #mainHeader {
    z-index: 2000 !important; /* Keep this as the absolute highest */
}


#mobile-menu {
    z-index: 2100; /* Highest of all */
}


/* Ensure the phone mockup images stay contained on mobile */
.mockup-container img, 
img[src*="hand_holding_phone"], 
img[src*="hand_phone_mobile"] {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centers it if it's smaller than the screen */
}

@media (max-width: 600px) {
    /* If you want the mobile version to be a specific width (e.g. 80% of screen) */
    .mobile-mockup-image {
        width: 90%; 
        max-width: 400px; /* Prevents it from getting TOO big on tablets */
    }
}


/* This targets both images and keeps them from exploding in size */
.phone-mockup {
    display: block;
    max-width: 100%; /* Never wider than the screen */
    height: auto;    /* Keeps the proportions correct */
    margin: 0 auto;  /* Centers them */
}

/* Specific sizing for the mobile version */
@media (max-width: 600px) {
    .phone-mockup.mobile-only {
        width: 85%; /* Adjust this percentage to make the phone look right on the screen */
        max-width: 450px; /* Prevents it from getting too huge on larger tablets */
    }
}

/* Ensure the "desktop-only" and "mobile-only" classes are working */
@media (min-width: 601px) {
    .mobile-only { display: none !important; }
}
@media (max-width: 600px) {
    .desktop-only { display: none !important; }
}


@media (max-width: 600px) {
    /* Tighten the gap between the header and the image */
    h2.about-sa-header {
        margin-bottom: 5px !important;
        padding-bottom: 0 !important;
    }

    .about-sa-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


@media (max-width: 600px) {
    /* 1. Kill the 'ghost' containers of the hidden desktop images */
    .phone-images, 
    .desktop-only,
    center:has(.desktop-only) {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Remove the margin from the header again to be sure */
    h2.main-title {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }
}


/* Dynamic Spacer to prevent the white gap */
#header-spacer {
    height: 173px; /* Desktop Height */
}

@media screen and (max-width: 1023px) {
    #header-spacer {
        height: 130px; /* Matches the smaller mobile header height */
    }
}


@media (max-width: 600px) {
    /* 1. SLIM THE RED MENU AND ENSURE IT IS FIXED */
    #quick-jump-menu {
        height: 45px !important; 
        position: fixed !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        z-index: 1020 !important;
    }

    #quick-jump-menu a {
        line-height: 45px !important;
        font-size: 14px !important;
    }

    /* 2. SNAP THE SCROLLER DOWN (Overrides the inline bottom: 85px) */
    .jump-menu-container.mobile-only {
        bottom: 45px !important; /* This moves it down to touch the 45px red bar */
        position: fixed !important;
    }

    /* 3. TIGHTEN INTERNAL SPACING */
    #top-jump {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}


/* --- MOBILE MENU RESTORATION & ALIGNMENT --- */
@media (max-width: 1100px) {
    /* 1. RESTORE & SLIM THE BLACK SECTION */
    /* We use [style] to override the 160px min-height in your HTML */
    #jump-menu-section[style] {
        display: block !important;
        min-height: 130px !important; /* Force visibility at a smaller size */
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important; /* Prevents the images from being clipped */
    }

    /* 2. KILL THE INTERNAL GAP */
    /* Since your HTML has 'padding-bottom: 15px !important', we can't change it here.
       Instead, we use a negative margin to pull the red menu up into that gap. */
    #top-jump[style] {
        padding-top: 10px !important;   /* Reduces top gap */
        margin-bottom: -20px !important; /* Cancels out the bottom 15px space */
        gap: 10px !important;            /* Tighter spacing between image cards */
    }

    /* 3. FLUSH FIT FOR RED MENU */
    #quick-jump-menu {
        height: 45px !important; /* Slimmer red bar */
        margin-top: 0 !important;
        padding: 0 !important;
        position: relative;
        z-index: 1010; /* Ensures it stays on top of the black section */
    }

/* 4. FIX BLEEDING DIVIDERS */
#quick-jump-menu {
    overflow: hidden !important; /* Clips anything extending outside the 45px */
}

#quick-jump-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 45px !important;    /* Matches container height */
    line-height: 45px !important; 
border-right: 1px solid rgba(255, 255, 255, 0.3) !important;}

#quick-jump-menu a:last-child {
    border-right: none !important; /* Removes the extra line after 'Hostels' */
}

}


@media (max-width: 1100px) {
    .close-btn {
        font-size: 35px !important; /* Shrunk down from 50pt */
        top: 15px !important;       /* Optional: adjusts it slightly higher so it aligns better */
        right: 25px !important;
    }
}


@media (max-width: 600px) {
    /* This creates a mandatory 15px gap from the screen edges */
    #ma {
        left: 15px !important;
        right: 2px !important;
        width: auto !important; /* Allows the bubble to shrink if needed */
        max-width: calc(100vw - 7px) !important; 
    }

    /* Ensures the speech bubble itself doesn't force a full-width stretch */
    #ma-bubble {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
    }
}

@media (max-width: 600px) {
    #ma {
        /* This creates the full-width white block */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important; /* Pins the block to the very bottom */
        width: 100% !important;
        max-width: 100vw !important;
        background-color: rgba(255, 255, 255, 0.5) !important; /* 50% transparent white */
        
        /* Layout adjustments */
        display: flex !important;
        padding: 5px 7px !important; /* Keeps your 7px gap for the contents inside the bar */
        box-sizing: border-box;
        align-items: flex-end;
        transition: opacity 0.5s !important;
    }

    #ma img {
        width: 120px !important; /* Adjusted for the new bar layout */
        height: auto;
    }

    #ma-bubble {
        margin-bottom: 10px !important; /* Lifts the bubble slightly off the bottom of the bar */
        max-width: calc(100% - 130px) !important; /* Ensures it doesn't push the bar wider than the screen */
    }
}


/* IRON-CLAD MOBILE BUTTON RESIZING */
@media screen and (max-width: 600px) {
    /* 1. Target the IDs specifically to break the 268px x 92px lock */
    #btn-booking-com, 
    #btn-hostelworld-com, 
    #btn-getyourguide-com {
        width: 200px !important;    /* Reduced from 268px */
        min-width: 200px !important;
        height: 60px !important;     /* Reduced from 92px */
        min-height: 60px !important;
        font-size: 11pt !important;  /* Reduced from 14pt */
        margin: 5px auto !important;
    }

    /* 2. Ensure the container centers them and stacks them tightly */
    .booking-btn-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 20px auto !important; /* Reduced vertical whitespace */
        padding: 0 !important;
    }
}

/* HOME PAGE: Increase space after the Safari Card */
.gyg-container {
    margin-bottom: 80px !important; /* This pushes the booking button down */
    display: block !important;
    clear: both !important;
}

/* Ensure the button container respects the gap */
.booking-btn-container {
    margin-top: 60px !important;
}


/* MOBILE ONLY: Force the 'About South Africa' header closer to the photo */
@media screen and (max-width: 600px) {
    h2[style*="margin-top: 50px"] {
        margin-top: 5px !important; 
    }
}


/* Unique class for "About South Africa" - Desktop View */
.about-sa-header {
display: block !important;
    text-align: center !important;
    color: #000 !important;
    
    /* These three lines recreate the original look exactly */
    font-family: 'Century Gothic', sans-serif !important;
    font-size: 48px !important;
    font-weight: normal !important;
    
    /* Spacing */
    margin-top: 10px !important;
    margin-bottom: 60px !important;
    line-height: 1.2 !important;
    text-transform: none !important; /* Prevents unwanted all-caps */
}

/* Mobile Adjustment */
@media screen and (max-width: 600px) {
    .about-sa-header {
        /* We use a large negative margin to force the header to overlap 
           any invisible padding from the photo above it */
        margin-top: -40px !important; 
        font-size: 2rem !important;    /* Slightly smaller for better mobile fit */
        margin-bottom: 20px !important;
        padding-top: 0 !important;
    }
}

/* 1. Desktop: Re-applying the exact specs to this class */
h2.main-h2-title.about-sa-fix {
    font-family: 'Century Gothic', sans-serif !important;
    font-weight: normal !important;
    font-size: 48px !important;    /* This is your 3rem/48px size */
    line-height: 48px !important;
    color: #000 !important;
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 60px !important;
    display: block !important;
}

/* 2. Mobile: The specific gap fix */
@media screen and (max-width: 600px) {
    h2.main-h2-title.about-sa-fix {
        margin-top: -30px !important; /* Pulls it up to the photo */
        font-size: 2rem !important;   /* Shrinks font for mobile */
        margin-bottom: 20px !important;
        line-height:2.5rem !important;
    }
}







/* --- THINGS TO DO: DESKTOP --- */
h2.main-h2-title.things-to-do-fix {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #000 !important;
    font-family: 'Century Gothic', sans-serif !important;
    font-weight: normal !important;
    font-size: 3rem !important; 
    line-height: 3.5rem !important;
    
    /* On desktop, the 60px HTML div handles the top gap */
    margin-top: 0 !important; 
    margin-bottom: 60px !important;
    clear: both !important;
}

/* --- THINGS TO DO: MOBILE --- */
@media screen and (max-width: 600px) {
    h2.main-h2-title.things-to-do-fix {
        /* On mobile, the HTML div is hidden, so we use this margin instead */
        margin-top: 20px !important; 
        
        font-size: 2rem !important;
        line-height: 2.5rem !important;
        margin-bottom: 25px !important;
    }
}




/* Desktop: Standard size */
.disclosure-text {
    font-size: 1.1rem !important; /* Matches your current intro-p size */
    line-height: 1.6rem !important;
}

/* Mobile: Smaller "Fine Print" size */
@media screen and (max-width: 600px) {
    .disclosure-text {
        font-size: 0.85rem !important;
        line-height: 1.2rem !important;
        display: block !important;
    }
}



/* Desktop: Standard size */
.download-btn {
    display: inline-block !important; /* Prevents full-width stretching */
    padding: 15px 30px !important;
    font-size: 1.2rem !important;
    background-color: #bc1d23 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    height: auto !important;
    line-height: 1.2 !important; 
    text-align: center !important;
}

/* Mobile: Compact Button Fix */
@media screen and (max-width: 600px) {
    .download-btn {
        display: inline-block !important; /* THE FIX: Keeps it from stretching wide */
        width: auto !important;           /* THE FIX: Button stays only as wide as the word */
        
        /* THE FIX: Vertical padding (12px) creates the red space above/below */
        padding: 25px 25px !important; 
        
        font-size: 1rem !important;
        line-height: 1 !important;        /* Ensures text is vertically centered */

        min-width: 120px !important;      /* Ensures it's tap-friendly */
    }
}



/* --- FOOTER BRAND MOBILE FIX --- */

/* Desktop Default */
.footer-brand {
    font-size: 2rem !important; 
    display: block !important;
    text-align: center !important;
}

/* Mobile Adjustments */
@media screen and (max-width: 600px) {
    .footer-brand {
        font-size: 1.5rem !important;  /* Shrinks the URL size */
        letter-spacing: 1px !important; /* Optional: makes it easier to read when small */
        margin-bottom: 10px !important;
    }
}




/* --- FOOTER PAYOFF MOBILE FIX --- */

/* Desktop Default (Keeping it as is) */
.footer-payoff {
    font-size: 1.2rem !important;
    display: block !important;
    text-align: center !important;
    margin-top: 5px !important;
}

/* Mobile Adjustments */
@media screen and (max-width: 600px) {
    .footer-payoff {
        font-size: 1rem !important;  /* Shrinks the slogan text */
        line-height: 1.2rem !important;
        opacity: 0.8 !important;       /* Optional: slightly fades it to look more like a tagline */
        margin-top: 2px !important;
    }
}


/* --- FOOTER NAV MOBILE FIX --- */

/* Desktop Default */
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.footer-nav a {
    font-size: 1rem;
    text-decoration: none;
    color: #ffffff;
}

/* Mobile Adjustments */
@media screen and (max-width: 600px) {
    .footer-nav {
        gap: 12px !important; /* Tightens the space between links */
        margin: 15px 0 !important;
        flex-wrap: wrap !important; /* Ensures they stack if the screen is very narrow */
    }

    .footer-nav a {
        font-size: 0.85rem !important; /* Smaller text for mobile */
        text-transform: uppercase !important; /* Optional: makes small text easier to tap/read */
        letter-spacing: 0.5px !important;
    }
}



@media screen and (max-width: 600px) {
    .footer-contribute {
        font-size: 0.85rem !important;
        line-height: 1.3rem !important;
        
        /* THE FIX: Sets Top, Right, Bottom, and Left padding all at once */
        /* Pattern: [Top] [Right] [Bottom] [Left] */
        padding: 20px 20px 20px 20px !important; 
        
        margin-bottom: 0px !important; 
        display: block !important;
    }

    footer {
        padding-bottom: 10px !important;
        padding-top: 10px !important;
        margin-bottom: 0 !important;
    }
}


/* --- FOOTER COPYRIGHT MOBILE FIX --- */

/* Desktop Default */
.footer-copyright {
    font-size: 0.9rem !important;
    display: block !important;
    text-align: center !important;
    margin-top: 20px !important;
}

/* Mobile Adjustments */
@media screen and (max-width: 600px) {
    .footer-copyright {
        font-size: 0.75rem !important; /* Smallest text in the footer */
        margin-top: 15px !important;   /* Space between this and the text above */
        margin-bottom: 20px !important; /* Buffer at the very bottom of the screen */
        line-height: 1.1rem !important;
    }
}


@media screen and (max-width: 600px) {
    .footer-contribute {
        /* THE FIX: Changed bottom padding (the 3rd number) from 20px to 0px */
        padding: 20px 20px 0px 20px !important; 
        
        margin-bottom: 0px !important;
    }

    .footer-copyright {
        /* THE FIX: Set top margin to 0 to sit right under the text above */
        margin-top: 0px !important;
        
        font-size: 0.75rem !important;
        margin-bottom: 20px !important;
    }
}



/* --- MOBILE GAP REPAIR: IMAGE TO BLACK STRIP --- */
@media screen and (max-width: 600px) {
    /* 1. Remove any potential bottom spacing from the image container */
    .parallax-window {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: block !important;
    }

    /* 2. Pull the black strip up by 1px to overlap the image and hide the white line */
    /* This targets the 6px black strip directly */
    .strip.black {
        margin-top: -1px !important; 
        position: relative;
        z-index: 10; /* Ensures the strip stays on top of the image container */
    }

    /* 3. Ensure the section containing the strips doesn't have a top margin */
    section.region-header-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}



.parallax-window {
    z-index: 400 !important;
    position: relative; 
}






/* --- ENSURE ANY PREVIOUS MEDIA QUERIES ARE CLOSED --- */
} 

/* --- NEW UNIQUE DESKTOP SECTION --- */
.area-hero-container {
    background-color: #ffd400 !important; /* The yellow background */
    width: 100% !important;
    min-height: 205px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px 0 !important;
    position: relative !important;
    clear: both !important;
    text-align: center; !important;
}

/* --- NEW UNIQUE DESKTOP TITLE (Works on h1 or h2) --- */
.area-hero-title {
    font-family: 'Century Gothic', sans-serif !important;
    font-size: 4rem !important;
    line-height: 4.2rem !important;
    font-weight: normal !important;
    color: #000000 !important;
    margin: 10px auto 20px auto !important;
    display: block !important;
    max-width: 874px !important;
    scroll-margin-top: 175px !important;
    text-transform: none !important;
    text-align: center !important;
}




/* --- NEW UNIQUE SECTION HEADING --- */
.section-heading-desktop {
    font-family: 'Century Gothic', sans-serif !important;
    font-size: 2.75rem !important; /* From your inline style */
    font-weight: normal !important; /* From your inline style */
    line-height: 3.5rem !important;
    
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    max-width: 874px !important;
    margin-top: 70px !important; /* From your inline style */
    margin-bottom: 40px !important; /* Matches your general vertical rhythm */
    
    color: #000000 !important;
    clear: both !important;
    scroll-margin-top: 175px;
}





/* --- NEW UNIQUE SUB-HEADING (24px) --- */
.sub-heading-desktop {
    font-family: 'Century Gothic', sans-serif !important;
    font-size: 2rem !important;      /* Matches your inline style */
    font-weight: normal !important;  /* Matches your inline style */
    line-height: 2rem !important;
    
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    max-width: 874px !important;
    margin-top: 70px !important;     /* Matches your inline style */
    margin-bottom: 30px !important;
    
    color: #000000 !important;
    clear: both !important;
}




/* --- MOBILE ADJUSTMENT: HERO TITLE --- */
@media screen and (max-width: 600px) {
    .area-hero-title {
        font-size: 2.4rem !important;      /* As requested */
        line-height: 2.7rem !important;   /* As requested */
        
        /* Balancing the spacing for smaller screens */
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        padding: 0 15px !important;       /* Adds safety gutters on the sides */
    }

    /* Shrinking the container height slightly to match the smaller text */
    .area-hero-container {
        min-height: 140px !important;
        padding: 20px 0 !important;
    }
}





/* --- MOBILE ADJUSTMENT: SECTION HEADING --- */
@media screen and (max-width: 600px) {
    .section-heading-desktop {
        font-size: 2rem !important;      /* As requested */
        line-height: 2.5rem !important;   /* As requested */
        
        /* Adjusting spacing for smaller screens */
        margin-top: 40px !important; 
        margin-bottom: 20px !important;
        padding: 0 15px !important;       /* Side gutters to prevent text hitting edges */
    }
}




/* --- MOBILE ADJUSTMENT: SECTION HEADING --- */
@media screen and (max-width: 600px) {
    .sub-heading-desktop {
        font-size: 1.75rem !important;      /* As requested */
        line-height: 2rem !important;   /* As requested */
        
        /* Adjusting spacing for smaller screens */
        margin-top: 40px !important; 
        margin-bottom: 20px !important;
        padding: 0 15px !important;       /* Side gutters to prevent text hitting edges */
    }
}




/* --- MOBILE ADJUSTMENT: HOSTEL LISTING BOX TEXT --- */
@media screen and (max-width: 600px) {
    /* Shrinks all paragraph and detail text inside the yellow boxes */
    .container-wide-hostels p,
    .container-wide-hostels .detail-p,
    .container-wide-hostels .expanded-text p {
        font-size: 1rem !important;      /* Drops the text size */
        line-height: 1.4rem !important;  /* Tightens the line height to match */
    }
    
    /* Shrinks the main hostel names slightly to fit the smaller text scale */
    .container-wide-hostels .detail-h2 {
        font-size: 1.5rem !important;    
        line-height: 1.8rem !important;
        margin-bottom: 15px !important;
    }
}

/* --- MOBILE OVERRIDE: HOSTEL COLUMNS --- */
@media screen and (max-width: 600px) {
    /* 1. Shrink text and increase line spacing */
    .hostel-col p, 
    .hostel-col .detail-p, 
    .hostel-col li {
        font-size: 0.95rem !important;   /* Slightly smaller */
        line-height: 1.8rem !important;  /* Further apart */
    }

    /* 2. Shift the bulleted list to the left */
    .hostel-col ul {
        padding-left: 15px !important;  /* Reduces the deep default indentation */
        margin-left: 0 !important;
        list-style-position: outside !important;
        text-align: left !important;
    }

    /* 3. Ensure list items align with the new left margin */
    .hostel-col li {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 1100px) {
    .hide-on-mobile { display: none !important; }
}

@media (min-width: 601px) {
    .hide-on-desktop { display: none !important; }
}


/* Hide the location badge on mobile devices */
@media (max-width: 768px) {
    .location-badge {
        display: none !important;
    }
}





.location-badge {
background-color: #ffd400; color: #000; font-size: 1rem; font-weight: bold; padding: 3px 8px; border-radius: 16px; letter-spacing: 0.1rem; text-transform: uppercase;
}









.map-overlay-circle {
    position: absolute;
    top: 60px; /* Adjust distance from top */
    right: 30px; /* Adjust distance from right edge */
    width: 170px;
    height: 170px;
    background-color: #fff200; /* Matches your site's yellow theme */
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.1;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9);
    z-index: 10; /* Ensures it sits above the map */
    pointer-events: none; /* CRITICAL: Lets users click "through" the circle onto the map */
    border: 3px solid #fff;
}

/* Optional: Make it slightly smaller on mobile devices */
@media (max-width: 600px) {
    .map-overlay-circle {
        width: 110px;
        height: 110px;
        font-size: 11px;
        top: 50px;
        right: 5px;
        padding: 20px 10px 10px 10px;
    }
}




/* --- SLIM MOBILE HEADER FIX --- */
@media (max-width: 1100px) {
    /* 1. Make the main header a single row */
    .header-main {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 75px !important; /* Much slimmer height */
        padding: 0 15px !important;
    }

    /* 2. Put the Logo and Text side-by-side */
    .branding {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
    }

    /* 3. Shrink the logo to fit the slim bar */
    .branding img {
        width: 45px !important;
        height: 45px !important;
    }

    /* 4. Align the text block (Brand Name + Payoff) */
    .branding > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .brand-name {
        font-size: 1.2rem !important; /* Slightly smaller to fit perfectly */
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .payoff {
        font-size: 0.75rem !important;
        margin-top: 2px !important;
    }

    /* 5. Pull the Hamburger Menu into the flow (un-stack it) */
    .right-stack {
        position: relative !important;
        top: auto !important;
        right: auto !important;
    }

    #hamburger-icon {
        font-size: 30px !important;
        margin: 0 !important;
    }
    
    /* 6. Shrink the invisible spacer below the header so your map moves up */
    div[style*="height: 143px"] {
        height: 75px !important; 
    }
    
    .tm-hero-map-section {
        margin-top: 75px !important;
    }
}