/* =========================================================
   READY2FLYX
   DESTINATION DETAIL PAGE
========================================================= */

.r2f-destination-page {
    background: #fff;
}


/* =========================================================
   HERO
========================================================= */

.r2f-destination-detail-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #fff;

    background: #061124;

    isolation: isolate;
}


.r2f-destination-detail-hero__bg {
    position: absolute;

    inset: 0;

    z-index: -3;
}


.r2f-destination-detail-hero__bg img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.r2f-destination-detail-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(90deg,
            rgba(5, 16, 34, .98) 0%,
            rgba(5, 20, 40, .93) 42%,
            rgba(5, 20, 40, .62) 72%,
            rgba(5, 20, 40, .36) 100%);
}


.r2f-destination-detail-hero::after {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    right: -190px;
    top: -220px;

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(32, 132, 232, .17);

    filter: blur(4px);

    pointer-events: none;
}


.r2f-destination-detail-hero__inner {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(280px, .55fr);

    gap: 80px;

    align-items: center;

    padding:
        92px 0 105px;
}


.r2f-destination-detail-hero .r2f-kicker {
    color:
        var(--r2f-gold-400);
}


.r2f-destination-detail-hero h1 {
    max-width: 790px;

    margin:
        0 0 22px;

    color: #fff;

    font-family:
        var(--r2f-font-display);

    font-size:
        clamp(3rem, 4.8vw, 4.9rem);

    font-weight: 850;

    letter-spacing: -.058em;

    line-height: .98;

    text-wrap: balance;
}


.r2f-destination-detail-hero__inner>div>p {
    max-width: 680px;

    margin: 0;

    color: #cfdae8;

    font-size:
        clamp(1rem, 1.35vw, 1.13rem);

    line-height: 1.75;
}


.r2f-destination-detail-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 30px;
}


/* Hero destination information card */

.r2f-destination-detail-hero__card {
    position: relative;

    overflow: hidden;

    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, .14);

    border-radius: 26px;

    background:
        rgba(9, 27, 52, .72);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .22);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.r2f-destination-detail-hero__card::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -45px;
    top: -45px;

    border-radius: 50%;

    background:
        rgba(241, 179, 63, .15);
}


.r2f-destination-detail-hero__card>span {
    display: block;

    margin-bottom: 10px;

    color:
        var(--r2f-gold-400);

    font-size: .69rem;

    font-weight: 850;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.r2f-destination-detail-hero__card strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-family:
        var(--r2f-font-display);

    font-size:
        clamp(1.7rem, 2.5vw, 2.35rem);

    font-weight: 850;

    letter-spacing: -.04em;

    line-height: 1.1;
}


.r2f-destination-detail-hero__card small {
    display: block;

    color: #9db1c9;

    font-size: .78rem;

    font-weight: 700;
}


.r2f-destination-detail-hero__card p {
    margin:
        22px 0 0;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, .12);

    color: #c7d4e3;

    font-size: .85rem;

    line-height: 1.65;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.r2f-destination-breadcrumb-wrap {
    border-bottom:
        1px solid #e8edf3;

    background: #fff;
}


.r2f-destination-breadcrumb {
    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 10px;

    overflow-x: auto;

    color: #748399;

    font-size: .75rem;

    white-space: nowrap;
}


.r2f-destination-breadcrumb a {
    color: #566980;

    font-weight: 700;

    text-decoration: none;
}


.r2f-destination-breadcrumb a:hover {
    color:
        var(--r2f-blue-700);
}


.r2f-destination-breadcrumb i {
    color: #b3bdca;

    font-size: .55rem;
}


.r2f-destination-breadcrumb span {
    color:
        var(--r2f-navy-950);

    font-weight: 800;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.r2f-destination-intro {
    padding:
        105px 0;
}


.r2f-destination-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr) minmax(0, 1.15fr);

    gap: 85px;

    align-items: start;
}


.r2f-destination-intro__content {
    min-width: 0;
}


.r2f-destination-intro__content>p {
    margin:
        0 0 18px;

    color: #607187;

    font-size: .97rem;

    line-height: 1.8;
}


.r2f-destination-intro__content>p:first-child {
    color: #354960;

    font-size: 1.04rem;

    font-weight: 600;
}


.r2f-destination-notice {
    display: flex;

    gap: 13px;

    align-items: flex-start;

    margin-top: 27px;

    padding: 18px 20px;

    border:
        1px solid #dbe7f4;

    border-radius: 16px;

    color: #5c6e84;

    background: #f5f9fe;

    font-size: .79rem;

    line-height: 1.6;
}


.r2f-destination-notice i {
    flex: 0 0 auto;

    margin-top: 2px;

    color:
        var(--r2f-blue-700);

    font-size: .9rem;
}


/* =========================================================
   SERVICES
========================================================= */

.r2f-destination-services {
    padding:
        105px 0;

    background:
        var(--r2f-soft);
}


.r2f-destination-service-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-top: 42px;
}


.r2f-destination-service-card {
    position: relative;

    min-height: 250px;

    display: flex;

    flex-direction: column;

    padding: 25px;

    overflow: hidden;

    border:
        1px solid #dde6ef;

    border-radius: 22px;

    color:
        var(--r2f-ink);

    background: #fff;

    box-shadow:
        0 12px 35px rgba(11, 30, 53, .04);

    text-decoration: none;

    transition:
        transform var(--r2f-transition),
        border-color var(--r2f-transition),
        box-shadow var(--r2f-transition);
}


.r2f-destination-service-card:hover {
    color:
        var(--r2f-ink);

    border-color: #b8d2ed;

    transform: translateY(-5px);

    box-shadow:
        0 22px 50px rgba(10, 34, 63, .09);
}


.r2f-destination-service-card__icon {
    width: 47px;
    height: 47px;

    display: grid;

    place-items: center;

    margin-bottom: 25px;

    border-radius: 14px;

    color:
        var(--r2f-blue-700);

    background: #eaf3ff;

    font-size: 1rem;

    transition:
        color var(--r2f-transition),
        background var(--r2f-transition);
}


.r2f-destination-service-card:hover .r2f-destination-service-card__icon {
    color: #fff;

    background:
        var(--r2f-blue-700);
}


.r2f-destination-service-card strong {
    display: block;

    margin-bottom: 9px;

    color:
        var(--r2f-navy-950);

    font-family:
        var(--r2f-font-display);

    font-size: 1.04rem;

    font-weight: 820;
}


.r2f-destination-service-card p {
    margin:
        0 0 20px;

    color: #6c7c90;

    font-size: .79rem;

    line-height: 1.6;
}


.r2f-destination-service-card>span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: auto;

    color:
        var(--r2f-blue-700);

    font-size: .73rem;

    font-weight: 850;
}


.r2f-destination-service-card>span i {
    font-size: .66rem;

    transition:
        transform var(--r2f-transition);
}


.r2f-destination-service-card:hover>span i {
    transform: translateX(3px);
}


/* =========================================================
   TRAVEL PURPOSES
========================================================= */

.r2f-destination-purpose {
    padding:
        105px 0;

    background:
        var(--r2f-navy-950);
}


.r2f-destination-purpose__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr) minmax(0, 1.05fr);

    gap: 80px;

    align-items: center;
}


.r2f-destination-purpose .r2f-kicker {
    color:
        var(--r2f-gold-400);
}


.r2f-destination-purpose .r2f-section-title {
    color: #fff;
}


.r2f-destination-purpose .r2f-section-copy {
    color: #aebed0;
}


.r2f-destination-purpose__tags {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 11px;
}


.r2f-destination-purpose__tags span {
    min-height: 60px;

    display: flex;

    align-items: center;

    padding:
        13px 17px;

    border:
        1px solid rgba(255, 255, 255, .11);

    border-radius: 15px;

    color: #dbe5ef;

    background:
        rgba(255, 255, 255, .055);

    font-size: .79rem;

    font-weight: 750;
}


.r2f-destination-purpose__tags span::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    margin-right: 10px;

    border-radius: 50%;

    background:
        var(--r2f-gold-400);

    box-shadow:
        0 0 0 5px rgba(241, 179, 63, .08);
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.r2f-destination-highlights {
    padding:
        105px 0;

    background: #fff;
}


.r2f-destination-highlight-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 13px;

    margin-top: 40px;
}


.r2f-destination-highlight {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 86px;

    padding:
        17px 19px;

    border:
        1px solid #e0e7ef;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 8px 25px rgba(13, 35, 60, .035);
}


.r2f-destination-highlight__icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    flex: 0 0 36px;

    border-radius: 50%;

    color: #138652;

    background: #eaf8f1;

    font-size: .68rem;
}


.r2f-destination-highlight strong {
    color:
        var(--r2f-navy-950);

    font-size: .8rem;

    font-weight: 780;

    line-height: 1.4;
}


/* =========================================================
   LOCAL / LAHORE
========================================================= */

.r2f-destination-local {
    padding:
        105px 0;

    background:
        var(--r2f-soft);
}


.r2f-destination-local__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr) minmax(0, 1.05fr);

    gap: 75px;

    align-items: center;
}


.r2f-destination-local__image {
    height: 430px;

    overflow: hidden;

    border-radius: 26px;

    background: #dce4ed;

    box-shadow:
        var(--r2f-shadow-md);
}


.r2f-destination-local__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.r2f-destination-local__cities {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin:
        25px 0 28px;
}


.r2f-destination-local__cities a {
    display: inline-flex;

    align-items: center;

    min-height: 37px;

    padding:
        7px 12px;

    border:
        1px solid #dce5ef;

    border-radius: 999px;

    color: #53667d;

    background: #fff;

    font-size: .72rem;

    font-weight: 780;

    text-decoration: none;

    transition:
        color var(--r2f-transition),
        border-color var(--r2f-transition),
        background var(--r2f-transition);
}


.r2f-destination-local__cities a:hover {
    color:
        var(--r2f-blue-700);

    border-color: #b9d4ef;

    background: #f6faff;
}


/* =========================================================
   FAQ
========================================================= */

.r2f-destination-faq {
    padding:
        105px 0;

    background: #fff;
}


.r2f-destination-faq__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .72fr) minmax(0, 1.28fr);

    gap: 85px;

    align-items: start;
}


.r2f-destination-faq__list {
    border-top:
        1px solid #e0e7ef;
}


.r2f-destination-faq-item {
    border-bottom:
        1px solid #e0e7ef;
}


.r2f-destination-faq-question {
    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        19px 0;

    border: 0;

    color:
        var(--r2f-navy-950);

    background: transparent;

    font: inherit;

    font-size: .9rem;

    font-weight: 800;

    text-align: left;

    cursor: pointer;
}


.r2f-destination-faq-question i {
    flex: 0 0 auto;

    color:
        var(--r2f-blue-700);

    font-size: .75rem;

    transition:
        transform var(--r2f-transition);
}


.r2f-destination-faq-answer {
    display: none;

    max-width: 720px;

    padding:
        0 35px 22px 0;

    color: #697a8f;

    font-size: .8rem;

    line-height: 1.7;
}


.r2f-destination-faq-item.is-open .r2f-destination-faq-answer {
    display: block;
}


.r2f-destination-faq-item.is-open .r2f-destination-faq-question i {
    transform: rotate(45deg);
}


/* =========================================================
   FINAL CTA
========================================================= */

.r2f-destination-final {
    padding:
        0 0 105px;

    background: #fff;
}


.r2f-destination-final__card {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding:
        46px 50px;

    border-radius: 28px;

    color: #fff;

    background:
        linear-gradient(120deg,
            var(--r2f-blue-700),
            #123f73);

    box-shadow:
        0 25px 60px rgba(15, 78, 145, .17);
}


.r2f-destination-final__card::after {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -100px;
    top: -120px;

    border:
        45px solid rgba(255, 255, 255, .055);

    border-radius: 50%;

    pointer-events: none;
}


.r2f-destination-final__card>div:first-child {
    position: relative;

    z-index: 1;

    max-width: 650px;
}


.r2f-destination-final__card>div:first-child>span {
    display: block;

    margin-bottom: 8px;

    color: #cfe4fb;

    font-size: .69rem;

    font-weight: 850;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.r2f-destination-final__card h2 {
    margin:
        0 0 10px;

    color: #fff;

    font-family:
        var(--r2f-font-display);

    font-size:
        clamp(1.8rem, 3vw, 2.75rem);

    font-weight: 850;

    letter-spacing: -.045em;
}


.r2f-destination-final__card p {
    max-width: 590px;

    margin: 0;

    color: #d6e6f7;

    font-size: .85rem;

    line-height: 1.65;
}


.r2f-destination-final__actions {
    position: relative;

    z-index: 1;

    display: flex;

    flex: 0 0 auto;

    gap: 10px;
}


/* =========================================================
   RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .r2f-destination-detail-hero__inner {
        grid-template-columns:
            minmax(0, 1fr) 300px;

        gap: 45px;
    }


    .r2f-destination-service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991.98px) {

    .r2f-destination-detail-hero {
        min-height: auto;
    }


    .r2f-destination-detail-hero__inner {
        grid-template-columns: 1fr;

        gap: 35px;

        padding:
            75px 0 85px;
    }


    .r2f-destination-detail-hero__card {
        max-width: 520px;
    }


    .r2f-destination-intro__grid,
    .r2f-destination-purpose__grid,
    .r2f-destination-local__grid,
    .r2f-destination-faq__grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .r2f-destination-highlight-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .r2f-destination-local__image {
        height: 390px;
    }


    .r2f-destination-final__card {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .r2f-destination-detail-hero__inner {
        padding:
            62px 0 72px;
    }


    .r2f-destination-detail-hero h1 {
        font-size:
            clamp(2.65rem, 12vw, 4rem);

        letter-spacing: -.055em;
    }


    .r2f-destination-detail-hero__actions {
        display: grid;

        width: 100%;
    }


    .r2f-destination-detail-hero__actions .r2f-btn {
        width: 100%;
    }


    .r2f-destination-detail-hero__card {
        padding: 24px;

        border-radius: 21px;
    }


    .r2f-destination-intro,
    .r2f-destination-services,
    .r2f-destination-purpose,
    .r2f-destination-highlights,
    .r2f-destination-local,
    .r2f-destination-faq {
        padding:
            76px 0;
    }


    .r2f-destination-service-grid,
    .r2f-destination-highlight-grid {
        grid-template-columns: 1fr;
    }


    .r2f-destination-service-card {
        min-height: 225px;

        padding: 22px;
    }


    .r2f-destination-purpose__tags {
        grid-template-columns: 1fr;
    }


    .r2f-destination-local__image {
        height: 310px;

        border-radius: 21px;
    }


    .r2f-destination-faq-question {
        min-height: 68px;

        font-size: .84rem;
    }


    .r2f-destination-final {
        padding:
            0 0 80px;
    }


    .r2f-destination-final__card {
        gap: 30px;

        padding:
            32px 25px;

        border-radius: 22px;
    }


    .r2f-destination-final__actions {
        width: 100%;

        display: grid;
    }


    .r2f-destination-final__actions .r2f-btn {
        width: 100%;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 479.98px) {

    .r2f-destination-detail-hero h1 {
        font-size: 2.55rem;
    }


    .r2f-destination-detail-hero__card strong {
        font-size: 1.65rem;
    }


    .r2f-destination-local__image {
        height: 270px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .r2f-destination-service-card,
    .r2f-destination-service-card__icon,
    .r2f-destination-service-card>span i,
    .r2f-destination-faq-question i {
        transition: none;
    }

}