/* =========================================
   JODAN ADVENTURE
   GLOBAL
========================================= */

:root {

    --jodan-blue: #062d55;
    --jodan-dark: #031b32;

    --jodan-red: #d7192d;

    --white: #ffffff;

    --text: #111820;

    --light: #f5f3ee;

    --border: rgba(255,255,255,0.18);

}


* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "DM Sans", sans-serif;

    background: var(--light);

    color: var(--text);

    overflow-x: hidden;

}


a {

    text-decoration: none;

    color: inherit;

}


img {

    max-width: 100%;

    display: block;

}


.container {

    width: min(1240px, calc(100% - 64px));

    margin: auto;

}


/* =========================================
   TOP BAR
========================================= */

.top-bar {

    height: 34px;

    background: var(--jodan-dark);

    color: rgba(255,255,255,0.75);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.13em;

}


.top-bar-inner {

    height: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.top-bar b {

    color: white;

    margin-left: 8px;

}


/* =========================================
   NAVBAR
========================================= */

.jodan-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

}


.navbar {

    transition: all .4s ease;

}


.jodan-header.scrolled .navbar {

    background: rgba(3, 27, 50, .90);

    backdrop-filter: blur(16px);

}


.navbar-inner {

    height: 92px;

    display: flex;

    align-items: center;

    gap: 40px;

}


/* =========================================
   LOGO
========================================= */

.jodan-logo {

    width: 185px;

    background: white;

    padding: 6px 9px;

    border-radius: 3px;

    flex-shrink: 0;

}


.jodan-logo img {

    width: 100%;

}


/* =========================================
   DESKTOP MENU
========================================= */

.desktop-menu {

    display: flex;

    gap: 32px;

    margin-left: auto;

}


.desktop-menu a {

    color: white;

    font-size: 12px;

    font-weight: 500;

    position: relative;

    padding: 8px 0;

}


.desktop-menu a::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 1px;

    background: white;

    transition: width .35s ease;

}


.desktop-menu a:hover::after {

    width: 100%;

}


/* =========================================
   NAV CTA
========================================= */

.nav-plan-btn {

    color: white;

    border: 1px solid rgba(255,255,255,.5);

    padding: 12px 18px;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .12em;

    transition: all .3s ease;

}


.nav-plan-btn span {

    margin-left: 13px;

    font-size: 15px;

}


.nav-plan-btn:hover {

    background: white;

    color: var(--jodan-blue);

}


/* =========================================
   MOBILE MENU BUTTON
========================================= */

.mobile-menu-btn {

    display: none;

    width: 42px;

    height: 42px;

    background: transparent;

    border: 1px solid rgba(255,255,255,.5);

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    padding: 0 10px;

    cursor: pointer;

}


.mobile-menu-btn span {

    width: 100%;

    height: 1px;

    background: white;

}


/* =========================================
   MOBILE MENU
========================================= */

.mobile-menu {

    display: none;

}


/* =========================================
   HERO
========================================= */

.hero-section {

    position: relative;

    min-height: 850px;

    height: 100vh;

    max-height: 950px;

    color: white;

    overflow: hidden;

    display: flex;

    align-items: center;

}


/* =========================================
   HERO BACKGROUND
========================================= */

.hero-background {

    position: absolute;

    inset: -30px;

    background-image:
        url("../images/banner.jpg");

    background-size: cover;

    background-position: center;

    animation: heroZoom 18s ease-in-out infinite alternate;

}


@keyframes heroZoom {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(1.08);

    }

}


/* =========================================
   HERO OVERLAY
========================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(2,20,38,.90) 0%,
            rgba(2,20,38,.60) 42%,
            rgba(2,20,38,.15) 100%
        ),

        linear-gradient(
            0deg,
            rgba(2,20,38,.65),
            transparent 55%
        );

}


/* =========================================
   HERO CONTENT
========================================= */

.hero-container {

    position: relative;

    z-index: 2;

    padding-top: 80px;

}


.hero-content {

    max-width: 850px;

}


.hero-label {

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 10px;

    letter-spacing: .22em;

    text-transform: uppercase;

    font-weight: 700;

    margin-bottom: 25px;

}


.hero-line {

    width: 35px;

    height: 1px;

    background: var(--jodan-red);

}


/* =========================================
   HERO TITLE
========================================= */

.hero-title {

    font-family: "Playfair Display", serif;

    font-size: clamp(65px, 8vw, 120px);

    line-height: .88;

    letter-spacing: -.05em;

    font-weight: 600;

}


.hero-title em {

    display: block;

    color: #e8eef3;

    font-weight: 500;

}


/* =========================================
   HERO DESCRIPTION
========================================= */

.hero-description {

    max-width: 525px;

    margin-top: 32px;

    color: rgba(255,255,255,.82);

    font-size: 16px;

    line-height: 1.7;

}


/* =========================================
   HERO BUTTONS
========================================= */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 36px;

}


.primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 17px 22px;

    background: white;

    color: var(--jodan-blue);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;

    transition: all .3s ease;

}


.primary-btn:hover {

    background: var(--jodan-red);

    color: white;

    transform: translateY(-3px);

}


.primary-btn span {

    font-size: 16px;

}


.hero-text-btn {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .12em;

    border-bottom: 1px solid rgba(255,255,255,.6);

    padding-bottom: 7px;

}


.hero-text-btn span {

    margin-left: 12px;

}


/* =========================================
   SCROLL
========================================= */

.hero-scroll {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    gap: 13px;

    writing-mode: vertical-rl;

    font-size: 8px;

    letter-spacing: .2em;

    opacity: .75;

}


.scroll-line {

    width: 1px;

    height: 55px;

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

}


/* =========================================
   HERO BOTTOM
========================================= */

.hero-bottom-info {

    position: absolute;

    right: 32px;

    bottom: 42px;

    display: flex;

    gap: 45px;

}


.hero-info-item {

    display: flex;

    gap: 12px;

    align-items: flex-start;

}


.hero-info-item strong {

    font-family: "Playfair Display", serif;

    font-size: 22px;

}


.hero-info-item span {

    font-size: 9px;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: .1em;

    opacity: .72;

}


/* =========================================
   REVEAL ANIMATION
========================================= */

.reveal {

    opacity: 0;

    transform: translateY(30px);

    animation: revealUp 1s cubic-bezier(.2,.8,.2,1) forwards;

}


.hero-label {

    animation-delay: .25s;

}


.hero-title {

    animation-delay: .4s;

}


.hero-description {

    animation-delay: .55s;

}


.hero-buttons {

    animation-delay: .7s;

}


@keyframes revealUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* =========================================
   TRIP PLANNER SECTION
========================================= */

.trip-planner-section {

    position: relative;

    z-index: 10;

    margin-top: -75px;

    padding-bottom: 30px;

}


/* =========================================
   MAIN CARD
========================================= */

.trip-planner-card {

    position: relative;

    background: #ffffff;

    display: grid;

    grid-template-columns: .9fr 1.6fr;

    align-items: center;

    gap: 45px;

    padding: 38px 42px;

    box-shadow:
        0 25px 80px rgba(3, 29, 56, .14);

    border: 1px solid rgba(6, 45, 85, .06);

}


/* =========================================
   INTRO
========================================= */

.planner-intro {

    max-width: 360px;

}


.section-eyebrow {

    display: inline-block;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;

    color: var(--jodan-red);

    text-transform: uppercase;

    margin-bottom: 12px;

}


.planner-intro h2 {

    font-family: "Playfair Display", serif;

    font-size: 36px;

    line-height: 1;

    letter-spacing: -.035em;

    color: var(--jodan-blue);

}


.planner-intro h2 em {

    display: block;

    color: var(--jodan-red);

    font-weight: 500;

}


.planner-intro p {

    color: #737b83;

    font-size: 12px;

    line-height: 1.7;

    margin-top: 15px;

    max-width: 330px;

}


/* =========================================
   FORM
========================================= */

.trip-planner-form {

    display: grid;

    grid-template-columns:
        1.25fr
        1fr
        1fr
        auto;

    gap: 10px;

}


/* =========================================
   FIELD
========================================= */

.planner-field {

    min-height: 68px;

    border: 1px solid #e1e3e5;

    display: flex;

    align-items: center;

    padding: 0 13px;

    gap: 11px;

    background: #fff;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;

}


.planner-field:hover {

    border-color: rgba(6,45,85,.4);

    box-shadow:
        0 8px 25px rgba(6,45,85,.07);

    transform: translateY(-2px);

}


.planner-field:focus-within {

    border-color: var(--jodan-blue);

    box-shadow:
        0 8px 25px rgba(6,45,85,.09);

}


/* =========================================
   ICON
========================================= */

.field-icon {

    width: 25px;

    height: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: #f0f3f6;

    color: var(--jodan-blue);

    font-size: 14px;

    flex-shrink: 0;

}


/* =========================================
   FIELD CONTENT
========================================= */

.field-content {

    flex: 1;

    min-width: 0;

}


.field-content label {

    display: block;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .13em;

    font-weight: 700;

    color: #858b91;

    margin-bottom: 5px;

}


.field-content select,
.field-content input {

    display: block;

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: var(--text);

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 600;

    padding: 0;

}


.field-content select {

    cursor: pointer;

    appearance: none;

}


.field-content input {

    color-scheme: light;

}


/* =========================================
   FIELD ARROW
========================================= */

.field-arrow {

    font-size: 13px;

    color: #7b8289;

}


/* =========================================
   SUBMIT BUTTON
========================================= */

.planner-submit-btn {

    min-width: 155px;

    border: none;

    cursor: pointer;

    background: var(--jodan-red);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    padding: 0 20px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.planner-submit-btn b {

    font-size: 17px;

    font-weight: 400;

}


.planner-submit-btn:hover {

    background: var(--jodan-blue);

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(6,45,85,.22);

}


.planner-submit-btn.loading {

    pointer-events: none;

    opacity: .75;

}


.planner-submit-btn.loading b {

    animation: plannerSpin .8s linear infinite;

}


@keyframes plannerSpin {

    to {

        transform: rotate(360deg);

    }

}


/* =========================================
   STATUS
========================================= */

.planner-status {

    position: absolute;

    left: 42px;

    bottom: 7px;

    font-size: 9px;

    color: var(--jodan-blue);

    opacity: 0;

    transform: translateY(5px);

    transition: all .3s ease;

}


.planner-status.show {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================
   TRUST
========================================= */

.planner-trust {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 40px;

    padding-top: 18px;

    color: #747b81;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .09em;

}


.planner-trust > div {

    display: flex;

    align-items: center;

    gap: 7px;

}


.trust-dot {

    width: 5px;

    height: 5px;

    background: var(--jodan-red);

    border-radius: 50%;

}


/* =========================================
   PLANNER RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .trip-planner-card {

        grid-template-columns: 1fr;

        gap: 28px;

    }


    .planner-intro {

        max-width: 500px;

    }


    .planner-intro p {

        max-width: 500px;

    }


    .trip-planner-form {

        grid-template-columns:
            1fr
            1fr;

    }


    .planner-submit-btn {

        min-height: 62px;

    }

}


@media (max-width: 600px) {

    .trip-planner-section {

        margin-top: -35px;

    }


    .trip-planner-card {

        padding: 28px 20px;

        gap: 25px;

    }


    .planner-intro h2 {

        font-size: 31px;

    }


    .planner-intro p {

        font-size: 11px;

    }


    .trip-planner-form {

        grid-template-columns: 1fr;

        gap: 9px;

    }


    .planner-field {

        min-height: 64px;

    }


    .planner-submit-btn {

        min-height: 58px;

    }


    .planner-trust {

        flex-direction: column;

        gap: 9px;

        align-items: flex-start;

        padding: 18px 5px 0;

    }

}
/* =========================================
   EXPLORE INDIA SECTION
========================================= */

.explore-india-section {

    padding: 135px 0 145px;

    background: #f6f4ef;

}


/* =========================================
   HEADING
========================================= */

.explore-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 55px;

}


.explore-heading-left {

    max-width: 650px;

}


.explore-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5vw, 72px);

    line-height: .95;

    letter-spacing: -.045em;

    color: var(--jodan-blue);

    margin-top: 14px;

}


.explore-heading h2 em {

    color: var(--jodan-red);

    font-weight: 500;

}


.explore-heading-right {

    max-width: 340px;

}


.explore-heading-right p {

    color: #70777d;

    font-size: 13px;

    line-height: 1.75;

    margin-bottom: 24px;

}


.explore-all-link {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: var(--jodan-blue);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    border-bottom: 1px solid var(--jodan-blue);

    padding-bottom: 7px;

}


.explore-all-link span {

    font-size: 16px;

}


/* =========================================
   DESTINATION SHOWCASE
========================================= */

.destination-showcase {

    display: grid;

    grid-template-columns: 1.4fr .8fr .8fr;

    grid-template-rows: 285px 285px 285px;

    gap: 14px;

}


/* =========================================
   BASE CARD
========================================= */

.destination-card {

    position: relative;

    overflow: hidden;

    color: white;

    isolation: isolate;

}


.destination-feature {

    grid-row: 1 / 3;

}


.destination-rajasthan {

    grid-column: 2;

    grid-row: 1;

}


.destination-kerala {

    grid-column: 3;

    grid-row: 1;

}


.destination-wide {

    grid-column: 2 / 4;

    grid-row: 2;

}


.destination-mini {

    grid-row: 3;

}


.destination-mini:nth-last-child(2) {

    grid-column: 1 / 2;

}


.destination-mini:last-child {

    grid-column: 2 / 4;

}


/* =========================================
   IMAGE
========================================= */

.destination-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: -3;

}


.destination-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 1s cubic-bezier(.2,.7,.2,1),

        filter .7s ease;

}


/* =========================================
   HOVER IMAGE
========================================= */

.destination-card:hover
.destination-image img {

    transform: scale(1.09);

    filter: saturate(1.08);

}


/* =========================================
   GRADIENT
========================================= */

.destination-gradient {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 20%,
            rgba(0,0,0,.08) 40%,
            rgba(0,0,0,.78) 100%
        );

    transition: background .5s ease;

}


.destination-card:hover
.destination-gradient {

    background:

        linear-gradient(
            180deg,
            rgba(3,29,56,.05),
            rgba(3,29,56,.85)
        );

}


/* =========================================
   NUMBER
========================================= */

.destination-number {

    position: absolute;

    top: 22px;

    left: 24px;

    font-size: 9px;

    letter-spacing: .15em;

    font-weight: 600;

    opacity: .8;

}


/* =========================================
   CONTENT
========================================= */

.destination-content {

    position: absolute;

    left: 25px;

    right: 25px;

    bottom: 25px;

    transform: translateY(7px);

    transition: transform .5s ease;

}


.destination-card:hover
.destination-content {

    transform: translateY(0);

}


.destination-content span {

    display: block;

    font-size: 8px;

    letter-spacing: .2em;

    font-weight: 700;

    margin-bottom: 7px;

    opacity: .82;

}


.destination-content h3 {

    font-family: "Playfair Display", serif;

    font-size: 32px;

    font-weight: 600;

    line-height: 1;

}


.destination-content p {

    font-size: 10px;

    margin-top: 8px;

    color: rgba(255,255,255,.72);

    opacity: 0;

    transform: translateY(8px);

    transition:

        opacity .4s ease .05s,

        transform .4s ease .05s;

}


.destination-card:hover
.destination-content p {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================
   ARROW
========================================= */

.destination-arrow {

    position: absolute;

    right: 22px;

    bottom: 23px;

    width: 39px;

    height: 39px;

    border: 1px solid rgba(255,255,255,.5);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 16px;

    opacity: .7;

    transform: translateY(8px);

    transition:

        opacity .4s ease,

        transform .4s ease,

        background .4s ease,

        color .4s ease;

}


.destination-card:hover
.destination-arrow {

    opacity: 1;

    transform: translateY(0);

    background: white;

    color: var(--jodan-blue);

}


/* =========================================
   FEATURE CARD TYPOGRAPHY
========================================= */

.destination-feature
.destination-content h3 {

    font-size: clamp(42px, 4.5vw, 65px);

}


.destination-feature
.destination-content {

    left: 32px;

    bottom: 31px;

}


.destination-feature
.destination-number {

    top: 27px;

    left: 31px;

}


/* =========================================
   BOTTOM CTA
========================================= */

.destination-bottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 28px;

}


.destination-bottom-line {

    width: 45px;

    height: 1px;

    background: var(--jodan-red);

}


.destination-bottom > span {

    color: #8a9095;

    font-size: 8px;

    letter-spacing: .15em;

    font-weight: 700;

}


.destination-bottom a {

    color: var(--jodan-blue);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .1em;

    font-weight: 700;

    margin-left: 5px;

}


.destination-bottom a span {

    margin-left: 12px;

    font-size: 15px;

}


/* =========================================
   DESTINATION CARD REVEAL
========================================= */

.destination-card {

    opacity: 0;

    transform: translateY(25px);

    animation: destinationReveal .8s
               cubic-bezier(.2,.8,.2,1)
               forwards;

}


.destination-card:nth-child(1) {

    animation-delay: .05s;

}


.destination-card:nth-child(2) {

    animation-delay: .12s;

}


.destination-card:nth-child(3) {

    animation-delay: .19s;

}


.destination-card:nth-child(4) {

    animation-delay: .26s;

}


.destination-card:nth-child(5) {

    animation-delay: .33s;

}


.destination-card:nth-child(6) {

    animation-delay: .40s;

}


@keyframes destinationReveal {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .explore-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 28px;

    }


    .explore-heading-right {

        max-width: 520px;

    }


    .destination-showcase {

        grid-template-columns: 1fr 1fr;

        grid-template-rows:
            420px
            260px
            260px
            260px;

    }


    .destination-feature {

        grid-column: 1 / 3;

        grid-row: 1;

    }


    .destination-rajasthan {

        grid-column: 1;

        grid-row: 2;

    }


    .destination-kerala {

        grid-column: 2;

        grid-row: 2;

    }


    .destination-wide {

        grid-column: 1 / 3;

        grid-row: 3;

    }


    .destination-mini:nth-last-child(2) {

        grid-column: 1;

        grid-row: 4;

    }


    .destination-mini:last-child {

        grid-column: 2;

        grid-row: 4;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .explore-india-section {

        padding: 85px 0 90px;

    }


    .explore-heading {

        margin-bottom: 35px;

    }


    .explore-heading h2 {

        font-size: 46px;

    }


    .explore-heading-right p {

        font-size: 12px;

    }


    .destination-showcase {

        display: flex;

        flex-direction: column;

        gap: 12px;

    }


    .destination-card,
    .destination-feature,
    .destination-wide,
    .destination-mini {

        height: 300px;

        min-height: 300px;

    }


    .destination-feature {

        height: 420px;

        min-height: 420px;

    }


    .destination-feature
    .destination-content h3 {

        font-size: 47px;

    }


    .destination-content h3 {

        font-size: 32px;

    }


    .destination-content p {

        opacity: 1;

        transform: none;

    }


    .destination-arrow {

        opacity: 1;

        transform: none;

    }


    .destination-bottom {

        align-items: flex-start;

        flex-wrap: wrap;

        gap: 12px;

    }


    .destination-bottom-line {

        display: none;

    }

}
/* =========================================
   EXPERIENCE SECTION
========================================= */

.experience-section {

    padding: 145px 0;

    background: #ffffff;

}


/* =========================================
   HEADER
========================================= */

.experience-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 55px;

}


.experience-header h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5vw, 70px);

    line-height: .94;

    letter-spacing: -.045em;

    color: var(--jodan-blue);

    margin-top: 13px;

}


.experience-header h2 em {

    color: var(--jodan-red);

    font-weight: 500;

}


.experience-header > p {

    max-width: 330px;

    color: #747b81;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================
   MAIN LAYOUT
========================================= */

.experience-layout {

    display: grid;

    grid-template-columns: .72fr 1.28fr;

    min-height: 650px;

    border-top: 1px solid #e4e5e6;

    border-bottom: 1px solid #e4e5e6;

}


/* =========================================
   EXPERIENCE LIST
========================================= */

.experience-list {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-right: 55px;

}


.experience-item {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns: 38px 1fr 30px;

    align-items: center;

    gap: 12px;

    padding: 25px 0;

    background: transparent;

    border: none;

    border-bottom: 1px solid #e5e6e7;

    cursor: pointer;

    text-align: left;

    font-family: "DM Sans", sans-serif;

    color: #9a9fa4;

    transition:

        color .4s ease,

        padding .4s ease;

}


.experience-item:first-child {

    border-top: 1px solid #e5e6e7;

}


.experience-item:hover {

    color: var(--jodan-blue);

    padding-left: 9px;

}


.experience-item.active {

    color: var(--jodan-blue);

    padding-left: 9px;

}


.experience-number {

    font-size: 9px;

    letter-spacing: .1em;

}


.experience-name {

    font-family: "Playfair Display", serif;

    font-size: 25px;

    line-height: 1;

}


.experience-arrow {

    font-size: 17px;

    opacity: 0;

    transform: translateX(-8px);

    transition:

        opacity .35s ease,

        transform .35s ease;

}


.experience-item:hover
.experience-arrow,

.experience-item.active
.experience-arrow {

    opacity: 1;

    transform: translateX(0);

}


/* =========================================
   ACTIVE RED LINE
========================================= */

.experience-item::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 50%;

    width: 0;

    height: 32px;

    background: var(--jodan-red);

    transform: translateY(-50%);

    transition: width .35s ease;

}


.experience-item.active::before {

    width: 2px;

}


/* =========================================
   VISUAL
========================================= */

.experience-visual {

    position: relative;

    overflow: hidden;

    min-height: 650px;

    background: #dfe3e6;

}


.experience-image-wrap {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.experience-image-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.03);

    transition:

        opacity .4s ease,

        transform 1.2s cubic-bezier(.2,.7,.2,1);

}


.experience-visual.changing
.experience-image-wrap img {

    opacity: .15;

    transform: scale(1.08);

}


/* =========================================
   IMAGE OVERLAY
========================================= */

.experience-image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 20%,
            rgba(0,0,0,.72) 100%
        );

}


/* =========================================
   EXPERIENCE META
========================================= */

.experience-meta {

    position: absolute;

    left: 45px;

    right: 45px;

    bottom: 45px;

    color: white;

    max-width: 520px;

}


.experience-meta > span {

    display: block;

    font-size: 8px;

    letter-spacing: .19em;

    font-weight: 700;

    margin-bottom: 13px;

    opacity: .75;

}


.experience-meta h3 {

    font-family: "Playfair Display", serif;

    font-size: clamp(40px, 4vw, 62px);

    line-height: .92;

    letter-spacing: -.04em;

}


.experience-meta h3 em {

    color: #f1d9d9;

    font-weight: 500;

}


.experience-meta p {

    max-width: 430px;

    font-size: 12px;

    line-height: 1.7;

    color: rgba(255,255,255,.78);

    margin-top: 17px;

}


.experience-meta a {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 23px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(255,255,255,.6);

    color: white;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;

}


.experience-meta a span {

    font-size: 16px;

}


/* =========================================
   COUNTER
========================================= */

.experience-counter {

    position: absolute;

    top: 28px;

    right: 30px;

    display: flex;

    gap: 7px;

    align-items: center;

    color: white;

    font-size: 9px;

    letter-spacing: .12em;

}


#experienceCurrent {

    font-size: 13px;

    font-weight: 700;

}


/* =========================================
   BOTTOM
========================================= */

.experience-bottom {

    display: flex;

    align-items: center;

    gap: 18px;

    padding-top: 25px;

}


.experience-bottom-line {

    width: 42px;

    height: 1px;

    background: var(--jodan-red);

}


.experience-bottom p {

    color: #737a80;

    font-size: 11px;

}


.experience-bottom p strong {

    color: var(--jodan-blue);

}


.experience-bottom a {

    margin-left: auto;

    color: var(--jodan-blue);

    font-size: 9px;

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: .12em;

    border-bottom: 1px solid var(--jodan-blue);

    padding-bottom: 6px;

}


.experience-bottom a span {

    margin-left: 10px;

    font-size: 14px;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .experience-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }


    .experience-header > p {

        max-width: 500px;

    }


    .experience-layout {

        grid-template-columns: 1fr;

    }


    .experience-list {

        padding-right: 0;

    }


    .experience-visual {

        min-height: 550px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .experience-section {

        padding: 90px 0;

    }


    .experience-header {

        margin-bottom: 35px;

    }


    .experience-header h2 {

        font-size: 46px;

    }


    .experience-item {

        padding: 20px 0;

    }


    .experience-name {

        font-size: 21px;

    }


    .experience-layout {

        border-bottom: none;

    }


    .experience-visual {

        min-height: 500px;

    }


    .experience-meta {

        left: 22px;

        right: 22px;

        bottom: 25px;

    }


    .experience-meta h3 {

        font-size: 42px;

    }


    .experience-meta p {

        font-size: 11px;

    }


    .experience-counter {

        top: 20px;

        right: 20px;

    }


    .experience-bottom {

        flex-wrap: wrap;

    }


    .experience-bottom a {

        width: 100%;

        margin-left: 60px;

    }

}
/* =========================================
   FEATURED PACKAGES
========================================= */

.featured-packages-section {

    padding: 145px 0;

    background: #f5f3ee;

}


/* =========================================
   HEADER
========================================= */

.packages-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 52px;

}


.packages-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5vw, 72px);

    line-height: .93;

    letter-spacing: -.045em;

    color: var(--jodan-blue);

    margin-top: 13px;

}


.packages-heading h2 em {

    color: var(--jodan-red);

    font-weight: 500;

}


.packages-heading-right {

    max-width: 340px;

}


.packages-heading-right p {

    color: #737a80;

    font-size: 12px;

    line-height: 1.75;

    margin-bottom: 22px;

}


.packages-all-link {

    display: inline-flex;

    gap: 13px;

    align-items: center;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: var(--jodan-blue);

    border-bottom: 1px solid var(--jodan-blue);

    padding-bottom: 7px;

}


.packages-all-link span {

    font-size: 15px;

}


/* =========================================
   FEATURED PACKAGE
========================================= */

.featured-package {

    position: relative;

    min-height: 625px;

    overflow: hidden;

    color: white;

}


.featured-package-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.featured-package-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 1.2s
               cubic-bezier(.2,.7,.2,1);

}


.featured-package:hover
.featured-package-image img {

    transform: scale(1.055);

}


/* =========================================
   FEATURED OVERLAY
========================================= */

.featured-package-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(2,20,38,.83),
            rgba(2,20,38,.22) 65%,
            rgba(2,20,38,.10)
        ),

        linear-gradient(
            0deg,
            rgba(2,20,38,.8),
            transparent 55%
        );

}


/* =========================================
   TOP
========================================= */

.featured-package-top {

    position: absolute;

    top: 30px;

    left: 32px;

    right: 32px;

    display: flex;

    justify-content: space-between;

}


.featured-label {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .2em;

    border-left: 2px solid var(--jodan-red);

    padding-left: 11px;

}


.featured-number {

    font-size: 9px;

    letter-spacing: .15em;

    opacity: .7;

}


/* =========================================
   CONTENT
========================================= */

.featured-package-content {

    position: absolute;

    left: 55px;

    bottom: 48px;

    max-width: 650px;

}


.package-location {

    font-size: 8px;

    letter-spacing: .2em;

    font-weight: 700;

    opacity: .75;

    margin-bottom: 13px;

}


.featured-package-content h3 {

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6vw, 88px);

    line-height: .85;

    letter-spacing: -.055em;

}


.featured-package-content h3 em {

    color: #e8d5d5;

    font-weight: 500;

}


.featured-package-content > p {

    max-width: 500px;

    font-size: 12px;

    line-height: 1.7;

    color: rgba(255,255,255,.76);

    margin-top: 18px;

}


/* =========================================
   DETAILS
========================================= */

.featured-package-details {

    display: flex;

    align-items: flex-end;

    gap: 45px;

    margin-top: 27px;

}


.featured-package-details > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.featured-package-details span {

    font-size: 7px;

    letter-spacing: .16em;

    opacity: .6;

}


.featured-package-details strong {

    font-size: 12px;

    font-weight: 600;

}


.featured-package-btn {

    margin-left: auto;

    display: inline-flex;

    align-items: center;

    gap: 17px;

    border: 1px solid rgba(255,255,255,.55);

    padding: 14px 18px;

    color: white;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease;

}


.featured-package-btn span {

    font-size: 15px;

    opacity: 1;

}


.featured-package-btn:hover {

    background: white;

    color: var(--jodan-blue);

    transform: translateY(-3px);

}


/* =========================================
   PACKAGE GRID
========================================= */

.package-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 13px;

    margin-top: 13px;

}


.package-card {

    position: relative;

    height: 430px;

    overflow: hidden;

    color: white;

}


.package-card-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.package-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 1s cubic-bezier(.2,.7,.2,1),

        filter .6s ease;

}


.package-card:hover
.package-card-image img {

    transform: scale(1.09);

    filter: saturate(1.1);

}


.package-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.75)
        );

}


/* =========================================
   CARD TOP
========================================= */

.package-card-top {

    position: absolute;

    top: 20px;

    left: 20px;

    right: 20px;

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    letter-spacing: .12em;

}


.package-card-top span:last-child {

    border: 1px solid rgba(255,255,255,.45);

    padding: 5px 7px;

}


/* =========================================
   CARD CONTENT
========================================= */

.package-card-content {

    position: absolute;

    left: 20px;

    right: 20px;

    bottom: 20px;

}


.package-card-location {

    display: block;

    font-size: 7px;

    letter-spacing: .17em;

    font-weight: 700;

    opacity: .7;

    margin-bottom: 8px;

}


.package-card-content h3 {

    font-family: "Playfair Display", serif;

    font-size: 32px;

    line-height: .9;

    letter-spacing: -.035em;

}


.package-card-content h3 em {

    display: block;

    font-weight: 500;

    color: #eadada;

}


/* =========================================
   CARD BOTTOM
========================================= */

.package-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 22px;

    padding-top: 12px;

    border-top: 1px solid rgba(255,255,255,.25);

}


.package-card-bottom span {

    font-size: 9px;

    opacity: .75;

}


.package-card-bottom strong {

    color: white;

    font-size: 11px;

}


.package-card-bottom b {

    width: 31px;

    height: 31px;

    border: 1px solid rgba(255,255,255,.45);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 13px;

    font-weight: 400;

    transition:

        background .3s ease,

        color .3s ease;

}


.package-card:hover
.package-card-bottom b {

    background: white;

    color: var(--jodan-blue);

}


/* =========================================
   BOTTOM CTA
========================================= */

.packages-bottom {

    margin-top: 65px;

    padding-top: 30px;

    border-top: 1px solid #dcdedf;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.packages-bottom-copy h3 {

    font-family: "Playfair Display", serif;

    font-size: 35px;

    line-height: 1;

    color: var(--jodan-blue);

    margin-top: 8px;

}


.packages-bottom-copy h3 em {

    color: var(--jodan-red);

    font-weight: 500;

}


.custom-trip-btn {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    background: var(--jodan-blue);

    color: white;

    padding: 17px 22px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition:

        transform .3s ease,

        background .3s ease;

}


.custom-trip-btn span {

    font-size: 16px;

}


.custom-trip-btn:hover {

    background: var(--jodan-red);

    transform: translateY(-3px);

}


/* =========================================
   PACKAGE ANIMATION
========================================= */

.featured-package,
.package-card {

    opacity: 0;

    transform: translateY(30px);

    animation:
        packageReveal .9s
        cubic-bezier(.2,.8,.2,1)
        forwards;

}


.featured-package {

    animation-delay: .1s;

}


.package-card:nth-child(1) {

    animation-delay: .18s;

}


.package-card:nth-child(2) {

    animation-delay: .25s;

}


.package-card:nth-child(3) {

    animation-delay: .32s;

}


.package-card:nth-child(4) {

    animation-delay: .39s;

}


@keyframes packageReveal {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .package-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .package-card {

        height: 400px;

    }


    .featured-package-content {

        left: 35px;

        right: 35px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .featured-packages-section {

        padding: 90px 0;

    }


    .packages-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        margin-bottom: 35px;

    }


    .packages-heading h2 {

        font-size: 46px;

    }


    .featured-package {

        min-height: 650px;

    }


    .featured-package-top {

        left: 20px;

        right: 20px;

        top: 20px;

    }


    .featured-package-content {

        left: 22px;

        right: 22px;

        bottom: 25px;

    }


    .featured-package-content h3 {

        font-size: 52px;

    }


    .featured-package-content > p {

        font-size: 11px;

    }


    .featured-package-details {

        flex-wrap: wrap;

        gap: 20px;

    }


    .featured-package-btn {

        width: 100%;

        justify-content: center;

        margin-left: 0;

    }


    .package-grid {

        grid-template-columns: 1fr;

    }


    .package-card {

        height: 390px;

    }


    .packages-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }


    .custom-trip-btn {

        width: 100%;

        justify-content: center;

    }

}
/* =========================================
   WHY JODAN ADVENTURE
========================================= */

.why-jodan-section {

    padding: 155px 0 140px;

    background: var(--jodan-blue);

    color: white;

    overflow: hidden;

}


/* =========================================
   INTRO
========================================= */

.why-jodan-intro {

    margin-bottom: 85px;

}


.why-jodan-label {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

}


.why-jodan-label .section-eyebrow {

    color: rgba(255,255,255,.6);

}


.why-jodan-line {

    width: 45px;

    height: 1px;

    background: var(--jodan-red);

}


.why-jodan-intro h2 {

    max-width: 1050px;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 6vw, 82px);

    line-height: .94;

    letter-spacing: -.055em;

    font-weight: 500;

}


.why-jodan-intro h2 span {

    color: var(--jodan-red);

}


.why-jodan-intro h2 em {

    color: #aebac4;

    font-weight: 400;

}


/* =========================================
   MAIN GRID
========================================= */

.why-jodan-main {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: stretch;

}


/* =========================================
   VISUAL
========================================= */

.why-jodan-visual {

    position: relative;

    min-height: 650px;

    overflow: hidden;

}


.why-jodan-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.why-jodan-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,29,56,.03),
            rgba(3,29,56,.72)
        );

}


.why-jodan-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 1.2s
        cubic-bezier(.2,.7,.2,1);

}


.why-jodan-visual:hover
.why-jodan-image img {

    transform: scale(1.06);

}


/* =========================================
   STAMP
========================================= */

.why-jodan-stamp {

    position: absolute;

    top: 30px;

    right: 30px;

    width: 105px;

    height: 105px;

    border: 1px solid rgba(255,255,255,.6);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    transform: rotate(8deg);

}


.why-jodan-stamp::before {

    content: "";

    position: absolute;

    inset: 6px;

    border: 1px dashed rgba(255,255,255,.45);

    border-radius: 50%;

}


.why-jodan-stamp span {

    font-size: 6px;

    letter-spacing: .22em;

    font-weight: 700;

}


.why-jodan-stamp strong {

    font-size: 7px;

    margin-top: 5px;

    opacity: .6;

}


.why-jodan-stamp b {

    font-size: 10px;

    letter-spacing: .12em;

}


/* =========================================
   IMAGE CAPTION
========================================= */

.why-jodan-caption {

    position: absolute;

    left: 28px;

    right: 28px;

    bottom: 28px;

}


.why-jodan-caption span {

    display: block;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .18em;

    opacity: .65;

    margin-bottom: 9px;

}


.why-jodan-caption p {

    max-width: 260px;

    font-family: "Playfair Display", serif;

    font-size: 23px;

    line-height: 1.05;

}


/* =========================================
   CONTENT
========================================= */

.why-jodan-content {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.why-point {

    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 25px;

    padding: 28px 0;

    border-top: 1px solid rgba(255,255,255,.16);

    transition:

        padding .4s ease,

        border-color .4s ease;

}


.why-point:last-child {

    border-bottom: 1px solid rgba(255,255,255,.16);

}


.why-point:hover {

    padding-left: 10px;

    border-color: rgba(255,255,255,.4);

}


.why-point-number {

    font-size: 9px;

    letter-spacing: .1em;

    color: rgba(255,255,255,.4);

    padding-top: 5px;

}


.why-point-content h3 {

    font-family: "Playfair Display", serif;

    font-size: 31px;

    line-height: 1;

    font-weight: 500;

}


.why-point-content h3 em {

    color: #b8c2ca;

    font-weight: 400;

}


.why-point-content p {

    max-width: 470px;

    margin-top: 13px;

    font-size: 11px;

    line-height: 1.75;

    color: rgba(255,255,255,.58);

}


/* =========================================
   STATS
========================================= */

.why-jodan-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 105px;

    border-top: 1px solid rgba(255,255,255,.18);

    border-bottom: 1px solid rgba(255,255,255,.18);

}


.why-stat {

    min-height: 145px;

    padding: 30px 30px 25px;

    border-right: 1px solid rgba(255,255,255,.18);

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.why-stat:first-child {

    padding-left: 0;

}


.why-stat-last {

    border-right: none;

}


.why-stat strong {

    font-family: "Playfair Display", serif;

    font-size: 55px;

    line-height: 1;

    font-weight: 500;

}


.why-stat span {

    margin-top: 9px;

    font-size: 7px;

    letter-spacing: .18em;

    color: rgba(255,255,255,.48);

    font-weight: 700;

}


/* =========================================
   BOTTOM
========================================= */

.why-jodan-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 28px;

}


.why-jodan-bottom p {

    font-family: "Playfair Display", serif;

    font-size: 18px;

    color: rgba(255,255,255,.7);

}


.why-jodan-bottom p span {

    display: block;

    font-family: "DM Sans", sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .18em;

    color: rgba(255,255,255,.4);

    margin-bottom: 7px;

}


.why-jodan-bottom strong {

    color: white;

}


.why-jodan-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(255,255,255,.5);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;

    color: white;

}


.why-jodan-bottom a span {

    font-size: 15px;

}


/* =========================================
   SCROLL REVEAL
========================================= */

.why-jodan-intro,
.why-jodan-visual,
.why-jodan-content,
.why-jodan-stats,
.why-jodan-bottom {

    opacity: 0;

    transform: translateY(30px);

    transition:

        opacity .9s ease,

        transform .9s
        cubic-bezier(.2,.8,.2,1);

}


.why-jodan-section.is-visible
.why-jodan-intro {

    opacity: 1;

    transform: translateY(0);

}


.why-jodan-section.is-visible
.why-jodan-visual {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .12s;

}


.why-jodan-section.is-visible
.why-jodan-content {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .22s;

}


.why-jodan-section.is-visible
.why-jodan-stats {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .35s;

}


.why-jodan-section.is-visible
.why-jodan-bottom {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .45s;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .why-jodan-main {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .why-jodan-visual {

        min-height: 600px;

    }


    .why-jodan-stats {

        grid-template-columns: 1fr 1fr;

    }


    .why-stat:nth-child(2) {

        border-right: none;

    }


    .why-stat:nth-child(3) {

        padding-left: 0;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .why-jodan-section {

        padding: 95px 0;

    }


    .why-jodan-intro {

        margin-bottom: 55px;

    }


    .why-jodan-intro h2 {

        font-size: 46px;

    }


    .why-jodan-main {

        gap: 45px;

    }


    .why-jodan-visual {

        min-height: 500px;

    }


    .why-jodan-stamp {

        width: 85px;

        height: 85px;

        top: 20px;

        right: 20px;

    }


    .why-jodan-content {

        gap: 0;

    }


    .why-point {

        grid-template-columns: 28px 1fr;

        gap: 15px;

        padding: 23px 0;

    }


    .why-point-content h3 {

        font-size: 27px;

    }


    .why-point-content p {

        font-size: 10px;

    }


    .why-jodan-stats {

        margin-top: 65px;

    }


    .why-stat {

        min-height: 115px;

        padding: 22px 15px;

    }


    .why-stat:first-child,
    .why-stat:nth-child(3) {

        padding-left: 0;

    }


    .why-stat strong {

        font-size: 40px;

    }


    .why-stat span {

        font-size: 6px;

    }


    .why-jodan-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }


    .why-jodan-bottom a {

        margin-left: 0;

    }

}
/* =========================================
   TRAVELLER STORIES
========================================= */

.traveller-stories-section {

    padding: 145px 0;

    background: #f6f4ef;

    overflow: hidden;

}


/* =========================================
   HEADER
========================================= */

.stories-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 55px;

}


.stories-header h2 {

    margin-top: 13px;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5vw, 72px);

    line-height: .93;

    letter-spacing: -.05em;

    color: var(--jodan-blue);

}


.stories-header h2 em {

    color: var(--jodan-red);

    font-weight: 500;

}


.stories-header-side {

    max-width: 330px;

}


.stories-header-side > p {

    color: #777e83;

    font-size: 11px;

    line-height: 1.75;

    margin-bottom: 23px;

}


/* =========================================
   CONTROLS
========================================= */

.stories-controls {

    display: flex;

    align-items: center;

    gap: 15px;

}


.story-control {

    width: 42px;

    height: 42px;

    border: 1px solid #d4d6d7;

    background: transparent;

    color: var(--jodan-blue);

    cursor: pointer;

    font-size: 16px;

    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease;

}


.story-control:hover {

    background: var(--jodan-blue);

    color: white;

    transform: translateY(-2px);

}


.story-slide-count {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 9px;

    color: #9a9ea2;

    letter-spacing: .1em;

}


.story-slide-count b {

    color: var(--jodan-blue);

    font-size: 11px;

}


.story-slide-count i {

    font-style: normal;

}


/* =========================================
   SLIDER
========================================= */

.stories-slider {

    position: relative;

    overflow: hidden;

}


.stories-track {

    display: flex;

    width: 100%;

    transition:

        transform .85s
        cubic-bezier(.2,.8,.2,1);

}


.traveller-story {

    min-width: 100%;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    min-height: 570px;

    background: white;

}


/* =========================================
   PHOTO
========================================= */

.story-photo {

    position: relative;

    overflow: hidden;

}


.story-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.03);

    transition:

        transform 1.2s
        cubic-bezier(.2,.7,.2,1);

}


.traveller-story.active
.story-photo img {

    transform: scale(1);

}


.story-photo-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.35)
        );

}


.story-photo-label {

    position: absolute;

    left: 27px;

    top: 25px;

    padding-left: 10px;

    border-left: 2px solid var(--jodan-red);

    color: white;

    font-size: 8px;

    letter-spacing: .17em;

    font-weight: 700;

}


/* =========================================
   CONTENT
========================================= */

.story-content {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 65px;

    background: white;

}


.story-quote-mark {

    font-family: "Playfair Display", serif;

    font-size: 85px;

    line-height: .5;

    color: var(--jodan-red);

    opacity: .85;

    margin-bottom: 35px;

}


.story-content blockquote {

    max-width: 570px;

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(32px, 3vw, 48px);

    line-height: 1.02;

    letter-spacing: -.035em;

    color: var(--jodan-blue);

}


.story-content blockquote em {

    color: var(--jodan-red);

    font-weight: 500;

}


.story-description {

    max-width: 430px;

    color: #7a8186;

    font-size: 11px;

    line-height: 1.8;

    margin-top: 22px;

}


/* =========================================
   AUTHOR
========================================= */

.story-author {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;

}


.story-author-avatar {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #e9e7e1;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--jodan-blue);

    font-size: 8px;

    font-weight: 700;

}


.story-author strong {

    display: block;

    color: var(--jodan-blue);

    font-size: 10px;

}


.story-author span {

    display: block;

    color: #969b9f;

    font-size: 8px;

    margin-top: 4px;

}


/* =========================================
   STORY LINK
========================================= */

.story-read-link {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    width: max-content;

    margin-top: 28px;

    color: var(--jodan-blue);

    border-bottom: 1px solid var(--jodan-blue);

    padding-bottom: 6px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.story-read-link span {

    font-size: 15px;

}


/* =========================================
   BOTTOM
========================================= */

.stories-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 25px;

}


.stories-bottom > span {

    font-size: 8px;

    letter-spacing: .17em;

    font-weight: 700;

    color: #969b9f;

}


.stories-bottom a {

    color: var(--jodan-blue);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;

    border-bottom: 1px solid var(--jodan-blue);

    padding-bottom: 6px;

}


.stories-bottom a span {

    margin-left: 12px;

    font-size: 15px;

}


/* =========================================
   STORY ENTER ANIMATION
========================================= */

.traveller-story .story-content > * {

    opacity: 0;

    transform: translateY(18px);

}


.traveller-story.active
.story-content > * {

    animation:

        storyContentReveal .65s
        cubic-bezier(.2,.8,.2,1)
        forwards;

}


.traveller-story.active
.story-content > *:nth-child(1) {

    animation-delay: .15s;

}


.traveller-story.active
.story-content > *:nth-child(2) {

    animation-delay: .22s;

}


.traveller-story.active
.story-content > *:nth-child(3) {

    animation-delay: .29s;

}


.traveller-story.active
.story-content > *:nth-child(4) {

    animation-delay: .36s;

}


.traveller-story.active
.story-content > *:nth-child(5) {

    animation-delay: .43s;

}


@keyframes storyContentReveal {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .traveller-story {

        grid-template-columns: 1fr;

    }


    .story-photo {

        min-height: 450px;

    }


    .story-content {

        min-height: 500px;

        padding: 50px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .traveller-stories-section {

        padding: 90px 0;

    }


    .stories-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

        margin-bottom: 35px;

    }


    .stories-header h2 {

        font-size: 46px;

    }


    .stories-header-side {

        width: 100%;

    }


    .stories-header-side > p {

        max-width: 310px;

    }


    .traveller-story {

        min-height: auto;

    }


    .story-photo {

        min-height: 340px;

    }


    .story-content {

        min-height: 480px;

        padding: 35px 24px 40px;

    }


    .story-quote-mark {

        font-size: 65px;

        margin-bottom: 27px;

    }


    .story-content blockquote {

        font-size: 34px;

    }


    .story-description {

        font-size: 10px;

    }


    .stories-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

}
/* =========================================
   TRAVEL JOURNAL
========================================= */

.travel-journal-section {

    padding: 150px 0;

    background: #f5f3ee;

    overflow: hidden;

}


/* =========================================
   HEADER
========================================= */

.journal-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 52px;

}


.journal-title h2 {

    margin-top: 13px;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5vw, 72px);

    line-height: .92;

    letter-spacing: -.05em;

    color: var(--jodan-blue);

}


.journal-title h2 em {

    color: var(--jodan-red);

    font-weight: 500;

}


.journal-intro {

    max-width: 330px;

}


.journal-intro p {

    color: #7b8287;

    font-size: 11px;

    line-height: 1.75;

    margin-bottom: 20px;

}


.journal-view-link {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: var(--jodan-blue);

    border-bottom: 1px solid var(--jodan-blue);

    padding-bottom: 7px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

}


.journal-view-link span {

    font-size: 15px;

}


/* =========================================
   FEATURED ARTICLE
========================================= */

.journal-featured {

    display: block;

    position: relative;

    min-height: 590px;

    overflow: hidden;

    color: white;

}


.journal-featured-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.journal-featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 1.3s
        cubic-bezier(.2,.7,.2,1);

}


.journal-featured:hover
.journal-featured-image img {

    transform: scale(1.06);

}


.journal-featured-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(2,20,38,.78),
            rgba(2,20,38,.12) 75%
        ),

        linear-gradient(
            0deg,
            rgba(0,0,0,.72),
            transparent 60%
        );

}


/* =========================================
   FEATURED TOP
========================================= */

.journal-featured-top {

    position: absolute;

    left: 30px;

    right: 30px;

    top: 28px;

    display: flex;

    justify-content: space-between;

}


.journal-featured-top span {

    font-size: 7px;

    letter-spacing: .18em;

    font-weight: 700;

    opacity: .75;

}


.journal-featured-top span:first-child {

    border-left: 2px solid var(--jodan-red);

    padding-left: 10px;

}


/* =========================================
   FEATURED CONTENT
========================================= */

.journal-featured-content {

    position: absolute;

    left: 55px;

    bottom: 52px;

    max-width: 650px;

}


.journal-category {

    display: block;

    font-size: 8px;

    letter-spacing: .18em;

    font-weight: 700;

    opacity: .65;

    margin-bottom: 13px;

}


.journal-featured-content h3 {

    font-family: "Playfair Display", serif;

    font-size: clamp(58px, 6vw, 88px);

    line-height: .85;

    letter-spacing: -.055em;

}


.journal-featured-content h3 em {

    color: #e7d3d4;

    font-weight: 400;

}


.journal-featured-content p {

    margin-top: 17px;

    font-size: 12px;

    color: rgba(255,255,255,.72);

}


.journal-featured-arrow {

    margin-top: 28px;

    width: 43px;

    height: 43px;

    border: 1px solid rgba(255,255,255,.5);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;

    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease;

}


.journal-featured:hover
.journal-featured-arrow {

    background: white;

    color: var(--jodan-blue);

    transform: translate(4px,-4px);

}


/* =========================================
   ARTICLE GRID
========================================= */

.journal-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin-top: 14px;

}


.journal-card {

    background: white;

    overflow: hidden;

    color: var(--jodan-blue);

}


.journal-card-image {

    height: 270px;

    overflow: hidden;

}


.journal-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 1s
        cubic-bezier(.2,.7,.2,1);

}


.journal-card:hover
.journal-card-image img {

    transform: scale(1.07);

}


/* =========================================
   CARD CONTENT
========================================= */

.journal-card-content {

    padding: 22px 22px 20px;

}


.journal-card-meta {

    display: flex;

    justify-content: space-between;

    padding-bottom: 14px;

    border-bottom: 1px solid #e3e2df;

}


.journal-card-meta span {

    font-size: 7px;

    letter-spacing: .16em;

    font-weight: 700;

    color: #8a9094;

}


.journal-card-meta span:first-child {

    color: var(--jodan-red);

}


.journal-card h3 {

    margin-top: 21px;

    min-height: 78px;

    font-family: "Playfair Display", serif;

    font-size: 27px;

    line-height: 1.02;

    letter-spacing: -.025em;

}


.journal-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 22px;

}


.journal-card-footer span {

    font-size: 8px;

    color: #93999d;

    text-transform: uppercase;

    letter-spacing: .12em;

}


.journal-card-footer b {

    width: 30px;

    height: 30px;

    border: 1px solid #d5d7d8;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 400;

    transition:

        background .3s ease,

        color .3s ease;

}


.journal-card:hover
.journal-card-footer b {

    background: var(--jodan-blue);

    color: white;

}


/* =========================================
   JOURNAL BOTTOM
========================================= */

.journal-bottom {

    display: grid;

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

    align-items: center;

    gap: 30px;

    margin-top: 65px;

    padding-top: 28px;

    border-top: 1px solid #d7d6d2;

}


.journal-bottom-number {

    font-family: "Playfair Display", serif;

    color: var(--jodan-blue);

}


.journal-bottom-number strong {

    font-size: 30px;

}


.journal-bottom-number span {

    font-size: 14px;

    color: #999d9f;

}


.journal-bottom-text span {

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .17em;

    color: #999d9f;

}


.journal-bottom-text p {

    margin-top: 6px;

    font-family: "Playfair Display", serif;

    font-size: 19px;

    color: var(--jodan-blue);

}


.journal-all-button {

    justify-self: end;

    display: inline-flex;

    align-items: center;

    gap: 17px;

    padding: 15px 19px;

    background: var(--jodan-blue);

    color: white;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition:

        background .3s ease,

        transform .3s ease;

}


.journal-all-button span {

    font-size: 16px;

}


.journal-all-button:hover {

    background: var(--jodan-red);

    transform: translateY(-3px);

}


/* =========================================
   SCROLL REVEAL
========================================= */

.journal-header,
.journal-featured,
.journal-card,
.journal-bottom {

    opacity: 0;

    transform: translateY(28px);

    transition:

        opacity .8s ease,

        transform .8s
        cubic-bezier(.2,.8,.2,1);

}


.travel-journal-section.is-visible
.journal-header {

    opacity: 1;

    transform: translateY(0);

}


.travel-journal-section.is-visible
.journal-featured {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .12s;

}


.travel-journal-section.is-visible
.journal-card {

    opacity: 1;

    transform: translateY(0);

}


.travel-journal-section.is-visible
.journal-card:nth-child(1) {

    transition-delay: .2s;

}


.travel-journal-section.is-visible
.journal-card:nth-child(2) {

    transition-delay: .27s;

}


.travel-journal-section.is-visible
.journal-card:nth-child(3) {

    transition-delay: .34s;

}


.travel-journal-section.is-visible
.journal-bottom {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .42s;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .journal-featured {

        min-height: 550px;

    }


    .journal-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .journal-card:last-child {

        display: none;

    }


    .journal-bottom {

        grid-template-columns:
            1fr 2fr;

    }


    .journal-all-button {

        grid-column: 2;

        justify-self: start;

        margin-top: 10px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .travel-journal-section {

        padding: 90px 0;

    }


    .journal-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 27px;

        margin-bottom: 35px;

    }


    .journal-title h2 {

        font-size: 46px;

    }


    .journal-featured {

        min-height: 500px;

    }


    .journal-featured-content {

        left: 23px;

        right: 23px;

        bottom: 30px;

    }


    .journal-featured-content h3 {

        font-size: 53px;

    }


    .journal-featured-content p {

        font-size: 10px;

    }


    .journal-grid {

        grid-template-columns: 1fr;

    }


    .journal-card:last-child {

        display: block;

    }


    .journal-card-image {

        height: 230px;

    }


    .journal-card h3 {

        min-height: auto;

        font-size: 26px;

    }


    .journal-bottom {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        margin-top: 45px;

    }


    .journal-all-button {

        margin: 0;

    }

}
/* =========================================
   CUSTOM JOURNEY CTA
========================================= */

.custom-journey-section {

    position: relative;

    min-height: 850px;

    overflow: hidden;

    color: white;

    background: var(--jodan-blue);

}


/* =========================================
   BACKGROUND
========================================= */

.custom-journey-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.custom-journey-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.04);

    transition:
        transform 8s
        cubic-bezier(.2,.7,.2,1);

}


.custom-journey-section:hover
.custom-journey-bg img {

    transform: scale(1.09);

}


.custom-journey-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(2,20,38,.92),
            rgba(2,20,38,.65) 55%,
            rgba(2,20,38,.35)
        );

}


/* =========================================
   PATTERN
========================================= */

.custom-journey-pattern {

    position: absolute;

    inset: 0;

    opacity: .14;

    background-image:

        linear-gradient(
            rgba(255,255,255,.13) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.13) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 75%
        );

}


/* =========================================
   INNER
========================================= */

.custom-journey-inner {

    position: relative;

    min-height: 850px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =========================================
   TOP
========================================= */

.custom-journey-top {

    position: absolute;

    left: 0;

    right: 0;

    top: 38px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.custom-journey-top .section-eyebrow {

    color: rgba(255,255,255,.58);

}


.custom-journey-index {

    font-size: 8px;

    letter-spacing: .16em;

    color: rgba(255,255,255,.45);

}


/* =========================================
   HEADING
========================================= */

.custom-journey-heading {

    position: relative;

    z-index: 2;

}


.custom-journey-heading > span {

    display: block;

    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 4.5vw, 62px);

    line-height: .9;

    color: rgba(255,255,255,.58);

    letter-spacing: -.045em;

}


.custom-journey-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(90px, 11vw, 170px);

    line-height: .78;

    letter-spacing: -.075em;

    font-weight: 500;

    margin-top: 5px;

}


.custom-journey-heading p {

    max-width: 370px;

    margin-top: 30px;

    font-size: 12px;

    line-height: 1.75;

    color: rgba(255,255,255,.66);

}


/* =========================================
   ACTION
========================================= */

.custom-journey-action {

    display: flex;

    align-items: center;

    gap: 35px;

    margin-top: 48px;

}


.custom-journey-button {

    position: relative;

    width: 185px;

    height: 185px;

    border-radius: 50%;

    background: white;

    color: var(--jodan-blue);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition:

        transform .45s
        cubic-bezier(.2,.8,.2,1),

        background .35s ease;

}


.custom-journey-button::before {

    content: "";

    position: absolute;

    inset: 8px;

    border: 1px solid #d7d9d9;

    border-radius: 50%;

}


.custom-journey-button:hover {

    transform:
        scale(1.07)
        rotate(-4deg);

    background: #f1eeee;

}


.button-small {

    font-size: 7px;

    letter-spacing: .18em;

    font-weight: 700;

    color: var(--jodan-red);

}


.custom-journey-button strong {

    margin-top: 8px;

    font-family: "Playfair Display", serif;

    font-size: 28px;

    font-weight: 500;

    line-height: .9;

}


.button-arrow {

    margin-top: 10px;

    font-size: 19px;

}


/* =========================================
   NOTE
========================================= */

.custom-journey-note {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}


.custom-journey-note > span {

    width: 6px;

    height: 6px;

    margin-top: 5px;

    border-radius: 50%;

    background: var(--jodan-red);

}


.custom-journey-note p {

    margin: 0;

    font-size: 9px;

    line-height: 1.7;

    letter-spacing: .04em;

    color: rgba(255,255,255,.5);

}


/* =========================================
   FLOATING DETAILS
========================================= */

.journey-floating-detail {

    position: absolute;

    z-index: 2;

    padding: 13px 17px;

    border-left: 1px solid
        rgba(255,255,255,.35);

    background:
        rgba(2,20,38,.25);

    backdrop-filter:
        blur(5px);

    transition:

        transform .4s ease,

        border-color .4s ease;

}


.journey-floating-detail:hover {

    transform: translateY(-7px);

    border-color:
        var(--jodan-red);

}


.journey-floating-detail span {

    display: block;

    font-size: 7px;

    color: var(--jodan-red);

    font-weight: 700;

    letter-spacing: .14em;

    margin-bottom: 7px;

}


.journey-floating-detail p {

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 15px;

    line-height: 1.05;

    color: rgba(255,255,255,.72);

}


.detail-one {

    top: 28%;

    right: 18%;

}


.detail-two {

    top: 51%;

    right: 8%;

}


.detail-three {

    bottom: 19%;

    right: 27%;

}


/* =========================================
   MARQUEE
========================================= */

.custom-journey-marquee {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    overflow: hidden;

    border-top: 1px solid
        rgba(255,255,255,.14);

    padding: 17px 0;

}


.custom-marquee-track {

    width: max-content;

    display: flex;

    align-items: center;

    gap: 30px;

    animation:
        customMarquee 22s
        linear
        infinite;

}


.custom-marquee-track span {

    font-size: 8px;

    letter-spacing: .27em;

    font-weight: 700;

    color: rgba(255,255,255,.38);

}


.custom-marquee-track i {

    font-size: 8px;

    color: var(--jodan-red);

    font-style: normal;

}


@keyframes customMarquee {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-25%);

    }

}


/* =========================================
   REVEAL
========================================= */

.custom-journey-heading,
.custom-journey-action,
.journey-floating-detail {

    opacity: 0;

    transform: translateY(35px);

}


.custom-journey-section.is-visible
.custom-journey-heading {

    opacity: 1;

    transform: translateY(0);

    transition:

        opacity 1s ease,

        transform 1s
        cubic-bezier(.2,.8,.2,1);

}


.custom-journey-section.is-visible
.custom-journey-action {

    opacity: 1;

    transform: translateY(0);

    transition:

        opacity .9s ease .2s,

        transform .9s
        cubic-bezier(.2,.8,.2,1) .2s;

}


.custom-journey-section.is-visible
.detail-one {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .7s ease .4s,
        transform .7s ease .4s;

}


.custom-journey-section.is-visible
.detail-two {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .7s ease .55s,
        transform .7s ease .55s;

}


.custom-journey-section.is-visible
.detail-three {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .7s ease .7s,
        transform .7s ease .7s;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .custom-journey-section,
    .custom-journey-inner {

        min-height: 780px;

    }


    .custom-journey-heading h2 {

        font-size: 120px;

    }


    .detail-one {

        right: 8%;

    }


    .detail-two {

        right: 4%;

    }


    .detail-three {

        right: 12%;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .custom-journey-section,
    .custom-journey-inner {

        min-height: 760px;

    }


    .custom-journey-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(2,20,38,.94),
                rgba(2,20,38,.72)
            );

    }


    .custom-journey-pattern {

        background-size: 55px 55px;

    }


    .custom-journey-top {

        top: 25px;

    }


    .custom-journey-heading > span {

        font-size: 35px;

    }


    .custom-journey-heading h2 {

        font-size: 82px;

    }


    .custom-journey-heading p {

        max-width: 290px;

        font-size: 10px;

        margin-top: 25px;

    }


    .custom-journey-action {

        margin-top: 35px;

        gap: 20px;

    }


    .custom-journey-button {

        width: 145px;

        height: 145px;

        flex-shrink: 0;

    }


    .custom-journey-button strong {

        font-size: 23px;

    }


    .custom-journey-note {

        display: none;

    }


    .journey-floating-detail {

        display: none;

    }


    .custom-journey-marquee {

        padding: 14px 0;

    }

}
/* =========================================
   PREMIUM FOOTER
========================================= */

.site-footer {

    background: #071b2c;

    color: white;

    overflow: hidden;

}


/* =========================================
   FOOTER CTA
========================================= */

.footer-top {

    padding: 115px 0 105px;

    border-bottom: 1px solid
        rgba(255,255,255,.1);

}


.footer-cta {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

}


.footer-cta-left h2 {

    margin-top: 15px;

    font-family: "Playfair Display", serif;

    font-size: clamp(60px, 7vw, 105px);

    line-height: .82;

    letter-spacing: -.06em;

    font-weight: 500;

}


.footer-cta-left h2 em {

    color: #d9aeb0;

    font-weight: 400;

}


.footer-cta-left .section-eyebrow {

    color: rgba(255,255,255,.4);

}


.footer-cta-right {

    width: 310px;

}


.footer-cta-right p {

    color: rgba(255,255,255,.52);

    font-size: 11px;

    line-height: 1.7;

    max-width: 270px;

    margin-bottom: 25px;

}


.footer-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding: 16px 21px;

    background: white;

    color: #071b2c;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    transition:

        transform .3s ease,

        background .3s ease,

        color .3s ease;

}


.footer-cta-button span {

    font-size: 17px;

}


.footer-cta-button:hover {

    transform: translateY(-3px);

    background: #c7484e;

    color: white;

}


/* =========================================
   FOOTER MAIN
========================================= */

.footer-main {

    padding: 75px 0 80px;

}


.footer-main-grid {

    display: grid;

    grid-template-columns:
        1.5fr
        .8fr
        .9fr
        .8fr
        1.35fr;

    gap: 45px;

}


/* =========================================
   BRAND
========================================= */

.footer-logo {

    display: inline-block;

}


.footer-logo img {

    width: 145px;

    height: auto;

    object-fit: contain;

    

}


.footer-brand > p {

    max-width: 255px;

    margin-top: 25px;

    color: rgba(255,255,255,.42);

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================
   SOCIALS
========================================= */

.footer-socials {

    display: flex;

    gap: 8px;

    margin-top: 28px;

}


.footer-socials a {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(255,255,255,.16);

    color: rgba(255,255,255,.6);

    font-size: 7px;

    font-weight: 700;

    transition:

        background .3s ease,

        color .3s ease,

        border-color .3s ease;

}


.footer-socials a:hover {

    background: white;

    color: #071b2c;

    border-color: white;

}


/* =========================================
   COLUMNS
========================================= */

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-column-title,
.footer-newsletter
.footer-column-title {

    display: block;

    margin-bottom: 23px;

    color: rgba(255,255,255,.35);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .18em;

}


.footer-column a {

    color: rgba(255,255,255,.65);

    font-family: "Playfair Display", serif;

    font-size: 15px;

    margin-bottom: 12px;

    transition:

        color .25s ease,

        transform .25s ease;

}


.footer-column a:hover {

    color: white;

    transform: translateX(4px);

}


/* =========================================
   NEWSLETTER
========================================= */

.footer-newsletter h3 {

    max-width: 240px;

    font-family: "Playfair Display", serif;

    font-size: 22px;

    line-height: 1.08;

    font-weight: 400;

    margin-bottom: 24px;

}


.footer-newsletter-form {

    display: flex;

    width: 100%;

    border-bottom: 1px solid
        rgba(255,255,255,.25);

}


.footer-newsletter-form input {

    flex: 1;

    min-width: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: white;

    padding: 12px 0;

    font-family: inherit;

    font-size: 10px;

}


.footer-newsletter-form input::placeholder {

    color: rgba(255,255,255,.35);

}


.footer-newsletter-form button {

    width: 35px;

    border: 0;

    background: transparent;

    color: white;

    font-size: 18px;

    cursor: pointer;

    transition:

        transform .25s ease,

        color .25s ease;

}


.footer-newsletter-form button:hover {

    color: #d9aeb0;

    transform: translateX(4px);

}


.footer-newsletter small {

    display: block;

    margin-top: 14px;

    color: rgba(255,255,255,.28);

    font-size: 7px;

    line-height: 1.5;

}


/* =========================================
   MARQUEE
========================================= */

.footer-marquee {

    overflow: hidden;

    border-top: 1px solid
        rgba(255,255,255,.08);

    border-bottom: 1px solid
        rgba(255,255,255,.08);

    padding: 19px 0;

}


.footer-marquee-track {

    display: flex;

    width: max-content;

    align-items: center;

    gap: 28px;

    animation:
        footerMarquee 28s
        linear
        infinite;

}


.footer-marquee-track span {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .27em;

    color: rgba(255,255,255,.24);

    white-space: nowrap;

}


.footer-marquee-track i {

    color: #c7484e;

    font-size: 7px;

    font-style: normal;

}


@keyframes footerMarquee {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-35%);

    }

}


/* =========================================
   BOTTOM
========================================= */

.footer-bottom {

    padding: 22px 0;

}


.footer-bottom-inner {

    display: grid;

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

    align-items: center;

}


.footer-bottom-inner > span {

    color: rgba(255,255,255,.28);

    font-size: 7px;

    letter-spacing: .04em;

}


.footer-bottom-inner > span:nth-child(2) {

    text-align: center;

    letter-spacing: .13em;

}


.footer-bottom-inner b {

    color: rgba(255,255,255,.6);

}


.footer-bottom-inner a {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.45);

    font-size: 7px;

    letter-spacing: .13em;

    font-weight: 700;

    transition: color .25s ease;

}


.footer-bottom-inner a span {

    font-size: 14px;

}


.footer-bottom-inner a:hover {

    color: white;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 1000px) {

    .footer-main-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .footer-brand {

        grid-column: span 3;

    }


    .footer-newsletter {

        grid-column: span 2;

    }

}


@media (max-width: 600px) {

    .footer-top {

        padding: 85px 0;

    }


    .footer-cta {

        flex-direction: column;

        align-items: flex-start;

        gap: 40px;

    }


    .footer-cta-left h2 {

        font-size: 63px;

    }


    .footer-cta-right {

        width: 100%;

    }


    .footer-main {

        padding: 60px 0;

    }


    .footer-main-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 45px 25px;

    }


    .footer-brand {

        grid-column: span 2;

    }


    .footer-newsletter {

        grid-column: span 2;

    }


    .footer-column a {

        font-size: 14px;

    }


    .footer-bottom-inner {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 17px;

    }


    .footer-bottom-inner > span:nth-child(2) {

        text-align: left;

    }


    .footer-bottom-inner a {

        justify-self: auto;

    }

}
/* =========================================
   FINAL VISIBILITY FIX
   JODAN SECTIONS
========================================= */

/* WHY JODAN */

.why-jodan-section
.why-jodan-intro,
.why-jodan-section
.why-jodan-visual,
.why-jodan-section
.why-jodan-content,
.why-jodan-section
.why-jodan-stats,
.why-jodan-section
.why-jodan-bottom {

    opacity: 1;

    transform: none;

}


/* TRAVEL JOURNAL */

.travel-journal-section
.journal-header,
.travel-journal-section
.journal-featured,
.travel-journal-section
.journal-card,
.travel-journal-section
.journal-bottom {

    opacity: 1;

    transform: none;

}


/* CUSTOM JOURNEY */

.custom-journey-section
.custom-journey-heading,
.custom-journey-section
.custom-journey-action,
.custom-journey-section
.journey-floating-detail {

    opacity: 1;

    transform: none;

}
/* =========================================
   PACKAGES PAGE
========================================= */

.packages-page {

    background: var(--light);

}


/* =========================================
   HERO
========================================= */

.packages-page-hero {

    position: relative;

    min-height: 680px;

    color: white;

    overflow: hidden;

}


.packages-hero-image {

    position: absolute;

    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1477587458883-47145ed94245?auto=format&fit=crop&w=2200&q=90");

    background-size: cover;

    background-position: center 45%;

    transform: scale(1.03);

    transition: transform 1.5s
        cubic-bezier(.2,.7,.2,1);

}


.packages-page-hero:hover
.packages-hero-image {

    transform: scale(1.07);

}


.packages-hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(3,27,50,.9),
            rgba(3,27,50,.4) 65%,
            rgba(3,27,50,.18)
        ),

        linear-gradient(
            0deg,
            rgba(3,27,50,.8),
            transparent 60%
        );

}


.packages-hero-container {

    position: relative;

    min-height: 680px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.packages-hero-content {

    max-width: 720px;

    padding-top: 80px;

}


.hero-mini-label {

    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .2em;

}


.hero-mini-label::before {

    content: "";

    width: 35px;

    height: 1px;

    background: var(--jodan-red);

}


.packages-hero-content h1 {

    margin-top: 24px;

    font-family: "Playfair Display", serif;

    font-size: clamp(75px, 10vw, 145px);

    line-height: .79;

    letter-spacing: -.075em;

    font-weight: 500;

}


.packages-hero-content h1 em {

    display: block;

    color: #e8cfd1;

    font-weight: 400;

}


.packages-hero-content p {

    max-width: 460px;

    margin-top: 35px;

    color: rgba(255,255,255,.66);

    font-size: 12px;

    line-height: 1.8;

}


.packages-hero-bottom {

    position: absolute;

    left: 32px;

    right: 32px;

    bottom: 32px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.packages-hero-bottom span {

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .2em;

    color: rgba(255,255,255,.52);

}


/* =========================================
   EXPLORE
========================================= */

.packages-explore {

    padding: 125px 0 140px;

}


.packages-page-intro {

    display: grid;

    grid-template-columns: 1fr 340px;

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;

}


.packages-page-intro h2 {

    max-width: 700px;

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5.5vw, 78px);

    line-height: .9;

    letter-spacing: -.055em;

    color: var(--jodan-blue);

}


.packages-page-intro h2 em {

    color: var(--jodan-red);

    font-weight: 500;

}


.packages-page-intro > p {

    color: #747b82;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================
   FILTERS
========================================= */

.package-filters {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    border-top: 1px solid #dedfdf;

    border-bottom: 1px solid #dedfdf;

    padding: 17px 0;

    margin-bottom: 45px;

}


.package-filter {

    padding: 10px 15px;

    border: 1px solid transparent;

    color: #81868b;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.package-filter:hover {

    color: var(--jodan-blue);

    border-color: #dfe1e2;

    transform: translateY(-2px);

}


.package-filter.active {

    color: white;

    background: var(--jodan-blue);

}


/* =========================================
   PACKAGE GRID
========================================= */

.all-packages-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

}


.all-package-card {

    position: relative;

    height: 540px;

    overflow: hidden;

    color: white;

}


.all-package-large {

    grid-column: span 2;

    height: 650px;

}


.all-package-wide {

    grid-column: span 2;

    height: 590px;

}


.all-package-card > a {

    display: block;

    width: 100%;

    height: 100%;

    position: relative;

}


.all-package-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.all-package-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 1.1s
        cubic-bezier(.2,.7,.2,1);

}


.all-package-card:hover
.all-package-image img {

    transform: scale(1.07);

}


.all-package-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(3,27,50,.12),
            rgba(3,27,50,.18) 35%,
            rgba(3,27,50,.88)
        );

}


.all-package-top {

    position: absolute;

    top: 25px;

    left: 28px;

    right: 28px;

    display: flex;

    justify-content: space-between;

}


.all-package-top span {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .16em;

    color: rgba(255,255,255,.7);

}


.all-package-top span:first-child {

    color: white;

    font-size: 10px;

}


.all-package-content {

    position: absolute;

    left: 35px;

    right: 35px;

    bottom: 30px;

}


.all-package-content > span {

    font-size: 7px;

    letter-spacing: .2em;

    font-weight: 700;

    color: rgba(255,255,255,.62);

}


.all-package-content h3 {

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 4.5vw, 67px);

    line-height: .86;

    letter-spacing: -.055em;

    font-weight: 500;

}


.all-package-large
.all-package-content h3,
.all-package-wide
.all-package-content h3 {

    font-size: clamp(55px, 6vw, 88px);

}


.all-package-content h3 em {

    color: #e6cfd0;

    font-weight: 400;

}


.all-package-content p {

    max-width: 390px;

    margin-top: 15px;

    color: rgba(255,255,255,.6);

    font-size: 10px;

    line-height: 1.65;

}


.all-package-price {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 22px;

    padding-top: 15px;

    border-top: 1px solid
        rgba(255,255,255,.22);

}


.all-package-price span {

    font-size: 7px;

    letter-spacing: .13em;

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

}


.all-package-price strong {

    margin-left: 6px;

    color: white;

    font-size: 12px;

}


.all-package-price b {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(255,255,255,.35);

    border-radius: 50%;

    font-size: 15px;

    font-weight: 400;

    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease;

}


.all-package-card:hover
.all-package-price b {

    background: white;

    color: var(--jodan-blue);

    transform:
        rotate(-8deg)
        scale(1.08);

}


/* =========================================
   CUSTOM CTA
========================================= */

.packages-custom-cta {

    margin-top: 95px;

    padding: 70px;

    background: var(--jodan-blue);

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

}


.packages-custom-copy {

    max-width: 650px;

}


.packages-custom-copy
.section-eyebrow {

    color: #e1a8ac;

}


.packages-custom-copy h2 {

    margin-top: 8px;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5vw, 70px);

    line-height: .9;

    letter-spacing: -.055em;

    font-weight: 500;

}


.packages-custom-copy h2 em {

    color: #e3c8ca;

    font-weight: 400;

}


.packages-custom-copy p {

    max-width: 440px;

    margin-top: 20px;

    color: rgba(255,255,255,.5);

    font-size: 10px;

    line-height: 1.8;

}


.packages-custom-button {

    flex-shrink: 0;

    width: 170px;

    height: 170px;

    border-radius: 50%;

    background: white;

    color: var(--jodan-blue);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-family: "Playfair Display", serif;

    font-size: 19px;

    line-height: 1;

    transition:

        transform .4s ease,

        background .3s ease;

}


.packages-custom-button:hover {

    transform:
        rotate(-5deg)
        scale(1.06);

    background: #f0eeee;

}


.packages-custom-button span {

    margin-bottom: 8px;

    color: var(--jodan-red);

    font-family: "DM Sans", sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .18em;

}


.packages-custom-button b {

    margin-top: 10px;

    font-family: "DM Sans", sans-serif;

    font-size: 17px;

    font-weight: 400;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .packages-page-intro {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .all-package-large,
    .all-package-wide {

        grid-column: span 2;

    }


    .packages-custom-cta {

        padding: 50px;

    }

}


@media (max-width: 600px) {

    .packages-page-hero {

        min-height: 620px;

    }


    .packages-hero-container {

        min-height: 620px;

    }


    .packages-hero-content {

        padding-top: 80px;

    }


    .packages-hero-content h1 {

        font-size: 73px;

    }


    .packages-hero-content p {

        font-size: 10px;

        max-width: 310px;

    }


    .packages-hero-bottom {

        left: 20px;

        right: 20px;

        bottom: 22px;

    }


    .packages-hero-bottom span:last-child {

        display: none;

    }


    .packages-explore {

        padding: 85px 0;

    }


    .packages-page-intro h2 {

        font-size: 48px;

    }


    .package-filters {

        gap: 5px;

    }


    .package-filter {

        padding: 9px 11px;

        font-size: 7px;

    }


    .all-packages-grid {

        grid-template-columns: 1fr;

    }


    .all-package-card,
    .all-package-large,
    .all-package-wide {

        grid-column: span 1;

        height: 480px;

    }


    .all-package-large,
    .all-package-wide {

        height: 550px;

    }


    .all-package-content {

        left: 22px;

        right: 22px;

        bottom: 22px;

    }


    .all-package-content h3,
    .all-package-large
    .all-package-content h3,
    .all-package-wide
    .all-package-content h3 {

        font-size: 48px;

    }


    .packages-custom-cta {

        margin-top: 65px;

        padding: 40px 25px;

        flex-direction: column;

        align-items: flex-start;

    }


    .packages-custom-copy h2 {

        font-size: 48px;

    }


    .packages-custom-button {

        width: 145px;

        height: 145px;

        align-self: center;

    }

}
/* =========================================================
   FLOATING CONTACT BUTTONS
========================================================= */

.floating-contact {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.floating-btn {

    position: relative;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;

}


/* =========================================================
   ICON
========================================================= */

.floating-btn svg {

    position: relative;

    z-index: 3;

    width: 22px;

    height: 22px;

    fill: #fff;

    transition:
        transform .35s ease;

}


.whatsapp-float {

    background: #168c63;

}


.call-float {

    background: #a92e35;

}


/* =========================================================
   HOVER
========================================================= */

.floating-btn:hover {

    transform: translateY(-5px) scale(1.06);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .25);

}


.floating-btn:hover svg {

    transform: scale(1.12);

}


/* =========================================================
   PULSE
========================================================= */

.floating-pulse {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 1px solid currentColor;

    opacity: .55;

    animation:
        floatingPulse 2.2s ease-out infinite;

}


.whatsapp-float .floating-pulse {

    color: #168c63;

}


.call-float .floating-pulse {

    color: #a92e35;

}


@keyframes floatingPulse {

    0% {

        transform: scale(1);

        opacity: .55;

    }

    70% {

        transform: scale(1.55);

        opacity: 0;

    }

    100% {

        transform: scale(1.55);

        opacity: 0;

    }

}


/* =========================================================
   CALL ICON EXTRA ANIMATION
========================================================= */

.call-float svg {

    animation:
        phoneRing 2.8s ease-in-out infinite;

}


@keyframes phoneRing {

    0%,
    72%,
    100% {

        transform: rotate(0deg);

    }

    76% {

        transform: rotate(-12deg);

    }

    80% {

        transform: rotate(12deg);

    }

    84% {

        transform: rotate(-8deg);

    }

    88% {

        transform: rotate(7deg);

    }

    92% {

        transform: rotate(0deg);

    }

}


/* =========================================================
   LABEL
========================================================= */

.floating-label {

    position: absolute;

    right: 67px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(8px);

    padding: 9px 12px;

    border-radius: 3px;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    background: #062b49;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.floating-label::after {

    content: "";

    position: absolute;

    right: -5px;

    top: 50%;

    width: 9px;

    height: 9px;

    transform:
        translateY(-50%)
        rotate(45deg);

    background: #062b49;

}


.floating-btn:hover .floating-label {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .floating-contact {

        right: 16px;

        bottom: 16px;

        gap: 10px;

    }


    .floating-btn {

        width: 48px;

        height: 48px;

    }


    .floating-btn svg {

        width: 20px;

        height: 20px;

    }


    .floating-label {

        display: none;

    }

}
/* =========================================
   TRAVEL FLEET
========================================= */

.travel-fleet-section {

    padding: 125px 0 135px;

    background: #f4f1ec;

}


/* HEADER */

.fleet-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 60px;

    margin-bottom: 55px;

}


.fleet-header h2 {

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6vw, 85px);

    line-height: .85;

    letter-spacing: -.06em;

    color: var(--jodan-blue);

}


.fleet-header h2 em {

    color: var(--jodan-red);

    font-weight: 400;

}


.fleet-header-right {

    max-width: 330px;

}


.fleet-header-right p {

    color: #73787d;

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================
   GRID
========================================= */

.fleet-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

}


/* =========================================
   CARD
========================================= */

.fleet-card {

    background: white;

    overflow: hidden;

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}


.fleet-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 25px 60px
        rgba(7,27,44,.12);

}


/* =========================================
   IMAGE
========================================= */

.fleet-image {

    position: relative;

    height: 275px;

    overflow: hidden;

    background: #e8e5df;

}


.fleet-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform .9s
        cubic-bezier(.2,.7,.2,1);

}


.fleet-card:hover
.fleet-image img {

    transform: scale(1.06);

}


.fleet-number {

    position: absolute;

    left: 18px;

    top: 18px;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: var(--jodan-blue);

    font-size: 8px;

    font-weight: 700;

}


.fleet-type {

    position: absolute;

    right: 18px;

    top: 18px;

    padding: 8px 10px;

    background: rgba(7,27,44,.78);

    color: white;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: .15em;

}


/* =========================================
   INFO
========================================= */

.fleet-info {

    padding: 25px 25px 23px;

}


.fleet-info h3 {

    font-family: "Playfair Display", serif;

    color: var(--jodan-blue);

    font-size: 31px;

    line-height: .95;

    letter-spacing: -.04em;

    font-weight: 500;

}


.fleet-info h3 em {

    color: var(--jodan-red);

    font-weight: 400;

}


.fleet-subtitle,
.fleet-title-row span {

    display: block;

    margin-top: 8px;

    color: #85898d;

    font-size: 8px;

    line-height: 1.5;

}


/* =========================================
   SPECS
========================================= */

.fleet-specs {

    display: flex;

    gap: 7px;

    margin-top: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e5e5e3;

}


.fleet-specs span {

    padding-right: 9px;

    border-right: 1px solid #d7d7d5;

    color: #8b8e90;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: .1em;

}


.fleet-specs span:last-child {

    border-right: 0;

}


/* =========================================
   ACTIONS
========================================= */

.fleet-actions {

    display: grid;

    grid-template-columns:
        .75fr 1fr 1fr;

    gap: 6px;

    margin-top: 17px;

}


.fleet-actions a {

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease;

}


.fleet-call {

    border: 1px solid #dededc;

    color: var(--jodan-blue);

}


.fleet-call:hover {

    background: var(--jodan-blue);

    color: white;

}


.fleet-whatsapp {

    background: #edf3ed;

    color: #28743d;

}


.fleet-whatsapp:hover {

    background: #28743d;

    color: white;

}


.fleet-enquiry {

    background: var(--jodan-red);

    color: white;

}


.fleet-enquiry:hover {

    background: var(--jodan-blue);

}


.fleet-enquiry span {

    margin-left: 6px;

    font-size: 12px;

}


/* =========================================
   FEATURED / WIDE
========================================= */

.fleet-card-featured {

    position: relative;

}


.fleet-card-wide {

    grid-column: span 2;

}


.fleet-card-wide .fleet-image {

    height: 310px;

}


.fleet-card-wide .fleet-info {

    display: grid;

    grid-template-columns: 1fr auto;

    column-gap: 30px;

    align-items: center;

}


.fleet-card-wide .fleet-specs {

    grid-column: 1;

}


.fleet-card-wide .fleet-actions {

    grid-column: 2;

    grid-row: 1 / span 2;

    width: 245px;

}


/* =========================================
   BOTTOM CTA
========================================= */

.fleet-bottom {

    margin-top: 70px;

    padding-top: 45px;

    border-top: 1px solid #d8d6d1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.fleet-bottom h3 {

    max-width: 650px;

    margin-top: 8px;

    font-family: "Playfair Display", serif;

    color: var(--jodan-blue);

    font-size: clamp(35px, 4vw, 53px);

    line-height: .92;

    letter-spacing: -.05em;

    font-weight: 500;

}


.fleet-bottom h3 em {

    color: var(--jodan-red);

    font-weight: 400;

}


.fleet-all-button {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 18px 22px;

    background: var(--jodan-blue);

    color: white;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition:

        background .3s ease,

        transform .3s ease;

}


.fleet-all-button:hover {

    background: var(--jodan-red);

    transform: translateY(-3px);

}


.fleet-all-button span {

    font-size: 16px;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .fleet-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .fleet-card-wide {

        grid-column: span 2;

    }

}


@media (max-width: 650px) {

    .travel-fleet-section {

        padding: 85px 0;

    }


    .fleet-header {

        display: block;

    }


    .fleet-header-right {

        margin-top: 25px;

    }


    .fleet-grid {

        grid-template-columns: 1fr;

    }


    .fleet-card-wide {

        grid-column: span 1;

    }


    .fleet-image,
    .fleet-card-wide .fleet-image {

        height: 240px;

    }


    .fleet-info {

        padding: 21px;

    }


    .fleet-info h3 {

        font-size: 28px;

    }


    .fleet-card-wide .fleet-info {

        display: block;

    }


    .fleet-card-wide .fleet-actions {

        width: 100%;

        margin-top: 17px;

    }


    .fleet-bottom {

        display: block;

        margin-top: 55px;

    }


    .fleet-all-button {

        width: fit-content;

        margin-top: 25px;

    }

}
/* =====================================================
   JODAN HOME ABOUT
   UNIQUE CLASSES - DOES NOT AFFECT OLD ABOUT SECTION
===================================================== */

.jd-home-about {
    position: relative;

    padding: 130px 0;

    background: #f5f3ee;

    overflow: hidden;
}


.jd-home-about-container {
    width: min(1180px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


/* =====================================================
   IMAGE
===================================================== */

.jd-home-about-image {
    position: relative;

    height: 650px;

    overflow: hidden;

    background: #ddd;
}


.jd-home-about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}


.jd-home-about-image:hover img {
    transform: scale(1.045);
}


/* IMAGE TAG */

.jd-home-about-image-tag {
    position: absolute;

    left: 25px;
    bottom: 25px;

    padding: 15px 20px;

    background: rgba(5, 35, 61, .92);

    color: #fff;

    display: flex;

    align-items: center;

    gap: 12px;
}


.jd-home-about-image-tag span {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: .18em;
}


.jd-home-about-image-tag small {
    font-size: 9px;

    letter-spacing: .2em;

    opacity: .7;
}


/* =====================================================
   CONTENT
===================================================== */

.jd-home-about-content {
    padding: 20px 0;
}


.jd-home-about-kicker {
    display: block;

    margin-bottom: 22px;

    color: #d7192c;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.jd-home-about-content h2 {
    margin: 0 0 28px;

    max-width: 520px;

    color: #062f55;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(45px, 5vw, 72px);

    font-weight: 400;

    line-height: .98;

    letter-spacing: -.04em;
}


.jd-home-about-content h2 em {
    color: #d7192c;

    font-weight: 400;
}


.jd-home-about-lead {
    max-width: 500px;

    margin-bottom: 25px !important;

    color: #062f55 !important;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px !important;

    line-height: 1.4 !important;
}


.jd-home-about-content p {
    max-width: 510px;

    margin: 0 0 18px;

    color: #68717a;

    font-size: 14px;

    line-height: 1.9;
}


/* =====================================================
   BOTTOM
===================================================== */

.jd-home-about-bottom {
    margin-top: 42px;

    padding-top: 28px;

    border-top: 1px solid rgba(6, 47, 85, .15);
}


.jd-home-about-stats {
    display: flex;

    gap: 35px;

    margin-bottom: 35px;
}


.jd-home-about-stats div {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.jd-home-about-stats strong {
    color: #d7192c;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;

    font-weight: 400;
}


.jd-home-about-stats span {
    color: #062f55;

    font-size: 8px;

    font-weight: 700;

    line-height: 1.5;

    letter-spacing: .12em;
}


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

.jd-home-about-btn {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 35px;

    padding: 16px 20px;

    background: #062f55;

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

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


.jd-home-about-btn b {
    font-size: 16px;

    font-weight: 400;
}


.jd-home-about-btn:hover {
    background: #d7192c;

    gap: 45px;

    transform: translateY(-2px);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .jd-home-about {
        padding: 90px 0;
    }

    .jd-home-about-container {
        width: min(100% - 40px, 650px);

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .jd-home-about-image {
        height: 520px;
    }

}


@media (max-width: 600px) {

    .jd-home-about {
        padding: 70px 0;
    }

    .jd-home-about-container {
        width: calc(100% - 30px);

        gap: 40px;
    }

    .jd-home-about-image {
        height: 420px;
    }

    .jd-home-about-content h2 {
        font-size: 45px;
    }

    .jd-home-about-lead {
        font-size: 19px !important;
    }

    .jd-home-about-stats {
        gap: 18px;
    }

    .jd-home-about-btn {
        width: 100%;

        justify-content: space-between;
    }

}
.trip-enquiry-success,
.trip-enquiry-error {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 20px;
    padding: 18px 22px;

    background: #fff;

    box-shadow: 0 12px 35px rgba(0,0,0,.08);
}

.trip-enquiry-success {
    border-left: 4px solid #16865b;
}

.trip-enquiry-error {
    border-left: 4px solid #e51e2a;
}

.success-check,
.error-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 50%;

    color: #fff;
    font-weight: bold;
}

.success-check {
    background: #16865b;
}

.error-icon {
    background: #e51e2a;
}

.trip-enquiry-success strong,
.trip-enquiry-error strong {
    color: #082f55;

    font-family: Georgia, serif;

    font-size: 17px;
}

.trip-enquiry-success p,
.trip-enquiry-error p {
    margin: 4px 0 0;

    color: #777;

    font-size: 11px;
}
.custom-trip-success,
.custom-trip-error {
    display: flex;
    align-items: center;
    gap: 16px;

    margin: 25px 0 0;
    padding: 20px 24px;

    background: #fff;

    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.custom-trip-success {
    border-left: 4px solid #16865b;
}

.custom-trip-error {
    border-left: 4px solid #e51e2a;
}

.custom-trip-success-icon,
.custom-trip-error-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

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

    border-radius: 50%;

    color: #fff;

    font-size: 19px;
    font-weight: 700;
}

.custom-trip-success-icon {
    background: #16865b;
}

.custom-trip-error-icon {
    background: #e51e2a;
}

.custom-trip-success strong,
.custom-trip-error strong {
    display: block;

    color: #082f55;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;
}

.custom-trip-success p,
.custom-trip-error p {
    margin: 5px 0 0;

    color: #777;

    font-size: 11px;

    line-height: 1.6;
}