/* =====================================
   ALEX ONLINE — ABOUT PAGE
===================================== */

.about-page {
    --about-dark: #192d45;
    --about-dark-2: #102238;
    --about-blue: #5d91ef;
    --about-blue-dark: #3976dd;
    --about-blue-light: #edf4ff;
    --about-text: #263648;
    --about-muted: #718096;
    --about-border: #e6ebf1;
    --about-bg: #f6f8fb;

    color: var(--about-text);
    background: #fff;
    font-family: inherit;
}

.about-page *,
.about-page *::before,
.about-page *::after {
    box-sizing: border-box;
}

.about-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}


/* HERO */

.about-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 95px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(93,145,239,.13),
            transparent 30%
        ),
        linear-gradient(135deg, #f7faff 0%, #ffffff 55%, #f0f5fc 100%);
    border-radius: 54px;
}

.about-hero::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    right: -260px;
    top: -290px;
    border: 1px solid rgba(93,145,239,.14);
    border-radius: 50%;
}

.about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    align-items: center;
    gap: 90px;
}

.about-badge,
.about-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: var(--about-blue-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-badge span {
    width: 28px;
    height: 2px;
    background: var(--about-blue);
}

.about-hero h1 {
    margin: 0 0 25px;
    color: var(--about-dark);
    font-size: clamp(42px, 5vw, 70px);
    line-height: .99;
    letter-spacing: -.045em;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
}

.about-hero h1 strong {
    display: block;
    color: var(--about-blue);
    font-weight: 700;
}

.about-hero__lead {
    max-width: 700px;
    margin: 0 0 20px;

    color: var(--about-dark);
    font-size: 22px;
    line-height: 1.5;
    font-weight: 500;
}

.about-hero__text {
    max-width: 730px;
    margin: 0;

    color: #657386;
    font-size: 16px;
    line-height: 1.85;
}

.about-hero__advantages {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.about-mini-item {
    display: flex;
    align-items: center;
    gap: 13px;
}

.about-mini-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--about-blue);
    border-radius: 50%;

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

    box-shadow: 0 8px 20px rgba(93,145,239,.22);
}

.about-mini-item strong,
.about-mini-item span {
    display: block;
}

.about-mini-item strong {
    color: var(--about-dark);
    font-size: 14px;
    margin-bottom: 3px;
}

.about-mini-item span {
    color: var(--about-muted);
    font-size: 12px;
}


/* HERO VISUAL */

.about-hero__visual {
    position: relative;
    min-height: 420px;

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

.about-logo-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 355px;
    overflow: hidden;
    height: 356px;
    /* padding: 50px; */
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 55px;
    box-shadow:
        0 35px 80px rgba(22,45,73,.12),
        inset 0 0 0 1px rgba(226,234,244,.6);
    transform: rotate(-3deg);
}

.about-logo-box::before {
    content: "";
    position: absolute;
    inset: 18px;

    border: 1px solid #e7edf5;
    border-radius: 42px;
}

.about-logo-box img {
    /* position: relative; */
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-logo-line {
    position: relative;
    z-index: 2;

    width: 55px;
    height: 2px;
    margin: 25px 0 13px;

    background: var(--about-blue);
}

.about-logo-box > span {
    position: relative;
    z-index: 2;

    color: #8190a2;
    font-size: 12px;
    letter-spacing: .04em;
}

.about-floating {
    position: absolute;

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

    min-width: 190px;
    padding: 15px 18px;

    background: #fff;
    border: 1px solid var(--about-border);
    border-radius: 15px;

    box-shadow: 0 18px 45px rgba(25,45,69,.13);
}

.about-floating--one {
    top: 25px;
    right: -10px;
}

.about-floating--two {
    left: -15px;
    bottom: 35px;
}

.about-floating__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--about-blue);
    border-radius: 10px;
}

.about-floating strong,
.about-floating small {
    display: block;
}

.about-floating strong {
    color: var(--about-dark);
    font-size: 13px;
}

.about-floating small {
    margin-top: 3px;
    color: var(--about-muted);
    font-size: 10px;
}


/* STATS */

.about-stats {
    position: relative;
    z-index: 5;
    margin-top: -34px;
}

.about-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    background: #fff;
    border: 1px solid var(--about-border);
    border-radius: 20px;

    box-shadow: 0 18px 55px rgba(23,46,74,.09);
    overflow: hidden;
}

.about-stat {
    position: relative;
    padding: 28px 32px;
}

.about-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 27%;
    width: 1px;
    height: 46%;
    background: var(--about-border);
}

.about-stat strong {
    display: block;

    margin-bottom: 7px;

    color: var(--about-blue);
    font-size: 27px;
    line-height: 1;
}

.about-stat span {
    color: #718096;
    font-size: 13px;
    line-height: 1.45;
}


/* SECTIONS */

.about-section {
    padding: 105px 0;
}

.about-section--light {
    background: var(--about-bg);
    border-radius: 25px;
}

.about-content-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 100px;
}

.about-section-heading {
    position: sticky;
    top: 120px;
    align-self: start;
}

.about-section-heading h2,
.about-center-heading h2,
.about-price-box h2,
.about-delivery h2,
.about-final h2 {
    margin: 0;

    color: var(--about-dark);
    font-size: clamp(31px, 3.5vw, 48px);
    line-height: 1.14;
    letter-spacing: -.035em;
}

.about-center-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.about-center-heading p {
    max-width: 620px;
    margin: 18px auto 0;

    color: var(--about-muted);
    font-size: 16px;
    line-height: 1.7;
}


/* HISTORY */

.about-history {
    position: relative;
}

.about-history::before {
    content: "";
    position: absolute;

    left: 8px;
    top: 13px;
    bottom: 10px;

    width: 1px;
    background: #dbe3ec;
}

.about-history__item {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 28px;

    padding-bottom: 55px;
}

.about-history__item:last-child {
    padding-bottom: 0;
}

.about-history__marker {
    position: relative;
    z-index: 2;

    width: 17px;
    height: 17px;

    margin-top: 7px;

    background: #fff;
    border: 5px solid var(--about-blue);
    border-radius: 50%;

    box-shadow: 0 0 0 7px #edf3fd;
}

.about-history__content > span {
    display: inline-block;
    margin-bottom: 9px;

    color: var(--about-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.about-history h3 {
    margin: 0 0 13px;

    color: var(--about-dark);
    font-size: 23px;
    line-height: 1.25;
}

.about-history p {
    margin: 0;

    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.8;
}


/* FEATURES */

.about-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.about-feature {
    position: relative;
    overflow: hidden;

    min-height: 305px;
    padding: 30px;

    background: #fff;
    border: 1px solid #e5ebf2;
    border-radius: 20px;

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

.about-feature:hover {
    transform: translateY(-6px);
    border-color: #d1def1;
    box-shadow: 0 20px 45px rgba(24,46,72,.09);
}

.about-feature__number {
    position: absolute;
    right: 20px;
    top: 15px;

    color: #eef2f7;
    font-size: 55px;
    line-height: 1;
    font-weight: 800;
}

.about-feature__icon {
    position: relative;
    z-index: 2;

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

    width: 52px;
    height: 52px;
    margin-bottom: 45px;

    color: var(--about-blue);
    background: var(--about-blue-light);
    border-radius: 14px;
}

.about-feature__icon svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-feature h3 {
    margin: 0 0 13px;

    color: var(--about-dark);
    font-size: 19px;
}

.about-feature p {
    margin: 0;

    color: var(--about-muted);
    font-size: 14px;
    line-height: 1.72;
}


/* PRICE */

.about-price-box {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: center;

    padding: 65px 70px;

    background: var(--about-dark);
    border-radius: 28px;
}

.about-price-box::before {
    content: "";
    position: absolute;

    width: 440px;
    height: 440px;

    right: -170px;
    top: -210px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.about-price-box::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    right: -80px;
    top: -110px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.about-price-box__content {
    position: relative;
    z-index: 2;
}

.about-price-box h2 {
    color: #fff;
    margin-bottom: 25px;
}

.about-price-box h2 strong {
    color: #75a5fa;
}

.about-price-box p {
    max-width: 650px;
    margin: 0 0 16px;

    color: rgba(255,255,255,.67);
    font-size: 15px;
    line-height: 1.8;
}

.about-price-box__visual {
    position: relative;
    z-index: 3;

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

.about-price-circle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 180px;
    height: 180px;

    background: var(--about-blue);
    border-radius: 50%;

    box-shadow:
        0 0 0 18px rgba(93,145,239,.13),
        0 0 0 36px rgba(93,145,239,.06);
}

.about-price-circle span {
    color: #fff;
    font-size: 72px;
    font-weight: 300;
}

.about-price-message {
    position: absolute;

    right: -15px;
    bottom: -30px;

    width: 190px;
    padding: 17px 20px;

    background: #fff;
    border-radius: 14px;

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

.about-price-message small,
.about-price-message strong {
    display: block;
}

.about-price-message small {
    margin-bottom: 6px;

    color: var(--about-blue);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.about-price-message strong {
    color: var(--about-dark);
    font-size: 13px;
    line-height: 1.4;
}


/* DELIVERY */

.about-delivery {
    padding: 100px 0;
    background:
        radial-gradient(circle at 5% 110%, rgba(93,145,239,.25), transparent 34%),
        linear-gradient(135deg, #172b43 0%, #102238 100%);
    border-radius: 25px;
}

.about-delivery__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.about-section-label--white {
    color: #84aff8;
}

.about-delivery h2 {
    max-width: 550px;
    margin-bottom: 25px;
    color: #fff;
}

.about-delivery p {
    max-width: 620px;
    margin: 0 0 15px;

    color: rgba(255,255,255,.65);
    font-size: 15px;
    line-height: 1.8;
}

.about-delivery__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.about-delivery-card {
    min-height: 135px;
    padding: 24px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;

    backdrop-filter: blur(5px);
}

.about-delivery-card span {
    display: block;
    margin-bottom: 27px;

    color: #76a5f8;
    font-size: 12px;
    font-weight: 700;
}

.about-delivery-card strong {
    display: block;

    color: #fff;
    font-size: 15px;
    line-height: 1.45;
}


/* FINAL */

.about-final {
    position: relative;

    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 40px;

    max-width: 1050px;
    margin: 0 auto;
}

.about-final__quote {
    color: #dbe8fb;
    font-family: Georgia, serif;
    font-size: 150px;
    line-height: .75;
}

.about-final__content > span {
    display: block;
    margin-bottom: 15px;

    color: var(--about-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-final h2 {
    max-width: 900px;
    font-size: clamp(28px, 3vw, 42px);
}

.about-final p {
    max-width: 740px;
    margin: 25px 0 0;

    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.8;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .about-hero__grid {
        gap: 40px;
    }

    .about-features {
        grid-template-columns: 1fr 1fr;
    }

    .about-content-grid {
        gap: 60px;
    }

    .about-price-box {
        padding: 55px 45px;
    }
}


@media (max-width: 850px) {

    .about-container {
        width: min(100% - 30px, 1240px);
    }

    .about-hero {
        padding: 60px 0 80px;
    }

    .about-hero__grid,
    .about-content-grid,
    .about-price-box,
    .about-delivery__grid {
        grid-template-columns: 1fr;
    }

    .about-hero__grid {
        gap: 55px;
    }

    .about-hero__visual {
        min-height: 360px;
    }

    .about-section-heading {
        position: static;
    }

    .about-content-grid {
        gap: 45px;
    }

    .about-stats__grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-stat:nth-child(2)::after {
        display: none;
    }

    .about-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--about-border);
    }

    .about-price-box {
        gap: 55px;
    }

    .about-price-box__visual {
        min-height: 235px;
    }

    .about-delivery__grid {
        gap: 50px;
    }
}


@media (max-width: 600px) {

    .about-container {
        width: calc(100% - 24px);
    }

    .about-hero {
        padding: 45px 0 70px;
    }

    .about-hero h1 {
        font-size: 42px;
    }

    .about-hero__lead {
        font-size: 18px;
    }

    .about-hero__advantages {
        display: grid;
        gap: 17px;
    }

    .about-hero__visual {
        min-height: 310px;
    }

    .about-logo-box {
        width: 270px;
        height: 270px;
        padding: 40px;
        border-radius: 38px;
    }

    .about-logo-box::before {
        border-radius: 29px;
    }

    .about-logo-box img {
        max-width: 135px;
    }

    .about-floating {
        min-width: 160px;
        padding: 11px 13px;
    }

    .about-floating--one {
        right: 0;
    }

    .about-floating--two {
        left: 0;
    }

    .about-stats {
        margin-top: -25px;
    }

    .about-stat {
        padding: 22px 17px;
    }

    .about-stat strong {
        font-size: 21px;
    }

    .about-section {
        padding: 75px 0;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-feature {
        min-height: auto;
    }

    .about-feature__icon {
        margin-bottom: 35px;
    }

    .about-price-box {
        padding: 38px 25px;
        border-radius: 21px;
    }

    .about-price-circle {
        width: 145px;
        height: 145px;
    }

    .about-price-circle span {
        font-size: 58px;
    }

    .about-price-message {
        right: 0;
        bottom: -25px;
        width: 170px;
    }

    .about-delivery {
        padding: 75px 0;
    }

    .about-delivery__cards {
        grid-template-columns: 1fr;
    }

    .about-delivery-card {
        min-height: auto;
    }

    .about-delivery-card span {
        margin-bottom: 15px;
    }

    .about-final {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-final__quote {
        height: 70px;
        font-size: 110px;
    }
}

/* ==========================================
   ALEX ONLINE — PAYMENT PAGE
========================================== */

.payment-page {
    --pay-dark: #192d45;
    --pay-dark-2: #102238;
    --pay-blue: #5d91ef;
    --pay-blue-dark: #3975da;
    --pay-blue-light: #edf4ff;
    --pay-text: #29394a;
    --pay-muted: #748295;
    --pay-border: #e5ebf2;
    --pay-light: #f6f8fb;

    color: var(--pay-text);
    background: #fff;
    font-family: inherit;
}

.payment-page *,
.payment-page *::before,
.payment-page *::after {
    box-sizing: border-box;
}

.payment-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}


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

.payment-hero {
    position: relative;
    overflow: hidden;
    padding: 60px 0 70px;
    background:
        radial-gradient(
            circle at 80% 12%,
            rgba(93,145,239,.17),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7faff 0%,
            #ffffff 52%,
            #eef4fc 100%
        );
    border-radius: 25px;
}

.payment-hero::before {
    content: "";
    position: absolute;

    width: 560px;
    height: 560px;

    right: -190px;
    top: -260px;

    border: 1px solid rgba(93,145,239,.12);
    border-radius: 50%;
}

.payment-hero::after {
    content: "";
    position: absolute;

    width: 390px;
    height: 390px;

    right: -105px;
    top: -165px;

    border: 1px solid rgba(93,145,239,.1);
    border-radius: 50%;
}

.payment-hero__grid {
    position: relative;
    z-index: 2;

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

    align-items: center;
    gap: 95px;
}

.payment-eyebrow,
.payment-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: var(--pay-blue-dark);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.payment-eyebrow span {
    width: 28px;
    height: 2px;

    background: var(--pay-blue);
}

.payment-hero h1 {
    max-width: 720px;
    margin: 0 0 26px;
    color: var(--pay-dark);
    font-size: clamp(43px, 5vw, 69px);
    line-height: 1.01;
    letter-spacing: -.045em;
    display: flex;
    flex-wrap: wrap;
}

.payment-hero h1 strong {
    display: block;
    color: var(--pay-blue);
    font-weight: 700;
}

.payment-hero__lead {
    max-width: 650px;

    margin: 0 0 19px;

    color: var(--pay-dark);

    font-size: 21px;
    line-height: 1.52;
    font-weight: 500;
}

.payment-hero__text {
    max-width: 690px;
    margin: 0;
    color: var(--pay-muted);
    font-size: 17px;
    line-height: 1.85;
}

.payment-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;

    margin-top: 38px;
}

.payment-hero-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-hero-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--pay-blue);

    border-radius: 50%;

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

    box-shadow:
        0 8px 20px rgba(93,145,239,.23);
}

.payment-hero-badge strong,
.payment-hero-badge small {
    display: block;
}

.payment-hero-badge strong {
    margin-bottom: 3px;
    color: var(--pay-dark);
    font-size: 16px;
}

.payment-hero-badge small {
    color: var(--pay-muted);
    font-size: 14px;
}


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

.payment-hero__visual {
    position: relative;

    min-height: 390px;

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

.payment-card {
    position: relative;

    width: 365px;
    height: 220px;

    padding: 27px;

    color: #fff;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #182e48 0%,
            #294f78 58%,
            #5e92ef 140%
        );

    box-shadow:
        0 35px 75px rgba(18,42,68,.25);

    transform:
        rotate(-5deg)
        perspective(900px)
        rotateY(-4deg);
}

.payment-card::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,.12),
            transparent 65%
        );

    pointer-events: none;
}

.payment-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

.payment-card__chip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    width: 43px;
    height: 33px;

    margin-top: 31px;

    overflow: hidden;

    background: #e5c97f;

    border-radius: 8px;
}

.payment-card__chip span {
    border: 1px solid rgba(60,45,0,.17);
}

.payment-card__number {
    margin-top: 24px;

    font-size: 17px;
    font-weight: 500;
    letter-spacing: .08em;
}

.payment-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-top: 28px;
}

.payment-card__bottom small,
.payment-card__bottom strong {
    display: block;
}

.payment-card__bottom small {
    margin-bottom: 3px;

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

    font-size: 9px;
    text-transform: uppercase;
}

.payment-card__bottom strong {
    font-size: 12px;
    letter-spacing: .1em;
}

.payment-card__wave {
    display: flex;
    align-items: center;
    gap: 3px;
}

.payment-card__wave i {
    display: block;

    width: 5px;

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

    border-radius:
        0 100% 100% 0;
}

.payment-card__wave i:nth-child(1) {
    height: 11px;
}

.payment-card__wave i:nth-child(2) {
    height: 17px;
}

.payment-card__wave i:nth-child(3) {
    height: 24px;
}


/* FLOATING */

.payment-floating {
    position: absolute;
    z-index: 4;

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

    min-width: 190px;

    padding: 14px 17px;

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

    border: 1px solid var(--pay-border);
    border-radius: 15px;

    box-shadow:
        0 18px 42px rgba(24,46,71,.13);
}

.payment-floating--one {
    right: -10px;
    top: 38px;
}

.payment-floating--two {
    left: 0;
    bottom: 33px;
}

.payment-floating__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--pay-blue);

    border-radius: 10px;

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

.payment-floating strong,
.payment-floating span {
    display: block;
}

.payment-floating strong {
    color: var(--pay-dark);
    font-size: 14px;
}

.payment-floating span {
    margin-top: 2px;
    color: var(--pay-muted);
    font-size: 12px;
}


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

.payment-section {
    padding: 60px 0;
    border-radius: 25px;
}

.payment-section--light {
    background: var(--pay-light);
}

.payment-heading {
    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;
}

.payment-heading h2,
.payment-cashless h2,
.payment-security h2,
.payment-help h2,
.payment-bottom h2 {
    margin: 0;

    color: var(--pay-dark);

    font-size: clamp(31px, 3.5vw, 47px);
    line-height: 1.13;
    letter-spacing: -.035em;
}

.payment-heading p {
    max-width: 590px;

    margin: 17px auto 0;

    color: var(--pay-muted);

    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================
   PAYMENT METHODS
========================================== */

.payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 19px;
}

.payment-method {
    position: relative;

    min-height: 330px;

    padding: 32px;

    background: #fff;

    border: 1px solid var(--pay-border);
    border-radius: 21px;

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

.payment-method:hover {
    transform: translateY(-5px);

    border-color: #ccdcef;

    box-shadow:
        0 22px 48px rgba(22,45,70,.09);
}

.payment-method--featured {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7faff 100%
        );

    border-color: #cfdef4;
}

.payment-method__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 35px;
}

.payment-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    color: var(--pay-blue);

    background: var(--pay-blue-light);

    border-radius: 15px;
}

.payment-method__icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.payment-method__badge {
    padding: 7px 10px;

    color: var(--pay-blue-dark);
    background: var(--pay-blue-light);

    border-radius: 30px;

    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.payment-method h3 {
    margin: 0 0 14px;

    color: var(--pay-dark);

    font-size: 23px;
}

.payment-method p {
    max-width: 520px;
    margin: 0;
    color: var(--pay-muted);
    font-size: 16px;
    line-height: 1.75;
}

.payment-method__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 25px;
}

.payment-method__tags span {
    padding: 7px 11px;
    color: #54677d;
    background: #f3f6fa;
    border: 1px solid #e7ebf0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
}

.payment-method__note {
    margin-top: 25px;
    padding: 14px 16px;
    color: #637487;
    background: #f7f9fc;
    border-left: 3px solid var(--pay-blue);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.55;
}

.payment-method__bottom {
    margin-top: 28px;
}

.payment-method__bottom strong,
.payment-method__bottom span {
    display: block;
}

.payment-method__bottom strong {
    color: var(--pay-dark);

    font-size: 13px;
}

.payment-method__bottom span {
    margin-top: 3px;

    color: var(--pay-muted);

    font-size: 11px;
}


/* ==========================================
   CASHLESS / DOCUMENTS
========================================== */

.payment-cashless {
    display: grid;
    grid-template-columns: 1.05fr .95fr;

    align-items: center;
    gap: 100px;
}

.payment-cashless__content > p {
    max-width: 610px;
    margin: 22px 0 0;
    color: var(--pay-muted);
    font-size: 17px;
    line-height: 1.8;
}

.payment-cashless__advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 37px;
}

.payment-cashless__advantages > div {
    min-height: 120px;

    padding: 18px;

    background: #fff;

    border: 1px solid var(--pay-border);
    border-radius: 14px;
}

.payment-cashless__advantages span {
    display: block;

    margin-bottom: 23px;

    color: var(--pay-blue);

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

.payment-cashless__advantages strong {
    display: block;
    color: var(--pay-dark);
    font-size: 14px;
    line-height: 1.45;
}


/* DOCUMENT CARD */

.payment-docs-card {
    position: relative;
    overflow: hidden;

    padding: 35px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #192e47,
            #102238
        );

    border-radius: 24px;

    box-shadow:
        0 28px 65px rgba(20,43,68,.18);
}

.payment-docs-card::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -140px;
    top: -150px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.payment-docs-card__header {
    position: relative;
    z-index: 2;

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

    margin-bottom: 35px;
}

.payment-docs-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--pay-blue);

    border-radius: 14px;
}

.payment-docs-card__icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.payment-docs-card__header span,
.payment-docs-card__header strong {
    display: block;
}

.payment-docs-card__header span {
    margin-bottom: 4px;

    color: #85aff8;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.payment-docs-card__header strong {
    font-size: 18px;
}

.payment-docs-card__list {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 7px;
}

.payment-docs-card__list > div {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 14px;

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

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
}

.payment-docs-card__list i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--pay-blue);

    border-radius: 50%;

    font-size: 10px;
    font-style: normal;
}

.payment-docs-card__list span {
    color: rgba(255,255,255,.82);
    font-size: 14px;
}

.payment-docs-card__edo {
    position: relative;
    z-index: 2;

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

    margin-top: 27px;
    padding-top: 25px;

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

.payment-docs-card__edo > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 33px;

    flex: 0 0 auto;

    color: var(--pay-dark);
    background: #fff;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 800;
}

.payment-docs-card__edo strong,
.payment-docs-card__edo small {
    display: block;
}

.payment-docs-card__edo strong {
    margin-bottom: 3px;

    font-size: 12px;
}

.payment-docs-card__edo small {
    color: rgba(255,255,255,.55);

    font-size: 10px;
}


/* ==========================================
   STEPS
========================================== */

.payment-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.payment-step {
    position: relative;

    padding: 30px 28px;
}

.payment-step:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 57px;
    right: -15px;

    width: 30px;
    height: 1px;

    background: #dce4ed;
}

.payment-step__number {
    position: absolute;

    right: 20px;
    top: 15px;

    color: #eff3f8;

    font-size: 52px;
    font-weight: 800;
    line-height: 1;
}

.payment-step__icon {
    position: relative;
    z-index: 2;

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

    width: 53px;
    height: 53px;

    margin-bottom: 29px;

    color: var(--pay-blue);

    background: var(--pay-blue-light);

    border-radius: 15px;
}

.payment-step__icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.payment-step h3 {
    margin: 0 0 11px;

    color: var(--pay-dark);

    font-size: 17px;
}

.payment-step p {
    margin: 0;
    color: var(--pay-muted);
    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================
   SECURITY
========================================== */

.payment-security {
    padding: 75px 0;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(93,145,239,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #172d47,
            #102238
        );
    border-radius: 25px;
}

.payment-security__grid {
    display: grid;
    grid-template-columns: 90px 1fr auto;

    align-items: center;
    gap: 35px;
}

.payment-security__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;

    color: #fff;
    background: rgba(93,145,239,.16);

    border: 1px solid rgba(93,145,239,.28);
    border-radius: 21px;
}

.payment-security__icon svg {
    width: 34px;
    height: 34px;

    fill: none;
    stroke: #79a8fa;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.payment-security__content > span {
    display: block;

    margin-bottom: 10px;

    color: #79a8fa;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.payment-security h2 {
    max-width: 620px;

    color: #fff;

    font-size: clamp(27px, 3vw, 39px);
}

.payment-security p {
    max-width: 700px;

    margin: 17px 0 0;

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

    font-size: 13px;
    line-height: 1.75;
}

.payment-security__brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;

    max-width: 220px;
}

.payment-security__brands span {
    padding: 10px 13px;

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

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

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;

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


/* ==========================================
   HELP
========================================== */

.payment-help {
    display: grid;
    grid-template-columns: .8fr 1.2fr;

    gap: 90px;
}

.payment-help__heading p {
    max-width: 410px;
    margin: 18px 0 0;
    color: var(--pay-muted);
    font-size: 17px;
    line-height: 1.75;
}

.payment-help__list {
    display: grid;
    gap: 8px;
}

.payment-help-item {
    display: grid;
    grid-template-columns: 42px 1fr;

    align-items: center;
    gap: 17px;

    padding: 18px 20px;

    background: #fff;

    border: 1px solid var(--pay-border);
    border-radius: 12px;
}

.payment-help-item > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--pay-blue);

    background: var(--pay-blue-light);

    border-radius: 10px;

    font-size: 10px;
    font-weight: 800;
}

.payment-help-item p {
    margin: 0;
    color: #5f7083;
    font-size: 15px;
    line-height: 1.55;
}


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

.payment-bottom {
    padding: 60px 0;
    background: var(--pay-light);
    border-radius: 25px;
}

.payment-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;

    padding: 55px 60px;

    background: #fff;

    border: 1px solid var(--pay-border);
    border-radius: 24px;

    box-shadow:
        0 20px 55px rgba(23,45,68,.07);
}

.payment-bottom__inner > div:first-child > span {
    display: block;

    margin-bottom: 13px;

    color: var(--pay-blue);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.payment-bottom h2 {
    max-width: 650px;
}

.payment-bottom p {
    max-width: 680px;

    margin: 17px 0 0;

    color: var(--pay-muted);

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

.payment-bottom__check {
    display: flex;
    align-items: center;
    gap: 12px;

    flex: 0 0 270px;

    padding: 18px 20px;

    color: var(--pay-dark);

    background: var(--pay-blue-light);

    border-radius: 13px;

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

.payment-bottom__check span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--pay-blue);

    border-radius: 50%;
}


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

@media (max-width: 1100px) {

    .payment-hero__grid {
        gap: 45px;
    }

    .payment-cashless {
        gap: 50px;
    }

    .payment-help {
        gap: 50px;
    }
}


@media (max-width: 850px) {

    .payment-container {
        width: min(100% - 30px, 1240px);
    }

    .payment-hero {
        padding: 65px 0 85px;
    }

    .payment-hero__grid,
    .payment-cashless,
    .payment-help {
        grid-template-columns: 1fr;
    }

    .payment-hero__grid {
        gap: 60px;
    }

    .payment-hero__visual {
        min-height: 350px;
    }

    .payment-cashless {
        gap: 50px;
    }

    .payment-steps {
        grid-template-columns: 1fr 1fr;
    }

    .payment-step:nth-child(2)::after {
        display: none;
    }

    .payment-security__grid {
        grid-template-columns: 80px 1fr;
    }

    .payment-security__brands {
        grid-column: 2;
        justify-content: flex-start;
        max-width: none;
    }

    .payment-bottom__inner {
        display: grid;
    }

    .payment-bottom__check {
        flex: initial;
        width: max-content;
        max-width: 100%;
    }
}


@media (max-width: 650px) {

    .payment-container {
        width: calc(100% - 24px);
    }

    .payment-section {
        padding: 72px 0;
    }

    .payment-hero {
        padding: 45px 0 70px;
    }

    .payment-hero h1 {
        font-size: 41px;
    }

    .payment-hero__lead {
        font-size: 18px;
    }

    .payment-hero__badges {
        display: grid;
        gap: 16px;
    }

    .payment-hero__visual {
        min-height: 310px;
    }

    .payment-card {
        width: min(92%, 330px);
        height: 200px;
        padding: 22px;
    }

    .payment-floating {
        min-width: 158px;
        padding: 11px 12px;
    }

    .payment-floating--one {
        right: 0;
    }

    .payment-floating--two {
        left: 0;
    }

    .payment-methods {
        grid-template-columns: 1fr;
    }

    .payment-method {
        min-height: auto;
        padding: 26px;
    }

    .payment-cashless__advantages {
        grid-template-columns: 1fr;
    }

    .payment-cashless__advantages > div {
        min-height: auto;
    }

    .payment-cashless__advantages span {
        margin-bottom: 11px;
    }

    .payment-docs-card {
        padding: 27px 20px;
    }

    .payment-steps {
        grid-template-columns: 1fr;
    }

    .payment-step {
        padding: 25px 20px;
    }

    .payment-step:not(:last-child)::after {
        display: none;
    }

    .payment-security {
        padding: 65px 0;
    }

    .payment-security__grid {
        grid-template-columns: 1fr;
    }

    .payment-security__brands {
        grid-column: auto;
    }

    .payment-help {
        gap: 35px;
    }

    .payment-help-item {
        grid-template-columns: 38px 1fr;
        gap: 12px;
        padding: 15px;
    }

    .payment-bottom {
        padding: 65px 0;
    }

    .payment-bottom__inner {
        padding: 35px 24px;
        border-radius: 18px;
    }
}
/* ==========================================
   ALEX ONLINE — RETURN / WARRANTY PAGE
========================================== */

.return-page {
    --ret-dark: #192d45;
    --ret-dark-2: #102238;
    --ret-blue: #5d91ef;
    --ret-blue-dark: #3976dc;
    --ret-blue-light: #edf4ff;
    --ret-text: #29394a;
    --ret-muted: #748295;
    --ret-border: #e5ebf2;
    --ret-light: #f6f8fb;
    --ret-warning: #f5a443;
    --ret-warning-light: #fff8ee;

    color: var(--ret-text);
    background: #fff;
    font-family: inherit;
}

.return-page *,
.return-page *::before,
.return-page *::after {
    box-sizing: border-box;
}

.return-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}


/* HERO */

.return-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 0 60px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(93,145,239,.15),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f7faff 0%,
            #fff 55%,
            #eff5fc 100%
        );
    border-radius: 25px;
}

.return-hero::before {
    content: "";
    position: absolute;

    width: 570px;
    height: 570px;

    right: -220px;
    top: -270px;

    border: 1px solid rgba(93,145,239,.13);
    border-radius: 50%;
}

.return-hero__grid {
    position: relative;
    z-index: 2;

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

    align-items: center;
    gap: 90px;
}

.return-eyebrow,
.return-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: var(--ret-blue-dark);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.return-eyebrow span {
    width: 28px;
    height: 2px;
    background: var(--ret-blue);
}

.return-hero h1 {
    max-width: 720px;
    margin: 0 0 26px;
    color: var(--ret-dark);
    font-size: clamp(43px, 5vw, 69px);
    line-height: 1.01;
    letter-spacing: -.045em;
    display: flex;
    flex-wrap: wrap;
}

.return-hero h1 strong {
    display: block;
    color: var(--ret-blue);
}

.return-hero__lead {
    max-width: 650px;

    margin: 0 0 18px;

    color: var(--ret-dark);

    font-size: 21px;
    line-height: 1.52;
    font-weight: 500;
}

.return-hero__text {
    max-width: 670px;

    margin: 0;

    color: var(--ret-muted);

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

.return-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;

    margin-top: 38px;
}

.return-hero-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.return-hero-feature > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--ret-blue);

    border-radius: 50%;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(93,145,239,.23);
}

.return-hero-feature strong,
.return-hero-feature small {
    display: block;
}

.return-hero-feature strong {
    margin-bottom: 3px;
    color: var(--ret-dark);
    font-size: 15px;
}

.return-hero-feature small {
    max-width: 190px;
    color: var(--ret-muted);
    font-size: 12px;
    line-height: 1.4;
}


/* HERO VISUAL */

.return-hero__visual {
    position: relative;

    min-height: 400px;

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

.return-box {
    position: relative;

    width: 350px;
    padding: 30px;

    background: #fff;

    border: 1px solid var(--ret-border);
    border-radius: 25px;

    box-shadow:
        0 30px 70px rgba(25,45,69,.14);

    transform: rotate(-3deg);
}

.return-box__top {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--ret-border);
}

.return-box__logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    color: #fff;
    background: var(--ret-dark);

    border-radius: 12px;

    font-size: 23px;
    font-weight: 800;
}

.return-box__top small,
.return-box__top strong {
    display: block;
}

.return-box__top small {
    margin-bottom: 3px;

    color: var(--ret-muted);
    font-size: 10px;
}

.return-box__top strong {
    color: var(--ret-dark);
    font-size: 15px;
}

.return-box__product {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 24px;
    padding: 18px;

    background: var(--ret-light);

    border-radius: 14px;
}

.return-box__product-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    color: var(--ret-blue);
    background: #fff;

    border-radius: 12px;
}

.return-box__product-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.return-box__product span,
.return-box__product strong {
    display: block;
}

.return-box__product span {
    margin-bottom: 4px;

    color: var(--ret-muted);
    font-size: 10px;
}

.return-box__product strong {
    color: var(--ret-dark);
    font-size: 13px;
}

.return-box__status {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 20px;

    padding: 14px;

    color: var(--ret-dark);
    background: var(--ret-blue-light);

    border-radius: 11px;

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

.return-box__status i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    color: #fff;
    background: var(--ret-blue);

    border-radius: 50%;

    font-style: normal;
    font-size: 10px;
}

.return-floating {
    position: absolute;

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

    min-width: 160px;

    padding: 13px 15px;

    background: #fff;

    border: 1px solid var(--ret-border);
    border-radius: 14px;

    box-shadow:
        0 16px 40px rgba(25,45,69,.12);
}

.return-floating--one {
    top: 35px;
    right: 0;
}

.return-floating--two {
    bottom: 35px;
    left: 0;
}

.return-floating > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    color: #fff;
    background: var(--ret-blue);

    border-radius: 10px;

    font-weight: 700;
}

.return-floating strong,
.return-floating small {
    display: block;
}

.return-floating strong {
    color: var(--ret-dark);
    font-size: 12px;
}

.return-floating small {
    margin-top: 2px;

    color: var(--ret-muted);
    font-size: 9px;
}


/* SECTIONS */

.return-section {
    padding: 60px 0;
    border-radius: 25px;
}

.return-section--light {
    background: var(--ret-light);
}

.return-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.return-heading h2,
.return-defect h2,
.return-refund h2,
.return-rules h2,
.return-warranty h2 {
    margin: 0;

    color: var(--ret-dark);

    font-size: clamp(31px, 3.5vw, 47px);
    line-height: 1.13;
    letter-spacing: -.035em;
}

.return-heading p {
    max-width: 600px;

    margin: 17px auto 0;

    color: var(--ret-muted);

    font-size: 15px;
    line-height: 1.7;
}


/* CONDITIONS CARDS */

.return-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}

.return-card {
    position: relative;
    overflow: hidden;

    padding: 35px;

    background: #fff;

    border: 1px solid var(--ret-border);
    border-radius: 22px;

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

.return-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(24,46,70,.09);
}

.return-card--accent {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        );

    border-color: #cfddf2;
}

.return-card__number {
    position: absolute;

    right: 25px;
    top: 15px;

    color: #eef2f7;

    font-size: 62px;
    font-weight: 800;
}

.return-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    margin-bottom: 35px;

    color: var(--ret-blue);
    background: var(--ret-blue-light);

    border-radius: 15px;
}

.return-card__icon svg {
    width: 26px;
    height: 26px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.return-card h3 {
    margin: 0 0 14px;

    color: var(--ret-dark);

    font-size: 23px;
}

.return-card p {
    margin: 0 0 22px;
    color: var(--ret-muted);
    font-size: 15px;
    line-height: 1.75;
}

.return-card ul {
    display: grid;
    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.return-card li {
    position: relative;
    padding-left: 22px;
    color: #5d6e81;
    font-size: 14px;
    line-height: 1.55;
}

.return-card li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--ret-blue);

    font-weight: 800;
}


/* STEPS */

.return-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.return-step {
    position: relative;

    padding: 25px 28px;
}

.return-step:not(:last-child)::after {
    content: "";

    position: absolute;

    width: 35px;
    height: 1px;

    right: -18px;
    top: 53px;

    background: #d9e2ec;
}

.return-step__number {
    position: absolute;

    top: 7px;
    right: 20px;

    color: #e9eef4;

    font-size: 53px;
    font-weight: 800;
}

.return-step__icon {
    position: relative;
    z-index: 2;

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

    width: 54px;
    height: 54px;

    margin-bottom: 27px;

    color: var(--ret-blue);
    background: #fff;

    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(27,48,72,.07);
}

.return-step__icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.return-step h3 {
    margin: 0 0 10px;
    color: var(--ret-dark);
    font-size: 19px;
}

.return-step p {
    margin: 0;
    color: var(--ret-muted);
    font-size: 14px;
    line-height: 1.7;
}


/* DEFECT */

.return-defect {
    display: grid;
    grid-template-columns: 1fr .85fr;

    align-items: center;
    gap: 90px;
}

.return-defect__content > p {
    max-width: 600px;
    margin: 20px 0 0;
    color: var(--ret-muted);
    font-size: 16px;
    line-height: 1.75;
}

.return-photo-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 35px;
}

.return-photo-list > div {
    min-height: 95px;

    padding: 17px;

    background: var(--ret-light);

    border: 1px solid var(--ret-border);
    border-radius: 13px;
}

.return-photo-list span {
    display: block;

    margin-bottom: 17px;

    color: var(--ret-blue);

    font-size: 10px;
    font-weight: 800;
}

.return-photo-list strong {
    display: block;
    color: var(--ret-dark);
    font-size: 14px;
    line-height: 1.4;
}

.return-defect__notice {
    padding: 38px;

    background: var(--ret-warning-light);

    border: 1px solid #f4dfc4;
    border-radius: 22px;
}

.return-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 28px;

    color: #d9892f;
    background: #fff;

    border-radius: 15px;
}

.return-notice-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.return-defect__notice h3 {
    margin: 0 0 15px;

    color: var(--ret-dark);

    font-size: 23px;
}

.return-defect__notice p {
    margin: 0 0 14px;

    color: #756653;

    font-size: 13px;
    line-height: 1.7;
}


/* REFUND */

.return-refund {
    padding: 75px 0;
    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(93,145,239,.24),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #172d47,
            #102238
        );
    border-radius: 25px;
}

.return-refund__grid {
    display: grid;
    grid-template-columns: 95px 1fr 300px;

    align-items: center;
    gap: 35px;
}

.return-refund__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    color: #fff;
    background: var(--ret-blue);

    border-radius: 22px;

    font-size: 35px;
    font-weight: 300;
}

.return-refund__content > span {
    display: block;

    margin-bottom: 10px;

    color: #82adfa;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.return-refund h2 {
    color: #fff;

    font-size: clamp(27px, 3vw, 40px);
}

.return-refund__content p {
    max-width: 700px;
    margin: 17px 0 0;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.75;
}

.return-refund__note {
    padding: 20px;

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

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
}

.return-refund__note strong,
.return-refund__note span {
    display: block;
}

.return-refund__note strong {
    margin-bottom: 7px;
    color: #fff;
    font-size: 14px;
}

.return-refund__note span {
    color: rgba(255,255,255,.56);
    font-size: 12px;
    line-height: 1.55;
}


/* RULES */

.return-rules {
    display: grid;
    grid-template-columns: .8fr 1.2fr;

    gap: 90px;
}

.return-rules__heading p {
    max-width: 430px;

    margin: 18px 0 0;

    color: var(--ret-muted);

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

.return-rules__list {
    display: grid;
    gap: 8px;
}

.return-rule {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 16px;
    padding: 17px 19px;
    border: 1px solid var(--ret-border);
    border-radius: 12px;
    font-size: 15px;
}

.return-rule > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--ret-blue);
    background: var(--ret-blue-light);

    border-radius: 10px;

    font-size: 10px;
    font-weight: 800;
}

.return-rule p {
    margin: 0;
    color: #607185;
    font-size: 14px;
    line-height: 1.6;
}


/* WARRANTY */

.return-warranty {
    padding: 40px 0;
    background:
        radial-gradient(
            circle at 0 100%,
            rgba(93,145,239,.2),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #172d47,
            #102238
        );
    border-radius: 25px;
}

.return-warranty__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    align-items: center;
    gap: 80px;
}

.return-section-label--white {
    color: #83adf9;
}

.return-warranty h2 {
    color: #fff;
}

.return-warranty__content > p {
    max-width: 600px;

    margin: 20px 0 0;

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

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

.return-warranty__badge {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 32px;
}

.return-warranty__badge > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    color: #fff;
    background: var(--ret-blue);

    border-radius: 50%;
}

.return-warranty__badge strong,
.return-warranty__badge small {
    display: block;
}

.return-warranty__badge strong {
    margin-bottom: 3px;

    color: #fff;
    font-size: 12px;
}

.return-warranty__badge small {
    color: rgba(255,255,255,.5);

    font-size: 10px;
}

.return-warranty__card {
    padding: 35px;

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

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
}

.return-warranty__card-title {
    display: block;

    margin-bottom: 23px;

    color: #fff;

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

.return-warranty__card ul {
    display: grid;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.return-warranty__card li {
    position: relative;
    padding:
        12px 13px
        12px 38px;
    color: rgba(255,255,255,.66);
    background: rgba(255,255,255,.04);
    border-radius: 9px;
    font-size: 15px;
    line-height: 1.55;
}

.return-warranty__card li::before {
    content: "×";

    position: absolute;

    left: 13px;
    top: 11px;

    color: #82adfa;

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


/* LEGAL */

.return-section--legal {
    padding: 60px 0;
    background: var(--ret-light);
}

.return-legal {
    display: grid;
    grid-template-columns: 60px 1fr;

    gap: 22px;

    max-width: 1000px;
    margin: 0 auto;

    padding: 28px 32px;

    background: #fff;

    border: 1px solid var(--ret-border);
    border-radius: 16px;
}

.return-legal__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    color: var(--ret-blue);
    background: var(--ret-blue-light);

    border-radius: 14px;

    font-size: 25px;
    font-family: Georgia, serif;
}

.return-legal h3 {
    margin: 0 0 8px;

    color: var(--ret-dark);

    font-size: 16px;
}

.return-legal p {
    margin: 0;

    color: var(--ret-muted);

    font-size: 12px;
    line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .return-hero__grid {
        gap: 45px;
    }

    .return-defect,
    .return-rules,
    .return-warranty__grid {
        gap: 50px;
    }
}


@media (max-width: 850px) {

    .return-container {
        width: min(100% - 30px, 1240px);
    }

    .return-hero {
        padding: 65px 0 85px;
    }

    .return-hero__grid,
    .return-defect,
    .return-rules,
    .return-warranty__grid {
        grid-template-columns: 1fr;
    }

    .return-hero__grid {
        gap: 55px;
    }

    .return-hero__visual {
        min-height: 350px;
    }

    .return-steps {
        grid-template-columns: 1fr 1fr;
    }

    .return-step:nth-child(2)::after {
        display: none;
    }

    .return-refund__grid {
        grid-template-columns: 80px 1fr;
    }

    .return-refund__note {
        grid-column: 2;
    }
}


@media (max-width: 650px) {

    .return-container {
        width: calc(100% - 24px);
    }

    .return-section {
        padding: 72px 0;
    }

    .return-hero {
        padding: 45px 0 70px;
    }

    .return-hero h1 {
        font-size: 41px;
    }

    .return-hero__lead {
        font-size: 18px;
    }

    .return-hero__features {
        display: grid;
        gap: 15px;
    }

    .return-hero__visual {
        min-height: 310px;
    }

    .return-box {
        width: min(90%, 330px);
        padding: 24px;
    }

    .return-floating {
        min-width: 150px;
        padding: 10px 12px;
    }

    .return-floating--one {
        right: 0;
    }

    .return-floating--two {
        left: 0;
    }

    .return-cards {
        grid-template-columns: 1fr;
    }

    .return-card {
        padding: 27px;
    }

    .return-steps {
        grid-template-columns: 1fr;
    }

    .return-step:not(:last-child)::after {
        display: none;
    }

    .return-photo-list {
        grid-template-columns: 1fr;
    }

    .return-defect__notice {
        padding: 27px 22px;
    }

    .return-refund {
        padding: 65px 0;
    }

    .return-refund__grid {
        grid-template-columns: 1fr;
    }

    .return-refund__note {
        grid-column: auto;
    }

    .return-warranty {
        padding: 75px 0;
    }

    .return-warranty__card {
        padding: 25px 20px;
    }

    .return-legal {
        grid-template-columns: 1fr;
        padding: 24px 20px;
    }
}
/* ==========================================
   ALEX ONLINE — DELIVERY PAGE
========================================== */

.delivery-page {
    --del-dark: #192d45;
    --del-dark-2: #102238;

    --del-blue: #5d91ef;
    --del-blue-dark: #3976dc;
    --del-blue-light: #edf4ff;

    --del-text: #29394a;
    --del-muted: #748295;

    --del-border: #e5ebf2;
    --del-light: #f6f8fb;

    color: var(--del-text);
    background: #fff;

    font-family: inherit;
}

.delivery-page *,
.delivery-page *::before,
.delivery-page *::after {
    box-sizing: border-box;
}

.delivery-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}


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

.delivery-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 0 70px;
    background:
        radial-gradient(
            circle at 83% 18%,
            rgba(93,145,239,.16),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #f7faff 0%,
            #ffffff 55%,
            #eef4fc 100%
        );
    border-radius: 25px;
}

.delivery-hero::before {
    content: "";

    position: absolute;

    width: 580px;
    height: 580px;

    right: -220px;
    top: -270px;

    border:
        1px solid
        rgba(93,145,239,.13);

    border-radius: 50%;
}

.delivery-hero::after {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    right: -100px;
    top: -175px;

    border:
        1px solid
        rgba(93,145,239,.1);

    border-radius: 50%;
}

.delivery-hero__grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 90px;
}

.delivery-eyebrow,
.delivery-section-label {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--del-blue-dark);

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

    letter-spacing: .11em;
    text-transform: uppercase;
}

.delivery-eyebrow span {
    width: 28px;
    height: 2px;

    background:
        var(--del-blue);
}

.delivery-hero h1 {
    max-width: 720px;
    margin: 0 0 26px;
    color: var(--del-dark);
    font-size:
        clamp(
            43px,
            5vw,
            69px
        );
    line-height: 1.01;
    letter-spacing: -.045em;
    display: flex;
    flex-wrap: wrap;
}

.delivery-hero h1 strong {
    display: block;

    color: var(--del-blue);
}

.delivery-hero__lead {
    max-width: 650px;
    margin:
        0 0 18px;
    color: var(--del-dark);
    font-size: 23px;
    line-height: 1.52;
    font-weight: 500;
}

.delivery-hero__text {
    max-width: 680px;
    margin: 0;
    color: var(--del-muted);
    font-size: 17px;
    line-height: 1.82;
}

.delivery-hero__advantages {
    display: flex;
    flex-wrap: wrap;

    gap: 28px;

    margin-top: 38px;
}

.delivery-hero-item {
    display: flex;
    align-items: center;

    gap: 12px;
}

.delivery-hero-item > span {
    display: flex;

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

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    color: #fff;

    background:
        var(--del-blue);

    border-radius: 50%;

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

    box-shadow:
        0 8px 20px
        rgba(93,145,239,.23);
}

.delivery-hero-item strong,
.delivery-hero-item small {
    display: block;
}

.delivery-hero-item strong {
    margin-bottom: 3px;

    color: var(--del-dark);

    font-size: 13px;
}

.delivery-hero-item small {
    color: var(--del-muted);

    font-size: 10px;
}


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

.delivery-hero__visual {
    position: relative;

    min-height: 400px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.delivery-visual-card {
    width: 350px;

    padding: 34px;

    background: #fff;

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

    border-radius: 25px;

    box-shadow:
        0 30px 70px
        rgba(25,45,69,.14);

    transform:
        rotate(-3deg);
}

.delivery-visual-card__route {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.delivery-route-point {
    display: flex;

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

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border-radius: 50%;
}

.delivery-route-point--start {
    background:
        var(--del-blue-light);

    border:
        6px solid #fff;

    box-shadow:
        0 0 0 2px
        var(--del-blue);
}

.delivery-route-point--start span {
    width: 10px;
    height: 10px;

    background:
        var(--del-blue);

    border-radius: 50%;
}

.delivery-route-point--finish {
    color: #fff;

    background:
        var(--del-blue);

    font-size: 13px;

    font-weight: 800;
}

.delivery-route-line {
    flex: 1;

    height: 2px;

    margin: 0 8px;

    background:
        repeating-linear-gradient(
            90deg,
            #cbd8e8 0 8px,
            transparent 8px 13px
        );
}

.delivery-route-truck {
    display: flex;

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

    width: 58px;
    height: 58px;

    flex: 0 0 auto;

    color: #fff;

    background:
        var(--del-dark);

    border-radius: 16px;
}

.delivery-route-truck svg {
    width: 29px;
    height: 29px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.delivery-visual-card__info {
    margin-top: 35px;

    padding-top: 25px;

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

.delivery-visual-card__info span,
.delivery-visual-card__info strong,
.delivery-visual-card__info small {
    display: block;
}

.delivery-visual-card__info span {
    margin-bottom: 6px;

    color: var(--del-blue);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.delivery-visual-card__info strong {
    margin-bottom: 7px;

    color: var(--del-dark);

    font-size: 18px;
}

.delivery-visual-card__info small {
    color: var(--del-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* FLOATING CARDS */

.delivery-floating {
    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 160px;

    padding: 13px 15px;

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

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

    border-radius: 14px;

    box-shadow:
        0 16px 40px
        rgba(25,45,69,.12);
}

.delivery-floating--one {
    top: 35px;
    right: -5px;
}

.delivery-floating--two {
    left: -5px;
    bottom: 35px;
}

.delivery-floating__icon {
    display: flex;

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

    width: 37px;
    height: 37px;

    flex: 0 0 auto;

    color: #fff;

    background:
        var(--del-blue);

    border-radius: 10px;

    font-size: 14px;

    font-weight: 800;
}

.delivery-floating strong,
.delivery-floating small {
    display: block;
}

.delivery-floating strong {
    color: var(--del-dark);
    font-size: 14px;
}

.delivery-floating small {
    margin-top: 2px;
    color: var(--del-muted);
    font-size: 13px;
}


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

.delivery-section {
    padding: 60px 0;
    border-radius: 25px;
}

.delivery-section--light {
    background:
        var(--del-light);
}

.delivery-heading {
    max-width: 740px;

    margin:
        0 auto 55px;

    text-align: center;
}

.delivery-heading h2,
.delivery-price h2,
.delivery-tracking h2,
.delivery-info-box h2,
.delivery-checklist h2,
.delivery-bottom h2 {
    margin: 0;

    color: var(--del-dark);

    font-size:
        clamp(
            31px,
            3.5vw,
            47px
        );

    line-height: 1.13;

    letter-spacing: -.035em;
}

.delivery-heading p {
    max-width: 600px;

    margin:
        17px auto 0;

    color: var(--del-muted);

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================
   METHODS
========================================== */

.delivery-methods {
    display: grid;

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

    gap: 18px;
}

.delivery-method {
    position: relative;

    min-height: 300px;

    padding: 31px;

    background: #fff;

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

    border-radius: 21px;

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

.delivery-method:hover {
    transform:
        translateY(-5px);

    border-color:
        #cbdcf1;

    box-shadow:
        0 22px 48px
        rgba(23,45,70,.09);
}

.delivery-method--featured {
    background:
        linear-gradient(
            145deg,
            #fff,
            #f6faff
        );

    border-color:
        #ceddf3;
}

.delivery-method__top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 35px;
}

.delivery-method__icon {
    display: flex;

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

    width: 55px;
    height: 55px;

    color: var(--del-blue);

    background:
        var(--del-blue-light);

    border-radius: 15px;
}

.delivery-method__icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.delivery-method__badge {
    padding:
        7px 10px;

    color:
        var(--del-blue-dark);

    background:
        var(--del-blue-light);

    border-radius: 30px;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .07em;
}

.delivery-method h3 {
    margin:
        0 0 14px;

    color: var(--del-dark);

    font-size: 22px;
}

.delivery-method p {
    margin: 0;
    color: var(--del-muted);
    font-size: 15px;
    line-height: 1.75;
}

.delivery-method__features {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}

.delivery-method__features span {
    padding:
        7px 10px;
    color: #596b7f;
    background: #f3f6fa;
    border:
        1px solid
        #e7ebf0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
}


/* ==========================================
   STEPS
========================================== */

.delivery-steps {
    display: grid;

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

.delivery-step {
    position: relative;

    padding:
        28px;
}

.delivery-step:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 55px;
    right: -16px;

    width: 32px;
    height: 1px;

    background:
        #d9e2ec;
}

.delivery-step__number {
    position: absolute;

    top: 10px;
    right: 20px;

    color:
        #e9eef4;

    font-size: 52px;

    font-weight: 800;

    line-height: 1;
}

.delivery-step__icon {
    position: relative;

    z-index: 2;

    display: flex;

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

    width: 54px;
    height: 54px;

    margin-bottom: 28px;

    color:
        var(--del-blue);

    background: #fff;

    border-radius: 15px;

    box-shadow:
        0 10px 30px
        rgba(27,48,72,.07);
}

.delivery-step__icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.delivery-step h3 {
    margin:
        0 0 10px;
    color: var(--del-dark);
    font-size: 19px;
}

.delivery-step p {
    margin: 0;
    color:
        var(--del-muted);
    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================
   PRICE
========================================== */

.delivery-price {
    display: grid;

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

    align-items: center;

    gap: 85px;
}

.delivery-price__content > p {
    max-width: 650px;

    margin:
        20px 0 0;

    color:
        var(--del-muted);

    font-size: 15px;

    line-height: 1.8;
}

.delivery-price__factors {
    display: grid;

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

    gap: 10px;

    margin-top: 35px;
}

.delivery-price__factors > div {
    min-height: 92px;

    padding: 17px;

    background:
        var(--del-light);

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

    border-radius: 13px;
}

.delivery-price__factors span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--del-blue);

    font-size: 10px;

    font-weight: 800;
}

.delivery-price__factors strong {
    color:
        var(--del-dark);
    font-size: 14px;
}

.delivery-price__card {
    position: relative;

    overflow: hidden;

    padding: 42px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #192e47,
            #102238
        );

    border-radius: 24px;

    box-shadow:
        0 28px 65px
        rgba(20,43,68,.18);
}

.delivery-price__card::after {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -140px;
    top: -150px;

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

    border-radius: 50%;
}

.delivery-price__card-icon {
    position: relative;

    z-index: 2;

    display: flex;

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

    width: 64px;
    height: 64px;

    margin-bottom: 35px;

    color: #fff;

    background:
        var(--del-blue);

    border-radius: 17px;

    font-size: 27px;
}

.delivery-price__card > span,
.delivery-price__card > strong,
.delivery-price__card > p {
    position: relative;

    z-index: 2;

    display: block;
}

.delivery-price__card > span {
    margin-bottom: 7px;

    color:
        #85aff8;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.delivery-price__card > strong {
    margin-bottom: 13px;

    font-size: 23px;
}

.delivery-price__card > p {
    margin: 0;
    max-width: 300px;
    color:
        rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.65;
}


/* ==========================================
   TRACKING
========================================== */

.delivery-tracking {
    padding: 60px 0;
    background:
        radial-gradient(
            circle at 5% 110%,
            rgba(93,145,239,.24),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #172d47,
            #102238
        );
    border-radius: 25px;
}

.delivery-tracking__grid {
    display: grid;

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

    align-items: center;

    gap: 90px;
}

.delivery-section-label--white {
    color:
        #84aff8;
}

.delivery-tracking h2 {
    color: #fff;
}

.delivery-tracking__content > p {
    max-width: 630px;

    margin:
        21px 0 0;

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

    font-size: 14px;

    line-height: 1.8;
}

.delivery-tracking__status {
    display: grid;

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

    gap: 8px;

    margin-top: 32px;
}

.delivery-tracking__status > div {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

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

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

    border-radius: 9px;
}

.delivery-tracking__status span {
    display: flex;

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

    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    background:
        var(--del-blue);

    border-radius: 50%;

    color: #fff;

    font-size: 9px;
}

.delivery-tracking__status strong {
    color:
        rgba(255,255,255,.78);
    font-size: 14px;
}

.delivery-track-card {
    padding: 34px;

    background: #fff;

    border-radius: 22px;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.16);
}

.delivery-track-card__label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--del-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.delivery-track-card__number {
    color:
        var(--del-dark);

    font-size: 23px;

    font-weight: 700;

    letter-spacing: .04em;
}

.delivery-track-card__line {
    height: 5px;

    margin:
        28px 0 25px;

    overflow: hidden;

    background:
        #e8edf3;

    border-radius: 5px;
}

.delivery-track-card__line span {
    display: block;

    width: 68%;
    height: 100%;

    background:
        var(--del-blue);

    border-radius: 5px;
}

.delivery-track-card__footer {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}

.delivery-track-card__footer small,
.delivery-track-card__footer strong {
    display: block;
}

.delivery-track-card__footer small {
    margin-bottom: 4px;

    color:
        var(--del-muted);

    font-size: 9px;
}

.delivery-track-card__footer strong {
    color:
        var(--del-dark);

    font-size: 12px;
}


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

.delivery-info-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;
}

.delivery-info-box {
    padding: 38px;

    background:
        #fff;

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

    border-radius: 22px;
}

.delivery-info-box--blue {
    background:
        linear-gradient(
            145deg,
            #f7faff,
            #edf4ff
        );

    border-color:
        #ceddf2;
}

.delivery-info-box__icon {
    display: flex;

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

    width: 55px;
    height: 55px;

    margin-bottom: 28px;

    color:
        var(--del-blue);

    background:
        var(--del-blue-light);

    border-radius: 15px;
}

.delivery-info-box__icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.delivery-info-box h2 {
    max-width: 500px;

    font-size:
        clamp(
            28px,
            3vw,
            39px
        );
}

.delivery-info-box > p {
    max-width: 500px;
    margin:
        18px 0 0;
    color:
        var(--del-muted);
    font-size: 18px;
    line-height: 1.75;
}

.delivery-info-list {
    display: grid;

    gap: 8px;

    margin-top: 28px;
}

.delivery-info-list > div {
    display: grid;

    grid-template-columns:
        39px 1fr;

    align-items: center;

    gap: 13px;

    padding:
        13px 15px;

    background:
        var(--del-light);

    border-radius: 10px;
}

.delivery-info-list span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color:
        var(--del-blue);
    background: #fff;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
}

.delivery-info-list p {
    margin: 0;
    color:
        #5f7083;
    font-size: 15px;
    line-height: 1.55;
}


/* ==========================================
   CHECKLIST
========================================== */

.delivery-checklist {
    display: grid;

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

    gap: 90px;
}

.delivery-checklist__heading > p {
    max-width: 430px;
    margin:
        18px 0 0;
    color:
        var(--del-muted);
    font-size: 16px;
    line-height: 1.75;
}

.delivery-checklist__items {
    display: grid;

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

    gap: 10px;
}

.delivery-check-item {
    display: flex;

    gap: 13px;

    padding: 19px;

    background: #fff;

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

    border-radius: 13px;
}

.delivery-check-item > span {
    display: flex;

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

    width: 30px;
    height: 30px;

    flex: 0 0 auto;

    color: #fff;

    background:
        var(--del-blue);

    border-radius: 50%;

    font-size: 10px;

    font-weight: 800;
}

.delivery-check-item strong {
    display: block;
    margin-bottom: 6px;
    color:
        var(--del-dark);
    font-size: 16px;
}

.delivery-check-item p {
    margin: 0;
    color:
        var(--del-muted);
    font-size: 14px;
    line-height: 1.55;
}


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

.delivery-bottom {
    padding: 85px 0;
}

.delivery-bottom__inner {
    display: flex;

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

    gap: 55px;

    padding: 55px 60px;

    background:
        var(--del-light);

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

    border-radius: 24px;
}

.delivery-bottom__inner > div:first-child > span {
    display: block;

    margin-bottom: 13px;

    color:
        var(--del-blue);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;
}

.delivery-bottom h2 {
    max-width: 650px;
}

.delivery-bottom p {
    max-width: 670px;
    margin:
        17px 0 0;
    color:
        var(--del-muted);
    font-size: 16px;
    line-height: 1.75;
}

.delivery-bottom__badge {
    display: flex;

    align-items: center;

    gap: 12px;

    flex: 0 0 260px;

    padding:
        18px 20px;

    background: #fff;

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

    border-radius: 14px;
}

.delivery-bottom__badge > span {
    display: flex;

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

    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    color: #fff;

    background:
        var(--del-blue);

    border-radius: 50%;
}

.delivery-bottom__badge strong,
.delivery-bottom__badge small {
    display: block;
}

.delivery-bottom__badge strong {
    color:
        var(--del-dark);
    font-size: 15px;
}

.delivery-bottom__badge small {
    margin-top: 3px;
    color:
        var(--del-muted);
    font-size: 12px;
}


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

@media (max-width: 1050px) {

    .delivery-hero__grid {
        gap: 45px;
    }

    .delivery-price,
    .delivery-tracking__grid,
    .delivery-checklist {
        gap: 50px;
    }

}


@media (max-width: 850px) {

    .delivery-container {
        width:
            min(
                100% - 30px,
                1240px
            );
    }

    .delivery-hero {
        padding:
            65px 0 85px;
    }

    .delivery-hero__grid,
    .delivery-price,
    .delivery-tracking__grid,
    .delivery-checklist {
        grid-template-columns: 1fr;
    }

    .delivery-methods {
        grid-template-columns:
            1fr 1fr;
    }

    .delivery-steps {
        grid-template-columns:
            1fr 1fr;
    }

    .delivery-step:nth-child(2)::after {
        display: none;
    }

    .delivery-info-grid {
        grid-template-columns: 1fr;
    }

    .delivery-checklist__items {
        grid-template-columns:
            1fr 1fr;
    }

    .delivery-bottom__inner {
        display: grid;
    }

    .delivery-bottom__badge {
        flex: initial;

        width: max-content;

        max-width: 100%;
    }

}


@media (max-width: 650px) {

    .delivery-container {
        width:
            calc(100% - 24px);
    }

    .delivery-section {
        padding:
            72px 0;
    }

    .delivery-hero {
        padding:
            45px 0 70px;
    }

    .delivery-hero h1 {
        font-size: 41px;
    }

    .delivery-hero__lead {
        font-size: 18px;
    }

    .delivery-hero__advantages {
        display: grid;

        gap: 15px;
    }

    .delivery-hero__visual {
        min-height: 320px;
    }

    .delivery-visual-card {
        width:
            min(
                90%,
                330px
            );

        padding: 25px;
    }

    .delivery-floating {
        min-width: 145px;

        padding:
            10px 12px;
    }

    .delivery-floating--one {
        right: 0;
    }

    .delivery-floating--two {
        left: 0;
    }

    .delivery-methods {
        grid-template-columns:
            1fr;
    }

    .delivery-method {
        min-height: auto;

        padding: 26px;
    }

    .delivery-steps {
        grid-template-columns:
            1fr;
    }

    .delivery-step:not(:last-child)::after {
        display: none;
    }

    .delivery-price__factors {
        grid-template-columns:
            1fr;
    }

    .delivery-price__card {
        padding:
            30px 24px;
    }

    .delivery-tracking {
        padding:
            70px 0;
    }

    .delivery-tracking__status {
        grid-template-columns:
            1fr;
    }

    .delivery-track-card {
        padding: 25px 20px;
    }

    .delivery-info-box {
        padding: 27px 22px;
    }

    .delivery-checklist__items {
        grid-template-columns:
            1fr;
    }

    .delivery-bottom {
        padding:
            65px 0;
    }

    .delivery-bottom__inner {
        padding:
            35px 24px;

        border-radius: 18px;
    }

}
/* ==========================================
   ALEX ONLINE — CONTACTS
========================================== */

.contacts-page {
    --con-dark: #192d45;
    --con-dark-2: #102238;
    --con-blue: #5d91ef;
    --con-blue-dark: #3976dc;
    --con-blue-light: #edf4ff;
    --con-text: #29394a;
    --con-muted: #748295;
    --con-border: #e5ebf2;
    --con-light: #f6f8fb;

    color: var(--con-text);
    background: #fff;
    font-family: inherit;
}

.contacts-page *,
.contacts-page *::before,
.contacts-page *::after {
    box-sizing: border-box;
}

.contacts-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}

.contacts-page a {
    text-decoration: none;
}


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

.contacts-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 10px 70px;
    background:
        radial-gradient(
            circle at 83% 15%,
            rgba(93,145,239,.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7faff 0%,
            #fff 55%,
            #edf4fc 100%
        );
    border-radius: 25px;
}

.contacts-hero::before {
    content: "";
    position: absolute;

    width: 580px;
    height: 580px;

    right: -210px;
    top: -280px;

    border: 1px solid rgba(93,145,239,.13);
    border-radius: 50%;
}

.contacts-hero::after {
    content: "";
    position: absolute;

    width: 390px;
    height: 390px;

    right: -80px;
    top: -200px;

    border: 1px solid rgba(93,145,239,.1);
    border-radius: 50%;
}

.contacts-hero__grid {
    position: relative;
    z-index: 2;

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

    align-items: center;
    gap: 100px;
}

.contacts-eyebrow,
.contacts-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: var(--con-blue-dark);

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

    letter-spacing: .11em;
    text-transform: uppercase;
}

.contacts-eyebrow > span {
    width: 28px;
    height: 2px;

    background: var(--con-blue);
}

.contacts-hero h1 {
    margin: 0 0 25px;

    color: var(--con-dark);

    font-size: clamp(48px, 5.5vw, 76px);
    line-height: .98;

    letter-spacing: -.05em;
}

.contacts-hero h1 strong {
    display: block;
    color: var(--con-blue);
}

.contacts-hero__lead {
    max-width: 650px;

    margin: 0;

    color: var(--con-muted);

    font-size: 19px;
    line-height: 1.7;
}

.contacts-hero__schedule {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 34px;
}

.contacts-status-dot {
    position: relative;

    width: 11px;
    height: 11px;

    flex: 0 0 auto;

    background: #42b978;
    border-radius: 50%;

    box-shadow: 0 0 0 6px rgba(66,185,120,.11);
}

.contacts-hero__schedule strong,
.contacts-hero__schedule small {
    display: block;
}

.contacts-hero__schedule strong {
    margin-bottom: 3px;

    color: var(--con-dark);
    font-size: 13px;
}

.contacts-hero__schedule small {
    color: var(--con-muted);
    font-size: 11px;
}


/* ==========================================
   HERO PHONE CARD
========================================== */

.contacts-hero__card {
    position: relative;

    width: min(100%, 430px);

    margin-left: auto;
    padding: 38px;

    background: #fff;

    border: 1px solid var(--con-border);
    border-radius: 26px;

    box-shadow:
        0 30px 75px rgba(25,45,69,.14);
}

.contacts-hero__card::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 5px;

    left: 38px;
    top: 0;

    background: var(--con-blue);

    border-radius: 0 0 10px 10px;
}

.contacts-phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 30px;

    color: #fff;
    background: var(--con-dark);

    border-radius: 17px;
}

.contacts-phone-icon svg,
.contacts-method__icon svg,
.contacts-email-card svg,
.contacts-pickup-row svg,
.contacts-map__pin svg,
.contacts-document svg,
.contacts-bottom__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contacts-phone-icon svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.contacts-card-label {
    display: block;

    margin-bottom: 8px;

    color: var(--con-muted);

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

    text-transform: uppercase;
    letter-spacing: .09em;
}

.contacts-main-phone,
.contacts-second-phone {
    display: block;

    width: fit-content;

    color: var(--con-dark);

    transition: color .2s ease;
}

.contacts-main-phone {
    font-size: clamp(26px, 3vw, 35px);
    font-weight: 700;

    letter-spacing: -.025em;
}

.contacts-second-phone {
    margin-top: 8px;

    font-size: 18px;
    font-weight: 600;
}

.contacts-main-phone:hover,
.contacts-second-phone:hover {
    color: var(--con-blue);
}

.contacts-callback-btn {
    width: 100%;

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

    gap: 20px;

    margin-top: 28px;
    padding: 17px 19px;

    color: #fff;
    background: var(--con-blue);

    border: 0;
    border-radius: 12px;

    cursor: pointer;

    font: inherit;
    font-size: 12px;
    font-weight: 700;

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

.contacts-callback-btn:hover {
    background: var(--con-blue-dark);
    transform: translateY(-2px);
}

.contacts-callback-btn svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.contacts-card-time {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 17px;

    color: var(--con-muted);
    font-size: 10px;
}

.contacts-card-time span {
    width: 7px;
    height: 7px;

    background: #42b978;
    border-radius: 50%;
}


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

.contacts-section {
    padding: 60px 0;
}

.contacts-section--light {
    background: var(--con-light);
    border-radius: 25px;
}

.contacts-heading {
    max-width: 740px;

    margin: 0 auto 55px;

    text-align: center;
}

.contacts-heading h2,
.contacts-email-heading h2,
.contacts-pickup h2,
.contacts-company h2,
.contacts-bottom h2 {
    margin: 0;

    color: var(--con-dark);

    font-size: clamp(31px, 3.5vw, 47px);
    line-height: 1.12;

    letter-spacing: -.035em;
}

.contacts-heading p {
    max-width: 600px;

    margin: 17px auto 0;

    color: var(--con-muted);

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


/* ==========================================
   CONTACT METHODS
========================================== */

.contacts-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.contacts-method {
    position: relative;
    overflow: hidden;

    min-height: 320px;

    padding: 32px;

    background: #fff;

    border: 1px solid var(--con-border);
    border-radius: 21px;

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

.contacts-method:hover {
    transform: translateY(-5px);

    border-color: #cbdcf1;

    box-shadow:
        0 22px 50px rgba(23,45,70,.09);
}

.contacts-method--primary {
    background:
        linear-gradient(
            145deg,
            #fff,
            #f6faff
        );

    border-color: #ceddf3;
}

.contacts-method__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 35px;
}

.contacts-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    color: var(--con-blue);
    background: var(--con-blue-light);

    border-radius: 15px;
}

.contacts-method__icon svg {
    width: 25px;
    height: 25px;
}

.contacts-method__number {
    color: #edf1f6;

    font-size: 52px;
    font-weight: 800;
    line-height: 1;
}

.contacts-method h3 {
    margin: 0 0 12px;

    color: var(--con-dark);

    font-size: 22px;
}

.contacts-method > p {
    min-height: 46px;

    margin: 0;

    color: var(--con-muted);

    font-size: 12px;
    line-height: 1.7;
}

.contacts-method__phones {
    display: grid;
    gap: 5px;

    margin-top: 22px;
}

.contacts-method__phones a {
    width: fit-content;

    color: var(--con-dark);

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

    transition: color .2s ease;
}

.contacts-method__phones a:hover {
    color: var(--con-blue);
}

.contacts-text-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 24px;
    padding: 0;

    color: var(--con-blue-dark);
    background: none;

    border: 0;

    cursor: pointer;

    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.contacts-text-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    transition: transform .2s ease;
}

.contacts-text-button:hover svg {
    transform: translateX(4px);
}


/* ==========================================
   MESSENGERS
========================================== */

.contacts-messengers {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;
}

.contacts-messengers a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    background: var(--con-light);

    border: 1px solid var(--con-border);
    border-radius: 12px;

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

.contacts-messengers a:hover {
    transform: translateY(-3px);

    background: #fff;

    box-shadow:
        0 8px 20px rgba(20,45,70,.1);
}

.contacts-messengers img {
    display: block;

    width: 25px;
    height: 25px;

    object-fit: contain;
}


/* ==========================================
   EMAIL
========================================== */

.contacts-email-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;

    align-items: center;
    gap: 90px;
}

.contacts-email-heading > p {
    max-width: 450px;

    margin: 18px 0 0;

    color: var(--con-muted);

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

.contacts-email-cards {
    display: grid;
    gap: 10px;
}

.contacts-email-card {
    display: grid;
    grid-template-columns: 52px 1fr 35px;

    align-items: center;
    gap: 16px;

    padding: 19px;

    color: inherit;
    background: #fff;

    border: 1px solid var(--con-border);
    border-radius: 14px;

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

.contacts-email-card:hover {
    transform: translateX(5px);

    border-color: #cbdcf1;

    box-shadow:
        0 12px 30px rgba(20,45,70,.07);
}

.contacts-email-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    color: var(--con-blue);
    background: var(--con-blue-light);

    border-radius: 12px;
}

.contacts-email-card__icon svg {
    width: 23px;
    height: 23px;
}

.contacts-email-card__content span,
.contacts-email-card__content strong,
.contacts-email-card__content small {
    display: block;
}

.contacts-email-card__content span {
    margin-bottom: 4px;

    color: var(--con-muted);

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

    text-transform: uppercase;
    letter-spacing: .07em;
}

.contacts-email-card__content strong {
    color: var(--con-dark);

    font-size: 14px;
}

.contacts-email-card__content small {
    margin-top: 4px;

    color: var(--con-muted);
    font-size: 10px;
}

.contacts-email-card__arrow {
    color: var(--con-blue);
}

.contacts-email-card__arrow svg {
    width: 20px;
    height: 20px;
}


/* ==========================================
   PICKUP
========================================== */

.contacts-pickup {
    overflow: hidden;
}

.contacts-pickup__grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;

    align-items: stretch;
    gap: 50px;
}

.contacts-pickup__content {
    padding: 20px 0;
}

.contacts-pickup__intro {
    max-width: 520px;

    margin: 20px 0 0;

    color: var(--con-muted);

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

.contacts-pickup__info {
    display: grid;
    gap: 10px;

    margin-top: 35px;
}

.contacts-pickup-row {
    display: grid;
    grid-template-columns: 48px 1fr;

    align-items: center;
    gap: 15px;

    padding: 15px;

    background: var(--con-light);

    border: 1px solid var(--con-border);
    border-radius: 12px;
}

.contacts-pickup-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    color: var(--con-blue);
    background: #fff;

    border-radius: 11px;
}

.contacts-pickup-row__icon svg {
    width: 22px;
    height: 22px;
}

.contacts-pickup-row span,
.contacts-pickup-row strong {
    display: block;
}

.contacts-pickup-row span {
    margin-bottom: 4px;

    color: var(--con-muted);
    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.contacts-pickup-row strong {
    color: var(--con-dark);

    font-size: 12px;
    line-height: 1.55;
}

.contacts-pickup__notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-top: 20px;
}

.contacts-pickup__notice > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex: 0 0 auto;

    color: var(--con-blue);
    background: var(--con-blue-light);

    border-radius: 50%;

    font-size: 11px;
    font-weight: 800;
}

.contacts-pickup__notice p {
    margin: 3px 0 0;

    color: var(--con-muted);

    font-size: 10px;
    line-height: 1.55;
}


/* MAP */

.contacts-map {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background: var(--con-light);

    border: 1px solid var(--con-border);
    border-radius: 22px;
}

.contacts-map iframe {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

.contacts-map__label {
    position: absolute;

    z-index: 5;

    left: 20px;
    bottom: 20px;

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

    padding: 12px 15px;

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

    border: 1px solid var(--con-border);
    border-radius: 13px;

    box-shadow:
        0 15px 40px rgba(20,40,65,.15);

    backdrop-filter: blur(10px);
}

.contacts-map__pin {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    color: #fff;
    background: var(--con-blue);

    border-radius: 10px;
}

.contacts-map__pin svg {
    width: 19px;
    height: 19px;
}

.contacts-map__label strong,
.contacts-map__label small {
    display: block;
}

.contacts-map__label strong {
    color: var(--con-dark);
    font-size: 11px;
}

.contacts-map__label small {
    margin-top: 2px;

    color: var(--con-muted);
    font-size: 9px;
}


/* ==========================================
   COMPANY / DOCUMENTS
========================================== */

.contacts-company {
    padding: 100px 0;
    background:
        radial-gradient(
            circle at 0 100%,
            rgba(93,145,239,.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #172d47,
            #102238
        );
    border-radius: 25px;
}

.contacts-company__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;

    align-items: center;
    gap: 80px;
}

.contacts-section-label--white {
    color: #82adfa;
}

.contacts-company h2 {
    color: #fff;
}

.contacts-company__content > p {
    max-width: 500px;

    margin: 19px 0 0;

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

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

.contacts-company__address {
    display: grid;
    grid-template-columns: 1.2fr .8fr;

    gap: 10px;

    margin-top: 35px;
}

.contacts-company__address > div {
    padding: 17px;

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

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

.contacts-company__address span,
.contacts-company__address strong {
    display: block;
}

.contacts-company__address span {
    margin-bottom: 7px;

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

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.contacts-company__address strong {
    color: rgba(255,255,255,.82);

    font-size: 11px;
    line-height: 1.6;
}


/* DOCUMENTS */

.contacts-documents {
    display: grid;
    gap: 9px;
}

.contacts-document {
    display: grid;
    grid-template-columns: 48px 1fr 40px;

    align-items: center;
    gap: 15px;

    padding: 15px;

    color: inherit;
    background: rgba(255,255,255,.06);

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

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

.contacts-document:hover {
    transform: translateX(5px);

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

    border-color: rgba(255,255,255,.16);
}

.contacts-document__type {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    color: #fff;
    background: var(--con-blue);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 800;
}

.contacts-document__info span,
.contacts-document__info strong {
    display: block;
}

.contacts-document__info span {
    margin-bottom: 3px;

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

    font-size: 9px;
}

.contacts-document__info strong {
    color: #fff;
    font-size: 12px;
}

.contacts-document__download {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 37px;
    height: 37px;

    color: #87b0f9;
    background: rgba(255,255,255,.05);

    border-radius: 9px;
}

.contacts-document__download svg {
    width: 19px;
    height: 19px;
}


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

.contacts-bottom {
    padding: 75px 0;
}

.contacts-bottom__inner {
    display: grid;
    grid-template-columns: 70px 1fr auto;

    align-items: center;
    gap: 27px;

    padding: 40px;

    background: var(--con-light);

    border: 1px solid var(--con-border);
    border-radius: 22px;
}

.contacts-bottom__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;

    color: #fff;
    background: var(--con-dark);

    border-radius: 18px;
}

.contacts-bottom__icon svg {
    width: 28px;
    height: 28px;
}

.contacts-bottom__content > span {
    display: block;

    margin-bottom: 7px;

    color: var(--con-blue);

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

    text-transform: uppercase;
    letter-spacing: .08em;
}

.contacts-bottom h2 {
    font-size: clamp(25px, 3vw, 35px);
}

.contacts-bottom__content p {
    max-width: 650px;

    margin: 10px 0 0;

    color: var(--con-muted);

    font-size: 11px;
    line-height: 1.6;
}

.contacts-bottom__actions {
    display: grid;
    gap: 8px;

    min-width: 220px;
}

.contacts-bottom__phone {
    color: var(--con-dark);

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

    text-align: center;
}

.contacts-bottom__callback {
    padding: 13px 18px;

    color: #fff;
    background: var(--con-blue);

    border: 0;
    border-radius: 10px;

    cursor: pointer;

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

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

.contacts-bottom__callback:hover {
    background: var(--con-blue-dark);
    transform: translateY(-2px);
}


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

@media (max-width: 1050px) {

    .contacts-hero__grid {
        gap: 50px;
    }

    .contacts-email-layout,
    .contacts-company__grid {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .contacts-container {
        width: min(100% - 30px, 1240px);
    }

    .contacts-hero {
        padding: 65px 0 80px;
    }

    .contacts-hero__grid {
        grid-template-columns: 1fr;
    }

    .contacts-hero__card {
        width: 100%;
        max-width: 550px;

        margin: 0;
    }

    .contacts-methods {
        grid-template-columns: 1fr 1fr;
    }

    .contacts-method:last-child {
        grid-column: 1 / -1;
    }

    .contacts-email-layout,
    .contacts-pickup__grid,
    .contacts-company__grid {
        grid-template-columns: 1fr;
    }

    .contacts-map {
        min-height: 420px;
    }

    .contacts-bottom__inner {
        grid-template-columns: 65px 1fr;
    }

    .contacts-bottom__actions {
        grid-column: 2;
        width: 250px;
    }

}


@media (max-width: 650px) {

    .contacts-container {
        width: calc(100% - 24px);
    }

    .contacts-section,
    .contacts-company {
        padding: 70px 0;
    }

    .contacts-hero {
        padding: 45px 0 65px;
    }

    .contacts-hero h1 {
        font-size: 45px;
    }

    .contacts-hero__lead {
        font-size: 16px;
    }

    .contacts-hero__card {
        padding: 27px 22px;

        border-radius: 20px;
    }

    .contacts-main-phone {
        font-size: 27px;
    }

    .contacts-second-phone {
        font-size: 17px;
    }

    .contacts-methods {
        grid-template-columns: 1fr;
    }

    .contacts-method:last-child {
        grid-column: auto;
    }

    .contacts-method {
        min-height: auto;

        padding: 26px;
    }

    .contacts-method > p {
        min-height: auto;
    }

    .contacts-email-card {
        grid-template-columns: 45px 1fr 25px;

        gap: 12px;

        padding: 14px;
    }

    .contacts-email-card__icon {
        width: 43px;
        height: 43px;
    }

    .contacts-email-card__content strong {
        font-size: 12px;

        word-break: break-word;
    }

    .contacts-pickup__grid {
        gap: 35px;
    }

    .contacts-map {
        min-height: 380px;

        border-radius: 17px;
    }

    .contacts-map__label {
        left: 12px;
        bottom: 12px;
    }

    .contacts-company__address {
        grid-template-columns: 1fr;
    }

    .contacts-document {
        grid-template-columns: 43px 1fr 35px;

        gap: 11px;
    }

    .contacts-document__type {
        width: 41px;
        height: 41px;
    }

    .contacts-bottom {
        padding: 55px 0;
    }

    .contacts-bottom__inner {
        grid-template-columns: 1fr;

        padding: 27px 22px;
    }

    .contacts-bottom__actions {
        grid-column: auto;

        width: 100%;
    }

    .contacts-bottom__phone {
        text-align: left;
    }

}