/* =========================================================
   NOVA STUDIO
   SERVICES PAGE
   ========================================================= */


/* ---------------------------------------------------------
   PAGE BASE
--------------------------------------------------------- */

.services-page {
    --sp-blue: #28A0EB;
    --sp-bg: #03080d;
    --sp-bg-light: #07111a;
    --sp-bg-card: #08131d;
    --sp-white: #f5f7f9;
    --sp-text: #a5adb6;
    --sp-border: rgba(255, 255, 255, 0.09);

    background: var(--sp-bg);
    color: var(--sp-white);
}

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

.services-page__main {
    width: 100%;
    overflow: hidden;
}

.services-page__container,
.services-page__hero-inner,
.services-page__detail-inner,
.services-page__cta-inner {
    width: min(1440px, calc(100% - 100px));
    margin-inline: auto;
}


/* ---------------------------------------------------------
   COMMON
--------------------------------------------------------- */

.services-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--sp-blue);

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

.services-page__eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--sp-blue);

    box-shadow:
        0 0 5px rgba(40, 160, 235, 0.7),
        0 0 10px rgba(40, 160, 235, 0.3);
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.services-page__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    min-width: 190px;
    min-height: 48px;

    padding: 0 8px 0 20px;

    border: 1px solid rgba(40, 160, 235, 0.6);

    color: #fff;
    background: rgba(40, 160, 235, 0.04);

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.services-page__button-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    background: var(--sp-blue);

    transition: transform 0.25s ease;
}

.services-page__button-icon img {
    display: block;

    width: 13px;
    height: 13px;
}

.services-page__button:hover {
    border-color: var(--sp-blue);

     

    box-shadow:
        0 0 18px rgba(40, 160, 235, 0.12);

    transform: translateY(-2px);
}

.services-page__button:hover .services-page__button-icon {
    transform: translateX(2px);
}


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

.services-page__hero {
    position: relative;

    min-height: 690px;

    background:
        radial-gradient(
            circle at 72% 42%,
            rgba(20, 101, 167, 0.17) 0%,
            rgba(6, 21, 34, 0.08) 28%,
            transparent 56%
        ),
        linear-gradient(
            110deg,
            #020609 0%,
            #03090f 55%,
            #06121d 100%
        );

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

.services-page__hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 180px 100%;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );

    opacity: 0.35;
}

.services-page__hero-inner {
    position: relative;

    min-height: 690px;

    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   HERO CONTENT
--------------------------------------------------------- */

.services-page__hero-content {
    position: relative;
    z-index: 5;

    width: 52%;

    padding: 65px 0 50px;
}

.services-page__hero-title {
    margin: 22px 0 24px;

    color: #fff;

    font-size: clamp(62px, 5.35vw, 92px);
    font-weight: 800;
    line-height: 0.87;
    letter-spacing: -0.065em;

    text-transform: uppercase;
}

.services-page__hero-title > span {
    display: block;
}

.services-page__hero-outline {
    color: transparent;

    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.64);

    text-stroke: 1px rgba(255, 255, 255, 0.64);
}

.services-page__hero-description {
    width: min(440px, 90%);

    margin: 0 0 32px;

    color: #929ba5;

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


/* ---------------------------------------------------------
   HERO VISUAL
--------------------------------------------------------- */

.services-page__hero-visual {
    position: absolute;

    z-index: 2;

    top: 50%;
    right: 40px;

    width: 57%;
    height: 84%;

    transform: translateY(-50%);

    pointer-events: none;
}

.services-page__hero-visual::before {
    content: "";

    position: absolute;

    width: 72%;
    aspect-ratio: 1;

    top: 50%;
    left: 48%;

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

    background:
        radial-gradient(
            circle,
            rgba(40, 160, 235, 0.18) 0%,
            rgba(40, 160, 235, 0.06) 35%,
            transparent 70%
        );

    filter: blur(25px);
}

.services-page__hero-visual img {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    mix-blend-mode: screen;

    opacity: 0.94;
}


/* ---------------------------------------------------------
   HERO QUICK NAV
--------------------------------------------------------- */

.services-page__quick-nav {
    position: absolute;

    z-index: 7;

    right: 0;
    top: 50%;

    width: 145px;

    transform: translateY(-50%);
}

.services-page__quick-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 42px;

    padding: 0 5px 0 13px;

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

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

    text-decoration: none;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.13em;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease,
        border-color 0.25s ease;
}

.services-page__quick-nav a:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.services-page__quick-nav img {
    width: 7px;
    height: 12px;

    opacity: 0.7;
}

.services-page__quick-nav a:hover {
    color: #fff;

    padding-left: 18px;

    border-color: rgba(40, 160, 235, 0.42);
}


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

.services-page__overview {
    position: relative;

    padding: 105px 0 115px;

    background:
        radial-gradient(
            circle at 55% 0%,
            rgba(25, 93, 145, 0.09),
            transparent 42%
        ),
        #03080d;
}

.services-page__overview-heading {
    display: grid;

    grid-template-columns: 1fr 360px;

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;
}

.services-page__overview-title h2 {
    margin: 20px 0 0;

    font-size: clamp(38px, 3.35vw, 56px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.services-page__overview-title h2 > span {
    display: block;
}

.services-page__overview-title strong {
    color: var(--sp-blue);

    font-weight: inherit;
}

.services-page__overview-description {
    margin: 0 0 5px;

    color: #8d969f;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   CARDS
--------------------------------------------------------- */

.services-page__cards {
    display: grid;

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

    gap: 16px;
}

.services-page__card {
    position: relative;

    min-width: 0;

    background:
        linear-gradient(
            145deg,
            rgba(11, 25, 37, 0.96),
            rgba(5, 13, 20, 0.96)
        );

    border: 1px solid rgba(255, 255, 255, 0.075);

    overflow: hidden;

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

.services-page__card::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--sp-blue);

    box-shadow:
        0 0 8px rgba(40, 160, 235, 0.7);

    transition: width 0.35s ease;
}

.services-page__card:hover {
    transform: translateY(-5px);

    border-color: rgba(40, 160, 235, 0.28);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(40, 160, 235, 0.035);
}

.services-page__card:hover::before {
    width: 100%;
}

.services-page__card-visual {
    position: relative;

    height: 180px;

    overflow: hidden;

    background: #07111a;
}

.services-page__card-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 50%,
            rgba(3, 8, 13, 0.7) 100%
        );

    pointer-events: none;
}

.services-page__card-visual > img:first-child {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.services-page__card:hover
.services-page__card-visual > img:first-child {
    transform: scale(1.035);
}

.services-page__card-cart {
    position: absolute;

    z-index: 3;

    right: 18px;
    bottom: 15px;

    width: 32px !important;
    height: 32px !important;

    object-fit: contain !important;
}

.services-page__card-content {
    padding: 23px 22px 22px;
}

.services-page__card-content h3 {
    margin: 0 0 12px;

    color: #f5f7f9;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;

    text-transform: uppercase;
}

.services-page__card-content p {
    min-height: 62px;

    margin: 0 0 20px;

    color: #7f8993;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.7;
}

.services-page__card-content > a {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #cbd2d8;

    text-decoration: none;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;

    transition: color 0.25s ease;
}

.services-page__card-content > a img {
    width: 6px;
    height: 10px;

    transition: transform 0.25s ease;
}

.services-page__card-content > a:hover {
    color: var(--sp-blue);
}

.services-page__card-content > a:hover img {
    transform: translateX(3px);
}


/* =========================================================
   SERVICE DETAIL SECTIONS
========================================================= */

.services-page__detail {
    position: relative;

    min-height: 465px;

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

    background:
        linear-gradient(
            110deg,
            #03090e 0%,
            #06111a 52%,
            #03090e 100%
        );
}

.services-page__detail:nth-of-type(even) {
        background: linear-gradient(250deg, #01080f 0%, #02090f 52%, #03090e 100%);
}

.services-page__detail::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(40, 160, 235, 0.04),
            transparent 52%
        );
}

.services-page__detail-inner {
    position: relative;
    z-index: 2;

    min-height: 465px;

    display: grid;

    grid-template-columns: 42% 58%;

    align-items: stretch;
}

.services-page__detail-inner--reverse {
    grid-template-columns: 58% 42%;
}


/* ---------------------------------------------------------
   DETAIL CONTENT
--------------------------------------------------------- */

.services-page__detail-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 65px 70px 65px 0;
}

.services-page__detail-inner--reverse
.services-page__detail-content {
    padding:
        65px 0
        65px 75px;
}

.services-page__detail-content h2 {
    margin: 15px 0 18px;

    color: #fff;

    font-size: clamp(34px, 3vw, 50px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;

    text-transform: uppercase;
}

.services-page__detail-description {
    width: min(470px, 100%);

    margin: 0 0 20px;

    color: #89939c;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   FEATURE LIST
--------------------------------------------------------- */

.services-page__features {
    display: grid;

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

    gap: 11px 25px;

    width: min(500px, 100%);

    padding: 0;
    margin: 0 0 27px;

    list-style: none;
}

.services-page__features li {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;

    color: #c0c7cd;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
}

.services-page__features li img {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;
}


/* ---------------------------------------------------------
   DETAIL IMAGE
--------------------------------------------------------- */

.services-page__detail-visual {
    position: relative;

    min-width: 0;

    overflow: hidden;
}

.services-page__detail-visual::before {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3, 9, 14, 0.78) 0%,
            transparent 25%
        );
}

.services-page__detail-inner--reverse
.services-page__detail-visual::before {
    background:
        linear-gradient(
            270deg,
            rgba(3, 9, 14, 0.78) 0%,
            transparent 25%
        );
}

.services-page__detail-visual::after {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(3, 9, 14, 0.1),
            rgba(3, 9, 14, 0.35)
        );
}

.services-page__detail-visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ---------------------------------------------------------
   DIFFERENT IMAGE POSITIONS
--------------------------------------------------------- */

.services-page__detail--design
.services-page__detail-visual img {
    object-position: center center;
}

.services-page__detail--development
.services-page__detail-visual img {
    object-position: center center;
}

.services-page__detail--branding
.services-page__detail-visual img {
    object-position: center center;
}

.services-page__detail--ecommerce
.services-page__detail-visual img {
    object-position: center center;
}




/* =========================================================
   ANCHOR OFFSET
========================================================= */

.services-page #services-overview,
.services-page #web-design,
.services-page #development,
.services-page #branding,
.services-page #ecommerce,
.services-page #contact {
    scroll-margin-top: 90px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .services-page__container,
    .services-page__hero-inner,
    .services-page__detail-inner,
    .services-page__cta-inner {
        width: min(1500px, calc(100% - 140px));
    }

    .services-page__hero {
        min-height: 730px;
    }

    .services-page__hero-inner {
        min-height: 730px;
    }

    .services-page__card-visual {
        height: 195px;
    }

    .services-page__detail,
    .services-page__detail-inner {
        min-height: 500px;
    }

}


/* =========================================================
   LAPTOP / SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .services-page__container,
    .services-page__hero-inner,
    .services-page__detail-inner,
    .services-page__cta-inner {
        width: calc(100% - 60px);
    }

    .services-page__hero-title {
        font-size: clamp(55px, 6vw, 78px);
    }

    .services-page__hero-visual {
        right: 20px;
    }

    .services-page__quick-nav {
        display: none;
    }

    .services-page__overview-heading {
        grid-template-columns: 1fr 300px;

        gap: 50px;
    }

    .services-page__cards {
        gap: 12px;
    }

    .services-page__card-content {
        padding-inline: 17px;
    }

    .services-page__detail-content {
        padding-right: 45px;
    }

    .services-page__detail-inner--reverse
    .services-page__detail-content {
        padding-left: 45px;
    }

}


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

@media (max-width: 900px) {

    .services-page__container,
    .services-page__hero-inner,
    .services-page__detail-inner,
    .services-page__cta-inner {
        width: calc(100% - 40px);
    }

    .services-page__hero,
    .services-page__hero-inner {
        min-height: 650px;
    }

    .services-page__hero-content {
        width: 70%;
    }

    .services-page__hero-visual {
        right: -150px;

        width: 75%;

        opacity: 0.55;
    }

    .services-page__overview-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .services-page__overview-description {
        max-width: 520px;
    }

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

        gap: 20px;
    }

    .services-page__card-visual {
        height: 220px;
    }

    .services-page__detail-inner,
    .services-page__detail-inner--reverse {
        grid-template-columns: 1fr;
    }

    .services-page__detail-content,
    .services-page__detail-inner--reverse
    .services-page__detail-content {
        padding: 70px 0;
    }

    .services-page__detail-visual {
        min-height: 420px;
    }

    .services-page__detail-inner--reverse
    .services-page__detail-visual {
        order: 2;
    }

    .services-page__detail-inner--reverse
    .services-page__detail-content {
        order: 1;
    }

    .services-page__cta-inner {
        grid-template-columns: 1fr 280px;

        gap: 50px;
    }

}


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

@media (max-width: 600px) {

    .services-page__container,
    .services-page__hero-inner,
    .services-page__detail-inner,
    .services-page__cta-inner {
        width: calc(100% - 32px);
    }

    .services-page__hero {
        min-height: 670px;
    }

    .services-page__hero-inner {
        min-height: 670px;

        align-items: flex-end;
    }

    .services-page__hero-content {
        width: 100%;

        padding: 110px 0 65px;
    }

    .services-page__hero-title {
        margin-top: 18px;

        font-size: clamp(46px, 14vw, 64px);
        line-height: 0.9;
    }

    .services-page__hero-description {
        width: 100%;

        max-width: 380px;

        font-size: 12px;
    }

    .services-page__hero-visual {
        top: 33%;
        right: -150px;

        width: 125%;
        height: 55%;

        opacity: 0.38;
    }

    .services-page__overview {
        padding: 75px 0 80px;
    }

    .services-page__overview-title h2 {
        font-size: 36px;
    }

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

    .services-page__card-visual {
        height: 240px;
    }

    .services-page__card-content p {
        min-height: auto;
    }

    .services-page__detail-content,
    .services-page__detail-inner--reverse
    .services-page__detail-content {
        padding: 65px 0;
    }

    .services-page__detail-content h2 {
        font-size: 38px;
    }

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

        gap: 12px;
    }

    .services-page__detail-visual {
        min-height: 300px;
    }

    .services-page__cta {
        min-height: 420px;
    }

    .services-page__cta-inner {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-block: 65px;
    }

    .services-page__cta-heading h2 {
        font-size: 38px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .services-page__hero-title {
        font-size: 42px;
    }

    .services-page__overview-title h2,
    .services-page__detail-content h2,
    .services-page__cta-heading h2 {
        font-size: 33px;
    }

    .services-page__button {
        width: 100%;
    }

}

/* =========================================================
   HERO - DESKTOP MATCH
========================================================= */

@media (min-width: 901px) {

    /* -----------------------------------------------------
       HERO SIZE
    ----------------------------------------------------- */

    .services-page__hero,
    .services-page__hero-inner {
        min-height: 640px;
    }


    .services-page__hero-inner {
        width: calc(100% - 100px);
        max-width: 1800px;
    }


    /* -----------------------------------------------------
       LEFT CONTENT
    ----------------------------------------------------- */

    .services-page__hero-content {
        position: relative;
        z-index: 5;

        width: 45%;

        padding: 75px 0 45px;
    }


    .services-page__hero-content .services-page__eyebrow {
        margin-bottom: 16px;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       TITLE
    ----------------------------------------------------- */

    .services-page__hero-title {
        margin: 0 0 26px;

        font-size: clamp(72px, 5.3vw, 102px);

        line-height: .88;

        letter-spacing: -.06em;
    }


    .services-page__hero-outline {
        color: transparent;

        -webkit-text-stroke:
            1.4px rgba(255,255,255,.72);
    }


    /* -----------------------------------------------------
       DESCRIPTION
    ----------------------------------------------------- */

    .services-page__hero-description {
        width: 500px;
        max-width: 90%;

        margin: 0 0 28px;

        font-size: 14px;
        line-height: 1.65;

        color: #a2a9b0;
    }


    /* -----------------------------------------------------
       BUTTON
    ----------------------------------------------------- */

    .services-page__hero-content
    .services-page__button {

        min-width: 220px;
        min-height: 52px;

        padding:
            0 12px
            0 27px;

        border: 0;

        border-radius: 30px;

        background:
            linear-gradient(
                90deg,
                #0878e9,
                #1598ff
            );

        box-shadow:
            0 0 18px rgba(40,160,235,.30);

        font-size: 10px;
    }


    .services-page__hero-content
    .services-page__button-icon {

        width: 34px;
        height: 34px;

        background: transparent;
    }


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

    .services-page__hero-visual {

        position: absolute;

        top: 28px;
        right: 40px;

        width: 61%;
        height: calc(100% - 28px);

        transform: none;

        overflow: hidden;

        opacity: 1;
    }


    .services-page__hero-visual::before {
        display: none;
    }


    .services-page__hero-visual img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;

        opacity: 1;

        mix-blend-mode: normal;
    }


    /* fade към текста */

    .services-page__hero-visual::after {

        content: "";

        position: absolute;
        inset: 0;

        pointer-events: none;

        background:

            linear-gradient(
                90deg,

                #020609 0%,

                rgba(2,6,9,.96) 8%,

                rgba(2,6,9,.72) 18%,

                rgba(2,6,9,.25) 31%,

                transparent 46%
            ),

            linear-gradient(
                0deg,

                rgba(2,6,9,.20) 0%,

                transparent 18%
            );
    }


    /* =====================================================
       QUICK NAV
    ===================================================== */

    .services-page__quick-nav {

        position: absolute;

        right: 0;
        top: 57%;

        z-index: 10;

        width: 130px;

        transform: translateY(-50%);
    }


    .services-page__quick-nav a {

        min-height: 38px;

        padding:
            0 4px
            0 10px;

        font-size: 8px;
    }

}
/* =========================================================
   SERVICES HERO - DESKTOP FINAL BASE
========================================================= */

@media (min-width: 901px) {

    .services-page__hero {
        position: relative;

        min-height: 650px;

        background:
            linear-gradient(
                90deg,
                rgba(2, 7, 12, 1) 0%,
                rgba(2, 7, 12, .97) 25%,
                rgba(2, 7, 12, .72) 40%,
                rgba(2, 7, 12, .18) 58%,
                rgba(2, 7, 12, 0) 72%
            ),
            url("../images/services/hero-growth.jpg");

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        border-bottom: 1px solid rgba(40, 160, 235, .22);
    }


    .services-page__hero-inner {
        width: calc(100% - 100px);
        max-width: 1800px;

        min-height: 650px;

        margin: 0 auto;

        display: flex;
        align-items: center;
    }


    /* ---------------------------------------------
       LEFT CONTENT
    --------------------------------------------- */

    .services-page__hero-content {
        position: relative;
        z-index: 5;

        width: 45%;

        padding: 35px 0 25px;
    }


    .services-page__hero-content .services-page__eyebrow {
        margin: 0 0 20px;

        font-size: 11px;
    }


    .services-page__hero-title {
        margin: 0 0 25px;

        font-size: clamp(72px, 5.25vw, 102px);
        font-weight: 800;

        line-height: .88;

        letter-spacing: -.06em;
    }


    .services-page__hero-outline {
        color: transparent;

        -webkit-text-stroke:
            1.5px rgba(255, 255, 255, .72);
    }


    .services-page__hero-description {
        width: 520px;
        max-width: 92%;

        margin: 0 0 28px;

        color: #a4abb2;

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


    /* ---------------------------------------------
       BUTTON
    --------------------------------------------- */

    .services-page__hero-content
    .services-page__button {

        min-width: 220px;
        min-height: 54px;

        padding: 0 13px 0 27px;

        border: 0;
        border-radius: 30px;

        background:
            linear-gradient(
                90deg,
                #0878e9,
                #159cff
            );

        box-shadow:
            0 0 20px rgba(40, 160, 235, .28);

        font-size: 10px;
    }


    .services-page__hero-content
    .services-page__button-icon {

        width: 34px;
        height: 34px;

        background: transparent;
    }


    /* ---------------------------------------------
       RIGHT SERVICE NAV
    --------------------------------------------- */

    .services-page__quick-nav {
        position: absolute;

        z-index: 10;

        top: 69%;
        right: 0;

        width: 145px;

        transform: translateY(-50%);
    }


    .services-page__quick-nav a {
        min-height: 34px;

        padding: 0 5px;

        border: 0;

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

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


    .services-page__quick-nav a:first-child {
        border: 0;
    }

}


    /* -----------------------------------------------------
       QUICK NAV
    ----------------------------------------------------- */

    .services-page__quick-nav {
        right: 10px;

        width: 150px;

        z-index: 8;
    }


    .services-page__quick-nav a {
        min-height: 40px;

        font-size: 9px;
    }

 /* =========================================================
   SERVICES HERO - PRECISION FIX
========================================================= */

@media (min-width: 901px) {

    /* -----------------------------------------------------
       BACKGROUND IMAGE
       Сваляме графиката надолу и я намаляваме леко,
       за да се вижда цялата стрелка.
    ----------------------------------------------------- */

    .services-page__hero {
        min-height: 650px;

        background-size: auto 92%;
        background-position: right bottom;
        background-repeat: no-repeat;

        background-color: #02070c;
    }


    /* Връщаме тъмния fade върху картинката */

    .services-page__hero::after {
        content: "";

        position: absolute;
        inset: 0;

        z-index: 1;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                #02070c 0%,
                rgba(2, 7, 12, .98) 27%,
                rgba(2, 7, 12, .84) 39%,
                rgba(2, 7, 12, .32) 52%,
                rgba(2, 7, 12, 0) 66%
            );
    }


    .services-page__hero-inner {
        position: relative;
        z-index: 2;

        min-height: 650px;

        width: calc(100% - 100px);
        max-width: 1800px;
    }


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

    .services-page__hero-content {
        position: relative;
        z-index: 5;

        width: 46%;

        padding: 55px 0 30px;
    }


    /* УСЛУГИ */

    .services-page__hero-content
    .services-page__eyebrow {

        margin: 0 0 24px;

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

        letter-spacing: .08em;

        color: #c5cbd1;
    }


    .services-page__hero-content
    .services-page__eyebrow::before {

        display: none;
    }


    /* =====================================================
       MAIN TITLE
    ===================================================== */

    .services-page__hero-title {

        margin: 0 0 28px;

        font-size: clamp(76px, 5.65vw, 110px);

        font-weight: 800;

        line-height: .86;

        letter-spacing: -.065em;

        color: #fff;
    }


    .services-page__hero-title > span {
        display: block;
    }


    .services-page__hero-outline {

        margin-top: 12px;

        color: transparent;

        font-weight: 500;

        letter-spacing: -.055em;

        -webkit-text-stroke:
            1.7px rgba(255, 255, 255, .82);
    }


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

    .services-page__hero-description {

        width: 560px;
        max-width: 95%;

        margin: 0 0 28px;

        color: #c0c5ca;

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

        line-height: 1.55;
    }


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

    .services-page__hero-content
    .services-page__button {

        width: 225px;

        min-width: 225px;
        min-height: 56px;

        padding: 0 17px 0 29px;

        justify-content: space-between;

        border: 0;

        border-radius: 30px;

        background:
            linear-gradient(
                90deg,
                #0878e9 0%,
                #0798ff 100%
            );

        box-shadow:
            0 0 8px rgba(0, 145, 255, .35),
            0 0 24px rgba(0, 145, 255, .16);

        color: #fff;

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

        letter-spacing: .02em;
    }


    .services-page__hero-content
    .services-page__button-icon {

        display: flex;

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

        width: 30px;
        height: 30px;

        background: transparent;
    }


    .services-page__hero-content
    .services-page__button-icon img {

        width: 15px;
        height: 15px;
    }


    /* =====================================================
       RIGHT NAV
    ===================================================== */

    .services-page__quick-nav {

        position: absolute;

        z-index: 20;

        top: auto;

        right: 0;

        bottom: 64px;

        width: 150px;

        transform: none;
    }


    .services-page__quick-nav a {

        display: flex;

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

        width: 100%;

        min-height: 26px;

        padding: 0;

        border: 0;

        color: #fff;

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

        line-height: 1;

        letter-spacing: 0;

        text-shadow:
            0 1px 3px rgba(0, 0, 0, .9);
    }


    .services-page__quick-nav a:first-child {
        border: 0;
    }


    .services-page__quick-nav a:hover {

        padding-left: 0;

        color: #fff;
    }


    .services-page__quick-nav a img {

        width: 7px;
        height: 11px;

        margin-right: 2px;

        opacity: 1;
    }

}
/* =========================================================
   HERO - FINE POSITIONING
========================================================= */

@media (min-width: 901px) {

    /* -----------------------------------------------------
       1. ЦЕЛИЯТ ТЕКСТОВ БЛОК НАДЯСНО
       Подравняваме го приблизително с логото.
    ----------------------------------------------------- */

    .services-page__hero-inner {
        width: calc(100% - 120px);
        max-width: 1800px;
    }

    .services-page__hero-content {
        margin-left: 10px;
    }


    /* -----------------------------------------------------
       2. ГРАФИКАТА - НАЛЯВО И НАДОЛУ
    ----------------------------------------------------- */

    .services-page__hero {
        background-size: auto 92%;

        /*
         * Първата стойност мести наляво/надясно.
         * Втората мести нагоре/надолу.
         */

        background-position:
            calc(100% - 45px) 35px;

        background-repeat: no-repeat;
    }


    /* -----------------------------------------------------
       3. ОСНОВНО ЗАГЛАВИЕ
    ----------------------------------------------------- */

    .services-page__hero-title {
        font-size: clamp(78px, 5.7vw, 110px);

        line-height: .86;

        letter-spacing: -.065em;
    }


    /* -----------------------------------------------------
       4. "ЗА РАСТЕЖ"
    ----------------------------------------------------- */

    .services-page__hero-outline {
        display: block;

        margin-top: 14px;

        width: max-content;

        color: transparent;

        font-size: .94em;
        font-weight: 700;

        line-height: .94;

        letter-spacing: -.045em;

        font-style: italic;

        transform: skewX(-5deg);

        transform-origin: left center;

        -webkit-text-stroke:
            2px rgba(235, 240, 244, .90);

        text-shadow:
            0 0 1px rgba(255,255,255,.15);
    }


    /* -----------------------------------------------------
       5. ДЯСНО МЕНЮ
       Местим го заедно с графиката.
    ----------------------------------------------------- */

    .services-page__quick-nav {
        right: 35px;
        bottom: 60px;

        width: 145px;
    }


    .services-page__quick-nav a {
        min-height: 27px;

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

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

}

/* =========================================================
   SERVICES HERO - FINAL LAYOUT
========================================================= */

@media (min-width: 901px) {

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

    .services-page__hero {
        position: relative;

        min-height: 650px;

        margin: 90px 0 0;
        padding: 0;

        overflow: hidden;

        background:
            linear-gradient(
                90deg,
                #02070c 0%,
                rgba(2, 7, 12, .98) 23%,
                rgba(2, 7, 12, .80) 36%,
                rgba(2, 7, 12, .25) 49%,
                rgba(2, 7, 12, 0) 61%
            ),
            url("../images/services/hero-growth.jpg");

        /*
         * По-голяма картинка.
         * Вкарваме я значително по-наляво.
         * Долният край стои върху долния край на Hero.
         */
        background-size: auto 100%;
        background-position: calc(100% - 35px) bottom;
        background-repeat: no-repeat;

        border-bottom:
            1px solid rgba(40,160,235,.20);
    }


    /* махаме старите декоративни overlay-и */

    .services-page__hero::before,
    .services-page__hero::after {
        display: none;
    }


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

    .services-page__hero-inner {
        position: relative;

        width: calc(100% - 100px);
        max-width: 1800px;

        min-height: 650px;

        margin: 0 auto;

        display: block;
    }


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

    .services-page__hero-content {
        position: absolute;

        z-index: 5;

        /*
         * Започва отгоре, а не се центрира
         * вертикално в Hero.
         */
        top: 42px;
        left: 60px;

        width: 49%;

        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------------------
       УСЛУГИ
    ----------------------------------------------------- */

    .services-page__hero-content
    .services-page__eyebrow {

        margin: 0 0 22px;

        color: #d3d7db;

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

        line-height: 1;

        letter-spacing: .04em;
    }


    .services-page__hero-content
    .services-page__eyebrow::before {
        display: none;
    }


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

    .services-page__hero-title {

        margin: 0 0 26px;

        color: #fff;

        font-size: clamp(78px, 5.65vw, 108px);
        font-weight: 800;

        line-height: .84;

        letter-spacing: -.065em;

        text-transform: uppercase;
    }


    .services-page__hero-title > span {
        display: block;
    }


    /* -----------------------------------------------------
       ЗА РАСТЕЖ
    ----------------------------------------------------- */

    .services-page__hero-title
    .services-page__hero-outline {

        display: block;

        width: max-content;

        margin-top: 18px;

        color: transparent;

        font-size: .92em;
        font-weight: 600;

        line-height: .92;

        letter-spacing: -.055em;

        font-style: italic;

        transform: skewX(-7deg);

        transform-origin: left center;

        -webkit-text-stroke:
            2px rgba(235,239,242,.90);

        text-shadow: none;
    }


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

    .services-page__hero-description {

        width: 570px;
        max-width: 92%;

        margin: 0 0 26px;

        color: #c1c6cb;

        font-size: 17px;
        font-weight: 500;

        line-height: 1.55;
    }


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

    .services-page__hero-content
    .services-page__button {

        display: flex;

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

        width: 220px;
        min-width: 220px;
        min-height: 54px;

        padding: 0 18px 0 28px;

        border: 0;

        border-radius: 28px;

        background:linear-gradient(90deg, #2864ff 0%, #3063e7 100%);

        box-shadow:
            0 0 18px rgba(0,144,255,.28);

        color: #fff;

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

        letter-spacing: .01em;
    }


    .services-page__hero-content
    .services-page__button-icon {

        display: flex;

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

        width: auto;
        height: auto;

        background: transparent;
    }


    .services-page__hero-content
    .services-page__button-icon img {

        width: 14px;
        height: 14px;
    }


    /* =====================================================
       RIGHT NAV
    ===================================================== */

    .services-page__quick-nav {

        position: absolute;

        z-index: 10;

        top: auto;

        right: 8px;
        bottom: 65px;

        width: 145px;

        transform: none;
    }


    .services-page__quick-nav a {

        display: flex;

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

        min-height: 27px;

        padding: 0;

        border: 0;

        color: #fff;

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

        line-height: 1;

        letter-spacing: 0;

        text-shadow: 10px 4px 11px rgb(0 0 0);
    }


    .services-page__quick-nav a:first-child {
        border: 0;
    }


    .services-page__quick-nav a:hover {

        padding-left: 0;

        color: #fff;
    }


    .services-page__quick-nav a img {

        width: 7px;
        height: 11px;

        opacity: 1;
    }

}

/* =========================================================
   HERO GROWTH LABELS
========================================================= */

@media (min-width: 901px) {

    .services-page__growth-labels {
        position: absolute;
        inset: 0;

        z-index: 8;

        pointer-events: none;
    }


    .growth-label {
        position: absolute;

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

        min-height: 38px;

        padding: 0 16px;

        border: 1px solid rgba(40, 160, 235, .22);
        border-radius: 7px;

        background:
            linear-gradient(
                135deg,
                rgba(12, 50, 84, .92),
                rgba(8, 34, 61, .86)
            );

        box-shadow:
            0 4px 16px rgba(0, 0, 0, .32),
            inset 0 0 12px rgba(40, 160, 235, .08);

        backdrop-filter: blur(5px);

        color: #e8f2fb;

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

        line-height: 1;

        letter-spacing: .01em;

        text-shadow:
            0 1px 4px rgba(0, 0, 0, .7);
    }


    /* ИДЕЯ */

    .growth-label--idea {
        left: 47%;
        top: 54%;
    }


    /* РАЗРАБОТКА */

    .growth-label--development {
        left: 57%;
        top: 43%;
    }


    /* ПУСКАНЕ */

    .growth-label--launch {
        left: 70%;
        top: 29%;
    }


    /* РАСТЕЖ */

    .growth-label--growth {
        left: 82%;
        top: 10%;
    }

}
/* =========================================================
   HERO QUICK NAV - BLUE ARROWS
========================================================= */

@media (min-width: 901px) {

    .services-page__quick-nav a {
        justify-content: flex-start;
        gap: 9px;
    }

    /* Скриваме старото SVG */
    .services-page__quick-nav a img {
        display: none;
    }

    /* Нова синя стрелка */
    .services-page__quick-nav a::after {
        content: "›";

        display: inline-block;

        color: #28A0EB;

        font-size: 18px;
        font-weight: 700;
        line-height: 1;

        transform: translateY(-1px);

        text-shadow:
            0 0 5px rgba(40, 160, 235, .75);
    }

    .services-page__quick-nav a:hover::after {
        transform: translate(3px, -1px);
    }

}

/* =========================================================
   SERVICES OVERVIEW - DESIGN MATCH
========================================================= */

@media (min-width: 901px) {

    /* SECTION */
    .services-page__overview {
        padding: 62px 0 70px;

        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(25, 93, 145, 0.08),
                transparent 42%
            ),
            #03080d;
    }


    /* CONTAINER - по-компактна секция */
    .services-page__overview .services-page__container {
        width: calc(100% - 120px);
        max-width: 1360px;
        margin: 0 auto;
    }


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

    .services-page__overview-heading {
        display: grid;

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

        align-items: end;

        gap: 80px;

        margin-bottom: 38px;
    }


    /* КАКВО ПРАВИМ */
    .services-page__overview-title .services-page__eyebrow {
        margin: 0 0 12px;

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

        letter-spacing: .08em;

        color: #aeb7bf;
    }


    .services-page__overview-title
    .services-page__eyebrow::before {
        display: none;
    }


    /* ОСНОВНО ЗАГЛАВИЕ */
    .services-page__overview-title h2 {
        margin: 0;

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

        line-height: .98;

        letter-spacing: -.035em;

        text-transform: uppercase;
    }


    .services-page__overview-title h2 > span {
        display: block;
    }


    .services-page__overview-title strong {
        color: var(--sp-blue);
        font-weight: inherit;
    }


    /* DESCRIPTION RIGHT */
    .services-page__overview-description {
        width: 100%;
        max-width: 420px;

        margin: 0 0 5px;

        color: #a4abb2;

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

        line-height: 1.55;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .services-page__cards {
        display: grid;

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

        gap: 22px;
    }


    .services-page__card {
        min-height: 345px;

        display: flex;
        flex-direction: column;

        background:
            linear-gradient(
                145deg,
                rgba(8, 19, 29, .97),
                rgba(4, 12, 19, .98)
            );

        border:
            1px solid rgba(40, 160, 235, .34);

        border-radius: 6px;

        overflow: hidden;
    }


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

    .services-page__card-visual {
        height: 165px;

        flex: 0 0 165px;

        background: #050c12;
    }


    .services-page__card-visual > img:first-child {
        width: 100%;
        height: 100%;

        object-fit: inherit;
        object-position: center;
    }


    /* лек fade между снимката и текста */
    .services-page__card-visual::after {
        background:
            linear-gradient(
                to bottom,
                transparent 58%,
                rgba(4, 12, 19, .58) 100%
            );
    }


    /* E-COMMERCE ICON */
    .services-page__card-cart {
        right: 17px;
        bottom: 16px;
        display: none;
        width: 42px !important;
        height: 42px !important;
    }


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

    .services-page__card-content {
        flex: 1;

        display: flex;
        flex-direction: column;

        padding: 18px 18px 17px;
    }


    .services-page__card-content h3 {
        margin: 0 0 14px;

        color: #fff;

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

        line-height: 1.15;

        letter-spacing: -.025em;
    }


    .services-page__card-content p {
        min-height: 0;

        margin: 0 0 18px;

        color: #a2aab2;

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

        line-height: 1.55;
    }


    /* =====================================================
       LEARN MORE
    ===================================================== */

    .services-page__card-content > a {
        margin-top: auto;

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

        gap: 11px;

        color: var(--sp-blue);

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

        line-height: 1;

        letter-spacing: .02em;
    }


    .services-page__card-content > a img {
        width: 20px;
        height: 20px;
    }

}

/* =========================================================
   SERVICE 01 - WEB DESIGN - FINAL
========================================================= */

@media (min-width: 901px) {

    /* =====================================================
       WHOLE SECTION
    ===================================================== */

    .services-page__detail--design {
        position: relative;

        min-height: 520px;

        overflow: hidden;

        border-top: 1px solid rgba(40, 160, 235, .16);
        border-bottom: 1px solid rgba(40, 160, 235, .16);

        background:
            linear-gradient(
                90deg,
                rgba(2, 9, 15, .98) 0%,
                rgba(2, 9, 15, .91) 30%,
                rgba(2, 9, 15, .52) 55%,
                rgba(2, 9, 15, .15) 100%
            ),
            url("../images/services/service-web-design-bg.jpg");

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    /* махаме стария декоративен overlay */
    .services-page__detail--design::after {
        display: none;
    }


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

    .services-page__detail--design
    .services-page__detail-inner {

        position: relative;
        z-index: 2;

        width: calc(100% - 120px);
        max-width: 1420px;

        min-height: 520px;

        margin: 0 auto;

        display: grid;

        grid-template-columns: 45% 55%;

        align-items: center;
    }


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

    .services-page__detail--design
    .services-page__detail-content {

        position: relative;
        z-index: 5;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        padding: 50px 20px 50px 0;
    }


    /* УСЛУГА 01 */
    .services-page__detail--design
    .services-page__eyebrow {

        margin: 0 0 18px;

        color: #b7c1ca;

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

        line-height: 1;

        letter-spacing: .04em;
    }


    .services-page__detail--design
    .services-page__eyebrow::before {
        display: none;
    }


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

    .services-page__detail--design
    .services-page__detail-content h2 {

        margin: 0 0 20px;

        color: #fff;

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

        line-height: 1;

        letter-spacing: -.045em;

        text-transform: uppercase;
    }


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

    .services-page__detail--design
    .services-page__detail-description {

        width: 100%;
        max-width: 590px;

        margin: 0 0 20px;

        color: #c1c7cd;

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

        line-height: 1.55;
    }


    /* =====================================================
       CHECK LIST
    ===================================================== */

    .services-page__detail--design
    .services-page__features {

        display: flex;
        flex-direction: column;

        gap: 10px;

        width: 100%;

        margin: 0 0 25px;
        padding: 0;

        list-style: none;
    }


    .services-page__detail--design
    .services-page__features li {

        display: flex;
        align-items: center;

        gap: 12px;

        color: #d4d8dc;

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

        line-height: 1.35;
    }


    .services-page__detail--design
    .services-page__features li img {

        width: 27px;
        height: 27px;

        flex: 0 0 27px;
    }


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

    .services-page__detail--design
    .services-page__button {

        width: 215px;
        min-width: 215px;

        min-height: 54px;

        padding: 0 15px 0 25px;

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

        border: 0;

        border-radius: 30px;

        background: linear-gradient(90deg, #2e63eb 0%, #244fc1 100%);

        box-shadow:
            0 0 10px rgba(0, 145, 255, .35),
            0 0 25px rgba(0, 145, 255, .16);

        color: #fff;

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

        letter-spacing: .02em;
    }


    .services-page__detail--design
    .services-page__button-icon {

        width: 30px;
        height: 30px;

        background: transparent;
    }


    .services-page__detail--design
    .services-page__button-icon img {

        width: 15px;
        height: 15px;
    }


    /* =====================================================
       RIGHT LAPTOP
    ===================================================== */

    .services-page__detail--design
    .services-page__detail-visual {

        position: relative;

        height: 520px;

        overflow: visible;

        background: transparent;
    }


    /* махаме старите fade overlay-и */
    .services-page__detail--design
    .services-page__detail-visual::before,

    .services-page__detail--design
    .services-page__detail-visual::after {

        display: none;
    }


    .services-page__detail--design
    .services-page__design-laptop {

        position: absolute;

        z-index: 3;

        width: 850px;
        max-width: none;

        height: auto;

        right: -100px;
        bottom: -5px;

        object-fit: contain;

        filter:
            drop-shadow(
                0 20px 25px rgba(0, 0, 0, .40)
            );
    }

}

/* =========================================================
   SERVICE 02 - WEB DEVELOPMENT
========================================================= */

@media (min-width: 901px) {

    .services-page__detail--development {
        position: relative;
        min-height: 470px;
        overflow: hidden;

        background: #02090f;

        border-top: 1px solid rgba(40, 160, 235, .18);
        border-bottom: 1px solid rgba(40, 160, 235, .18);
    }


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

    .services-page__detail--development
    .services-page__detail-inner {

        position: relative;

        width: calc(100% - 120px);
        max-width: 1420px;
        min-height: 470px;

        margin: 0 auto;

        display: grid;
        grid-template-columns: 55% 45%;

        align-items: stretch;
    }


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

    .services-page__detail--development
    .services-page__detail-visual {

        position: relative;

        height: 470px;

        overflow: visible;

        background: transparent;
    }


    .services-page__detail--development
    .services-page__detail-visual > img {

        position: absolute;

        z-index: 1;

        top: 0;
        left: 0;

        /*
         * Картинката излиза извън лявата колона
         * и влиза под текстовата част.
         */
        width: calc(100% + 300px);
        height: 100%;

        max-width: none;

        object-fit: cover;
        object-position: left center;
    }


    /* =====================================================
       LONG SMOOTH FADE
    ===================================================== */

    .services-page__detail--development
    .services-page__detail-visual::after {

        content: "";

        position: absolute;

        z-index: 2;

        top: 0;
        left: 45%;

        /*
         * Fade-ът също продължава
         * извън границата на колоната.
         */
        width: calc(55% + 320px);
        height: 100%;

        pointer-events: none;

        background: linear-gradient(
            90deg,

            rgba(2, 9, 15, 0) 0%,

            rgba(2, 9, 15, .02) 12%,

            rgba(2, 9, 15, .06) 22%,

            rgba(2, 9, 15, .14) 32%,

            rgba(2, 9, 15, .26) 42%,

            rgba(2, 9, 15, .42) 52%,

            rgba(2, 9, 15, .60) 62%,

            rgba(2, 9, 15, .76) 72%,

            rgba(2, 9, 15, .88) 82%,

            rgba(2, 9, 15, .96) 92%,

            #02090f 100%
        );
    }


    .services-page__detail--development
    .services-page__detail-visual::before {
        display: none;
    }


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

    .services-page__detail--development
    .services-page__detail-content {

        position: relative;

        /*
         * Текстът стои НАД картинката и fade-а.
         */
        z-index: 10;

        display: flex;
        flex-direction: column;

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

        padding: 42px 20px 42px 45px;

        background: transparent;
    }


    /* =====================================================
       УСЛУГА 02
    ===================================================== */

    .services-page__detail--development
    .services-page__eyebrow {

        margin: 0 0 16px;

        color: #b8c2ca;

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

        line-height: 1;

        letter-spacing: .04em;
    }


    .services-page__detail--development
    .services-page__eyebrow::before {
        display: none;
    }


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

    .services-page__detail--development
    .services-page__detail-content h2 {

        margin: 0 0 20px;

        color: #fff;

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

        line-height: 1;

        letter-spacing: -.04em;

        text-transform: uppercase;
    }


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

    .services-page__detail--development
    .services-page__detail-description {

        width: 100%;
        max-width: 570px;

        margin: 0 0 20px;

        color: #bec5cb;

        font-size: 17px;
        font-weight: 500;

        line-height: 1.5;
    }


    /* =====================================================
       FEATURES
    ===================================================== */

    .services-page__detail--development
    .services-page__features {

        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 9px;

        margin: 0 0 25px;
        padding: 0;

        list-style: none;
    }


    .services-page__detail--development
    .services-page__features li {

        display: flex;
        align-items: center;

        gap: 12px;

        color: #d5d9dd;

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

        line-height: 1.3;
    }


    .services-page__detail--development
    .services-page__features li img {

        width: 27px;
        height: 27px;

        flex: 0 0 27px;
    }


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

    .services-page__detail--development
    .services-page__button {

        width: 215px;
        min-width: 215px;
        min-height: 54px;

        padding: 0 15px 0 25px;

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

        border: 0;
        border-radius: 30px;

        background: linear-gradient(90deg, #2d61e7 0%, #244fc2 100%);

        box-shadow:
            0 0 10px rgba(0, 145, 255, .35),
            0 0 25px rgba(0, 145, 255, .16);

        color: #fff;

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

        line-height: 1;
        letter-spacing: .02em;

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


    .services-page__detail--development
    .services-page__button:hover {

        transform: translateY(-2px);

        box-shadow:
            0 0 14px rgba(0, 145, 255, .48),
            0 0 32px rgba(0, 145, 255, .24);
    }


    .services-page__detail--development
    .services-page__button-icon {

        width: 30px;
        height: 30px;

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

        background: transparent;
    }


    .services-page__detail--development
    .services-page__button-icon img {

        width: 15px;
        height: 15px;

        object-fit: contain;
    }

}

/* =========================================================
   SERVICE 03 - BRANDING
========================================================= */

@media (min-width: 901px) {

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

    .services-page__detail--branding {
        position: relative;

        min-height: 470px;
        overflow: hidden;

        background:
            radial-gradient(
                circle at 70% 45%,
                rgba(15, 91, 160, .10),
                transparent 45%
            ),
            #02090f;

        border-top: 1px solid rgba(40, 160, 235, .18);
        border-bottom: 1px solid rgba(40, 160, 235, .18);
    }


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

    .services-page__detail--branding
    .services-page__detail-inner {

        position: relative;

        width: calc(100% - 120px);
        max-width: 1420px;
        min-height: 470px;

        margin: 0 auto;

        display: grid;
        grid-template-columns: 46% 54%;

        align-items: stretch;
    }


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

    .services-page__detail--branding
    .services-page__detail-content {

        position: relative;
        z-index: 10;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        padding: 42px 20px 42px 15px;

        background: transparent;
    }


    /* =====================================================
       УСЛУГА 03
    ===================================================== */

    .services-page__detail--branding
    .services-page__eyebrow {

        margin: 0 0 16px;

        color: #b8c2ca;

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

        line-height: 1;

        letter-spacing: .04em;
    }


    .services-page__detail--branding
    .services-page__eyebrow::before {
        display: none;
    }


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

    .services-page__detail--branding
    .services-page__detail-content h2 {

        margin: 0 0 18px;

        color: #fff;

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

        line-height: 1;

        letter-spacing: -.04em;

        text-transform: uppercase;
    }


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

    .services-page__detail--branding
    .services-page__detail-description {

        width: 100%;
        max-width: 550px;

        margin: 0 0 18px;

        color: #bec5cb;

        font-size: 17px;
        font-weight: 500;

        line-height: 1.5;
    }


    /* =====================================================
       FEATURES - ЕДНО ПОД ДРУГО
    ===================================================== */

    .services-page__detail--branding
    .services-page__features {

        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 9px;

        margin: 0 0 24px;
        padding: 0;

        list-style: none;
    }


    .services-page__detail--branding
    .services-page__features li {

        display: flex;
        align-items: center;

        gap: 12px;

        color: #d5d9dd;

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

        line-height: 1.3;
    }


    .services-page__detail--branding
    .services-page__features li img {

        width: 27px;
        height: 27px;

        flex: 0 0 27px;
    }


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

    .services-page__detail--branding
    .services-page__button {

        width: 215px;
        min-width: 215px;
        min-height: 54px;

        padding: 0 15px 0 25px;

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

        border: 0;
        border-radius: 30px;

        background: linear-gradient(90deg, #2d61e7 0%, #244fc2 100%);

        box-shadow:
            0 0 10px rgba(0, 145, 255, .35),
            0 0 25px rgba(0, 145, 255, .16);

        color: #fff;

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

        line-height: 1;
        letter-spacing: .02em;

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


    .services-page__detail--branding
    .services-page__button:hover {

        transform: translateY(-2px);

        box-shadow:
            0 0 14px rgba(0, 145, 255, .48),
            0 0 32px rgba(0, 145, 255, .24);
    }


    .services-page__detail--branding
    .services-page__button-icon {

        width: 30px;
        height: 30px;

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

        background: transparent;
    }


    .services-page__detail--branding
    .services-page__button-icon img {

        width: 15px;
        height: 15px;

        object-fit: contain;
    }


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

    .services-page__detail--branding
    .services-page__detail-visual {

        position: relative;

        height: 470px;

        overflow: visible;

        background: transparent;
    }


    .services-page__detail--branding
    .services-page__detail-visual > img {

        position: absolute;

        z-index: 2;

        /*
         * По-голямо от самата колона,
         * за да навлезе към средата.
         */
        width: 850px;
        max-width: none;

        height: auto;

        top: 50%;
        right: -60px;

        transform: translateY(-50%);

        object-fit: contain;
    }


    /* =====================================================
       SMOOTH TRANSITION LEFT -> IMAGE
    ===================================================== */

    .services-page__detail--branding
    .services-page__detail-visual::before {

        content: "";

        display: block;

        position: absolute;

        z-index: 4;

        top: 0;
        left: -170px;

        width: 400px;
        height: 100%;

        pointer-events: none;

        background: linear-gradient(
            90deg,

            #02090f 0%,

            rgba(2, 9, 15, .96) 10%,

            rgba(2, 9, 15, .88) 22%,

            rgba(2, 9, 15, .72) 36%,

            rgba(2, 9, 15, .52) 52%,

            rgba(2, 9, 15, .30) 68%,

            rgba(2, 9, 15, .12) 84%,

            transparent 100%
        );
    }


    /* премахваме стария overlay */
    .services-page__detail--branding
    .services-page__detail-visual::after {
        display: none;
    }

}
/* =========================================================
   SERVICE 04 - E-COMMERCE
========================================================= */

@media (min-width: 901px) {

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

    .services-page__detail--ecommerce {
        position: relative;

        min-height: 470px;
        overflow: hidden;

        background: #02090f;

        border-top: 1px solid rgba(40, 160, 235, .18);
        border-bottom: 1px solid rgba(40, 160, 235, .18);
    }


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

    .services-page__detail--ecommerce
    .services-page__detail-inner {

        position: relative;

        width: calc(100% - 120px);
        max-width: 1420px;

        min-height: 470px;

        margin: 0 auto;

        display: grid;
        grid-template-columns: 55% 45%;

        align-items: stretch;
    }


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

    .services-page__detail--ecommerce
    .services-page__detail-visual {

        position: relative;

        height: 470px;

        overflow: visible;

        background: transparent;
    }


    .services-page__detail--ecommerce
    .services-page__detail-visual > img {

        position: absolute;

        z-index: 1;

        top: 0;
        left: 0;

    
        height: 100%;

        max-width: none;

        object-fit: cover;
        object-position: 48% center;
    }


    /* =====================================================
       SMOOTH IMAGE -> BACKGROUND FADE
    ===================================================== */

    .services-page__detail--ecommerce
    .services-page__detail-visual::after {

        content: "";

        display: block;

        position: absolute;

        z-index: 3;

        top: 0;

        /*
         * Започва още вътре в изображението
         * и завършва в дясната колона.
         */
        left: 50%;

        width: calc(50% + 300px);
        height: 100%;

        pointer-events: none;

        background: linear-gradient(
            90deg,

            rgba(2, 9, 15, 0) 0%,

            rgba(2, 9, 15, .03) 10%,

            rgba(2, 9, 15, .08) 20%,

            rgba(2, 9, 15, .17) 30%,

            rgba(2, 9, 15, .30) 40%,

            rgba(2, 9, 15, .46) 50%,

            rgba(2, 9, 15, .63) 60%,

            rgba(2, 9, 15, .78) 70%,

            rgba(2, 9, 15, .89) 80%,

            rgba(2, 9, 15, .96) 90%,

            #02090f 100%
        );
    }


    .services-page__detail--ecommerce
    .services-page__detail-visual::before {
        display: none;
    }


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

    .services-page__detail--ecommerce
    .services-page__detail-content {

        position: relative;
        z-index: 10;

        display: flex;
        flex-direction: column;

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

        padding: 40px 20px 40px 120px;

        background: transparent;
    }


    /* =====================================================
       УСЛУГА 04
    ===================================================== */

    .services-page__detail--ecommerce
    .services-page__eyebrow {

        margin: 0 0 16px;

        color: #b8c2ca;

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

        line-height: 1;

        letter-spacing: .04em;
    }


    .services-page__detail--ecommerce
    .services-page__eyebrow::before {
        display: none;
    }


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

    .services-page__detail--ecommerce
    .services-page__detail-content h2 {

        margin: 0 0 18px;

        color: #fff;

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

        line-height: 1;

        letter-spacing: -.04em;

        text-transform: uppercase;
    }


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

    .services-page__detail--ecommerce
    .services-page__detail-description {

        width: 100%;
        max-width: 570px;

        margin: 0 0 18px;

        color: #bec5cb;

        font-size: 17px;
        font-weight: 500;

        line-height: 1.5;
    }


    /* =====================================================
       FEATURES - VERTICAL
    ===================================================== */

    .services-page__detail--ecommerce
    .services-page__features {

        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 9px;

        margin: 0 0 24px;
        padding: 0;

        list-style: none;
    }


    .services-page__detail--ecommerce
    .services-page__features li {

        display: flex;
        align-items: center;

        gap: 12px;

        color: #d5d9dd;

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

        line-height: 1.3;
    }


    .services-page__detail--ecommerce
    .services-page__features li img {

        width: 27px;
        height: 27px;

        flex: 0 0 27px;
    }


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

    .services-page__detail--ecommerce
    .services-page__button {

        width: 215px;
        min-width: 215px;
        min-height: 54px;

        padding: 0 15px 0 25px;

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

        border: 0;
        border-radius: 30px;

        background: linear-gradient(90deg, #2d61e7 0%, #244fc2 100%);

        box-shadow:
            0 0 10px rgba(0, 145, 255, .35),
            0 0 25px rgba(0, 145, 255, .16);

        color: #fff;

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

        line-height: 1;
        letter-spacing: .02em;

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


    .services-page__detail--ecommerce
    .services-page__button:hover {

        transform: translateY(-2px);

        box-shadow:
            0 0 14px rgba(0, 145, 255, .48),
            0 0 32px rgba(0, 145, 255, .24);
    }


    .services-page__detail--ecommerce
    .services-page__button-icon {

        width: 30px;
        height: 30px;

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

        background: transparent;
    }


    .services-page__detail--ecommerce
    .services-page__button-icon img {

        width: 15px;
        height: 15px;

        object-fit: contain;
    }

}

/* =========================================================
   FINAL CTA - LET'S CREATE SOMETHING GREAT
========================================================= */

@media (min-width: 901px) {

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

    .services-page__cta {
        position: relative;

        min-height: 285px;
        height: 285px;

        overflow: hidden;

        display: flex;
        align-items: center;

        background:
            radial-gradient(
                circle at 55% 50%,
                rgba(0, 104, 210, .08),
                transparent 45%
            ),
            #020a11;

        border-top: 1px solid rgba(40, 160, 235, .22);
        border-bottom: 1px solid rgba(40, 160, 235, .12);
    }


    /* =====================================================
       REMOVE OLD DUPLICATED EFFECTS
    ===================================================== */

    .services-page__cta::before,
    .services-page__cta::after {
        display: none !important;
        content: none !important;
    }


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

    .services-page__cta-inner {
        position: relative;
        z-index: 5;

        width: calc(100% - 150px);
        max-width: 1450px;

        height: 100%;

        margin: 0 auto;

        display: grid;

        grid-template-columns: 62% 38%;

        align-items: center;
    }


    /* =====================================================
       LEFT SIDE
    ===================================================== */

    .services-page__cta-content {
        position: relative;
        z-index: 5;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 0;
    }


    /* ГОТОВИ ЛИ СТЕ? */

    .services-page__cta-eyebrow {
        margin: 0 0 14px;

        color: #b7c0c8;

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

        line-height: 1;

        letter-spacing: .03em;

        text-transform: uppercase;
    }


    .services-page__cta-eyebrow::before,
    .services-page__cta-eyebrow::after {
        display: none !important;
        content: none !important;
    }


    /* =====================================================
       MAIN TITLE
    ===================================================== */

    .services-page__cta h2 {
        position: relative;

        margin: 0;

        max-width: 800px;

        color: #fff;

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

        line-height: 1.04;

        letter-spacing: -.035em;

        text-transform: uppercase;
    }


    .services-page__cta h2::before,
    .services-page__cta h2::after {
        display: none !important;
        content: none !important;
    }


    .services-page__cta h2 span {
        display: block;

 
    }


    /* =====================================================
       RIGHT SIDE
    ===================================================== */

    .services-page__cta-side {
        position: relative;
        z-index: 6;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        padding-left: 35px;
    }


    .services-page__cta-text {
        width: 100%;
        max-width: 420px;

        margin: 0 0 20px;

        color: #c4c9ce;

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

        line-height: 1.5;
    }


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

    .services-page__cta-button {
        width: 300px;
        min-width: 300px;

        height: 62px;

        padding: 0 18px 0 30px;

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

        border: 0;
        border-radius: 34px;

        background:
            linear-gradient(
                90deg,
                #0878e9 0%,
                #079cff 100%
            );

        box-shadow:
            0 0 12px rgba(0, 145, 255, .38),
            0 0 30px rgba(0, 145, 255, .18);

        color: #fff;

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

        letter-spacing: .01em;

        text-decoration: none;

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


    .services-page__cta-button:hover {
        transform: translateY(-2px);

        box-shadow:
            0 0 16px rgba(0, 145, 255, .50),
            0 0 36px rgba(0, 145, 255, .25);
    }


    .services-page__cta-button-icon {
        width: 34px;
        height: 34px;

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

        background: transparent;
    }


    .services-page__cta-button-icon img {
        width: 17px;
        height: 17px;

        object-fit: contain;
    }


    /* =====================================================
       BLUE WAVE
    ===================================================== */

    .services-page__cta-wave {
        position: absolute;

        z-index: 1;

        left: 0;
        right: 0;
        bottom: -35px;

        width: 100%;
        height: 150px;

        pointer-events: none;

        opacity: .75;
    }


    .services-page__cta-wave img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center bottom;
    }

}
.services-page__eyebrow {
    margin: 0 0 16px;
    color: #b8c2ca;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
}

.services-page__button {
        width: 234px;
    min-width: 215px;
    min-height: 54px;
    padding: 0 15px 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(90deg, #2d61e7 0%, #244fc2 100%);
    box-shadow: 0 0 10px rgba(0, 145, 255, .35), 0 0 25px rgba(0, 145, 255, .16);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease;
}

.services-page__button-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: none;
    transition: transform 0.25s ease;
}
.services-page__button-icon img {
    display: block;
    width: 16px;
    height: 16px;
}