@charset "utf-8";

/* ==========================================================
   YOUR JOURNEY BY JODI - MAIN STYLESHEET
   ----------------------------------------------------------
   Contents
     1.  Brand settings   <- change colors & sizes here first
     2.  Custom fonts
     3.  Base styles
     4.  Page width
     5.  Navbar
     6.  Hero
     7.  Section headings & backgrounds
     8.  Shared card look
     9.  Section 3 - Travel style cards
     10. Section 4 - Feature cards
     11. Section 5 - Reviews carousel
     12. Section 6 - Call to action
     13. Sub-footer
     14. Footer
     15. Policy pages (privacy policy, terms & conditions)
     16. Travel insurance page
     17. Contact page
     18. Request a quote page
     19. FAQs page
     20. About page
   ========================================================== */


/* ==========================================================
   1. BRAND SETTINGS
   Change a value here and it updates everywhere it's used.
   ========================================================== */

:root {
    /* Brand colors */
    --brand-blue: #1271a1;
    --brand-purple: #6c25be;
    --brand-purple-dark: #501d9c;
    /* purple hover */
    --brand-pink: #ff8fc7;
    --brand-pink-light: #ffc0cb;
    /* scrolled "Plan Your Trip" button */
    --brand-dark: #111c27;
    /* headings, footer background */
    --gradient-ocean: linear-gradient(135deg, hsl(200 80% 35%), hsl(175 60% 40%));
    --gradient-sky: linear-gradient(180deg, var(--brand-blue), var(--bg-light));
    /* policy page background: brand blue fading to off-white */

    /* Text colors */
    --text-body: #3b4754;
    --text-muted: #6b7684;
    --text-light: #aab4bf;
    /* footer text, links and icons */

    /* Section backgrounds */
    --bg-light: #f8fafc;
    --bg-sand: #f4f0eb;

    /* Cards (travel, feature and review cards) */
    --card-radius: 1rem;
    --card-shadow: 0 4px 14px rgba(17, 28, 39, 0.08);

    /* Layout */
    --content-max-width: 1400px;
    /* widest the page gets on very large screens */

    /* Logo */
    --logo-height: 60px;
    /* navbar and sub-footer logo size */
}


/* ==========================================================
   2. CUSTOM FONTS  (files live in /fonts)
   A font file only downloads if something on the page uses it.
   ========================================================== */

/* Not used yet - ready if you want it */
@font-face {
    font-family: 'California';
    src: url('../fonts/TheCalifornia.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MagicRetro';
    src: url('../fonts/MagicRetro.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================
   3. BASE STYLES
   ========================================================== */

/* Jump links (e.g. #contact) stop below the fixed navbar, not under it */
html {
    scroll-padding-top: 100px;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Main page heading (hero) */
h1,
h1.display-1 {
    font-family: 'MagicRetro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.75rem, 7vw, 6.25rem);
    /* smallest, scales with screen, largest */
}

/* Space above and below every section */
section {
    padding: 50px 0 75px;
    /* top, sides, bottom */
}


/* ==========================================================
   4. PAGE WIDTH
   On screens 1600px+ wide, content stops growing at
   --content-max-width (set in Brand settings).
   ========================================================== */

@media (min-width: 1600px) {

    .container,
    .navbar>.container-fluid,
    .sub-footer>.container-fluid,
    .site-footer>.container-fluid {
        max-width: var(--content-max-width);
    }
}


/* ==========================================================
   5. NAVBAR
   ========================================================== */

/* --- Colors over the hero (page load) --- */
.navbar {
    --bs-navbar-color: #c3cbd3;
    /* other links: gray */
    --bs-navbar-hover-color: #e9eef2;
    /* other links on hover: slightly brighter */
    --bs-navbar-active-color: #ffffff;
    /* current page link */
    --nav-box-active: rgba(255, 255, 255, 0.20);
    /* box behind current page (80% translucent) */
    --nav-box-hover: rgba(255, 255, 255, 0.10);
    /* box behind hovered link (90% translucent) */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Colors once the page is scrolled (white navbar) --- */
.navbar.scrolled {
    --bs-navbar-color: var(--text-muted);
    /* other links: mid gray */
    --bs-navbar-hover-color: var(--text-body);
    /* slightly stronger on hover */
    --bs-navbar-active-color: var(--brand-blue);
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.15);
    --nav-box-active: rgba(18, 113, 161, 0.20);
    /* brand blue, same translucency */
    --nav-box-hover: rgba(18, 113, 161, 0.10);
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Mobile menu icon: turn dark on the white scrolled navbar */
.navbar.scrolled .navbar-toggler-icon {
    filter: invert(1);
}

/* --- Desktop layout: logo | links (true center) | button --- */
@media (min-width: 992px) {
    .navbar>.container-fluid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    /* Lets the links and button sit directly in the 3 columns */
    .navbar-expand-lg .navbar-collapse {
        display: contents !important;
    }

    .navbar-brand {
        justify-self: start;
    }

    .navbar-nav {
        justify-self: center;
    }

    .navbar-cta {
        justify-self: end;
    }
}

/* --- Logo --- */
.navbar-logo {
    display: block;
    height: min(var(--logo-height), 12vw);
    /* full size on bigger screens, smaller on phones so the logo and
       menu button always fit on one line */
    width: auto;
    /* width scales automatically */
}

/* Light logo over the hero, regular logo once scrolled */
.navbar-logo.logo-scrolled,
.navbar.scrolled .navbar-logo.logo-hero {
    display: none;
}

.navbar.scrolled .navbar-logo.logo-scrolled {
    display: block;
}

/* --- Nav links: rounded box for current page and hover --- */
.navbar-nav .nav-link {
    padding: 0.4rem 1rem !important;
    margin: 0 0.15rem;
    border-radius: 0.7rem;
    font-weight: 400;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar-nav .nav-link.active {
    background-color: var(--nav-box-active);
}

.navbar-nav .nav-link:not(.active):hover {
    background-color: var(--nav-box-hover);
}

/* --- Laptops / tablets sideways: logo, links and button share one row,
       so the logo shrinks a little to keep them from overlapping --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-logo {
        height: 40px;
    }

    .navbar-nav .nav-link {
        padding: 0.4rem 0.7rem !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-logo {
        height: 50px;
    }
}

/* --- Phones and tablets (menu button) --- */
@media (max-width: 991.98px) {

    /* Dark background behind the open menu so its links are readable
       over the hero photo */
    .navbar:not(.scrolled):has(.navbar-collapse.show, .navbar-collapse.collapsing) {
        background-color: rgba(17, 28, 39, 0.95);
    }

    /* A long menu scrolls instead of running off short screens
       (e.g. a phone turned sideways) */
    .navbar-collapse {
        max-height: calc(100svh - 80px);
        overflow-y: auto;
    }

    /* Space around the "Plan Your Trip" button inside the menu */
    .navbar-collapse .navbar-cta {
        margin: 0.5rem 0 1rem;
    }
}

/* --- "Glass" button: navbar "Plan Your Trip", hero "Plan Custom Trip"
       and CTA "Talk to an Expert" --- */
/* Translucent white box with a slightly darker border */
.navbar-cta,
.hero-btn-glass {
    --bs-btn-font-size: 1.1rem;
    --bs-btn-font-weight: 425;
    --bs-btn-color: #ffffff;
    --bs-btn-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-border-color: rgba(200, 205, 210, 0.7);
    --bs-btn-border-width: 2px;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.25);
    /* less translucent on hover */
    --bs-btn-hover-border-color: rgba(200, 205, 210, 0.8);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.45);
    --bs-btn-active-border-color: rgba(200, 205, 210, 0.8);
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Navbar button once scrolled: solid pink */
.navbar.scrolled .navbar-cta {
    --bs-btn-bg: var(--brand-pink-light);
    --bs-btn-border-color: var(--brand-pink-light);
    --bs-btn-hover-bg: var(--brand-pink);
    --bs-btn-hover-border-color: var(--brand-pink);
    --bs-btn-active-bg: var(--brand-pink);
    --bs-btn-active-border-color: var(--brand-pink);
}


/* ==========================================================
   6. HERO
   ========================================================== */

.hero {
    position: relative;
    display: flex;
    min-height: 100vh;
    /* full screen height (older browsers) */
    min-height: 100svh;
    /* full VISIBLE height on phones (not hidden behind the browser's
       address/tool bars). "min" lets the hero grow taller on short
       screens instead of cutting off the stats. */
    overflow: hidden;
    color: #ffffff;
    clip-path: inset(0);
    /* keeps the fixed photo below inside the hero */
}

/* Hero photo.
   - Stays still while the page scrolls over it (same look as
     "background-attachment: fixed", but much smoother to scroll).
   - Uses the small WebP file; the JPG is a backup for very old browsers.
   - To change the photo: update these file names AND the two
     "preload" lines in the <head> of index.html. */
.hero::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../images/hero-beach-Daa-v-TN.jpg") center / cover no-repeat;
    background-image: image-set(url("../images/hero-beach.webp") type("image/webp"),
            url("../images/hero-beach-Daa-v-TN.jpg") type("image/jpeg"));
}

/* Phones: a smaller version of the same photo */
@media (max-width: 767px) {
    .hero::before {
        background-image: image-set(url("../images/hero-beach-mobile.webp") type("image/webp"),
                url("../images/hero-beach-Daa-v-TN.jpg") type("image/jpeg"));
    }
}

/* Dark blue tint over the photo so the text is readable
   (fills the whole hero and grows with it) */
.hero-overlay {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    background: linear-gradient(180deg, hsla(200 85% 15% / 0.4), hsla(200 85% 15% / 0.7));
}

/* Hero layout: heading block in the upper area,
   stats centered between the buttons and the scroll arrow */
.hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    /* room for the navbar */
    padding-bottom: 70px;
    /* room for the scroll arrow (keeps the stats from sitting on it) */
}

/* Empty space above the heading (balances the stats area below) */
.hero-content::before {
    content: "";
    flex: 0.6;
}

/* Hero paragraph under the main heading */
.hero-subtitle {
    margin-bottom: 2.25rem;
    /* space between the paragraph and the buttons */
    font-size: clamp(1.125rem, 1rem + 1.5vw, 1.625rem);
    /* smallest (phones), scales with screen, largest (lead default is 1.25rem) */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

/* Hero buttons sit side by side, and stack neatly on phones */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* --- Hero buttons (also used in Section 6) --- */
/* Shared: size, rounded corners, space between text and icon */
.hero-btn {
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-width: 2px;
    --bs-btn-padding-x: 2rem;
    /* space left and right of the text (btn-lg default is 1rem) */
    --bs-btn-padding-y: 0.625rem;
    border-radius: 0.75rem;
    min-width: min(250px, 100%);
    /* buttons at least 250px wide, but never wider than the space they're in
       (keeps them inside cards on small phones) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* space between text and icon */
}

/* "Explore Destinations": ocean gradient */
.hero-btn-ocean {
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background-image: var(--gradient-ocean);
    background-origin: border-box;
    transition: filter 0.2s ease;
}

.hero-btn-ocean:hover {
    filter: brightness(1.12);
    /* slightly brighter on hover */
}

/* Arrow slides right a little on hover */
.hero-btn-ocean .bi-arrow-right {
    transition: transform 0.2s ease;
}

.hero-btn-ocean:hover .bi-arrow-right {
    transform: translateX(4px);
}

/* "Plan Custom Trip" colors come from the "Glass" button rule in 5. NAVBAR */

/* Fills the space below the buttons and centers the stats in it */
.hero-stats-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stats row: narrower so the three stats sit closer together */
.hero-stats {
    width: 100%;
    max-width: 700px;
    /* smaller = closer together */
    font-family: 'MagicRetro', Georgia, serif;
    letter-spacing: 0.2rem;
}

.hero-stats h2 {
    margin-bottom: 0.1rem;
    /* space above the label (Bootstrap default is 0.5rem) */
    line-height: 1;
    /* removes extra space built into the text line */
}

.hero-stats-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: normal;
}

/* Bouncing arrow at the bottom of the hero */
.scroll-down {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #ffffff;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 10px);
    }
}


/* ==========================================================
   7. SECTION HEADINGS & BACKGROUNDS
   ========================================================== */

.bg-background {
    background-color: var(--bg-light) !important;
}

.bg-secondary {
    background-color: var(--bg-sand) !important;
}

.bg-gradient-ocean {
    background-image: var(--gradient-ocean);
}

/* Small blue label above a section title (e.g. "WHY YOUR JOURNEY BY JODI") */
.section-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section title (e.g. "Travel with Confidence") */
.section-title {
    font-family: 'MagicRetro', Georgia, serif;
    font-weight: 500;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    /* smallest (phones), scales with screen, largest */
    color: var(--brand-dark);
}

/* Phones: drop the forced line breaks (<br>) in headings and intro text
   so lines wrap naturally instead of leaving short ragged lines */
@media (max-width: 767.98px) {

    .hero-subtitle br,
    .section-title br,
    .section-subtitle br {
        display: none;
    }
}

/* Section sub-title */
.section-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
}


/* ==========================================================
   8. SHARED CARD LOOK
   ========================================================== */

/* Rounded corners and soft shadow on every card */
.travel-card,
.feature-card,
.review-card,
.policy-card {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* White background (travel cards are covered by their photo) */
.feature-card,
.review-card,
.policy-card {
    background-color: #ffffff;
}


/* ==========================================================
   9. SECTION 3 - TRAVEL STYLE CARDS
   Full-photo cards: title in the lower left, photo zooms
   and an arrow appears in the upper right on hover.
   To shift a photo inside its card, add e.g.
   style="object-position: 30% center;" to its <img>.
   ========================================================== */

.travel-card {
    position: relative;
    display: block;
    aspect-ratio: 5 / 6;
    /* card shape (width / height) */
    overflow: hidden;
    /* keeps the zoomed photo inside the card */
    color: #ffffff;
    text-decoration: none;
}

/* Phones: one card per row, so a shorter shape keeps the page
   from becoming a very long scroll */
@media (max-width: 575.98px) {
    .travel-card {
        aspect-ratio: 4 / 3;
    }
}

/* Photo fills the whole card */
.travel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Dark fade at the bottom so the title is readable */
.travel-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(17, 28, 39, 0.75) 100%);
}

/* Title in the lower left corner */
.travel-card-title {
    position: absolute;
    left: 1.5rem;
    bottom: 1.25rem;
    z-index: 1;
    margin: 0;
    font-family: 'MagicRetro', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 400;
}

/* Arrow in the upper right corner (hidden until hover) */
.travel-card-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-size: 1.25rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover (and keyboard focus): zoom photo, show arrow */
.travel-card:hover img,
.travel-card:focus-visible img {
    transform: scale(1.08);
    /* zoom amount */
}

.travel-card:hover .travel-card-arrow,
.travel-card:focus-visible .travel-card-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================
   10. SECTION 4 - FEATURE CARDS
   ========================================================== */

.feature-card {
    height: 100%;
    /* equal-height cards in a row */
    padding: 2.5rem 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Lift on hover */
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(17, 28, 39, 0.12);
}

/* Round icon badge */
.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--gradient-ocean);
    color: #ffffff;
    font-size: 1.75rem;
}

/* Note: Playfair Display isn't loaded, so this shows in Georgia */
.feature-title {
    font-family: 'Poppins', san-serif;
    font-size: 1.5rem;
    color: var(--brand-blue);
    margin-bottom: 0.75rem;
}

.feature-text {
    color: #5b6773;
    line-height: 1.6;
    margin: 0;
}


/* ==========================================================
   11. SECTION 5 - REVIEWS CAROUSEL
   ========================================================== */

.reviews-carousel {
    --per-view: 1;
    /* reviews visible at once on phones */
    --gutter: 16px;
    /* space beside each card (also room for the hover glow) */
    margin-top: 3rem;
}

/* Tablets */
@media (min-width: 768px) {
    .reviews-carousel {
        --per-view: 2;
    }
}

/* Desktops */
@media (min-width: 992px) {
    .reviews-carousel {
        --per-view: 3;
    }
}

/* Hides off-screen cards; top/bottom padding leaves room for the glow */
.reviews-viewport {
    overflow: hidden;
    padding: 24px 0;
}

.reviews-track {
    display: flex;
    transition: transform 0.6s ease;
    /* slide speed */
}

.review-slide {
    flex: 0 0 calc(100% / var(--per-view));
    padding: 0 var(--gutter);
    display: flex;
    /* makes every card the same height */
}

/* Review box */
.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2rem;
    text-align: left;
}

/* Gradient glow on hover (blurred so it fades into the background) */
.review-card::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: calc(var(--card-radius) + 6px);
    background: linear-gradient(135deg, var(--brand-blue), #2aa79b, var(--brand-purple));
    filter: blur(14px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.review-card:hover::before {
    opacity: 0.55;
    /* glow strength */
}

.review-stars {
    color: #f5b301;
    font-size: 1.1rem;
    letter-spacing: 0.15rem;
    margin-bottom: 1rem;
}

.review-quote {
    flex-grow: 1;
    /* keeps the name block at the bottom of every card */
    margin: 0;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-body);
}

.review-divider {
    border: 0;
    border-top: 1px solid #dfe3e8;
    opacity: 1;
    margin: 1.5rem 0 1rem;
}

.review-name {
    margin: 0;
    font-weight: 700;
    color: var(--brand-dark);
}

.review-location {
    margin: 0.15rem 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Trip type tag */
.review-trip {
    align-self: flex-start;
    margin: 0;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-blue);
    background-color: rgba(18, 113, 161, 0.1);
}

/* --- Arrows and dots --- */
.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.reviews-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--brand-blue);
    background-color: transparent;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.reviews-btn:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
}

.reviews-dots {
    display: flex;
    gap: 0.5rem;
}

.reviews-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background-color: #c5ccd4;
    transition: background-color 0.2s ease, width 0.2s ease;
}

/* Current dot stretches into a pill */
.reviews-dot.active {
    width: 26px;
    background-color: var(--brand-blue);
}


/* ==========================================================
   12. SECTION 6 - CALL TO ACTION
   ========================================================== */

/* Heading: white on the gradient */
.cta-section .section-title {
    color: #ffffff;
}

/* Paragraph under the heading (font comes from .section-subtitle) */
.cta-section .cta-subtitle {
    color: rgba(255, 255, 255, 0.7);
    /* white, 30% transparent */
}

/* "No commitment required..." line under the buttons */
.cta-section .cta-note {
    color: rgba(255, 255, 255, 0.5);
    /* white, 50% transparent */
}

/* Both buttons the same width (as wide as the longer one).
   Size and shape come from .hero-btn in 6. HERO;
   "Talk to an Expert" uses the "Glass" button look in 5. NAVBAR. */
.cta-buttons {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1rem;
    /* space between the buttons */
    margin-top: 1.5rem;
    /* space between the paragraph above and the buttons */
}

/* Phones: stack the buttons */
@media (max-width: 575px) {
    .cta-buttons {
        grid-auto-flow: row;
    }
}

/* "Start Planning": white button, text and arrow cut out
   so the section's gradient shows through */
.cta-btn-cutout {
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.9);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.9);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.8);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.8);
}

.cta-btn-cutout .cta-btn-text,
.cta-btn-cutout .bi-arrow-right {
    background-image: var(--gradient-ocean);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Arrow bounces right while hovered */
.cta-btn-cutout .bi-arrow-right {
    display: inline-block;
    transition: transform 0.2s ease;
}

.cta-btn-cutout:hover .bi-arrow-right {
    transform: translateX(4px);
}


/* ==========================================================
   13. SUB-FOOTER
   ========================================================== */

.sub-footer {
    padding: 32px 0 48px;
    /* top, sides, bottom */
    background-color: var(--brand-dark);
    color: #ffffff;
    overflow-x: hidden;
    /* stops a sideways scrollbar when side padding is 0 */
}

.sub-footer-logo {
    height: var(--logo-height);
    width: auto;
    margin-bottom: 1.25rem;
}

.sub-footer-text {
    max-width: 340px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: var(--text-light);
}

.sub-footer-heading {
    margin-bottom: 0.75rem;
    font-family: 'MagicRetro', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #ffffff;
}

/* Lists without bullets */
.sub-footer-contact,
.sub-footer-links {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-footer-contact li,
.sub-footer-links li {
    margin-bottom: 0.6rem;
}

.sub-footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-light);
}

/* Envelope, phone and pin icons */
.sub-footer-contact i {
    color: var(--brand-pink);
}

/* Links: light gray, white on hover */
.sub-footer a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sub-footer a:hover {
    color: #ffffff;
}


/* ==========================================================
   14. FOOTER
   ========================================================== */

.site-footer {
    padding: 1.5rem 0;
    background-color: var(--brand-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    /* thin line above the footer */
    color: var(--text-light);
    font-size: 14px;
}

/* Social media icons: light gray, white on hover */
.footer-social {
    display: flex;
    gap: 1.25rem;
}

.footer-social a {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-light);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}


/* ==========================================================
   15. POLICY PAGES (privacy-policy.html, terms-and-conditions.html,
       travel-insurance.html)
   No hero: the navbar is always in its white "scrolled" look
   (class="scrolled" is set in the HTML) and the page sits on
   the --gradient-sky background from Brand settings.
   ========================================================== */

.policy-page {
    padding: 140px 0 80px;
    /* top leaves room for the fixed navbar */
    background: var(--gradient-sky) top / 100% 600px no-repeat, var(--bg-light);
    /* gradient covers the top 600px, then plain off-white */
}

/* Phones: the navbar is shorter, so less space is needed above the title */
@media (max-width: 767.98px) {
    .policy-page {
        padding-top: 110px;
    }
}

/* Page title and dates (white on the blue) */
.policy-header {
    margin-bottom: 2.5rem;
    text-align: center;
    color: #ffffff;
}

.policy-header h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    /* smallest, scales with screen, largest */
}

.policy-dates {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: rgba(255, 255, 255, 0.8);
}

/* White box holding the policy text
   (corners, shadow and white background come from 8. SHARED CARD LOOK) */
.policy-card {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    /* smaller on phones, roomier on desktops */
    line-height: 1.7;
    color: var(--text-body);
}

/* Numbered section headings (e.g. "1. Information We Collect") */
.policy-card h2 {
    margin: 2.5rem 0 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brand-dark);
}

/* Smaller headings inside a section (e.g. "Contact Information") */
.policy-card h3 {
    margin: 1.5rem 0 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-blue);
}

.policy-card ul {
    padding-left: 1.25rem;
}

.policy-card li {
    margin-bottom: 0.25rem;
}

.policy-card a {
    color: var(--brand-blue);
}

/* "Contents" jump list at the top of the policy */
.policy-toc {
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--bg-light);
}

.policy-toc h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.policy-toc ol {
    margin: 0;
    padding-left: 1.5rem;
}

/* Two columns on tablets and up */
@media (min-width: 768px) {
    .policy-toc ol {
        columns: 2;
        column-gap: 2rem;
    }
}

.policy-toc a {
    text-decoration: none;
}

.policy-toc a:hover {
    text-decoration: underline;
}

/* Thin line above the closing "Last Updated" date */
.policy-divider {
    margin: 2.5rem 0 1.5rem;
    border-top: 1px solid #dfe3e8;
    opacity: 1;
}


/* ==========================================================
   16. TRAVEL INSURANCE PAGE (travel-insurance.html)
   Uses the policy page layout from 15, plus the pieces below.
   ========================================================== */

/* Line under the page title (e.g. "Protect Your Journey Before You Go") */
.policy-tagline {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Larger opening sentence */
.policy-lead {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-dark);
}

/* --- Coverage list: icon + bold title + description, 2 columns on tablets+ --- */
.policy-card .coverage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 2rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .policy-card .coverage-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.coverage-grid li {
    display: flex;
    gap: 0.75rem;
    margin: 0;
}

.coverage-grid i {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--brand-blue);
}

.coverage-grid strong {
    display: block;
    color: var(--brand-dark);
}

/* --- Highlighted note box (disclosure, "Timing Matters", etc.) --- */
.policy-callout {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--brand-blue);
    border-radius: 0.5rem;
    background-color: rgba(18, 113, 161, 0.06);
    /* brand blue, very light */
}

.policy-card .policy-callout h3 {
    margin-top: 0;
}

.policy-callout> :last-child {
    margin-bottom: 0;
}

/* --- Plan comparison table (scrolls sideways on phones) --- */
.plan-table-wrap {
    margin: 1.5rem 0 0.75rem;
    overflow-x: auto;
}

.plan-table {
    width: 100%;
    min-width: 640px;
    /* below this width the table scrolls instead of squishing */
    border-collapse: collapse;
    font-size: 0.95rem;
}

.plan-table th,
.plan-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dfe3e8;
    text-align: left;
    vertical-align: top;
}

/* Header row: brand blue with rounded top corners */
.plan-table thead th {
    background-color: var(--brand-blue);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-bottom: 0;
}

.plan-table thead th:first-child {
    border-top-left-radius: 0.5rem;
}

.plan-table thead th:last-child {
    border-top-right-radius: 0.5rem;
}

/* Coverage names down the left side */
.plan-table tbody th {
    font-weight: 600;
    color: var(--brand-dark);
}

/* Light stripe on every other row */
.plan-table tbody tr:nth-child(even) {
    background-color: var(--bg-light);
}

/* Small print under the table */
.plan-footnote {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* --- Deluxe / Preferred / Essential cards (3 across on desktops) --- */
.plan-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

@media (min-width: 992px) {
    .plan-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.plan-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid #dfe3e8;
    border-top: 4px solid var(--brand-blue);
    border-radius: 0.75rem;
}

.policy-card .plan-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--brand-dark);
}

.plan-card p {
    flex-grow: 1;
    /* keeps every card's button at the bottom */
}

/* "Best for" tag (same look as the review trip tags) */
.plan-card-tag {
    align-self: flex-start;
    margin-bottom: 1rem;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-blue);
    background-color: rgba(18, 113, 161, 0.1);
}

/* "View ... Plan Overview" button: blue outline, fills on hover */
.policy-card .plan-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--brand-blue);
    border-radius: 0.5rem;
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.policy-card .plan-link:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
}

.plan-link .bi-arrow-right {
    transition: transform 0.2s ease;
}

.plan-link:hover .bi-arrow-right {
    transform: translateX(3px);
}

/* --- "Request a Travel Insurance Quote" box (ocean gradient) ---
   The button reuses "Start Planning" from 12. SECTION 6 */
.quote-box {
    margin: 1.5rem 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 0.75rem;
    background-image: var(--gradient-ocean);
    color: #ffffff;
}

.policy-card .quote-box h3,
.policy-card .quote-box a {
    color: #ffffff;
}

.policy-card .quote-box h3 {
    margin-top: 0;
    font-size: 1.35rem;
}

/* Info list in 2 columns on tablets+ */
@media (min-width: 768px) {
    .quote-box ul {
        columns: 2;
        column-gap: 2rem;
    }
}

.quote-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}


/* ==========================================================
   17. CONTACT PAGE (contact.html)
   Uses the policy page background and header from 15.
   Left: contact details. Right: general inquiry form.
   ========================================================== */

/* Wider than the policy text card so the two columns fit */
.contact-layout {
    max-width: 1100px;
    margin: 0 auto;
}

/* Both columns use the white card look (padding only; the rest
   comes from .policy-card in 8. SHARED CARD LOOK and 15) */
.contact-layout .policy-card {
    max-width: none;
    height: 100%;
}

/* --- Left column: contact details --- */
.policy-card .contact-list {
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Round icon badge (same look as the feature card icons, smaller) */
.contact-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--gradient-ocean);
    color: #ffffff;
    font-size: 1.15rem;
}

.contact-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* "Planning a trip?" box pointing to the Request a Quote page */
.contact-quote-note {
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background-image: var(--gradient-ocean);
    color: #ffffff;
}

.policy-card .contact-quote-note h3 {
    margin-top: 0;
    color: #ffffff;
}

.contact-quote-note .hero-btn {
    min-width: 0;
    /* fits the narrow column */
    width: 100%;
}

/* --- Right column: form --- */
.contact-form .form-label {
    font-weight: 600;
    color: var(--brand-dark);
}

/* Red star after required field labels */
.contact-form .required::after {
    content: " *";
    color: #c0392b;
}

.contact-form .form-control,
.contact-form .form-select {
    padding: 0.7rem 0.9rem;
    border-color: #d5dbe1;
    border-radius: 0.5rem;
}

/* Brand blue focus ring instead of Bootstrap's default */
.contact-form .form-control:focus,
.contact-form .form-select:focus,
.contact-form .form-check-input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.2rem rgba(18, 113, 161, 0.2);
}

.contact-form .form-check-input:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

/* Hidden spam trap: people never see it, bots fill it in */
.contact-form .form-trap {
    position: absolute;
    left: -9999px;
}

/* Submit button: ocean gradient (from .hero-btn-ocean in 6. HERO) */
.contact-form .hero-btn {
    min-width: 200px;
}

.contact-form .hero-btn:disabled {
    opacity: 0.7;
}

.contact-form-note {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Message shown after sending (success or error) */
.form-status {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
}

.form-status.is-success {
    color: #1e6b3a;
    background-color: #e6f4ea;
}

.form-status.is-error {
    color: #8a1f17;
    background-color: #fdecea;
}

/* After pressing Send, only problems turn red. Fields that are fine
   keep their normal look (Bootstrap would turn them all green). */
.contact-form.was-validated .form-control:valid,
.contact-form.was-validated .form-select:valid {
    border-color: #d5dbe1;
    background-image: none;
    padding-right: 0.9rem;
}

.contact-form.was-validated .form-select:valid {
    --bs-form-select-bg-icon: none;
    background-image: var(--bs-form-select-bg-img);
    padding-right: 2.25rem;
    /* keeps the dropdown arrow */
}

.contact-form.was-validated .form-check-input:valid {
    border-color: var(--bs-border-color);
}

.contact-form.was-validated .form-check-input:valid:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.contact-form.was-validated .form-check-input:valid~.form-check-label {
    color: inherit;
}

.contact-form.was-validated .form-control:valid:focus,
.contact-form.was-validated .form-select:valid:focus,
.contact-form.was-validated .form-check-input:valid:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.2rem rgba(18, 113, 161, 0.2);
}


/* ==========================================================
   18. REQUEST A QUOTE PAGE (request-a-quote.html)
   Form fields share their look with 17. CONTACT PAGE
   (the form has class="contact-form quote-form").
   ========================================================== */

/* Same width as the policy text card */
.quote-wrap {
    max-width: 900px;
    margin: 0 auto;
}

/* Space between the stacked white cards */
.quote-wrap .policy-card {
    margin-bottom: 1.5rem;
}

.quote-wrap .policy-card h2:first-child {
    margin-top: 0;
}

/* "Your answers are saved on this device..." line */
.draft-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Button that looks like a link (e.g. "Start over") */
.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-blue);
    text-decoration: underline;
}

/* --- Each numbered form section is its own white card --- */
.quote-section {
    min-width: 0;
    border: 0;
}

.quote-section>legend {
    float: none;
    width: auto;
    margin-bottom: 1.25rem;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brand-dark);
}

/* Round gradient number before each section title */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0.6rem;
    border-radius: 50%;
    background-image: var(--gradient-ocean);
    color: #ffffff;
    font-size: 1rem;
    vertical-align: 0.15em;
}

/* Intro text under a section title */
.section-intro {
    margin-top: -0.5rem;
}

/* --- A question answered with radio buttons or checkboxes --- */
.choice-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-group>legend {
    float: none;
    width: auto;
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 1rem;
}

/* Options in columns: 1 on phones, 2 on tablets+ */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem 1.5rem;
}

@media (min-width: 576px) {
    .choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Long lists: 3 columns on desktops */
@media (min-width: 992px) {
    .choice-grid.choice-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.choice-grid .form-check {
    margin-bottom: 0;
}

/* Red boxes and message when a required group is left empty */
.choice-group.is-invalid .form-check-input {
    border-color: #dc3545;
}

.group-error {
    margin-top: 0.35rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* Small grey helper text under a question */
.field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-muted);
}

/* "Other" text box that appears when "Other" is ticked */
.other-input {
    max-width: 420px;
    margin-top: 0.6rem;
}

/* --- Section 4: one box per traveler --- */
.traveler-list {
    display: grid;
    gap: 1rem;
}

.traveler-card {
    padding: 1.25rem;
    border: 1px solid #dfe3e8;
    border-left: 4px solid var(--brand-blue);
    border-radius: 0.75rem;
    background-color: var(--bg-light);
}

.policy-card .traveler-title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--brand-dark);
}

/* "(Primary traveler)" after Adult 1 */
.traveler-title span {
    font-weight: 400;
    color: var(--text-muted);
}

/* "No middle name" checkbox under the middle name box */
.no-middle {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
}

/* "Use Legal Names" notice: amber instead of blue so it stands out */
.policy-callout.callout-important {
    border-left-color: #e0a100;
    background-color: #fff8e1;
}

.policy-card .callout-important h3 {
    color: #8a6100;
}

/* "I have verified the names..." checkbox */
.verify-check .form-check-label {
    font-weight: 600;
    color: var(--brand-dark);
}

/* --- Travel insurance note inside section 12 --- */
.quote-wrap .policy-callout h3 {
    font-size: 1.1rem;
}

/* --- "Before You Submit" card --- */
.quote-submit-card .form-label {
    font-size: 1.1rem;
}

.submit-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.95rem;
}

/* --- Thank-you message shown after sending --- */
.quote-success {
    text-align: center;
}

.quote-success .bi {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 3.5rem;
    color: #2e8b57;
}

/* --- "What Happens Next?" numbered steps --- */
.policy-card .quote-steps {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.quote-steps li {
    position: relative;
    margin-bottom: 1.25rem;
    padding-left: 3.25rem;
    counter-increment: step;
}

.quote-steps li:last-child {
    margin-bottom: 0;
}

.quote-steps li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--gradient-ocean);
    color: #ffffff;
    font-weight: 600;
}

.quote-steps strong {
    display: block;
    color: var(--brand-dark);
}


/* ==========================================================
   19. FAQs PAGE (faqs.html)
   Uses the policy page background, header and white cards
   from 15. Each question opens and closes on click
   (built-in <details>, no script needed).
   ========================================================== */

/* Same width as the policy text card */
.faq-wrap {
    max-width: 900px;
    margin: 0 auto;
}

/* Space between the stacked white cards */
.faq-wrap .policy-card {
    margin-bottom: 1.5rem;
}

.faq-wrap .policy-card h2:first-child {
    margin-top: 0;
}

/* Topic buttons at the top (jump to each group) */
.faq-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.policy-card .faq-nav a {
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    background-color: rgba(18, 113, 161, 0.1);
    color: var(--brand-blue);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.policy-card .faq-nav a:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
}

/* --- One question --- */
.faq-item {
    border-bottom: 1px solid #dfe3e8;
}

.faq-item:last-child {
    border-bottom: 0;
}

/* The question line (click to open) */
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-dark);
    cursor: pointer;
    list-style: none;
    /* hides the default triangle */
    transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker {
    display: none;
    /* hides the default triangle in Safari */
}

.faq-item summary:hover {
    color: var(--brand-blue);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Plus icon on the right; turns into an x when open */
.faq-item summary .bi {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--brand-blue);
    transition: transform 0.25s ease;
}

.faq-item[open] summary .bi {
    transform: rotate(45deg);
}

/* The answer */
.faq-answer {
    padding-bottom: 1.25rem;
}

.faq-answer> :last-child {
    margin-bottom: 0;
}

/* --- Closing gradient box with buttons (FAQs "Still have questions?",
   About "Plan Your Trip") --- */
.page-cta {
    padding: clamp(1.5rem, 5vw, 3rem);
    border-radius: var(--card-radius);
    background-image: var(--gradient-ocean);
    color: #ffffff;
    text-align: center;
}

.page-cta h2 {
    font-family: 'MagicRetro', Georgia, serif;
    font-size: clamp(2rem, 5vw, 2.75rem);
}

.page-cta p {
    color: rgba(255, 255, 255, 0.8);
}

/* Buttons: "Request a Quote" (from 12. SECTION 6) and
   "Contact Me" (glass look from 5. NAVBAR), same width */
.page-cta .cta-buttons {
    margin-top: 0.5rem;
}

/* ==========================================================
   20. ABOUT PAGE (about.html)
   Uses the policy page background, header and white cards
   from 15. Wider than the text pages so photos fit.
   ========================================================== */

.about-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* Space between the stacked white cards */
.about-wrap .policy-card {
    margin-bottom: 1.5rem;
}

.about-wrap .policy-card h2:first-child {
    margin-top: 0;
}

/* Cards side by side (Credentials | How It Works) fill the row height */
.about-wrap .row>[class*="col"]>.policy-card {
    height: calc(100% - 1.5rem);
}

/* "Hi, I'm Jodi!" in the display font */
.policy-card .about-hello {
    margin-bottom: 1rem;
    font-family: 'MagicRetro', Georgia, serif;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 400;
    color: var(--brand-dark);
}

/* --- Photo of Jodi --- */
.about-portrait {
    display: block;
    width: 100%;
    height: auto;
    /* lets aspect-ratio set the height (the width/height in the HTML only reserve space while loading) */
    aspect-ratio: 4 / 5;
    /* photo shape (width / height) */
    object-fit: cover;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* Phones: the photo sits above the text, so keep it from
   filling the whole screen */
@media (max-width: 767.98px) {
    .about-portrait {
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Soft blue box shown until a real photo is added
   (portrait and carousel slides) */
.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    background-image: linear-gradient(135deg, hsl(200 60% 92%), hsl(175 45% 88%));
    color: var(--brand-blue);
    font-weight: 600;
    text-align: center;
}

.photo-placeholder .bi {
    font-size: 3rem;
    opacity: 0.6;
}

.photo-placeholder small {
    font-weight: 400;
    color: var(--text-muted);
}

/* --- Travel stats (50 states, 6 continents...) --- */
.about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
    text-align: center;
}

/* 4 across only where there's room: large phones/small tablets (the
   text is full width there) and wide screens. Tablets and laptops,
   where the text shares the row with the photo, keep 2 x 2. */
@media (min-width: 576px) and (max-width: 767.98px),
(min-width: 1200px) {
    .about-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.about-stats div {
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--bg-light);
}

.about-stats strong {
    display: block;
    font-family: 'MagicRetro', Georgia, serif;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--brand-blue);
}

.about-stats span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* --- Visited places map (drawn by visitedplaces.com) --- */
.visited-map {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 260px;
}

/* --- Photo carousel: "Snapshots From My Travels" --- */
.snapshots {
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: var(--brand-dark);
}

/* Each photo (and its placeholder) */
.snapshot {
    display: block;
    width: 100%;
    height: auto;
    /* lets aspect-ratio set the height, even if width/height are added in the HTML */
    aspect-ratio: 3 / 2;
    /* photo shape (width / height) */
    object-fit: cover;
}

/* Place name over the bottom of the photo, on a dark fade */
.snapshots .carousel-caption {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 3rem 1.5rem 1.25rem;
    text-align: left;
    background-image: linear-gradient(180deg, rgba(17, 28, 39, 0), rgba(17, 28, 39, 0.75));
}

.policy-card .snapshots .carousel-caption h3 {
    margin: 0;
    font-family: 'MagicRetro', Georgia, serif;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    color: #ffffff;
}

.snapshots .carousel-caption p {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.85);
}

/* Phones: smaller caption so it doesn't cover most of the photo */
@media (max-width: 575.98px) {
    .snapshots .carousel-caption {
        padding: 2rem 1rem 0.75rem;
    }

    .snapshots .carousel-caption p {
        font-size: 0.85rem;
    }
}

/* Dots at the top right, out of the caption's way */
.snapshots .carousel-indicators {
    top: 0.75rem;
    bottom: auto;
    justify-content: flex-end;
    margin: 0 1.25rem 0 0;
}

/* Arrows in round dark circles so they show on any photo */
.snapshots .carousel-control-prev,
.snapshots .carousel-control-next {
    width: 4rem;
}

.snapshots .carousel-control-prev-icon,
.snapshots .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(17, 28, 39, 0.45);
    background-size: 1rem;
}

/* --- "What I Specialize In" grid --- */
.specialty-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .specialty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .specialty-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.specialty {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background-color: var(--bg-light);
}

/* Smaller version of the feature card icon (10. SECTION 4) */
.specialty .feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.policy-card .specialty h3 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    color: var(--brand-dark);
}

.specialty p {
    margin: 0;
    font-size: 0.95rem;
}

/* --- Credentials: training brand tags --- */
.policy-card .credential-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.credential-tags li {
    margin: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-blue);
    background-color: rgba(18, 113, 161, 0.1);
}

/* IATAN badge icon next to the heading */
.credential-icon {
    margin-right: 0.4rem;
    color: var(--brand-blue);
}