/* ============================================================
   SERVICES — MEGARA VOYAGES
============================================================ */

:root {
    --sv-blue: #07539B;
    --sv-night: #061F38;
    --sv-night-soft: #0A2D4D;

    --sv-gold: #F4B94F;
    --sv-gold-deep: #C68B25;

    --sv-ivory: #F7F1E7;
    --sv-white: #FFFFFF;

    --sv-shadow:
        0 25px 65px
        rgba(6, 31, 56, .13);

    --sv-ease:
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


/* ============================================================
   COMMON
============================================================ */

.services-kicker {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color:
        var(--sv-gold-deep);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.services-kicker::before {
    content: '';

    width: 27px;
    height: 1px;

    background:
        currentColor;
}


.services-kicker--light {
    color:
        var(--sv-gold);
}


.services-btn {
    min-height: 53px;

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

    gap: 12px;

    padding:
        0 25px;

    border-radius:
        999px;

    font-size: .84rem;
    font-weight: 800;

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


.services-btn span {
    transition:
        transform .25s ease;
}


.services-btn:hover {
    transform:
        translateY(-3px);
}


.services-btn:hover span {
    transform:
        translateX(4px);
}


.services-btn--gold {
    color:
        #332300;

    background:
        var(--sv-gold);

    box-shadow:
        0 14px 35px
        rgba(244,185,79,.27);
}


.services-btn--blue {
    color: #fff;

    background:
        var(--sv-blue);

    box-shadow:
        0 13px 30px
        rgba(7,83,155,.2);
}


.services-btn--blue:hover {
    color: #fff;

    background:
        #064780;
}


.services-btn--ghost {
    color: #fff;

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

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

    backdrop-filter:
        blur(10px);
}


.services-btn--ghost:hover {
    color: #fff;

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


.services-btn--whatsapp {
    color: #fff;

    background:
        #18A85B;

    box-shadow:
        0 15px 35px
        rgba(24,168,91,.25);
}


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

.services-hero {
    position: relative;

    min-height:
        720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #061F38 0%,
            #082D4D 65%,
            #07365F 100%
        );
}


.services-hero::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6,31,56,.2),
            transparent
        );

    pointer-events: none;
}


.services-hero__glow {
    position: absolute;

    width: 650px;
    height: 650px;

    right: -90px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244,185,79,.18),
            rgba(244,185,79,.04) 47%,
            transparent 70%
        );
}


.services-hero__orbit {
    position: absolute;

    border:
        1px solid
        rgba(244,185,79,.12);

    border-radius: 50%;
}


.services-hero__orbit--one {
    width: 560px;
    height: 560px;

    right: -100px;
    top: -80px;
}


.services-hero__orbit--two {
    width: 340px;
    height: 340px;

    right: 18%;
    bottom: -200px;
}


.services-hero__inner {
    position: relative;

    z-index: 2;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(380px,.8fr);

    align-items: center;

    gap: 80px;

    padding-top: 80px;
    padding-bottom: 80px;
}


.services-hero__content {
    max-width: 760px;
}


.services-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color:
        var(--sv-gold);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;

    animation:
        servicesFadeUp
        .8s
        var(--sv-ease)
        both;
}


.services-eyebrow span {
    width: 35px;
    height: 1px;

    background:
        var(--sv-gold);
}


.services-hero h1 {
    color:
        var(--sv-ivory);

    font-family:
        var(--font-title);

    font-size:
        clamp(
            4rem,
            6.3vw,
            6.7rem
        );

    font-weight: 400;

    line-height: .92;

    letter-spacing: -.045em;

    animation:
        servicesFadeUp
        .9s .08s
        var(--sv-ease)
        both;
}


.services-hero h1 em {
    display: block;

    margin-top: 9px;

    color:
        var(--sv-gold);

    font-weight: 400;
}


.services-hero__content > p {
    max-width: 650px;

    margin-top: 28px;

    color:
        rgba(247,241,231,.7);

    line-height: 1.9;

    font-size: 1rem;

    animation:
        servicesFadeUp
        .9s .16s
        var(--sv-ease)
        both;
}


.services-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 34px;

    animation:
        servicesFadeUp
        .9s .24s
        var(--sv-ease)
        both;
}


@keyframes servicesFadeUp {
    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

.services-hero__visual {
    position: relative;

    min-height: 500px;
}


.services-hero__planet {
    position: absolute;

    width: 300px;
    height: 300px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(244,185,79,.25);

    border-radius: 50%;

    box-shadow:
        0 0 100px
        rgba(244,185,79,.07);
}


.services-hero__planet::before,
.services-hero__planet::after {
    content: '';

    position: absolute;

    border-radius: 50%;

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


.services-hero__planet::before {
    width: 390px;
    height: 390px;
}


.services-hero__planet::after {
    width: 470px;
    height: 470px;
}


.services-hero__planet-inner {
    width: 205px;
    height: 205px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.24);
}


.services-hero__planet-inner img {
    width: 175px;
    height: 175px;

    object-fit: contain;
}


.services-float-card {
    position: absolute;

    min-width: 150px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        13px 16px;

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

    border-radius: 14px;

    color: #fff;

    background:
        rgba(6,31,56,.55);

    backdrop-filter:
        blur(13px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.13);

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


.services-float-card:hover {
    color: #fff;

    transform:
        translateY(-5px);

    border-color:
        rgba(244,185,79,.4);

    background:
        rgba(6,31,56,.75);
}


.services-float-card > span {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color:
        var(--sv-gold);

    background:
        rgba(244,185,79,.1);
}


.services-float-card small {
    display: block;

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

    font-size: .6rem;
}


.services-float-card strong {
    display: block;

    margin-top: 1px;

    font-size: .78rem;
}


.services-float-card--flight {
    top: 8%;
    left: 2%;
}


.services-float-card--hotel {
    top: 19%;
    right: -5%;
}


.services-float-card--trip {
    bottom: 17%;
    left: -4%;
}


.services-float-card--visa {
    bottom: 7%;
    right: 1%;
}


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

.services-intro {
    padding:
        105px 0 85px;

    background:
        var(--bg);
}


.services-intro__grid {
    display: grid;

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

    gap: 100px;

    align-items: start;
}


.services-intro h2,
.services-heading h2,
.services-why h2,
.services-final h2 {
    margin-top: 12px;

    color:
        var(--heading);

    font-family:
        var(--font-title);

    font-size:
        clamp(2.5rem, 4vw, 4.3rem);

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -.03em;
}


.services-intro h2 em,
.services-heading h2 em,
.services-why h2 em,
.services-final h2 em {
    display: block;

    color:
        var(--sv-gold);

    font-weight: 400;
}


.services-intro__copy {
    padding-top: 20px;
}


.services-intro__copy p {
    color:
        var(--text-soft);

    line-height: 1.9;

    font-size: .93rem;
}


.services-intro__copy p + p {
    margin-top: 18px;
}


/* ============================================================
   SERVICES LIST
============================================================ */

.services-list {
    padding:
        30px 0 120px;

    background:
        var(--bg);
}


.service-feature {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    align-items: center;

    gap:
        clamp(50px, 7vw, 110px);

    padding:
        80px 0;

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


.service-feature:last-child {
    border-bottom:
        1px solid
        var(--border);
}


.service-feature--reverse
.service-feature__visual {
    order: 2;
}


.service-feature--reverse
.service-feature__content {
    order: 1;
}


.service-feature__number {
    position: absolute;

    right: 0;
    top: 25px;

    color:
        var(--text-soft);

    opacity: .15;

    font-family:
        var(--font-title);

    font-size: 5rem;
}


.service-feature__visual {
    position: relative;

    aspect-ratio:
        1 / .86;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius:
        30px;

    box-shadow:
        var(--sv-shadow);
}


.service-feature__visual::before {
    content: '';

    position: absolute;

    width: 400px;
    height: 400px;

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

    border-radius: 50%;
}


.service-feature__visual::after {
    content: '';

    position: absolute;

    width: 280px;
    height: 280px;

    border:
        1px solid
        rgba(244,185,79,.2);

    border-radius: 50%;
}


.service-feature__visual--flight {
    background:
        linear-gradient(
            135deg,
            #06335A,
            #0B5D9E
        );
}


.service-feature__visual--hotel {
    background:
        linear-gradient(
            135deg,
            #94702D,
            #F0B64B
        );
}


.service-feature__visual--trip {
    background:
        linear-gradient(
            135deg,
            #074577,
            #061F38
        );
}


.service-feature__visual--visa {
    background:
        linear-gradient(
            135deg,
            #173B5D,
            #0D7493
        );
}


.service-feature__symbol {
    position: relative;

    z-index: 2;

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

    font-family:
        var(--font-title);

    font-size:
        clamp(5rem, 9vw, 9rem);

    text-shadow:
        0 20px 40px
        rgba(0,0,0,.18);
}


.service-feature__visual-label {
    position: absolute;

    z-index: 4;

    left: 25px;
    right: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        16px 18px;

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

    border-radius: 15px;

    background:
        rgba(6,31,56,.42);

    backdrop-filter:
        blur(12px);

    color: #fff;
}


.service-feature__visual-label span {
    color:
        rgba(255,255,255,.55);

    font-size: .64rem;
}


.service-feature__visual-label strong {
    font-size: .78rem;
}


.service-feature__visual-label div {
    flex: 1;

    height: 1px;

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


.service-feature__content {
    max-width: 610px;
}


.service-feature__content h2 {
    margin-top: 12px;

    color:
        var(--heading);

    font-family:
        var(--font-title);

    font-size:
        clamp(2.5rem, 4.2vw, 4.2rem);

    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -.03em;
}


.service-feature__content h2 em {
    color:
        var(--sv-gold);

    font-weight: 400;
}


.service-feature__content > p {
    margin-top: 22px;

    color:
        var(--text-soft);

    line-height: 1.85;

    font-size: .9rem;
}


.service-feature__points {
    display: grid;

    gap: 12px;

    margin:
        27px 0 30px;
}


.service-feature__points li {
    display: flex;
    align-items: center;

    gap: 11px;

    color:
        var(--text);

    font-size: .82rem;
    font-weight: 600;
}


.service-feature__points li span {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color:
        var(--sv-gold-deep);

    background:
        rgba(244,185,79,.12);

    font-size: .68rem;
}


/* REVEAL */

.service-feature--reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s var(--sv-ease),
        transform .8s var(--sv-ease);
}


.service-feature--reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   PROCESS
============================================================ */

.services-process {
    position: relative;

    padding:
        110px 0;

    background:
        var(--bg-alt);
}


.services-heading--center {
    max-width: 800px;

    margin:
        0 auto 65px;

    text-align: center;
}


.services-heading--center
.services-kicker {
    justify-content: center;
}


.services-heading--center p {
    margin-top: 15px;

    color:
        var(--text-soft);
}


.services-process__grid {
    display: grid;

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

    align-items: center;

    gap: 22px;
}


.services-step {
    text-align: center;
}


.services-step__number {
    display: block;

    margin-bottom: 13px;

    color:
        var(--text-soft);

    opacity: .45;

    font-family:
        var(--font-title);

    font-size: 1.1rem;
}


.services-step__icon {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    margin:
        0 auto 18px;

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

    border-radius: 50%;

    color:
        var(--sv-blue);

    background:
        var(--surface);

    box-shadow:
        0 12px 30px
        rgba(6,31,56,.07);

    font-size: 1.2rem;
}


.services-step h3 {
    font-size: 1.25rem;
}


.services-step p {
    margin-top: 8px;

    color:
        var(--text-soft);

    font-size: .78rem;

    line-height: 1.65;
}


.services-process__line {
    width: 50px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--border),
            var(--sv-gold),
            var(--border)
        );
}


/* ============================================================
   WHY
============================================================ */

.services-why {
    position: relative;

    padding:
        115px 0;

    overflow: hidden;

    background:
        var(--sv-night);
}


.services-why::before {
    content: '';

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -300px;

    border:
        1px solid
        rgba(244,185,79,.12);

    border-radius: 50%;
}


.services-why__grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 90px;
}


.services-why h2 {
    color:
        var(--sv-ivory);
}


.services-why__content > p {
    max-width: 640px;

    margin:
        24px 0 30px;

    color:
        rgba(247,241,231,.67);

    line-height: 1.9;
}


.services-why__stats {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;
}


.services-stat {
    min-height: 165px;

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

    flex-wrap: wrap;

    gap: 8px;

    padding: 25px;

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

    border-radius: 20px;

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

    backdrop-filter:
        blur(10px);
}


.services-stat strong {
    color:
        var(--sv-gold);

    font-family:
        var(--font-title);

    font-size: 2.3rem;

    font-weight: 400;
}


.services-stat > span {
    color: #fff;
}


.services-stat p {
    width: 100%;

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

    text-align: center;

    font-size: .73rem;
}


.services-stat--wide {
    grid-column:
        1 / -1;
}


/* ============================================================
   FINAL
============================================================ */

.services-final {
    padding:
        70px 0 110px;

    background:
        var(--bg);
}


.services-final__card {
    position: relative;

    min-height: 300px;

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

    gap: 50px;

    padding:
        clamp(35px, 5vw, 65px);

    border-radius: 30px;

    background:
        linear-gradient(
            120deg,
            #0A3E69,
            var(--sv-night)
        );

    overflow: hidden;

    box-shadow:
        var(--sv-shadow);
}


.services-final__card::after {
    content: '';

    position: absolute;

    width: 350px;
    height: 350px;

    right: -100px;
    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244,185,79,.2),
            transparent 70%
        );
}


.services-final__content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}


.services-final h2 {
    color:
        var(--sv-ivory);
}


.services-final p {
    margin-top: 14px;

    color:
        rgba(247,241,231,.66);
}


.services-final
.services-btn {
    position: relative;

    z-index: 3;

    flex: 0 0 auto;
}


/* ============================================================
   DARK MODE
============================================================ */

html[data-theme="dark"]
.services-intro,
html[data-theme="dark"]
.services-list,
html[data-theme="dark"]
.services-final {
    background:
        var(--bg);
}


html[data-theme="dark"]
.services-process {
    background:
        #071E36;
}


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

@media (max-width: 1100px) {

    .services-hero__inner {
        grid-template-columns:
            1fr .7fr;

        gap: 40px;
    }


    .services-float-card {
        min-width: 130px;
    }


    .services-intro__grid {
        gap: 55px;
    }


    .services-process__grid {
        grid-template-columns:
            repeat(2,1fr);

        gap: 35px;
    }


    .services-process__line {
        display: none;
    }

}


@media (max-width: 900px) {

    .services-hero {
        min-height: auto;
    }


    .services-hero__inner {
        grid-template-columns:
            1fr;

        padding-top: 90px;
        padding-bottom: 100px;
    }


    .services-hero__visual {
        display: none;
    }


    .services-intro__grid,
    .services-why__grid {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .service-feature {
        grid-template-columns:
            1fr;

        gap: 40px;

        padding:
            65px 0;
    }


    .service-feature--reverse
    .service-feature__visual {
        order: 1;
    }


    .service-feature--reverse
    .service-feature__content {
        order: 2;
    }


    .services-final__card {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 640px) {

    .services-hero__inner {
        padding-top: 70px;
        padding-bottom: 75px;
    }


    .services-hero h1 {
        font-size:
            clamp(3.4rem, 16vw, 5rem);
    }


    .services-hero__actions {
        flex-direction: column;
    }


    .services-hero__actions
    .services-btn {
        width: 100%;
    }


    .services-intro {
        padding:
            75px 0 45px;
    }


    .services-list {
        padding-bottom: 75px;
    }


    .service-feature {
        padding:
            55px 0;
    }


    .service-feature__visual {
        aspect-ratio: 1 / 1;

        border-radius: 22px;
    }


    .service-feature__visual-label {
        left: 14px;
        right: 14px;
        bottom: 14px;

        flex-wrap: wrap;
    }


    .service-feature__visual-label div {
        display: none;
    }


    .service-feature__number {
        font-size: 3rem;
    }


    .services-process {
        padding:
            75px 0;
    }


    .services-process__grid {
        grid-template-columns:
            1fr;
    }


    .services-why {
        padding:
            80px 0;
    }


    .services-why__stats {
        grid-template-columns:
            1fr;
    }


    .services-stat--wide {
        grid-column: auto;
    }


    .services-final {
        padding:
            45px 0 80px;
    }


    .services-final__card {
        border-radius: 23px;

        padding: 32px 23px;
    }


    .services-final
    .services-btn {
        width: 100%;
    }

}


@media (prefers-reduced-motion: reduce) {

    .service-feature--reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

}