/* =========================================================
   HAMIDI TOURS
   TOUR DETAIL PAGE
   Brand Palette
========================================================= */

:root {
    --charcoal: #171716;
    --charcoal-soft: #20201e;

    --ivory: #F1EBDD;
    --ivory-soft: #e7dfcf;

    --terracotta: #A6533B;
    --sand: #C99A62;

    --sage: #6F7468;
    --white: #ffffff;

    --muted: #8e8d86;
    --border: rgba(241, 235, 221, 0.14);

    --border-dark: rgba(23, 23, 22, 0.12);
    --transition: 0.3s ease;
}


/* =========================================================
   GENERAL
========================================================= */



body {
    background: var(--ivory);
    color: var(--charcoal);
    overflow-x: hidden;
}

body,
html {
    padding: 0;
    margin: 0;
}

.section {
    padding: 80px 5%;
}

.section-label {
    margin-bottom: 18px;
    padding-left:30px ;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta);
}

.section-heading {
    max-width: 720px;
    margin-bottom: 65px;
   
}

.section-heading h2 {
    margin: 0 0 20px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.section-heading p:not(.section-label) {
    max-width: 600px;
    color: #65645d;
    font-size: 16px;
    line-height: 1.8;
}



/* NAVBAR */

.navbar {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: min(94%, 1380px);
    min-height: 72px;
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(8, 25, 20, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1000;
}

/* LOGO */

.nav-logo img {
    width: 100px;
    display: block;
}

/* CAR BUTTON */

.car-menu {
    width: 70px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* CAR */

.car {
    position: relative;
    width: 50px;
    height: 25px;
    display: block;
    transition: transform .3s ease;
}

/* CAR BODY */

.car-body {
    position: absolute;
    left: 3px;
    bottom: 5px;
    width: 44px;
    height: 17px;
    background: #101B35;
    border-radius: 7px 9px 5px 5px;
}

/* ROOF */

.car-body::before {
    content: "";
    position: absolute;
    left: 10px;
    top: -9px;
    width: 25px;
    height: 12px;
    background: #101B35;
    border-radius: 12px 12px 2px 2px;
}

/* WINDOWS */

.car-window {
    position: absolute;
    left: 15px;
    top: -6px;
    width: 17px;
    height: 7px;
    background: #EEF3FA;
    border-radius: 7px 7px 1px 1px;
}

/* WHEELS */

.wheel {
    position: absolute;
    bottom: 0;
    width: 11px;
    height: 11px;
    background: #101B35;
    border: 3px solid #fff;
    border-radius: 50%;
}

.wheel-left {
    left: 8px;
}

.wheel-right {
    right: 8px;
}

/* HEADLIGHT */

.headlight {
    position: absolute;
    right: 1px;
    bottom: 11px;
    width: 4px;
    height: 5px;
    background: #A6533B;
    border-radius: 2px;
}

/* HOVER */

.car-menu:hover .car {
    transform: translateX(4px);
}

/* MENU OPEN - MOVE CAR */

.navbar:has(.nav-menu.active) .car {
    transform: translateX(-150px);
}
/* NAV MENU */

.nav-menu {
    position: absolute;
    top: 82px;
    right: 0;
    width: 230px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #F7F8FC;
    border: 1px solid rgba(16, 27, 53, .08);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(16, 27, 53, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;
}

/* OPEN */

.nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* LINKS */

.nav-menu a {
    padding: 12px 14px;

    color: #101B35;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    border-radius: 12px;

    transition:
        background .25s ease,
        color .25s ease;
}

.nav-menu a:hover {
    background: #101B35;
    color: #F7F8FC;
}

/* BOOK BUTTON */

.nav-menu .nav-book {
    margin-top: 8px;
    background: #101B35;
    color: #F7F8FC;
    text-align: center;
}

.nav-menu .nav-book:hover {
    background: #A6533B;
    color: #101B35;
}
/* =========================================================
   TOUR HERO
========================================================= */

.tour-hero {
    min-height: 720px;
    margin-top: 0;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    background: #fffdf8;
}


/* =========================================================
   CONTENT — LEFT
========================================================= */

.tour-hero-content {
    display: flex;
    align-items: center;
    padding: 100px 7vw 90px 8vw;
}


.tour-hero-text {
    max-width: 600px;
}


.tour-eyebrow {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--terracotta);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
}


.tour-hero h1 {
    margin: 0;
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(58px, 6.5vw, 96px);
    line-height: .88;
    font-weight: 500;
    letter-spacing: -.055em;
}


.tour-hero h1 em {
    display: block;
    margin-top: 8px;
    color: var(--terracotta);
    font-weight: 400;
    font-style: italic;
}


.tour-hero-description {
    max-width: 490px;
    margin: 35px 0 27px;
    color: #65645d;
    font-size: 15px;
    line-height: 1.9;
}


.tour-info-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-bottom: 35px;
    color: var(--sage);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.tour-info-line i {
    width: 4px;
    height: 4px;
    display: block;
    background: var(--sand);
    border-radius: 50%;
}


/* =========================================================
   BOOK BUTTON
========================================================= */

.hero-book-btn {
    display: inline-flex;
    align-items: center;

    gap: 28px;

    padding: 16px 22px;

    border-radius: 50px;

    color: var(--ivory);

    background: rgba(8, 25, 20, 0.58);

    backdrop-filter: blur(20px);

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .1em;

    text-decoration: none;

    transition:
        background .3s ease,
        transform .3s ease;
}


.hero-book-btn span {
    font-size: 17px;
}


.hero-book-btn:hover {
    background: var(--terracotta);

    transform: translateY(-2px);
}


/* =========================================================
   IMAGE — RIGHT
========================================================= */

/* IMAGE — RIGHT */
.tour-hero-image {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50;
    overflow: visible;
    
}

.tour-hero-image img {
    width: 550px;
    height: 550px;
    object-fit: cover;
    border: 3px solid #A6533B ;
    clip-path: polygon(
    20% 0%,
    80% 0%,
    100% 20%,
    100% 80%,
    80% 100%,
    20% 100%,
    0% 80%,
    0% 20%
);
}

.tour-hero:hover .tour-hero-image img {
    transform: scale(1.02);
}

/* No overlay */
.tour-hero-image::after {
    display: none;
}

/* =========================================================
   OVERVIEW
========================================================= */

.tour-overview {
    background: #fffdf8;
}


.overview-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 100px;
    align-items: center;
}


.overview-content h2 {
    max-width: 650px;
    margin: 0 0 30px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(44px, 5vw, 68px);
    line-height: .98;
    font-weight: 500;
   
}


.overview-content > p:not(.section-label) {
    max-width: 650px;
    margin-bottom: 18px;
    color: #65645d;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================================================
   QUICK FACTS
========================================================= */

.quick-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border-dark);
}


.fact {
    padding: 22px 20px 22px 0;
    border-bottom: 1px solid var(--border-dark);
}


.fact:nth-child(odd) {
    border-right: 1px solid var(--border-dark);
}


.fact span {
    display: block;
    margin-bottom: 7px;
    color: var(--sage);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}


.fact strong {
    color: var(--charcoal);
    font-size: 14px;
    font-weight: 600;
}





/* =====================================================
   HAMIDI TOURS — JOURNEY DAYS
===================================================== */

.journey-days {
    padding: 110px 0;
    background: #f1ebdd;
    color: var(--charcoal);
}

.journey-days,
.journey-days *,
.itinerary,
.itinerary * {
    box-sizing: border-box;
}

/* JOURNEY HEADING */

.journey-days-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    margin-bottom: 55px;
}

.journey-days-heading > div {
    min-width: 0;
}

.journey-days-heading .section-label,
.itinerary-heading .section-label {
    display: inline-block;
    color: var(--terracotta);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.journey-days-heading h2 {
    max-width: 650px;
    margin: 16px 0 0;
    padding-left: 20px;
    border-left: 2px solid var(--terracotta);
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}

.journey-days-heading h2 em {
    display: block;
    margin-top: 8px;
    color: var(--terracotta);
    font-weight: 400;
}

.journey-days-heading > p {
    max-width: 340px;
    margin: 0;
    color: #6d6b64;
    font-size: 14px;
    line-height: 1.9;
}

/* =====================================================
   DAY SELECTOR
===================================================== */

.day-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);
}

/* Each day button */

.day-button {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    width: 100%;
    min-width: 0;
    min-height: 180px;
    padding: 23px 20px;
    border: 0;
    border-right: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    border-radius: 0;
    background: transparent;
    color: var(--charcoal);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.day-button > span {
    color: var(--terracotta);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.day-button strong {
    align-self: flex-start;
    max-width: 180px;
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.day-button b {
    align-self: flex-end;
    color: var(--sage);
    font-size: 19px;
    font-weight: 400;
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

/* Hover */

.day-button:hover {
    background: rgba(16, 27, 53, 0.06);
}

.day-button:hover b {
    transform: translate(3px, -3px);
    color: var(--terracotta);
}

/* Active day */

.day-button.active {
    background: var(--charcoal);
}

.day-button.active > span {
    color: var(--sand);
}

.day-button.active strong {
    color: var(--ivory);
}

.day-button.active b {
    color: var(--sand);
    transform: translate(3px, -3px);
}

/* Keyboard focus */

.day-button:focus-visible {
    position: relative;
    z-index: 2;
    outline: 2px solid var(--terracotta);
    outline-offset: -4px;
}

/* =====================================================
   ITINERARY SECTION
===================================================== */

.itinerary {
    padding: 100px 0 120px;
    background: var(--charcoal);
    color: var(--ivory);
    display: none;
}

/* Section heading */

.itinerary-heading {
    max-width: 760px;
    margin-bottom: 55px;
}

.itinerary-heading .section-label {
    color: var(--sand);
}

.itinerary-heading h2 {
    margin: 22px 0 24px;
    padding-left: 20px;
    border-left: 2px solid var(--terracotta);
    color: var(--ivory);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(44px, 5.5vw, 76px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}

.itinerary-heading h2 em {
    color: var(--sand);
    font-weight: 400;
}

.itinerary-heading > p {
    max-width: 540px;
    margin: 0;
    color: rgba(241, 235, 221, 0.62);
    font-size: 14px;
    line-height: 1.9;
}

/* =====================================================
   ITINERARY DETAILS PANEL
===================================================== */

.itinerary-list {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(241, 235, 221, 0.16);
    border-radius: 5px;
    background: rgba(241, 235, 221, 0.025);
}

/* Hidden days */

.itinerary-day {
    display: none;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 45px;
    width: 100%;
    padding: 45px;
    border: 0;
    scroll-margin-top: 35px;
}

/* Only the selected day appears */

.itinerary-day.active {
    display: grid;
    animation: itineraryReveal 0.4s ease both;
}

.itinerary.open {
    display: block;
}

/* Day information label */

.day-side {
    align-self: start;
    padding: 18px 0 18px 18px;
    border-left: 2px solid var(--terracotta);
}

.day-side span {
    display: block;
    color: var(--sand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.8;
}

.day-side small {
    display: block;
    margin-top: 12px;
    color: var(--terracotta);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    line-height: 1.8;
}

/* Main content */

.day-content {
    min-width: 0;
}

.day-content h3 {
    margin: 0 0 20px;
    color: var(--ivory);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(30px, 3.5vw, 43px);
    font-weight: 500;
    line-height: 1.15;
}

.day-content > p {
    max-width: 680px;
    margin: 0 0 28px;
    color: rgba(241, 235, 221, 0.65);
    font-size: 14px;
    line-height: 1.95;
}

/* Activity list */

.day-content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 35px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.day-content li {
    position: relative;
    padding: 13px 0 13px 19px;
    border-bottom: 1px solid rgba(241, 235, 221, 0.10);
    color: rgba(241, 235, 221, 0.78);
    font-size: 13px;
    line-height: 1.7;
}

.day-content li::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--terracotta);
}

/* Reveal animation */

@keyframes itineraryReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* =========================================================
   PLACES
========================================================= */


.places {
    padding: 110px 0 130px;
    background: #ffffff;
    overflow: hidden;
}

/* HEADING */

.places-heading {
    max-width: 720px;
    margin: 0 0 70px;
    padding-left: 30px;
}

.places-heading h2 {
    margin: 12px 0 0;
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.places-heading h2 em {
    color: var(--terracotta);
    font-weight: 400;
}

/* DESTINATIONS */

.places-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
}

/* EACH PLACE */

.place-item {
    position: relative;
    display: grid;
    grid-template-columns: 52% 1fr;
    align-items: center;
    gap: 75px;
    padding: 0 30px;
}

.place-item-reverse {
    grid-template-columns: 1fr 52%;
}

.place-item-reverse .place-image {
    order: 2;
}

.place-item-reverse .place-content {
    order: 1;
}

/* IMAGE */

.place-image {
    position: relative;
    width: min(100%, 550px);
    aspect-ratio: 1 / 1;
    height: auto;
    border: 3px solid saddlebrown;
    margin-left: 60px;
    margin-top: 60px;
    overflow: hidden;
    background: #eeeae2;
    clip-path: polygon(
        29.289% 0%,
        70.711% 0%,
        100% 29.289%,
        100% 70.711%,
        70.711% 100%,
        29.289% 100%,
        0% 70.711%,
        0% 29.289%
    );
}

.place-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0;
    transition:opacity .7s ease,
    transform .8s ease;
}

.place-image img.active {
    opacity: 1;
}

.place-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 6px;

    z-index: 5;
}

.place-slider-dots span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .55);

    transition:
        width .3s ease,
        background .3s ease;
}

.place-slider-dots span.active {
    width: 18px;
    border-radius: 10px;
    background: #ffffff;
}

/* CONTENT */

.place-content {
    position: relative;
    max-width: 480px;
    padding-left: 90px;
}

/* NUMBER */

.place-number {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: var(--terracotta);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.place-number::after {
    content: "";

    width: 45px;
    height: 1px;

    background: var(--terracotta);

    opacity: .6;
}

/* TITLE */

.place-content h3 {
    margin: 0 0 18px;

    color: var(--charcoal);

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(42px, 4vw, 56px);
    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.035em;
}

/* DESCRIPTION */

.place-content p {
    max-width: 440px;

    margin: 0 0 25px;

    color: #6b6962;

    font-size: 14px;
    line-height: 1.9;
}

/* TAGS */

.place-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.place-tags span {
    padding: 8px 13px;

    border: 1px solid rgba(23, 23, 22, .13);

    color: #66645e;

    font-size: 10px;
    letter-spacing: .05em;

    background: rgba(255,255,255,.6);
}

/* DECORATIVE NUMBER */

.place-item::before {
    content: attr(data-number);

    position: absolute;

    left: -8px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(16, 27, 53, .035);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 180px;
    line-height: 1;

    pointer-events: none;
}

/* REVERSE DECORATION */

.place-item-reverse::before {
    left: auto;
    right: -8px;
}


/* =========================================================
   EXPERIENCES
========================================================= */

.experiences {
    padding: 100px 0;
    background: var(--ivory);
}

.experiences-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 60px;
    margin-bottom: 55px;
    
}

.experiences-heading h2 {
    max-width: 650px;
    margin: 12px 0 0;
    padding-left: 25px;
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.experiences-heading h2 em {
    color: var(--terracotta);
    font-weight: 400;
}

.experiences-heading > p {
    max-width: 320px;
    margin: 0;
    color: #6b6962;
    font-size: 13px;
    line-height: 1.8;
}

.experience-list {
    border-top: 1px solid var(--border-dark);
}

.experience-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 35px;
    min-height: 145px;
    padding: 22px 20px;
    border-bottom: 1px solid var(--border-dark);
    transition: background .3s ease;
}

.experience-item:hover {
    background: rgba(23, 23, 22, .035);
}

.experience-image {
    width: 180px;
    height: 105px;
    overflow: hidden;
}

.experience-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.experience-item:hover .experience-image img {
    transform: scale(1.04);
}

.experience-content {
    display: grid;
    grid-template-columns: 45px 250px 1fr;
    align-items: center;
    gap: 25px;
}

.experience-content > span {
    color: var(--terracotta);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.experience-content h3 {
    margin: 0;
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 25px;
    font-weight: 500;
}

.experience-content p {
    max-width: 400px;
    margin: 0;
    color: #6b6962;
    font-size: 13px;
    line-height: 1.7;
}

/* =========================================================
   INCLUDED
========================================================= */

.included-section {
    background: #fffdf8;
}


.included-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.included-column,
.not-included-column {
    padding-top: 40px;

    border-top: 1px solid var(--border-dark);
}


.included-column h2,
.not-included-column h2 {
    margin: 0 0 30px;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 43px;

    font-weight: 500;
}


.included-list,
.not-included-list {
    margin: 0;

    padding: 0;

    list-style: none;
}


.included-list li,
.not-included-list li {
    display: flex;

    gap: 15px;

    padding: 13px 0;

    border-bottom: 1px solid var(--border-dark);

    color: #65645d;

    font-size: 14px;
}


.included-list li span {
    color: var(--sage);
}


.not-included-list li span {
    color: var(--terracotta);
}


/* =========================================================
   BEFORE YOU GO
========================================================= */

.before-you-go {
    padding: 110px 0;
    background: #fffdf8;
}


.before-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 55px;
    border-top: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);
}


.before-card {
    min-height: 260px;
    padding: 32px;
    border-right: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}


.before-number {
    color: var(--terracotta);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
}


.before-card h3 {
    margin: 55px 0 15px;
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 27px;
    font-weight: 500;
}


.before-card p {
    margin: 0;
    color: #65645d;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   TOUR CTA
========================================================= */

.tour-cta {
    padding: 105px 0 35px;
    background: #ffffff;
}

.cta-inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 100px;
    align-items: end;
    padding: 70px 0 75px;
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.cta-heading {
    max-width: 650px;
}

.cta-heading h2 {
    margin: 14px 0 0;
    color: var(--charcoal);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(48px, 6vw, 78px);
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.045em;
}

.cta-heading h2 em {
    display: block;
    color: var(--terracotta);
    font-weight: 400;
}

.cta-content {
    max-width: 390px;
}

.cta-content p {
    margin: 0 0 30px;
    color: #6b6962;
    font-size: 14px;
    line-height: 1.85;
}

.cta-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    color: var(--ivory);
    border-radius: 50px;
    background: rgba(8, 25, 20, 0.58);    
    backdrop-filter: blur(20%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    color: var(--ivory);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .3s ease;
}

.cta-primary span {
    font-size: 17px;
    font-weight: 400;
}

.cta-primary:hover {
    background: var(--terracotta);
}

.cta-secondary {
    color: var(--charcoal);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--charcoal);
    padding-bottom: 5px;
}

.cta-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 18px;
    color: #99958b;
    font-size: 9px;
    letter-spacing: .14em;
}
/* =========================================================
   SMOOTH SCROLL
========================================================= */

html {
    scroll-behavior: smooth;
}
/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;

    padding-top: 90px;

    background: var(--charcoal);

    color: var(--ivory);

    overflow: hidden;
}


.footer-grid {
    position: relative;

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 60px;

    padding-bottom: 75px;

    z-index: 2;
}


.footer-logo img {
    width: 145px;
    height: auto;
}


.footer-brand p {
    max-width: 350px;

    margin-top: 25px;

    color: rgba(241, 235, 221, 0.58);

    font-size: 14px;
    line-height: 1.8;
}


.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.footer-column h4 {
    margin: 0 0 12px;

    color: var(--sand);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.footer-column a {
    width: fit-content;

    color: rgba(241, 235, 221, 0.68);

    font-size: 13px;

    text-decoration: none;

    transition: color var(--transition);
}


.footer-column a:hover {
    color: var(--ivory);
}


.footer-bottom {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 22px;
    padding-bottom: 25px;

    border-top: 1px solid var(--border);

    z-index: 2;
}


.footer-bottom p {
    margin: 0;

    color: rgba(241, 235, 221, 0.42);

    font-size: 11px;
}


/* Tour-page navigation and responsive layouts */
.related-tours { padding:78px 5%; background:#f5f1e8; }
.related-tours > h2 { margin:0 0 12px; color:#101b35; text-align:center; font:500 clamp(32px,4vw,52px)/1.12 'Playfair Display',Georgia,serif; }
.related-tours .related-intro { max-width:660px; margin:0 auto 34px; color:#69758a; text-align:center; line-height:1.8; }
.related-tour-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; max-width:1180px; margin:0 auto; }
.related-tour-card { min-width:0; overflow:hidden; border:1px solid #e4dfd3; background:#fff; }
.related-tour-card img { display:block; width:100%; aspect-ratio:1.55; object-fit:cover; }
.related-tour-card > div { padding:18px 20px 20px; }
.related-tour-card h3 { margin:0 0 8px; color:#101b35; font:500 22px/1.25 'Playfair Display',Georgia,serif; }
.related-tour-card p { margin:0 0 12px; color:#69758a; font-size:13px; line-height:1.7; }
.related-tour-card a { color:#315b8c; font-size:12px; font-weight:700; }
.tour-placeholder img { width:100%; max-height:380px; object-fit:cover; }
.tour-placeholder p { margin-top:12px; color:#65645d; font-size:12px; line-height:1.7; }
.tour-hero-image img { transition:none; }
@media(max-width:1100px) {
 .tour-hero { min-height:640px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .tour-hero-image { min-width:0; min-height:580px; padding-inline:18px; }
 .tour-hero-image img { width:min(100%,500px); height:auto; aspect-ratio:1; }
 .tour-hero-content { min-width:0; padding:95px 5vw 55px; }
 .tour-hero h1 { font-size:clamp(48px,6vw,72px); line-height:1.02; }
 .overview-grid { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:48px; }
 .place-item { gap:42px; }
 .place-image { margin-left:20px; margin-top:32px; }
 .experience-content { grid-template-columns:36px minmax(150px,220px) minmax(0,1fr); gap:18px; }
 .included-grid { gap:50px; }
 .before-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .footer-grid { grid-template-columns:1.5fr 1fr 1fr; gap:32px; }
}
@media(max-width:800px) {
 .navbar { top:14px; width:calc(100% - 28px); min-height:62px; padding:0 12px; }
 .navbar .nav-logo img { width:88px; }
 .navbar .nav-menu { top:calc(100% + 8px); right:0; width:min(280px,calc(100vw - 32px)); }
 .tour-hero { min-height:0; grid-template-columns:1fr; }
 .tour-hero-image { min-height:0; padding:98px 24px 0; }
 .tour-hero-image img { width:min(100%,440px); margin:auto; }
 .tour-hero-content { padding:32px 6vw 58px; }
 .tour-hero h1 { font-size:clamp(44px,8vw,62px); line-height:1.08; letter-spacing:-.035em; }
 .tour-eyebrow { margin-bottom:16px; }
 .tour-hero-description { margin:20px 0 20px; }
 .overview-grid { grid-template-columns:1fr; gap:38px; }
 .tour-map { max-width:650px; margin:auto; }
 .journey-days-heading { align-items:flex-start; gap:20px; }
 .day-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .day-button { min-height:150px; padding:18px 15px; }
 .day-button strong { font-size:17px; }
 .itinerary-day { grid-template-columns:110px minmax(0,1fr); gap:25px; padding:32px; }
 .places { padding:75px 0 85px; }
 .places-list { gap:70px; }
 .place-item,.place-item-reverse { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; padding:0 20px; }
 .place-image { width:100%; margin:0; }
 .experiences { padding:75px 0; }
 .experiences-heading { align-items:flex-start; gap:22px; }
 .experience-content { grid-template-columns:32px minmax(140px,200px) minmax(0,1fr); gap:14px; }
 .included-grid { gap:38px; }
 .before-card { padding:24px; min-height:230px; }
 .before-card h3 { margin-top:38px; font-size:23px; }
 .related-tour-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px) {
 .navbar { width:calc(100% - 24px); }
 .tour-hero-image { padding:92px 18px 0; }
 .tour-hero-content { padding:28px 22px 48px; }
 .tour-hero h1 { font-size:clamp(38px,10vw,54px); line-height:1.1; }
 .tour-hero-description { font-size:14px; line-height:1.75; }
 .tour-info-line { gap:8px; font-size:9px; }
 .section { padding:58px 20px; }
 .section-label { padding-left:0; }
 .overview-content h2 { font-size:clamp(34px,9vw,48px); line-height:1.08; }
 .quick-facts { grid-template-columns:1fr 1fr; }
 .fact { padding:16px 12px 16px 0; }
 .journey-days { padding:58px 0; }
 .journey-days-heading { display:block; padding:0 20px; }
 .journey-days-heading h2 { font-size:clamp(34px,9vw,48px); line-height:1.1; }
 .journey-days-heading > p { margin-top:14px; }
 .day-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .day-button { min-height:125px; padding:16px 12px; gap:18px; }
 .day-button strong { font-size:16px; }
 .itinerary { padding:58px 0 70px; }
 .itinerary-heading { margin:0 20px 30px; }
 .itinerary-heading h2 { margin:16px 0; padding-left:14px; font-size:clamp(36px,10vw,52px); line-height:1.08; }
 .itinerary-day { grid-template-columns:1fr; gap:18px; padding:22px 18px; }
 .day-content h3 { font-size:clamp(26px,7vw,36px); line-height:1.2; }
 .day-content ul { grid-template-columns:1fr; }
 .places-heading { margin:0 20px 32px; padding-left:0; }
 .places-heading h2,.experiences-heading h2 { padding-left:0; font-size:clamp(34px,9vw,50px); line-height:1.08; }
 .places-list { gap:48px; }
 .place-item,.place-item-reverse { grid-template-columns:1fr; gap:20px; padding:0 20px; }
 .place-item-reverse .place-image,.place-item-reverse .place-content { order:initial; }
 .place-image { width:min(100%,430px); justify-self:center; margin:0; }
 .place-content { padding:0 5px; }
 .experiences-heading { display:block; padding:0 20px; }
 .experiences-heading > p { margin-top:14px; }
 .experience-item { grid-template-columns:100px minmax(0,1fr); gap:15px; padding:16px 8px; }
 .experience-image { width:100px; height:85px; }
 .experience-content { grid-template-columns:28px minmax(0,1fr); gap:7px 12px; }
 .experience-content h3 { font-size:18px; }
 .experience-content p { grid-column:2; font-size:12px; }
 .included-grid { grid-template-columns:1fr; gap:38px; }
 .included-column h2,.not-included-column h2 { font-size:clamp(30px,8vw,40px); }
 .before-grid { grid-template-columns:1fr 1fr; margin-top:32px; }
 .before-card { min-height:0; padding:20px 16px; }
 .before-card h3 { margin:26px 0 10px; font-size:20px; }
 .related-tours { padding:56px 18px; }
 .related-tour-grid { grid-template-columns:1fr; }
 .cta-inner { display:block; }
 .cta-content { margin-top:20px; }
 .cta-actions { align-items:flex-start; flex-direction:column; gap:16px; }
}
@media(max-width:360px) {
 .tour-hero h1 { font-size:36px; }
 .tour-info-line i { display:none; }
 .day-buttons { grid-template-columns:1fr 1fr; }
 .before-grid { grid-template-columns:1fr; }
 .quick-facts { grid-template-columns:1fr; }
 .fact:nth-child(odd) { border-right:0; }
 .experience-item { grid-template-columns:84px minmax(0,1fr); gap:11px; }
 .experience-image { width:84px; height:76px; }
}