/* ==========================================================
   HACKER WEB — SERVICES V3
   ========================================================== */

.hw-services3,
.hw-services3 *,
.hw-services3 *::before,
.hw-services3 *::after {
    box-sizing:
        border-box;
}


.hw-services3 {
    width:
        min(
            1280px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        45px 0
        80px;
}


.hw-services3 a {
    text-decoration:
        none;
}



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

.hw-services3-label {
    color:
        #717d83;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;
}


.hw-services3-section-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        27px;
}


.hw-services3-section-head h2 {
    margin:
        8px 0
        0;

    color:
        #f0f2f1;

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

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


.hw-services3-section-head h2 span {
    color:
        #a8ff00;
}


.hw-services3-section-head > p {
    max-width:
        465px;

    margin:
        0;

    color:
        #7c878d;

    font-size:
        13px;

    line-height:
        1.65;
}



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

.hw-services3-hero {
    padding:
        36px 0
        53px;

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


.hw-services3-kicker {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        27px;

    color:
        #909a9f;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .20em;
}


.hw-services3-kicker > span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #a8ff00;

    box-shadow:
        0 0 12px
        rgba(168,255,0,.5);
}


.hw-services3-hero-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(360px,.55fr);

    align-items:
        end;

    gap:
        70px;
}


.hw-services3-hero h1 {
    max-width:
        900px;

    margin:
        0;

    color:
        #f5f6f5;

    font-size:
        clamp(
            65px,
            7vw,
            110px
        );

    line-height:
        .88;

    letter-spacing:
        -.07em;

    font-weight:
        1000;
}


.hw-services3-hero h1 span {
    display:
        block;

    color:
        #a8ff00;
}


.hw-services3-hero-copy p {
    margin:
        0 0
        25px;

    color:
        #929ca1;

    font-size:
        15px;

    line-height:
        1.7;
}


.hw-services3-main-cta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    min-height:
        54px;

    padding:
        0 20px;

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

    border-radius:
        999px;

    color:
        #e8ecea;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .09em;
}


.hw-services3-main-cta b {
    color:
        #a8ff00;

    font-size:
        20px;

    font-weight:
        400;
}


.hw-services3-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        35px;
}


.hw-services3-tags span {
    padding:
        7px 10px;

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

    border-radius:
        999px;

    color:
        #5f6b71;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;
}



/* ==========================================================
   CORE SERVICES
   ========================================================== */

.hw-services3-core {
    padding:
        57px 0;
}


.hw-services3-grid {
    display:
        grid;

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

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

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


.hw-service3-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        355px;

    padding:
        25px;

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

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

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

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


.hw-service3-card:hover {
    background:
        rgba(255,255,255,.014);
}


.hw-service3-card::before {
    content:
        "";

    position:
        absolute;

    left:
        25px;

    top:
        -1px;

    width:
        38px;

    height:
        1px;

    background:
        rgba(168,255,0,.75);
}


.hw-service3-card-blue::before {
    background:
        #59c7ff;
}


.hw-service3-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        37px;
}


.hw-service3-top > span {
    color:
        #a8ff00;

    font-size:
        9px;

    font-weight:
        900;
}


.hw-service3-card-blue
.hw-service3-top > span {
    color:
        #59c7ff;
}


.hw-service3-top small {
    color:
        #505d63;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .10em;
}


.hw-service3-card h3 {
    margin:
        0 0
        13px;

    color:
        #eef1ef;

    font-size:
        24px;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


.hw-service3-card h3 span {
    display:
        block;

    margin-top:
        4px;

    color:
        #7e898e;

    font-size:
        14px;

    letter-spacing:
        -.01em;
}


.hw-service3-card p {
    margin:
        0;

    color:
        #778288;

    font-size:
        12px;

    line-height:
        1.65;
}


.hw-service3-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin:
        21px 0
        18px;
}


.hw-service3-meta span {
    padding:
        5px 7px;

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

    border-radius:
        99px;

    color:
        #59666c;

    font-size:
        7px;

    font-weight:
        750;
}


.hw-service3-card > a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        auto;

    padding-top:
        15px;

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

    color:
        #b9c1c0;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


.hw-service3-card > a b {
    color:
        #a8ff00;

    font-size:
        18px;

    font-weight:
        400;
}


.hw-service3-card-blue > a b {
    color:
        #59c7ff;
}



/* ==========================================================
   FULL CYCLE
   ========================================================== */

.hw-services3-cycle {
    padding:
        55px 0;

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

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


.hw-services3-flow {
    position:
        relative;

    display:
        grid;

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

    margin-top:
        37px;
}


.hw-services3-flow::before {
    content:
        "";

    position:
        absolute;

    left:
        3%;

    right:
        3%;

    top:
        20px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(168,255,0,.10),
            rgba(168,255,0,.42),
            rgba(89,199,255,.36)
        );
}


.hw-services3-flow-item {
    position:
        relative;

    z-index:
        1;

    padding:
        0 10px;
}


.hw-services3-flow-item > span {
    display:
        grid;

    place-items:
        center;

    width:
        40px;

    height:
        40px;

    margin-bottom:
        16px;

    border:
        1px solid
        rgba(168,255,0,.27);

    border-radius:
        50%;

    background:
        #05090b;

    color:
        #a8ff00;

    font-size:
        8px;

    font-weight:
        900;
}


.hw-services3-flow-item strong {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #dfe3e1;

    font-size:
        12px;
}


.hw-services3-flow-item small {
    display:
        block;

    max-width:
        120px;

    color:
        #626e74;

    font-size:
        9px;

    line-height:
        1.45;
}



/* ==========================================================
   STACK
   ========================================================== */

.hw-services3-stack {
    display:
        grid;

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

    gap:
        70px;

    padding:
        56px 0;
}


.hw-services3-stack h2 {
    margin:
        9px 0
        17px;

    color:
        #eef1ef;

    font-size:
        clamp(
            38px,
            3.8vw,
            57px
        );

    line-height:
        1;

    letter-spacing:
        -.055em;
}


.hw-services3-stack h2 span {
    display:
        block;

    color:
        #59c7ff;
}


.hw-services3-stack p {
    max-width:
        500px;

    margin:
        0;

    color:
        #7c878c;

    font-size:
        12px;

    line-height:
        1.65;
}


.hw-services3-stack-list {
    display:
        grid;

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

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

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


.hw-services3-stack-list span {
    display:
        flex;

    align-items:
        center;

    min-height:
        58px;

    padding:
        0 13px;

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

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

    color:
        #aeb6b9;

    font-size:
        10px;

    font-weight:
        700;
}



/* ==========================================================
   EXISTING PROJECT
   ========================================================== */

.hw-services3-existing {
    display:
        grid;

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

    gap:
        50px;

    padding:
        55px 0;

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

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


.hw-services3-existing-number {
    color:
        rgba(168,255,0,.14);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        36px;

    font-weight:
        900;

    letter-spacing:
        -.08em;
}


.hw-services3-existing h2 {
    margin:
        8px 0
        0;

    color:
        #f0f2f1;

    font-size:
        45px;

    line-height:
        .98;

    letter-spacing:
        -.055em;
}


.hw-services3-existing h2 span {
    display:
        block;

    color:
        #a8ff00;
}


.hw-services3-existing p {
    margin:
        0 0
        18px;

    color:
        #7e898f;

    font-size:
        12px;

    line-height:
        1.65;
}


.hw-services3-existing ul {
    display:
        grid;

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

    gap:
        8px 20px;

    margin:
        0 0
        25px;

    padding:
        0;

    list-style:
        none;
}


.hw-services3-existing li {
    position:
        relative;

    padding-left:
        14px;

    color:
        #aeb6b9;

    font-size:
        10px;

    line-height:
        1.45;
}


.hw-services3-existing li::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        .55em;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #59c7ff;
}


.hw-services3-existing a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        45px;

    padding-bottom:
        7px;

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

    color:
        #dce1df;

    font-size:
        9px;

    font-weight:
        900;
}


.hw-services3-existing a b {
    color:
        #59c7ff;

    font-size:
        18px;

    font-weight:
        400;
}



/* ==========================================================
   FAQ
   ========================================================== */

.hw-services3-faq {
    padding:
        55px 0;
}


.hw-services3-faq-list {
    border-top:
        1px solid
        rgba(255,255,255,.075);
}


.hw-services3-faq details {
    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.hw-services3-faq summary {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    min-height:
        68px;

    cursor:
        pointer;

    list-style:
        none;

    color:
        #dce1df;

    font-size:
        14px;

    font-weight:
        700;
}


.hw-services3-faq summary::-webkit-details-marker {
    display:
        none;
}


.hw-services3-faq summary span {
    color:
        #a8ff00;

    font-size:
        19px;

    font-weight:
        400;

    transition:
        transform .2s ease;
}


.hw-services3-faq details[open]
summary span {
    transform:
        rotate(45deg);
}


.hw-services3-faq details p {
    max-width:
        760px;

    margin:
        -4px 0
        22px;

    color:
        #748087;

    font-size:
        12px;

    line-height:
        1.7;
}



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

.hw-services3-final {
    display:
        grid;

    grid-template-columns:
        1fr
        minmax(350px,.45fr);

    align-items:
        end;

    gap:
        65px;

    padding:
        52px 0;

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

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


.hw-services3-final h2 {
    margin:
        8px 0
        0;

    color:
        #f2f4f3;

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

    line-height:
        .95;

    letter-spacing:
        -.06em;
}


.hw-services3-final h2 span {
    display:
        block;

    color:
        #a8ff00;
}


.hw-services3-final p {
    margin:
        0 0
        18px;

    color:
        #808b90;

    font-size:
        12px;

    line-height:
        1.6;
}


.hw-services3-final a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        54px;

    padding:
        0 20px;

    border-radius:
        999px;

    background:
        #a8ff00;

    color:
        #050706;

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .08em;
}


.hw-services3-final a b {
    font-size:
        21px;

    font-weight:
        400;
}



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

@media (max-width: 1000px) {

    .hw-services3 {
        width:
            min(
                760px,
                calc(100% - 30px)
            );
    }


    .hw-services3-hero-grid,
    .hw-services3-stack,
    .hw-services3-final {
        grid-template-columns:
            1fr;
    }


    .hw-services3-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .hw-services3-flow {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        gap:
            26px 0;
    }


    .hw-services3-flow::before {
        display:
            none;
    }


    .hw-services3-existing {
        grid-template-columns:
            .35fr
            1fr;
    }


    .hw-services3-existing > div:last-child {
        grid-column:
            2;
    }

}



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

@media (max-width: 650px) {

    .hw-services3 {
        width:
            calc(100% - 20px);

        padding:
            28px 0
            60px;
    }


    .hw-services3-hero {
        padding:
            26px 0
            40px;
    }


    .hw-services3-kicker {
        margin-bottom:
            21px;

        font-size:
            9px;
    }


    .hw-services3-hero-grid {
        gap:
            27px;
    }


    .hw-services3-hero h1 {
        font-size:
            clamp(
                51px,
                15.5vw,
                68px
            );
    }


    .hw-services3-hero-copy p {
        font-size:
            14px;
    }


    .hw-services3-tags {
        margin-top:
            25px;
    }


    .hw-services3-core,
    .hw-services3-cycle,
    .hw-services3-stack,
    .hw-services3-existing,
    .hw-services3-faq {
        padding:
            40px 0;
    }


    .hw-services3-section-head {
        display:
            block;

        margin-bottom:
            22px;
    }


    .hw-services3-section-head h2 {
        margin-bottom:
            14px;

        font-size:
            39px;
    }


    .hw-services3-section-head > p {
        font-size:
            12px;
    }


    .hw-services3-grid {
        grid-template-columns:
            1fr;
    }


    .hw-service3-card {
        min-height:
            300px;

        padding:
            21px;
    }


    .hw-service3-card::before {
        left:
            21px;
    }


    .hw-service3-top {
        margin-bottom:
            28px;
    }


    .hw-service3-card h3 {
        font-size:
            22px;
    }


    .hw-service3-card p {
        font-size:
            12px;
    }


    .hw-services3-flow {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            24px 8px;
    }


    .hw-services3-flow-item {
        padding:
            0;
    }


    .hw-services3-flow-item:last-child {
        grid-column:
            1 / -1;
    }


    .hw-services3-stack {
        gap:
            28px;
    }


    .hw-services3-stack h2 {
        font-size:
            39px;
    }


    .hw-services3-stack-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .hw-services3-existing {
        grid-template-columns:
            1fr;

        gap:
            23px;
    }


    .hw-services3-existing > div:last-child {
        grid-column:
            auto;
    }


    .hw-services3-existing-number {
        font-size:
            29px;
    }


    .hw-services3-existing h2 {
        font-size:
            39px;
    }


    .hw-services3-existing ul {
        grid-template-columns:
            1fr;
    }


    .hw-services3-faq summary {
        min-height:
            61px;

        font-size:
            13px;
    }


    .hw-services3-faq details p {
        font-size:
            11px;
    }


    .hw-services3-final {
        gap:
            25px;

        padding:
            42px 0;
    }


    .hw-services3-final h2 {
        font-size:
            42px;
    }

}


/* ==========================================================
   END SERVICES V3
   ========================================================== */




/* HACKER_WEB_SERVICES_TYPOGRAPHY_V4 */


/* ==========================================================
   GENERAL SECTION TYPOGRAPHY
   ========================================================== */

.hw-services3-label {
    font-size:
        10px !important;

    letter-spacing:
        .17em !important;
}


.hw-services3-section-head h2 {
    font-size:
        clamp(
            45px,
            4.4vw,
            66px
        ) !important;
}


.hw-services3-section-head > p {
    max-width:
        500px !important;

    font-size:
        15px !important;

    line-height:
        1.68 !important;

    color:
        #929ca1 !important;
}



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

.hw-services3-kicker {
    font-size:
        11px !important;
}


.hw-services3-hero-copy p {
    font-size:
        16px !important;

    line-height:
        1.72 !important;

    color:
        #a1a9ad !important;
}


.hw-services3-main-cta {
    font-size:
        11px !important;
}


.hw-services3-tags span {
    padding:
        8px 11px !important;

    font-size:
        9px !important;
}



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

.hw-service3-card {
    min-height:
        385px !important;

    padding:
        27px !important;
}


.hw-service3-card::before {
    left:
        27px !important;
}


.hw-service3-top {
    margin-bottom:
        35px !important;
}


.hw-service3-top > span {
    font-size:
        11px !important;
}


.hw-service3-top small {
    font-size:
        9px !important;

    letter-spacing:
        .11em !important;
}


/*
 * MAIN SERVICE TITLE
 */

.hw-service3-card h3 {
    margin-bottom:
        14px !important;

    font-size:
        27px !important;

    line-height:
        1.08 !important;
}


.hw-service3-card h3 span {
    margin-top:
        5px !important;

    font-size:
        16px !important;

    line-height:
        1.25 !important;

    color:
        #929ca1 !important;
}


/*
 * THIS IS THE TEXT YOU MARKED
 */

.hw-service3-card p {
    max-width:
        95% !important;

    font-size:
        15px !important;

    line-height:
        1.68 !important;

    color:
        #929ca1 !important;
}


/*
 * META TAGS
 */

.hw-service3-meta {
    gap:
        6px !important;

    margin:
        22px 0
        20px !important;
}


.hw-service3-meta span {
    padding:
        6px 9px !important;

    font-size:
        9px !important;

    line-height:
        1.2 !important;

    color:
        #778288 !important;
}


/*
 * CTA AT BOTTOM OF EACH SERVICE
 */

.hw-service3-card > a {
    padding-top:
        17px !important;

    font-size:
        11px !important;

    letter-spacing:
        .045em !important;
}


.hw-service3-card > a b {
    font-size:
        20px !important;
}



/* ==========================================================
   FULL CYCLE
   ========================================================== */

.hw-services3-flow-item > span {
    width:
        43px !important;

    height:
        43px !important;

    font-size:
        10px !important;
}


.hw-services3-flow-item strong {
    margin-bottom:
        6px !important;

    font-size:
        14px !important;
}


.hw-services3-flow-item small {
    max-width:
        145px !important;

    font-size:
        11px !important;

    line-height:
        1.5 !important;

    color:
        #778288 !important;
}



/* ==========================================================
   TECHNOLOGY
   ========================================================== */

.hw-services3-stack h2 {
    font-size:
        clamp(
            43px,
            4vw,
            61px
        ) !important;
}


.hw-services3-stack p {
    max-width:
        530px !important;

    font-size:
        14px !important;

    line-height:
        1.7 !important;

    color:
        #909a9f !important;
}


.hw-services3-stack-list span {
    min-height:
        62px !important;

    padding:
        0 15px !important;

    font-size:
        12px !important;

    color:
        #bec5c3 !important;
}



/* ==========================================================
   EXISTING PROJECT / 404 -> 200
   ========================================================== */

.hw-services3-existing-number {
    font-size:
        40px !important;
}


.hw-services3-existing h2 {
    font-size:
        49px !important;
}


.hw-services3-existing p {
    font-size:
        14px !important;

    line-height:
        1.7 !important;

    color:
        #929ca1 !important;
}


.hw-services3-existing li {
    font-size:
        12px !important;

    line-height:
        1.55 !important;
}


.hw-services3-existing a {
    font-size:
        11px !important;
}



/* ==========================================================
   FAQ
   ========================================================== */

.hw-services3-faq summary {
    min-height:
        73px !important;

    font-size:
        16px !important;
}


.hw-services3-faq summary span {
    font-size:
        22px !important;
}


.hw-services3-faq details p {
    max-width:
        820px !important;

    font-size:
        14px !important;

    line-height:
        1.72 !important;

    color:
        #899399 !important;
}



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

.hw-services3-final h2 {
    font-size:
        clamp(
            50px,
            5.2vw,
            76px
        ) !important;
}


.hw-services3-final p {
    font-size:
        14px !important;

    line-height:
        1.65 !important;

    color:
        #929ca1 !important;
}


.hw-services3-final a {
    min-height:
        57px !important;

    font-size:
        11px !important;
}



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

@media
(min-width: 651px)
and
(max-width: 1000px) {

    .hw-service3-card p {
        font-size:
            14px !important;
    }


    .hw-service3-card h3 {
        font-size:
            25px !important;
    }


    .hw-services3-section-head > p {
        font-size:
            14px !important;
    }

}



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

@media (max-width: 650px) {

    .hw-services3-label {
        font-size:
            10px !important;
    }


    .hw-services3-kicker {
        font-size:
            10px !important;
    }


    .hw-services3-hero-copy p {
        font-size:
            15px !important;

        line-height:
            1.68 !important;
    }


    .hw-services3-main-cta {
        font-size:
            11px !important;
    }


    .hw-services3-tags span {
        font-size:
            9px !important;
    }


    /* SECTION INTRO */

    .hw-services3-section-head h2 {
        font-size:
            42px !important;
    }


    .hw-services3-section-head > p {
        font-size:
            14px !important;

        line-height:
            1.65 !important;
    }


    /* SERVICES */

    .hw-service3-card {
        min-height:
            325px !important;

        padding:
            22px !important;
    }


    .hw-service3-card::before {
        left:
            22px !important;
    }


    .hw-service3-top {
        margin-bottom:
            27px !important;
    }


    .hw-service3-top > span {
        font-size:
            11px !important;
    }


    .hw-service3-top small {
        font-size:
            9px !important;
    }


    .hw-service3-card h3 {
        font-size:
            25px !important;
    }


    .hw-service3-card h3 span {
        font-size:
            15px !important;
    }


    .hw-service3-card p {
        max-width:
            100% !important;

        font-size:
            14px !important;

        line-height:
            1.66 !important;
    }


    .hw-service3-meta span {
        font-size:
            9px !important;
    }


    .hw-service3-card > a {
        font-size:
            11px !important;
    }


    /* FULL CYCLE */

    .hw-services3-flow-item strong {
        font-size:
            13px !important;
    }


    .hw-services3-flow-item small {
        font-size:
            10px !important;
    }


    /* STACK */

    .hw-services3-stack h2 {
        font-size:
            42px !important;
    }


    .hw-services3-stack p {
        font-size:
            14px !important;
    }


    .hw-services3-stack-list span {
        min-height:
            58px !important;

        font-size:
            11px !important;
    }


    /* EXISTING */

    .hw-services3-existing-number {
        font-size:
            34px !important;
    }


    .hw-services3-existing h2 {
        font-size:
            42px !important;
    }


    .hw-services3-existing p {
        font-size:
            14px !important;
    }


    .hw-services3-existing li {
        font-size:
            12px !important;
    }


    /* FAQ */

    .hw-services3-faq summary {
        min-height:
            65px !important;

        font-size:
            14px !important;
    }


    .hw-services3-faq details p {
        font-size:
            13px !important;

        line-height:
            1.68 !important;
    }


    /* FINAL */

    .hw-services3-final h2 {
        font-size:
            44px !important;
    }


    .hw-services3-final p {
        font-size:
            14px !important;
    }


    .hw-services3-final a {
        font-size:
            11px !important;
    }

}


/* /HACKER_WEB_SERVICES_TYPOGRAPHY_V4 */




/* HACKER_WEB_MONTHLY_SUPPORT_CSS_V1 */


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

.hw-supportplans {
    padding:
        58px 0;

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

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



/* ==========================================================
   CONTRACT / FOP
   ========================================================== */

.hw-supportplans-contract {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        .65fr
        1.55fr
        .75fr;

    gap:
        35px;

    align-items:
        center;

    margin-bottom:
        55px;

    padding:
        24px 26px;

    border:
        1px solid
        rgba(89,199,255,.13);

    background:
        linear-gradient(
            110deg,
            rgba(89,199,255,.025),
            rgba(168,255,0,.018),
            rgba(255,255,255,.005)
        );
}


.hw-supportplans-contract::before {
    content:
        "";

    position:
        absolute;

    left:
        26px;

    top:
        -1px;

    width:
        76px;

    height:
        1px;

    background:
        #59c7ff;
}


.hw-supportplans-contract-code {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #69767c;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .12em;
}


.hw-supportplans-contract-code span {
    width:
        6px;

    height:
        6px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        #59c7ff;

    box-shadow:
        0 0 10px
        rgba(89,199,255,.40);
}


.hw-supportplans-contract-main strong {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #edf0ee;

    font-size:
        23px;

    line-height:
        1.12;

    letter-spacing:
        -.025em;
}


.hw-supportplans-contract-main strong em {
    color:
        #a8ff00;

    font-style:
        normal;
}


.hw-supportplans-contract-main p {
    max-width:
        640px;

    margin:
        0;

    color:
        #879197;

    font-size:
        13px;

    line-height:
        1.65;
}


.hw-supportplans-contract-main p b {
    color:
        #b7bfbd;

    font-weight:
        650;
}


.hw-supportplans-contract-meta {
    display:
        grid;

    gap:
        5px;
}


.hw-supportplans-contract-meta span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        7px 0;

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

    color:
        #536168;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;
}


.hw-supportplans-contract-meta span b {
    color:
        #59c7ff;

    font-size:
        8px;
}



/* ==========================================================
   HEAD
   ========================================================== */

.hw-supportplans-head {
    display:
        grid;

    grid-template-columns:
        1fr
        minmax(320px,.48fr);

    align-items:
        end;

    gap:
        65px;

    margin-bottom:
        30px;
}


.hw-supportplans-head h2 {
    margin:
        9px 0
        0;

    color:
        #eef1ef;

    font-size:
        clamp(
            45px,
            4.6vw,
            68px
        );

    line-height:
        .96;

    letter-spacing:
        -.055em;
}


.hw-supportplans-head h2 span {
    display:
        block;

    color:
        #a8ff00;
}


.hw-supportplans-intro p {
    margin:
        0 0
        9px;

    color:
        #929ca1;

    font-size:
        14px;

    line-height:
        1.65;
}


.hw-supportplans-intro p strong {
    color:
        #d2d7d5;
}


.hw-supportplans-intro small {
    color:
        #5f6b71;

    font-size:
        9px;

    letter-spacing:
        .04em;
}



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

.hw-supportplans-cards {
    display:
        grid;

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

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

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


.hw-supportplan {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        610px;

    padding:
        28px;

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

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

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


.hw-supportplan::before {
    content:
        "";

    position:
        absolute;

    left:
        28px;

    top:
        -1px;

    width:
        45px;

    height:
        1px;

    background:
        #a8ff00;
}


.hw-supportplan-business {
    background:
        linear-gradient(
            180deg,
            rgba(89,199,255,.026),
            rgba(255,255,255,.004)
        );
}


.hw-supportplan-business::before {
    width:
        74px;

    background:
        #59c7ff;
}


.hw-supportplan-vip::before {
    width:
        95px;

    background:
        linear-gradient(
            90deg,
            #59c7ff,
            #a8ff00
        );
}


.hw-supportplan-badge {
    position:
        absolute;

    right:
        24px;

    top:
        -12px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(89,199,255,.32);

    background:
        #05090b;

    color:
        #59c7ff;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.hw-supportplan-top {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        30px;
}


.hw-supportplan-top small {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #536168;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .10em;
}


.hw-supportplan h3 {
    margin:
        0;

    color:
        #eff2f0;

    font-size:
        26px;

    line-height:
        1;

    letter-spacing:
        -.035em;
}


.hw-supportplan-status {
    color:
        #627078;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .10em;
}


.hw-supportplan-business
.hw-supportplan-status {
    color:
        #59c7ff;
}


.hw-supportplan-vip
.hw-supportplan-status {
    color:
        #a8ff00;
}



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

.hw-supportplan-price {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        11px;

    margin-bottom:
        22px;
}


.hw-supportplan-price > strong {
    color:
        #f2f4f2;

    font-size:
        49px;

    line-height:
        .88;

    font-weight:
        900;

    letter-spacing:
        -.06em;
}


.hw-supportplan-price > div {
    display:
        grid;

    gap:
        2px;
}


.hw-supportplan-price b {
    color:
        #a8ff00;

    font-size:
        10px;
}


.hw-supportplan-business
.hw-supportplan-price b {
    color:
        #59c7ff;
}


.hw-supportplan-price span {
    color:
        #59666c;

    font-size:
        8px;
}



/* ==========================================================
   HOURS
   ========================================================== */

.hw-supportplan-hours {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    min-height:
        48px;

    margin-bottom:
        20px;

    padding:
        0 13px;

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

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


.hw-supportplan-hours span {
    color:
        #57646b;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .09em;
}


.hw-supportplan-hours strong {
    color:
        #dce1df;

    font-size:
        13px;
}



/* ==========================================================
   TEXT
   ========================================================== */

.hw-supportplan-desc {
    margin:
        0 0
        20px;

    color:
        #889399;

    font-size:
        13px;

    line-height:
        1.62;
}


.hw-supportplan ul {
    display:
        grid;

    gap:
        10px;

    margin:
        0 0
        28px;

    padding:
        0;

    list-style:
        none;
}


.hw-supportplan li {
    position:
        relative;

    padding-left:
        16px;

    color:
        #a6afb2;

    font-size:
        11px;

    line-height:
        1.52;
}


.hw-supportplan li::before {
    content:
        "✓";

    position:
        absolute;

    left:
        0;

    top:
        0;

    color:
        #a8ff00;

    font-size:
        9px;
}


.hw-supportplan-business li::before {
    color:
        #59c7ff;
}



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

.hw-supportplan > a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        50px;

    margin-top:
        auto;

    padding:
        0 17px;

    border:
        1px solid
        rgba(168,255,0,.28);

    border-radius:
        999px;

    color:
        #dde2df;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .07em;
}


.hw-supportplan > a b {
    color:
        #a8ff00;

    font-size:
        19px;

    font-weight:
        400;
}


.hw-supportplan-business > a {
    border-color:
        rgba(89,199,255,.32);
}


.hw-supportplan-business > a b {
    color:
        #59c7ff;
}


.hw-supportplan-vip > a {
    border-color:
        rgba(168,255,0,.40);
}



/* ==========================================================
   COMPARISON
   ========================================================== */

.hw-supportcompare {
    margin-top:
        35px;

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

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


.hw-supportcompare-head,
.hw-supportcompare-row {
    display:
        grid;

    grid-template-columns:
        minmax(320px,2fr)
        repeat(
            3,
            minmax(120px,.65fr)
        );
}


.hw-supportcompare-head > *,
.hw-supportcompare-row > * {
    display:
        flex;

    align-items:
        center;

    min-height:
        49px;

    padding:
        9px 14px;

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

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


.hw-supportcompare-head > div {
    color:
        #66737a;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.hw-supportcompare-head strong {
    justify-content:
        center;

    color:
        #cfd5d3;

    font-size:
        9px;

    letter-spacing:
        .08em;
}


.hw-supportcompare-head strong:nth-child(3) {
    color:
        #59c7ff;
}


.hw-supportcompare-head strong:nth-child(4) {
    color:
        #a8ff00;
}


.hw-supportcompare-row > div {
    color:
        #8f999e;

    font-size:
        11px;

    line-height:
        1.45;
}


.hw-supportcompare-row > span {
    justify-content:
        center;

    color:
        #a8ff00;

    font-size:
        12px;

    font-weight:
        800;
}


.hw-supportcompare-row > span:has(+ span) {
    /* intentionally minimal */
}


.hw-supportcompare-row > span:nth-child(2) {
    color:
        #879197;
}


.hw-supportcompare-row > span:nth-child(3) {
    color:
        #59c7ff;
}


.hw-supportcompare-row > span:nth-child(4) {
    color:
        #a8ff00;
}


.hw-supportcompare-hours > div,
.hw-supportcompare-price > div {
    color:
        #d2d7d5;

    font-weight:
        800;
}


.hw-supportcompare-hours > span {
    font-size:
        16px;
}


.hw-supportcompare-price {
    background:
        rgba(255,255,255,.012);
}


.hw-supportcompare-price > div {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;
}


.hw-supportcompare-price small {
    color:
        #59666c;

    font-size:
        8px;

    font-weight:
        500;
}


.hw-supportcompare-price > span {
    font-size:
        13px;
}



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

.hw-supportplans-note {
    display:
        grid;

    grid-template-columns:
        .4fr
        1fr
        .45fr;

    gap:
        30px;

    align-items:
        center;

    margin-top:
        24px;

    padding-top:
        20px;

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


.hw-supportplans-note > span {
    color:
        #59c7ff;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.hw-supportplans-note p {
    margin:
        0;

    color:
        #69767c;

    font-size:
        10px;

    line-height:
        1.55;
}


.hw-supportplans-note b {
    color:
        #4f5b61;

    font-size:
        8px;

    text-align:
        right;

    letter-spacing:
        .10em;
}



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

@media (max-width: 1000px) {

    .hw-supportplans-contract {
        grid-template-columns:
            1fr
            2fr;
    }


    .hw-supportplans-contract-meta {
        grid-column:
            1 / -1;

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


    .hw-supportplans-head {
        grid-template-columns:
            1fr;
        gap:
            20px;
    }


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


    .hw-supportplan {
        min-height:
            0;
    }


    .hw-supportcompare-head,
    .hw-supportcompare-row {
        grid-template-columns:
            minmax(250px,1.7fr)
            repeat(
                3,
                minmax(100px,.65fr)
            );
    }

}



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

@media (max-width: 650px) {

    .hw-supportplans {
        padding:
            41px 0;
    }


    .hw-supportplans-contract {
        display:
            block;

        margin-bottom:
            39px;

        padding:
            20px 17px;
    }


    .hw-supportplans-contract-code {
        margin-bottom:
            18px;

        font-size:
            8px;
    }


    .hw-supportplans-contract-main strong {
        font-size:
            22px;
    }


    .hw-supportplans-contract-main p {
        font-size:
            13px;

        line-height:
            1.62;
    }


    .hw-supportplans-contract-meta {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0;

        margin-top:
            17px;
    }


    .hw-supportplans-head {
        margin-bottom:
            24px;
    }


    .hw-supportplans-head h2 {
        font-size:
            42px;
    }


    .hw-supportplans-intro p {
        font-size:
            13px;
    }


    .hw-supportplans-cards {
        border-left:
            0;
    }


    .hw-supportplan {
        min-height:
            0;

        padding:
            23px 20px;

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


    .hw-supportplan::before {
        left:
            20px;
    }


    .hw-supportplan h3 {
        font-size:
            25px;
    }


    .hw-supportplan-price > strong {
        font-size:
            46px;
    }


    .hw-supportplan-desc {
        font-size:
            13px;
    }


    .hw-supportplan li {
        font-size:
            12px;
    }


    .hw-supportplan > a {
        min-height:
            51px;

        font-size:
            10px;
    }


    /*
     * On mobile cards already contain
     * the full package information.
     * No ugly horizontal comparison table.
     */

    .hw-supportcompare {
        display:
            none;
    }


    .hw-supportplans-note {
        display:
            block;
    }


    .hw-supportplans-note p {
        margin:
            9px 0;

        font-size:
            11px;
    }


    .hw-supportplans-note b {
        display:
            block;

        text-align:
            left;
    }

}


/* /HACKER_WEB_MONTHLY_SUPPORT_CSS_V1 */




/* HACKER_WEB_SUPPORT_COMPARE_TYPO_V2 */


/* ==========================================================
   COMPARISON TABLE — BIGGER TYPOGRAPHY
   ========================================================== */

.hw-supportcompare {
    margin-top:
        38px !important;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.hw-supportcompare-head > * {
    min-height:
        59px !important;

    padding:
        12px 16px !important;
}


.hw-supportcompare-head > div {
    font-size:
        11px !important;

    line-height:
        1.35 !important;

    letter-spacing:
        .10em !important;
}


.hw-supportcompare-head strong {
    font-size:
        12px !important;

    line-height:
        1.25 !important;

    letter-spacing:
        .055em !important;
}


/* ----------------------------------------------------------
   NORMAL ROWS
   ---------------------------------------------------------- */

.hw-supportcompare-row > * {
    min-height:
        60px !important;

    padding:
        12px 16px !important;
}


/*
 * MAIN SERVICE DESCRIPTION
 */

.hw-supportcompare-row > div {
    font-size:
        14px !important;

    line-height:
        1.48 !important;

    color:
        #a0aaae !important;
}


/*
 * CHECKS / DASHES
 */

.hw-supportcompare-row > span {
    font-size:
        18px !important;

    line-height:
        1 !important;

    font-weight:
        850 !important;
}


/* Standard */

.hw-supportcompare-row > span:nth-child(2) {
    color:
        #a5afb3 !important;
}


/* Business */

.hw-supportcompare-row > span:nth-child(3) {
    color:
        #59c7ff !important;
}


/* VIP */

.hw-supportcompare-row > span:nth-child(4) {
    color:
        #a8ff00 !important;
}


/* ----------------------------------------------------------
   HOURS ROW
   ---------------------------------------------------------- */

.hw-supportcompare-hours > * {
    min-height:
        66px !important;
}


.hw-supportcompare-hours > div {
    color:
        #f0f2f1 !important;

    font-size:
        14px !important;

    font-weight:
        850 !important;
}


.hw-supportcompare-hours > span {
    font-size:
        22px !important;

    font-weight:
        900 !important;
}


/* ----------------------------------------------------------
   PRICE ROW
   ---------------------------------------------------------- */

.hw-supportcompare-price > * {
    min-height:
        68px !important;
}


.hw-supportcompare-price > div {
    color:
        #f0f2f1 !important;

    font-size:
        14px !important;

    font-weight:
        850 !important;
}


.hw-supportcompare-price > div small {
    font-size:
        10px !important;

    color:
        #778288 !important;
}


.hw-supportcompare-price > span {
    font-size:
        17px !important;

    font-weight:
        950 !important;
}


/* ----------------------------------------------------------
   Slightly stronger row separation
   ---------------------------------------------------------- */

.hw-supportcompare-head > *,
.hw-supportcompare-row > * {
    border-color:
        rgba(255,255,255,.095) !important;
}


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

@media
(min-width: 651px)
and
(max-width: 1000px) {

    .hw-supportcompare-head,
    .hw-supportcompare-row {
        grid-template-columns:
            minmax(250px,1.7fr)
            repeat(
                3,
                minmax(105px,.65fr)
            ) !important;
    }


    .hw-supportcompare-row > div {
        font-size:
            13px !important;
    }


    .hw-supportcompare-head strong {
        font-size:
            11px !important;
    }


    .hw-supportcompare-row > span {
        font-size:
            17px !important;
    }


    .hw-supportcompare-price > span {
        font-size:
            15px !important;
    }

}


/* /HACKER_WEB_SUPPORT_COMPARE_TYPO_V2 */




/* HACKER_WEB_SUPPORT_CARDS_SMALLTEXT_V3 */

/* =========================================================
   SUPPORT PACKAGES — BIGGER SMALL TEXT
   ========================================================= */

/* top tiny labels */
.hw-support-card .hw-support-card-kicker,
.hw-support-card .hw-support-card-meta,
.hw-support-card .hw-support-card-top small,
.hw-support-card .hw-support-card-top span,
.hw-support-card .hw-support-card-head small,
.hw-support-card .hw-support-card-head span,
.hw-support-card .hw-support-plan-kicker,
.hw-support-card .hw-support-plan-meta,
.hw-support-card .hw-support-plan-top small,
.hw-support-card .hw-support-plan-top span {
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .12em !important;
    font-weight: 700 !important;
    opacity: .95 !important;
}

/* price side text: грн / місяць */
.hw-support-card .hw-support-price small,
.hw-support-card .hw-support-price span,
.hw-support-card .hw-support-card-price small,
.hw-support-card .hw-support-card-price span,
.hw-support-card .hw-support-plan-price small,
.hw-support-card .hw-support-plan-price span {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* hours label */
.hw-support-card .hw-support-hours-label,
.hw-support-card .hw-support-hours small,
.hw-support-card .hw-support-card-hours small,
.hw-support-card .hw-support-plan-hours-label,
.hw-support-card .hw-support-plan-hours small {
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .11em !important;
    font-weight: 700 !important;
    opacity: .92 !important;
}

/* hours value */
.hw-support-card .hw-support-hours-value,
.hw-support-card .hw-support-hours strong,
.hw-support-card .hw-support-card-hours strong,
.hw-support-card .hw-support-plan-hours-value,
.hw-support-card .hw-support-plan-hours strong {
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
}

/* card description */
.hw-support-card p,
.hw-support-card .hw-support-desc,
.hw-support-card .hw-support-card-desc,
.hw-support-card .hw-support-plan-desc {
    font-size: 18px !important;
    line-height: 1.65 !important;
}

/* feature list */
.hw-support-card li,
.hw-support-card .hw-support-features li,
.hw-support-card .hw-support-card-features li,
.hw-support-card .hw-support-plan-features li {
    font-size: 16px !important;
    line-height: 1.65 !important;
}

/* bottom button text */
.hw-support-card .hw-support-action,
.hw-support-card .hw-support-btn,
.hw-support-card .hw-support-card-action,
.hw-support-card .hw-support-plan-action,
.hw-support-card .hw-support-plan-btn {
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: .05em !important;
    font-weight: 800 !important;
}

/* slightly larger top names STANDARD / BUSINESS / VIP */
.hw-support-card h3,
.hw-support-card .hw-support-title,
.hw-support-card .hw-support-card-title,
.hw-support-card .hw-support-plan-title {
    font-size: 28px !important;
    line-height: 1.08 !important;
}

/* mobile */
@media (max-width: 700px) {

    .hw-support-card .hw-support-card-kicker,
    .hw-support-card .hw-support-card-meta,
    .hw-support-card .hw-support-card-top small,
    .hw-support-card .hw-support-card-top span,
    .hw-support-card .hw-support-card-head small,
    .hw-support-card .hw-support-card-head span,
    .hw-support-card .hw-support-plan-kicker,
    .hw-support-card .hw-support-plan-meta,
    .hw-support-card .hw-support-plan-top small,
    .hw-support-card .hw-support-plan-top span {
        font-size: 11px !important;
    }

    .hw-support-card .hw-support-price small,
    .hw-support-card .hw-support-price span,
    .hw-support-card .hw-support-card-price small,
    .hw-support-card .hw-support-card-price span,
    .hw-support-card .hw-support-plan-price small,
    .hw-support-card .hw-support-plan-price span {
        font-size: 13px !important;
    }

    .hw-support-card p,
    .hw-support-card .hw-support-desc,
    .hw-support-card .hw-support-card-desc,
    .hw-support-card .hw-support-plan-desc {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .hw-support-card li,
    .hw-support-card .hw-support-features li,
    .hw-support-card .hw-support-card-features li,
    .hw-support-card .hw-support-plan-features li {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .hw-support-card .hw-support-hours-value,
    .hw-support-card .hw-support-hours strong,
    .hw-support-card .hw-support-card-hours strong,
    .hw-support-card .hw-support-plan-hours-value,
    .hw-support-card .hw-support-plan-hours strong {
        font-size: 24px !important;
    }

    .hw-support-card h3,
    .hw-support-card .hw-support-title,
    .hw-support-card .hw-support-card-title,
    .hw-support-card .hw-support-plan-title {
        font-size: 24px !important;
    }
}

/* /HACKER_WEB_SUPPORT_CARDS_SMALLTEXT_V3 */




/* HACKER_WEB_SUPPORT_TOP_SMALLTEXT_V2 */

/* верхня службова полоска / дрібні підписи в support section */
.hw-support-topline,
.hw-support-topline *,
.hw-support-strip,
.hw-support-strip *,
.hw-support-meta-row,
.hw-support-meta-row *,
.hw-support-contract-row,
.hw-support-contract-row *,
.hw-support-legal-row,
.hw-support-legal-row *,
.hw-support-head-meta,
.hw-support-head-meta *,
.hw-support-note-row,
.hw-support-note-row *,
.hw-support-intro-meta,
.hw-support-intro-meta *,
.hw-support-faq-kicker,
.hw-support-faq-kicker *,
.hw-support-section-kicker,
.hw-support-section-kicker *,
.hw-support-mini-label,
.hw-support-mini-label *,
.hw-support-eyebrow,
.hw-support-eyebrow *,
.hw-support-topbar,
.hw-support-topbar *,
.hw-support-overline,
.hw-support-overline * {
    font-size: 14px !important;
    line-height: 1.45 !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
}

/* трохи сильніше для крайніх коротких підписів */
.hw-support-topline .left,
.hw-support-topline .center,
.hw-support-topline .right,
.hw-support-strip .left,
.hw-support-strip .center,
.hw-support-strip .right,
.hw-support-contract,
.hw-support-contract-type,
.hw-support-support-label,
.hw-support-faq-label,
.hw-support-overline-label {
    font-size: 15px !important;
    line-height: 1.45 !important;
    letter-spacing: .1em !important;
    font-weight: 700 !important;
}

/* якщо в блоці використані paragraph/span */
.hw-support-topline p,
.hw-support-topline span,
.hw-support-strip p,
.hw-support-strip span,
.hw-support-meta-row p,
.hw-support-meta-row span,
.hw-support-contract-row p,
.hw-support-contract-row span,
.hw-support-legal-row p,
.hw-support-legal-row span {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* mobile */
@media (max-width: 700px) {
    .hw-support-topline,
    .hw-support-topline *,
    .hw-support-strip,
    .hw-support-strip *,
    .hw-support-meta-row,
    .hw-support-meta-row *,
    .hw-support-contract-row,
    .hw-support-contract-row *,
    .hw-support-legal-row,
    .hw-support-legal-row *,
    .hw-support-head-meta,
    .hw-support-head-meta *,
    .hw-support-note-row,
    .hw-support-note-row *,
    .hw-support-intro-meta,
    .hw-support-intro-meta *,
    .hw-support-faq-kicker,
    .hw-support-faq-kicker *,
    .hw-support-section-kicker,
    .hw-support-section-kicker *,
    .hw-support-mini-label,
    .hw-support-mini-label *,
    .hw-support-eyebrow,
    .hw-support-eyebrow *,
    .hw-support-topbar,
    .hw-support-topbar *,
    .hw-support-overline,
    .hw-support-overline * {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .hw-support-topline .left,
    .hw-support-topline .center,
    .hw-support-topline .right,
    .hw-support-strip .left,
    .hw-support-strip .center,
    .hw-support-strip .right,
    .hw-support-contract,
    .hw-support-contract-type,
    .hw-support-support-label,
    .hw-support-faq-label,
    .hw-support-overline-label {
        font-size: 14px !important;
    }
}

/* /HACKER_WEB_SUPPORT_TOP_SMALLTEXT_V2 */




/* HACKER_WEB_SERVICES_GLOBAL_TYPOGRAPHY_V5 */


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

.hw-services3 {
    font-size:
        16px !important;
}


/* ==========================================================
   GLOBAL LABELS
   ========================================================== */

.hw-services3-label {
    font-size:
        12px !important;

    line-height:
        1.35 !important;

    letter-spacing:
        .15em !important;
}


.hw-services3-kicker {
    font-size:
        12px !important;

    line-height:
        1.35 !important;

    letter-spacing:
        .16em !important;
}


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

.hw-services3-hero-copy p {
    font-size:
        17px !important;

    line-height:
        1.70 !important;

    color:
        #a1aaae !important;
}


.hw-services3-main-cta {
    font-size:
        12px !important;
}


.hw-services3-tags span {
    padding:
        8px 12px !important;

    font-size:
        11px !important;

    line-height:
        1.2 !important;
}


/* ==========================================================
   SECTION INTRO TEXT
   ========================================================== */

.hw-services3-section-head > p {
    max-width:
        520px !important;

    font-size:
        16px !important;

    line-height:
        1.70 !important;

    color:
        #949ea3 !important;
}


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

.hw-service3-top > span {
    font-size:
        12px !important;
}


.hw-service3-top small {
    font-size:
        11px !important;

    line-height:
        1.3 !important;
}


.hw-service3-card h3 {
    font-size:
        29px !important;

    line-height:
        1.08 !important;
}


.hw-service3-card h3 span {
    font-size:
        17px !important;

    line-height:
        1.3 !important;
}


.hw-service3-card p {
    max-width:
        100% !important;

    font-size:
        16px !important;

    line-height:
        1.70 !important;

    color:
        #959fa4 !important;
}


.hw-service3-meta span {
    padding:
        6px 9px !important;

    font-size:
        11px !important;

    line-height:
        1.25 !important;

    color:
        #818b90 !important;
}


.hw-service3-card > a {
    font-size:
        12px !important;

    line-height:
        1.3 !important;
}


/* ==========================================================
   FULL CYCLE
   ========================================================== */

.hw-services3-flow-item > span {
    font-size:
        11px !important;
}


.hw-services3-flow-item strong {
    font-size:
        15px !important;

    line-height:
        1.3 !important;
}


.hw-services3-flow-item small {
    max-width:
        150px !important;

    font-size:
        12px !important;

    line-height:
        1.50 !important;

    color:
        #808a8f !important;
}


/* ==========================================================
   TECHNOLOGY STACK
   ========================================================== */

.hw-services3-stack p {
    font-size:
        15px !important;

    line-height:
        1.70 !important;

    color:
        #929ca1 !important;
}


.hw-services3-stack-list span {
    min-height:
        64px !important;

    font-size:
        13px !important;

    line-height:
        1.3 !important;

    color:
        #c0c7c5 !important;
}


/* ==========================================================
   404 -> 200 / EXISTING PROJECT
   ========================================================== */

.hw-services3-existing p {
    font-size:
        15px !important;

    line-height:
        1.70 !important;

    color:
        #949ea3 !important;
}


.hw-services3-existing li {
    font-size:
        13px !important;

    line-height:
        1.55 !important;

    color:
        #b3bbba !important;
}


.hw-services3-existing a {
    font-size:
        12px !important;
}


/* ==========================================================
   SUPPORT — CONTRACT / FOP
   ========================================================== */

.hw-supportplans-contract-code {
    font-size:
        11px !important;

    line-height:
        1.4 !important;
}


.hw-supportplans-contract-main strong {
    font-size:
        25px !important;
}


.hw-supportplans-contract-main p {
    font-size:
        15px !important;

    line-height:
        1.68 !important;

    color:
        #949ea3 !important;
}


.hw-supportplans-contract-meta span {
    font-size:
        10px !important;

    line-height:
        1.35 !important;
}


.hw-supportplans-contract-meta span b {
    font-size:
        11px !important;
}


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

.hw-supportplans-intro p {
    font-size:
        15px !important;

    line-height:
        1.68 !important;
}


.hw-supportplans-intro small {
    font-size:
        11px !important;

    line-height:
        1.45 !important;
}


/* ==========================================================
   SUPPORT PLAN CARDS
   ========================================================== */

.hw-supportplan-top small {
    font-size:
        10px !important;

    line-height:
        1.35 !important;
}


.hw-supportplan h3 {
    font-size:
        29px !important;
}


.hw-supportplan-status {
    font-size:
        10px !important;
}


.hw-supportplan-price b {
    font-size:
        12px !important;
}


.hw-supportplan-price span {
    font-size:
        10px !important;

    line-height:
        1.3 !important;
}


.hw-supportplan-hours span {
    font-size:
        10px !important;

    line-height:
        1.3 !important;
}


.hw-supportplan-hours strong {
    font-size:
        15px !important;
}


.hw-supportplan-desc {
    font-size:
        15px !important;

    line-height:
        1.68 !important;

    color:
        #929ca1 !important;
}


.hw-supportplan li {
    font-size:
        13px !important;

    line-height:
        1.60 !important;

    color:
        #b1b9b8 !important;
}


.hw-supportplan li::before {
    font-size:
        11px !important;
}


.hw-supportplan > a {
    font-size:
        11px !important;
}


/* ==========================================================
   SUPPORT COMPARISON TABLE
   ========================================================== */

.hw-supportcompare-head > div {
    font-size:
        11px !important;

    line-height:
        1.35 !important;
}


.hw-supportcompare-head strong {
    font-size:
        12px !important;

    line-height:
        1.3 !important;
}


.hw-supportcompare-row > div {
    font-size:
        14px !important;

    line-height:
        1.50 !important;

    color:
        #a5aeb2 !important;
}


.hw-supportcompare-row > span {
    font-size:
        18px !important;
}


.hw-supportcompare-hours > div {
    font-size:
        14px !important;
}


.hw-supportcompare-hours > span {
    font-size:
        22px !important;
}


.hw-supportcompare-price > div {
    font-size:
        14px !important;
}


.hw-supportcompare-price small {
    font-size:
        10px !important;
}


.hw-supportcompare-price > span {
    font-size:
        17px !important;
}


/* ==========================================================
   SUPPORT BOTTOM NOTE
   ========================================================== */

.hw-supportplans-note > span {
    font-size:
        11px !important;

    line-height:
        1.35 !important;
}


.hw-supportplans-note p {
    font-size:
        14px !important;

    line-height:
        1.60 !important;

    color:
        #879197 !important;
}


.hw-supportplans-note b {
    font-size:
        10px !important;
}


/* ==========================================================
   FAQ
   ========================================================== */

.hw-services3-faq summary {
    min-height:
        75px !important;

    font-size:
        17px !important;

    line-height:
        1.45 !important;
}


.hw-services3-faq summary span {
    font-size:
        23px !important;
}


.hw-services3-faq details p {
    max-width:
        850px !important;

    font-size:
        15px !important;

    line-height:
        1.72 !important;

    color:
        #929ca1 !important;
}


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

.hw-services3-final p {
    font-size:
        15px !important;

    line-height:
        1.68 !important;

    color:
        #949ea3 !important;
}


.hw-services3-final a {
    font-size:
        12px !important;
}


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

@media
(min-width: 651px)
and
(max-width: 1000px) {

    .hw-service3-card p {
        font-size:
            15px !important;
    }


    .hw-services3-section-head > p {
        font-size:
            15px !important;
    }


    .hw-supportplan-desc {
        font-size:
            14px !important;
    }


    .hw-supportplan li {
        font-size:
            13px !important;
    }


    .hw-supportcompare-row > div {
        font-size:
            13px !important;
    }

}


/* ==========================================================
   MOBILE — STILL LARGE ENOUGH TO READ
   ========================================================== */

@media (max-width: 650px) {

    .hw-services3-label,
    .hw-services3-kicker {
        font-size:
            10px !important;
    }


    .hw-services3-hero-copy p {
        font-size:
            16px !important;

        line-height:
            1.65 !important;
    }


    .hw-services3-tags span {
        font-size:
            10px !important;
    }


    .hw-services3-section-head > p {
        font-size:
            15px !important;

        line-height:
            1.65 !important;
    }


    .hw-service3-top > span,
    .hw-service3-top small {
        font-size:
            10px !important;
    }


    .hw-service3-card h3 {
        font-size:
            26px !important;
    }


    .hw-service3-card h3 span {
        font-size:
            16px !important;
    }


    .hw-service3-card p {
        font-size:
            15px !important;

        line-height:
            1.65 !important;
    }


    .hw-service3-meta span {
        font-size:
            10px !important;
    }


    .hw-service3-card > a {
        font-size:
            11px !important;
    }


    .hw-services3-flow-item strong {
        font-size:
            14px !important;
    }


    .hw-services3-flow-item small {
        font-size:
            11px !important;
    }


    .hw-services3-stack p {
        font-size:
            15px !important;
    }


    .hw-services3-stack-list span {
        font-size:
            12px !important;
    }


    .hw-services3-existing p {
        font-size:
            15px !important;
    }


    .hw-services3-existing li {
        font-size:
            13px !important;
    }


    .hw-supportplans-contract-code {
        font-size:
            10px !important;
    }


    .hw-supportplans-contract-main p {
        font-size:
            14px !important;
    }


    .hw-supportplans-contract-meta span {
        font-size:
            10px !important;
    }


    .hw-supportplans-intro p {
        font-size:
            14px !important;
    }


    .hw-supportplans-intro small {
        font-size:
            10px !important;
    }


    .hw-supportplan-top small,
    .hw-supportplan-status {
        font-size:
            10px !important;
    }


    .hw-supportplan-price b {
        font-size:
            12px !important;
    }


    .hw-supportplan-price span {
        font-size:
            10px !important;
    }


    .hw-supportplan-hours span {
        font-size:
            10px !important;
    }


    .hw-supportplan-hours strong {
        font-size:
            15px !important;
    }


    .hw-supportplan-desc {
        font-size:
            15px !important;

        line-height:
            1.62 !important;
    }


    .hw-supportplan li {
        font-size:
            13px !important;

        line-height:
            1.58 !important;
    }


    .hw-supportplan > a {
        font-size:
            11px !important;
    }


    .hw-supportplans-note > span {
        font-size:
            10px !important;
    }


    .hw-supportplans-note p {
        font-size:
            13px !important;
    }


    .hw-supportplans-note b {
        font-size:
            10px !important;
    }


    .hw-services3-faq summary {
        min-height:
            67px !important;

        font-size:
            15px !important;
    }


    .hw-services3-faq details p {
        font-size:
            14px !important;

        line-height:
            1.68 !important;
    }


    .hw-services3-final p {
        font-size:
            15px !important;
    }


    .hw-services3-final a {
        font-size:
            11px !important;
    }

}


/* /HACKER_WEB_SERVICES_GLOBAL_TYPOGRAPHY_V5 */


/* HACKER_WEB_SERVICES_HERO_VISUAL_LAYOUT_V1 */

@media (min-width: 901px) {

    .hw-services3 .hw-services3-hero-grid {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, .92fr) !important;
        grid-template-rows:
            auto
            auto !important;
        align-items:
            center !important;
        column-gap:
            clamp(42px, 5vw, 86px) !important;
        row-gap:
            28px !important;
    }

    .hw-services3 .hw-services3-hero-grid > div:first-child {
        grid-column:
            1 !important;
        grid-row:
            1 !important;
        min-width:
            0 !important;
    }

    .hw-services3 .hw-services3-hero-copy {
        grid-column:
            1 !important;
        grid-row:
            2 !important;
        align-self:
            start !important;
        width:
            100% !important;
        max-width:
            650px !important;
        margin:
            0 !important;
        padding:
            0 !important;
    }

    .hw-services3 .hw-services3-hero-copy p {
        max-width:
            620px !important;
        margin:
            0 0 24px !important;
    }

    .hw-services3 .hw-services3-main-cta {
        width:
            min(100%, 470px) !important;
        margin:
            0 !important;
    }

    .hw-services3 .hw-services3-hero-media {
        grid-column:
            2 !important;
        grid-row:
            1 / span 2 !important;
        align-self:
            center !important;
        justify-self:
            end !important;
        display:
            flex !important;
        align-items:
            center !important;
        justify-content:
            center !important;
        width:
            100% !important;
        min-width:
            0 !important;
        margin:
            0 !important;
        pointer-events:
            none !important;
    }

    .hw-services3 .hw-services3-hero-media img {
        display:
            block !important;
        width:
            min(100%, 620px) !important;
        height:
            auto !important;
        max-width:
            100% !important;
        object-fit:
            contain !important;
        filter:
            drop-shadow(0 24px 54px rgba(0, 82, 255, .12)) !important;
        transform:
            translateY(4px) !important;
    }

    .hw-services3 .hw-services3-tags {
        width:
            min(100%, 720px) !important;
        max-width:
            720px !important;
        margin-left:
            0 !important;
        margin-right:
            auto !important;
    }

}

@media (max-width: 900px) {

    .hw-services3 .hw-services3-hero-grid {
        display:
            grid !important;
        grid-template-columns:
            1fr !important;
        grid-template-rows:
            auto
            auto
            auto !important;
        row-gap:
            24px !important;
    }

    .hw-services3 .hw-services3-hero-grid > div:first-child {
        grid-column:
            1 !important;
        grid-row:
            1 !important;
    }

    .hw-services3 .hw-services3-hero-copy {
        grid-column:
            1 !important;
        grid-row:
            2 !important;
        width:
            100% !important;
        max-width:
            100% !important;
        margin:
            0 !important;
    }

    .hw-services3 .hw-services3-hero-media {
        grid-column:
            1 !important;
        grid-row:
            3 !important;
        display:
            flex !important;
        justify-content:
            center !important;
        width:
            100% !important;
        margin:
            4px 0 0 !important;
    }

    .hw-services3 .hw-services3-hero-media img {
        display:
            block !important;
        width:
            min(100%, 680px) !important;
        height:
            auto !important;
        object-fit:
            contain !important;
    }

    .hw-services3 .hw-services3-tags {
        width:
            100% !important;
        max-width:
            none !important;
    }

}

@media (max-width: 560px) {

    .hw-services3 .hw-services3-hero-media {
        margin-top:
            0 !important;
    }

    .hw-services3 .hw-services3-hero-media img {
        width:
            112% !important;
        max-width:
            112% !important;
        transform:
            translateX(-1%) !important;
    }

}

/* /HACKER_WEB_SERVICES_HERO_VISUAL_LAYOUT_V1 */

/* HACKER_WEB_SERVICES_HERO_VISUAL_TUNE_V2 */

@media (min-width: 901px) {

    .hw-services3 .hw-services3-hero-media {
        position:
            relative !important;

        justify-self:
            end !important;

        overflow:
            visible !important;
    }


    .hw-services3 .hw-services3-hero-media::before {
        content:
            "" !important;

        position:
            absolute !important;

        left:
            -46px !important;

        top:
            8% !important;

        width:
            44% !important;

        height:
            82% !important;

        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, .34) 0%,
                rgba(0, 0, 0, .20) 34%,
                rgba(0, 0, 0, 0) 100%
            ) !important;

        filter:
            blur(18px) !important;

        pointer-events:
            none !important;

        z-index:
            0 !important;
    }


    .hw-services3 .hw-services3-hero-media img {
        position:
            relative !important;

        z-index:
            1 !important;

        width:
            min(100%, 760px) !important;

        max-width:
            760px !important;

        height:
            auto !important;

        filter:
            drop-shadow(-34px 24px 72px rgba(0, 0, 0, .30))
            drop-shadow(0 24px 54px rgba(0, 82, 255, .14)) !important;

        transform:
            translate(-34px, 12px) scale(1.12) !important;

        transform-origin:
            center center !important;
    }

}


@media (min-width: 901px) and (max-width: 1180px) {

    .hw-services3 .hw-services3-hero-media img {
        width:
            min(100%, 680px) !important;

        max-width:
            680px !important;

        transform:
            translate(-22px, 10px) scale(1.08) !important;
    }

}


@media (max-width: 900px) {

    .hw-services3 .hw-services3-hero-media {
        overflow:
            visible !important;
    }


    .hw-services3 .hw-services3-hero-media img {
        width:
            min(112%, 760px) !important;

        max-width:
            112% !important;

        filter:
            drop-shadow(-18px 18px 44px rgba(0, 0, 0, .22))
            drop-shadow(0 18px 40px rgba(0, 82, 255, .10)) !important;

        transform:
            translateX(-3%) scale(1.03) !important;
    }

}

/* /HACKER_WEB_SERVICES_HERO_VISUAL_TUNE_V2 */

/* HACKER_WEB_SERVICES_HERO_FADE_V3 */

@media (min-width: 901px) {

    .hw-services3 .hw-services3-hero-media {
        position: relative !important;

        isolation: isolate !important;

        overflow: visible !important;
    }


    /*
     * Прибираємо стару зовнішню тінь V2.
     * Новий ефект буде поверх самої картинки.
     */
    .hw-services3 .hw-services3-hero-media::before {
        display: none !important;
        content: none !important;
    }


    /*
     * BLACK FADE:
     * сильніше зліва,
     * плавно переходить у прозорість.
     */
    .hw-services3 .hw-services3-hero-media::after {
        content: "" !important;

        position: absolute !important;

        z-index: 3 !important;

        pointer-events: none !important;

        top: -6% !important;
        bottom: -6% !important;

        left: -12% !important;

        width: 66% !important;

        background:
            linear-gradient(
                90deg,
                rgba(2,5,6,.98) 0%,
                rgba(2,5,6,.92) 14%,
                rgba(2,5,6,.72) 30%,
                rgba(2,5,6,.42) 47%,
                rgba(2,5,6,.16) 64%,
                rgba(2,5,6,0) 100%
            ) !important;

        filter:
            blur(7px) !important;
    }


    .hw-services3 .hw-services3-hero-media img {
        position: relative !important;

        z-index: 1 !important;

        width: min(112%, 820px) !important;
        max-width: 820px !important;

        transform:
            translate(-48px, 8px)
            scale(1.14) !important;

        transform-origin:
            center center !important;

        filter:
            drop-shadow(
                0 28px 70px
                rgba(0,0,0,.28)
            )
            drop-shadow(
                0 18px 48px
                rgba(0,82,255,.10)
            ) !important;
    }

}


@media (min-width: 901px) and (max-width: 1180px) {

    .hw-services3 .hw-services3-hero-media::after {
        left: -8% !important;
        width: 60% !important;
    }


    .hw-services3 .hw-services3-hero-media img {
        width: min(108%, 720px) !important;
        max-width: 720px !important;

        transform:
            translate(-30px, 8px)
            scale(1.10) !important;
    }

}


/*
 * Tablet/mobile:
 * значно м'якше, щоб не затемнювати
 * половину картинки на вузькому екрані.
 */

@media (max-width: 900px) {

    .hw-services3 .hw-services3-hero-media {
        position: relative !important;

        isolation: isolate !important;
    }


    .hw-services3 .hw-services3-hero-media::before {
        display: none !important;
        content: none !important;
    }


    .hw-services3 .hw-services3-hero-media::after {
        content: "" !important;

        position: absolute !important;

        z-index: 3 !important;

        pointer-events: none !important;

        top: -3% !important;
        bottom: -3% !important;

        left: -8% !important;

        width: 46% !important;

        background:
            linear-gradient(
                90deg,
                rgba(2,5,6,.70) 0%,
                rgba(2,5,6,.42) 42%,
                rgba(2,5,6,0) 100%
            ) !important;

        filter:
            blur(5px) !important;
    }

}

/* /HACKER_WEB_SERVICES_HERO_FADE_V3 */

/* HACKER_WEB_SERVICES_HERO_DEEP_FADE_V4 */

@media (min-width: 901px) {

    .hw-services3 .hw-services3-hero-media::after {
        content: "" !important;

        position: absolute !important;

        z-index: 3 !important;

        pointer-events: none !important;

        top: -10% !important;
        bottom: -10% !important;

        left: -18% !important;

        width: 78% !important;

        background:
            linear-gradient(
                90deg,
                #020506 0%,
                #020506 18%,
                rgba(2,5,6,.99) 28%,
                rgba(2,5,6,.96) 38%,
                rgba(2,5,6,.84) 48%,
                rgba(2,5,6,.60) 58%,
                rgba(2,5,6,.34) 68%,
                rgba(2,5,6,.12) 80%,
                rgba(2,5,6,0) 100%
            ) !important;

        filter:
            blur(8px) !important;
    }

}


/*
 * Ще один нижній чорний veil,
 * щоб ліва частина не світилась синім.
 */

@media (min-width: 901px) {

    .hw-services3 .hw-services3-hero-media {
        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,.10) 0%,
                rgba(0,0,0,.28) 18%,
                rgba(0,0,0,.58) 32%,
                rgba(0,0,0,.86) 46%,
                #000 62%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,.10) 0%,
                rgba(0,0,0,.28) 18%,
                rgba(0,0,0,.58) 32%,
                rgba(0,0,0,.86) 46%,
                #000 62%,
                #000 100%
            ) !important;
    }

}


@media (max-width: 900px) {

    .hw-services3 .hw-services3-hero-media::after {
        left: -10% !important;
        width: 58% !important;

        background:
            linear-gradient(
                90deg,
                rgba(2,5,6,.90) 0%,
                rgba(2,5,6,.72) 32%,
                rgba(2,5,6,.32) 64%,
                rgba(2,5,6,0) 100%
            ) !important;
    }

}

/* /HACKER_WEB_SERVICES_HERO_DEEP_FADE_V4 */

/* HACKER_WEB_SERVICES_HERO_SOFT_FADE_V5 */

@media (min-width: 901px) {

    /*
     * Disable over-strong V4 mask.
     */
    .hw-services3 .hw-services3-hero-media {
        -webkit-mask-image:
            none !important;

        mask-image:
            none !important;
    }


    /*
     * Soft left fade only.
     */
    .hw-services3 .hw-services3-hero-media::after {
        content:
            "" !important;

        display:
            block !important;

        position:
            absolute !important;

        z-index:
            3 !important;

        pointer-events:
            none !important;

        top:
            -7% !important;

        bottom:
            -7% !important;

        left:
            -8% !important;

        width:
            48% !important;

        background:
            linear-gradient(
                90deg,
                rgba(2,5,6,.86) 0%,
                rgba(2,5,6,.72) 16%,
                rgba(2,5,6,.52) 32%,
                rgba(2,5,6,.30) 49%,
                rgba(2,5,6,.13) 67%,
                rgba(2,5,6,.04) 82%,
                rgba(2,5,6,0) 100%
            ) !important;

        filter:
            blur(7px) !important;
    }

}


@media (min-width: 901px) and (max-width: 1180px) {

    .hw-services3 .hw-services3-hero-media::after {
        left:
            -5% !important;

        width:
            44% !important;
    }

}


@media (max-width: 900px) {

    .hw-services3 .hw-services3-hero-media {
        -webkit-mask-image:
            none !important;

        mask-image:
            none !important;
    }


    .hw-services3 .hw-services3-hero-media::after {
        left:
            -5% !important;

        width:
            34% !important;

        background:
            linear-gradient(
                90deg,
                rgba(2,5,6,.55) 0%,
                rgba(2,5,6,.30) 45%,
                rgba(2,5,6,0) 100%
            ) !important;
    }

}

/* /HACKER_WEB_SERVICES_HERO_SOFT_FADE_V5 */

/* HACKER_WEB_SERVICES_HERO_CORNER_FADE_V6 */

@media (min-width: 901px) {

    /*
     * Disable all previous broad masks/fades.
     */

    .hw-services3 .hw-services3-hero-media {
        -webkit-mask-image:
            none !important;

        mask-image:
            none !important;
    }


    /*
     * Fade ONLY bottom-left corner.
     *
     * Phone / laptop edge softly disappear
     * into the HACKER WEB black background.
     */

    .hw-services3 .hw-services3-hero-media::after {
        content:
            "" !important;

        display:
            block !important;

        position:
            absolute !important;

        z-index:
            3 !important;

        pointer-events:
            none !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            -5% !important;

        left:
            -4% !important;

        width:
            38% !important;

        height:
            57% !important;

        background:
            radial-gradient(
                ellipse at 0% 100%,
                rgba(2,5,6,1) 0%,
                rgba(2,5,6,.98) 18%,
                rgba(2,5,6,.88) 34%,
                rgba(2,5,6,.62) 51%,
                rgba(2,5,6,.31) 68%,
                rgba(2,5,6,.10) 82%,
                rgba(2,5,6,0) 100%
            ) !important;

        filter:
            blur(8px) !important;

        transform:
            translate(-4px, 7px) !important;
    }

}


/*
 * Slightly narrower corner on medium desktop.
 */

@media (min-width: 901px) and (max-width: 1180px) {

    .hw-services3 .hw-services3-hero-media::after {
        width:
            36% !important;

        height:
            54% !important;

        left:
            -3% !important;
    }

}


/*
 * Mobile: very subtle local fade.
 */

@media (max-width: 900px) {

    .hw-services3 .hw-services3-hero-media {
        -webkit-mask-image:
            none !important;

        mask-image:
            none !important;
    }


    .hw-services3 .hw-services3-hero-media::after {
        content:
            "" !important;

        display:
            block !important;

        position:
            absolute !important;

        z-index:
            3 !important;

        pointer-events:
            none !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            -3% !important;

        left:
            -2% !important;

        width:
            30% !important;

        height:
            40% !important;

        background:
            radial-gradient(
                ellipse at 0% 100%,
                rgba(2,5,6,.80) 0%,
                rgba(2,5,6,.50) 45%,
                rgba(2,5,6,.15) 72%,
                rgba(2,5,6,0) 100%
            ) !important;

        filter:
            blur(6px) !important;
    }

}

/* /HACKER_WEB_SERVICES_HERO_CORNER_FADE_V6 */

/* HACKER_WEB_SERVICES_HERO_LEFT_EDGE_FADE_V7 */

@media (min-width: 901px) {

    .hw-services3 .hw-services3-hero-media {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .hw-services3 .hw-services3-hero-media::after {
        content: "" !important;
        position: absolute !important;
        pointer-events: none !important;
        z-index: 3 !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 28% !important;

        background:
            linear-gradient(
                to right,
                rgba(2,5,6,0.92) 0%,
                rgba(2,5,6,0.78) 18%,
                rgba(2,5,6,0.54) 38%,
                rgba(2,5,6,0.28) 58%,
                rgba(2,5,6,0.10) 76%,
                rgba(2,5,6,0.00) 100%
            ) !important;

        filter: blur(6px) !important;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .hw-services3 .hw-services3-hero-media::after {
        width: 32% !important;
    }
}

@media (max-width: 900px) {
    .hw-services3 .hw-services3-hero-media {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .hw-services3 .hw-services3-hero-media::after {
        content: "" !important;
        position: absolute !important;
        pointer-events: none !important;
        z-index: 3 !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 22% !important;

        background:
            linear-gradient(
                to right,
                rgba(2,5,6,0.78) 0%,
                rgba(2,5,6,0.48) 42%,
                rgba(2,5,6,0.14) 72%,
                rgba(2,5,6,0.00) 100%
            ) !important;

        filter: blur(4px) !important;
    }
}

/* /HACKER_WEB_SERVICES_HERO_LEFT_EDGE_FADE_V7 */

/* HACKER_WEB_SERVICES_HERO_EDGE_MASK_V7 */

/*
 * FINAL EFFECT:
 * image itself fades smoothly
 * from black/transparent at its LEFT EDGE
 * into full brightness.
 *
 * No overlay rectangle.
 * No visible vertical cut.
 */

.hw-services3 .hw-services3-hero-media {
    -webkit-mask-image:
        none !important;

    mask-image:
        none !important;

    overflow:
        visible !important;
}


/*
 * Disable every previous pseudo fade.
 */

.hw-services3 .hw-services3-hero-media::before,
.hw-services3 .hw-services3-hero-media::after {
    display:
        none !important;

    content:
        none !important;

    background:
        none !important;

    filter:
        none !important;
}


/*
 * DESKTOP
 */

@media (min-width: 901px) {

    .hw-services3 .hw-services3-hero-media img {
        /*
         * The fade starts exactly at
         * the image's own left edge.
         */

        -webkit-mask-image:
            linear-gradient(
                90deg,

                rgba(0,0,0,0) 0%,

                rgba(0,0,0,.04) 4%,

                rgba(0,0,0,.12) 8%,

                rgba(0,0,0,.28) 13%,

                rgba(0,0,0,.48) 18%,

                rgba(0,0,0,.68) 23%,

                rgba(0,0,0,.84) 28%,

                rgba(0,0,0,.94) 33%,

                rgba(0,0,0,1) 40%,

                rgba(0,0,0,1) 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,

                rgba(0,0,0,0) 0%,

                rgba(0,0,0,.04) 4%,

                rgba(0,0,0,.12) 8%,

                rgba(0,0,0,.28) 13%,

                rgba(0,0,0,.48) 18%,

                rgba(0,0,0,.68) 23%,

                rgba(0,0,0,.84) 28%,

                rgba(0,0,0,.94) 33%,

                rgba(0,0,0,1) 40%,

                rgba(0,0,0,1) 100%
            ) !important;

        -webkit-mask-repeat:
            no-repeat !important;

        mask-repeat:
            no-repeat !important;

        -webkit-mask-size:
            100% 100% !important;

        mask-size:
            100% 100% !important;

        /*
         * Keep the large image / current position.
         */

        width:
            min(112%, 820px) !important;

        max-width:
            820px !important;

        transform:
            translate(-48px, 8px)
            scale(1.14) !important;

        filter:
            drop-shadow(
                0 28px 70px
                rgba(0,0,0,.25)
            )
            drop-shadow(
                0 18px 48px
                rgba(0,82,255,.10)
            ) !important;
    }

}


/*
 * Medium desktop
 */

@media (min-width: 901px) and (max-width: 1180px) {

    .hw-services3 .hw-services3-hero-media img {
        width:
            min(108%, 720px) !important;

        max-width:
            720px !important;

        transform:
            translate(-30px, 8px)
            scale(1.10) !important;
    }

}


/*
 * MOBILE / TABLET:
 * considerably shorter fade.
 */

@media (max-width: 900px) {

    .hw-services3 .hw-services3-hero-media img {

        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,.20) 7%,
                rgba(0,0,0,.52) 14%,
                rgba(0,0,0,.82) 21%,
                rgba(0,0,0,1) 29%,
                rgba(0,0,0,1) 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,.20) 7%,
                rgba(0,0,0,.52) 14%,
                rgba(0,0,0,.82) 21%,
                rgba(0,0,0,1) 29%,
                rgba(0,0,0,1) 100%
            ) !important;

        -webkit-mask-repeat:
            no-repeat !important;

        mask-repeat:
            no-repeat !important;

        -webkit-mask-size:
            100% 100% !important;

        mask-size:
            100% 100% !important;
    }

}

/* /HACKER_WEB_SERVICES_HERO_EDGE_MASK_V7 */

/* WEBHVA SERVICES MOBILE OVERFLOW FIX V1 */
@media (max-width: 900px) {
    .hw-services3 .hw-services3-hero-media {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .hw-services3 .hw-services3-hero-media img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}