/* =========================================================
   SNMF INFRATECH
   SERVICES PAGE
   assets/css/services.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --services-black: #050606;
    --services-black-2: #080a0a;
    --services-card: #0c0e0e;

    --services-gold: #c89a3c;
    --services-gold-light: #e2bd70;
    --services-gold-dark: #9c7428;

    --services-white: #f2eee5;
    --services-text: #d4d0c7;
    --services-muted: #99968f;

    --services-border: rgba(200, 154, 60, 0.28);

    --services-container: 1304px;
    --services-side-space: 60px;

}


/* =========================================================
   CONTAINER
========================================================= */

.services-hero-container,
.services-intro-container,
.services-final-cta-container {

    width: calc(100% - (var(--services-side-space) * 2));

    max-width: var(--services-container);

    margin-left: auto;
    margin-right: auto;

}


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

.services-section-label {

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 4px;

    line-height: 1.5;

    text-transform: uppercase;

    color: var(--services-gold-light);

}


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

.services-section-title {

    margin: 7px 0 0;

    font-family: "Playfair Display", serif;

    font-size: 31px;

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -0.5px;

    color: var(--services-white);

}

.services-section-title span {

    color: var(--services-gold-light);

}


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

.services-btn {

    display: inline-flex;

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

    gap: 9px;

    min-height: 38px;

    padding: 0 16px;

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

    border-radius: 2px;

    background: transparent;

    color: var(--services-gold-light);

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    text-decoration: none;

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

}

.services-btn:hover {

    background: var(--services-gold);

    border-color: var(--services-gold);

    color: #080808;

    transform: translateY(-2px);

}

.services-btn-arrow {

    font-size: 13px;

    line-height: 1;

}


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

.services-hero {

    position: relative;

    height: 355px;

    overflow: hidden;

    background: var(--services-black);

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

}


/* Hero Background */

.services-hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../images/services/hero-image-services.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}


/* Hero Overlay */

.services-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(3,4,4,0.98) 0%,
            rgba(3,4,4,0.94) 17%,
            rgba(3,4,4,0.78) 32%,
            rgba(3,4,4,0.46) 47%,
            rgba(3,4,4,0.16) 68%,
            rgba(3,4,4,0.22) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.30) 0%,
            rgba(0,0,0,.04) 45%,
            rgba(0,0,0,.58) 100%
        );

}


/* Hero Container */

.services-hero-container {

    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding-bottom: 27px;

}


/* Hero Content */

.services-hero-content {

    width: 520px;

    transform: translateY(25px);

}


.services-hero-label {

    margin-bottom: 7px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 4px;

    color: var(--services-gold-light);

}


.services-hero-title {

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 39px;

    font-weight: 400;

    line-height: 1.03;

    letter-spacing: -1px;

    color: var(--services-white);

}


.services-hero-title span {

    color: var(--services-gold-light);

}


.services-hero-description {

    width: 415px;

    margin: 11px 0 15px;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 400;

    line-height: 1.5;

    color: rgba(244,241,233,.82);

}


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

.services-hero-highlights {

    display: flex;

    align-items: center;

    margin-top: 19px;

}


.services-hero-highlight {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 105px;

    padding-right: 18px;

    margin-right: 17px;

    border-right: 1px solid rgba(200,154,60,.40);

}


.services-hero-highlight:last-child {

    padding-right: 0;

    margin-right: 0;

    border-right: none;

}


.services-hero-highlight img {

    display: block;

    width: 27px;
    height: 27px;

    object-fit: contain;

    flex-shrink: 0;

}


.services-hero-highlight div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.services-hero-highlight strong {

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    font-weight: 600;

    line-height: 1.2;

    color: var(--services-white);

}


.services-hero-highlight span {

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    line-height: 1.2;

    color: var(--services-muted);

}


/* =========================================================
   HERO SIDE TEXT
========================================================= */

.services-hero-side {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-right: 5px;

    margin-bottom: 25px;

}


.services-hero-side-text {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.services-hero-side-text span {

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 1.5px;

    line-height: 1.25;

    color: var(--services-white);

}


.services-hero-side-line {

    width: 1px;

    height: 67px;

    background: var(--services-gold);

}


/* =========================================================
   WHAT WE DO
========================================================= */

.services-intro {

    position: relative;

    min-height: 272px;

    overflow: hidden;

    background: #efede6;

    border-bottom: 1px solid rgba(200,154,60,.25);

}


/* Subtle Background Texture */

.services-intro::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .16;

    background-image:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(100,100,90,.12) 25%,
            transparent 26%,
            transparent 62%,
            rgba(100,100,90,.08) 63%,
            transparent 64%
        );

}


/* Intro Container */

.services-intro-container {

    position: relative;

    z-index: 2;

    min-height: 272px;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

}


/* Intro Content */

.services-intro-content {

    padding-left: 7px;

    padding-right: 35px;

    border-left: 1px solid var(--services-gold);

}


.services-intro-content .services-section-label {

    color: #9b7024;

}


.services-intro-content .services-section-title {

    font-size: 30px;

    color: #151515;

}


.services-intro-content .services-section-title span {

    color: #151515;

}


.services-intro-description {

    max-width: 450px;

    margin: 10px 0 13px;

    font-family: "DM Sans", sans-serif;

    font-size: 10.5px;

    line-height: 1.5;

    color: #44423d;

}


/* Intro Button */

.services-btn-dark {

    color: #17130d;

    border-color: #a87927;

}


.services-btn-dark:hover {

    background: var(--services-gold);

    color: #080808;

}


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

.services-intro-stats {

    display: flex;

    align-items: stretch;

    margin-top: 18px;

}


.services-intro-stat {

    min-width: 120px;

    padding-right: 24px;

    margin-right: 22px;

    border-right: 1px solid rgba(70,65,55,.35);

}


.services-intro-stat:last-child {

    padding-right: 0;

    margin-right: 0;

    border-right: none;

}


.services-intro-stat strong {

    display: block;

    margin-bottom: 2px;

    font-family: "DM Sans", sans-serif;

    font-size: 20px;

    font-weight: 600;

    line-height: 1;

    color: #151515;

}


.services-intro-stat span {

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    color: #57544e;

}


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

.services-intro-visual {

    position: relative;

    height: 240px;

    margin-left: 18px;

    overflow: hidden;

    display: grid;

    grid-template-columns: 72% 28%;

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

    border-radius: 2px;

}


.services-intro-image {

    position: relative;

    height: 100%;

    overflow: hidden;

}


.services-intro-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

}


.services-intro-image-panel {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px 15px;

    background: #090b0b;

}


.services-intro-panel-title {

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.55;

    letter-spacing: 1.5px;

    color: var(--services-gold-light);

}


.services-intro-panel-line {

    width: 30px;

    height: 1px;

    margin: 13px 0;

    background: var(--services-gold);

}


.services-intro-image-panel p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    line-height: 1.55;

    color: #b8b4aa;

}


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

.services-core {

    padding: 19px 60px 20px;

    background: var(--services-black);

    border-bottom: 1px solid rgba(200,154,60,.25);

}


/* Core Heading */

.services-core-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 14px;

}


.services-core-heading .services-section-title {

    font-size: 30px;

}


.services-core-heading-right {

    display: flex;

    align-items: flex-end;

    gap: 30px;

}


.services-core-heading-right p {

    width: 280px;

    margin: 0 0 1px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    line-height: 1.45;

    color: var(--services-muted);

}


.services-view-all {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    color: var(--services-gold-light);

    text-decoration: none;

}


.services-view-all span {

    font-size: 13px;

}


.services-view-all:hover {

    color: var(--services-white);

}


/* =========================================================
   SERVICES GRID
========================================================= */

.services-grid {

    display: grid;

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

    gap: 10px;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {

    overflow: hidden;

    background: var(--services-card);

    border: 1px solid rgba(200,154,60,.27);

    border-radius: 3px;

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

}


.service-card:hover {

    transform: translateY(-4px);

    border-color: rgba(200,154,60,.65);

    box-shadow:
        0 15px 32px rgba(0,0,0,.32);

}


/* Card Image */

.service-card-image {

    height: 105px;

    overflow: hidden;

    background: #111313;

}


.service-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}


.service-card:hover .service-card-image img {

    transform: scale(1.045);

}


/* Card Content */

.service-card-content {

    min-height: 144px;

    padding: 9px 9px 10px;

}


/* Card Heading */

.service-card-heading {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 35px;

    margin-bottom: 7px;

}


.service-card-heading img {

    display: block;

    width: 27px;
    height: 27px;

    object-fit: contain;

    flex-shrink: 0;

}


.service-card-heading h3 {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.25;

    color: var(--services-white);

}


/* Card Description */

.service-card-content > p {

    margin: 0 0 10px;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    line-height: 1.45;

    color: var(--services-muted);

}


/* Card Link */

.service-card-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    font-weight: 500;

    color: var(--services-gold-light);

    text-decoration: none;

}


.service-card-link span {

    font-size: 12px;

}


.service-card-link:hover {

    color: var(--services-white);

}


/* =========================================================
   OUR APPROACH / PROCESS
========================================================= */

.services-approach {

    position: relative;

    height: 225px;
    min-height: 225px;

    overflow: hidden;

    background: #efede5;

    border-bottom: 1px solid rgba(200,154,60,.28);

}


.services-approach-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../images/services/services-approach.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center 30%;

}


.services-approach-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(242,240,233,.98) 0%,
            rgba(242,240,233,.96) 30%,
            rgba(242,240,233,.88) 53%,
            rgba(242,240,233,.48) 72%,
            rgba(242,240,233,.10) 100%
        );

}


.services-approach-container {

    position: relative;

    z-index: 2;

    width: calc(100% - (var(--services-side-space) * 2));

    max-width: var(--services-container);

    height: 225px;
    min-height: 225px;

    margin-left: auto;
    margin-right: auto;

    padding: 0;

}


/* ---------------------------------------------------------
   PROCESS HEADING
--------------------------------------------------------- */

.services-approach-content {

    position: absolute;

    top: 18px;

    left: 0;

    width: 390px;

}


.services-approach-content .services-section-label {

    display: block;

    margin: 0 0 5px;

    color: #a67827;

    font-size: 9px;

    letter-spacing: 4px;

    line-height: 1.2;

}


.services-approach-content .services-section-title {

    margin: 0;

    font-size: 29px;

    line-height: 1.03;

    letter-spacing: -.5px;

    color: #151515;

}


.services-approach-content .services-section-title span {

    color: #151515;

}


/* ---------------------------------------------------------
   PROCESS INTRO TEXT
--------------------------------------------------------- */

.services-approach-description {

    position: absolute;

    top: 38px;

    left: 550px;

    width: 350px;

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    line-height: 1.5;

    color: #0f0f0f;

}


/* ---------------------------------------------------------
   PROCESS ROW
--------------------------------------------------------- */

.services-process {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 17px;

    display: grid;

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

    gap: 0;

    margin: 0;

}


.services-process-step {

    position: relative;

    min-width: 0;

    padding: 0 20px;

}


/* ---------------------------------------------------------
   PROCESS NUMBER
--------------------------------------------------------- */

.services-process-number {

    position: relative;

    z-index: 5;

    display: flex;

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

    width: 37px;
    height: 37px;

    margin: 0 0 7px;

    border-radius: 50%;

    background: #d6ab53;

    color: #17130c;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

}


/* ---------------------------------------------------------
   CONNECTING LINE
--------------------------------------------------------- */

.services-process-line {

    position: absolute;

    z-index: 2;

    top: 18px;

    left: 57px;

    right: 8px;

    height: 1px;

    background: rgba(40,40,40,.72);

}


.services-process-line::after {

    content: "";

    position: absolute;

    top: -3px;

    right: 0;

    width: 6px;

    height: 6px;

    border-top: 1px solid rgba(40,40,40,.72);

    border-right: 1px solid rgba(40,40,40,.72);

    transform: rotate(45deg);

}


.services-process-step:last-child .services-process-line {

    display: none;

}


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

.services-process-step h3 {

    margin: 0 0 4px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.2;

    color: #171717;

}


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

.services-process-step p {

    width: 150px;

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.35;

    color: #131212;

}


/* =========================================================
   WHY CHOOSE SNMF
========================================================= */

.services-why {

    min-height: 127px;

    padding: 17px 0;

    background: var(--services-black);

    border-bottom: 1px solid rgba(200,154,60,.27);

}


.services-why-container {
    width: calc(100% - 120px);
    max-width: 1304px;
    margin-left: 60px;
    margin-right: auto;

    display: grid;
    grid-template-columns: 28% 72%;
    align-items: center;
}


.services-why-heading {

    padding-right: 25px;

}


.services-why-heading .services-section-title {

    font-size: 28px;

    line-height: 1.08;

}


/* Trust Grid */

.services-trust-grid {

    display: grid;

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

}


.services-trust-item {

    min-height: 91px;

    padding: 0 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-left: 1px solid rgba(200,154,60,.34);

}


.services-trust-item img {

    display: block;

    width: 30px;
    height: 30px;

    margin-bottom: 6px;

    object-fit: contain;

}


.services-trust-item h3 {

    margin: 0 0 4px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 600;

    color: var(--services-white);

}


.services-trust-item p {

    max-width: 130px;

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    line-height: 1.4;

    color: var(--services-muted);

}


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

.services-final-cta {

    position: relative;

    height: 190px;

    overflow: hidden;

    background: var(--services-black);

    border-bottom: 1px solid rgba(200,154,60,.32);

}


/* CTA Background */

.services-final-cta-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("../images/services/services-final-cta.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}


/* CTA Overlay */

.services-final-cta-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4,5,5,.18) 0%,
            rgba(4,5,5,.25) 25%,
            rgba(4,5,5,.76) 52%,
            rgba(4,5,5,.96) 73%,
            rgba(4,5,5,.99) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.45) 100%
        );

}


/* CTA Container */

.services-final-cta-container {

    position: relative;

    z-index: 2;

    height: 100%;

    display: grid;

    grid-template-columns: 52% 48%;

}


/* CTA Image Space */

.services-final-cta-image-space {

    min-width: 0;

}


/* CTA Content */

.services-final-cta-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 85px;

}


.services-final-cta-content h2 {

    margin: 5px 0 8px;

    font-family: "Playfair Display", serif;

    font-size: 27px;

    font-weight: 400;

    line-height: 1.1;

    color: var(--services-white);

}


.services-final-cta-content p {

    max-width: 390px;

    margin: 0 0 13px;

    font-family: "DM Sans", sans-serif;

    font-size: 9px;

    line-height: 1.5;

    color: rgba(244,241,233,.72);

}


.services-final-cta-content .services-btn {

    width: max-content;

}


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

@media (max-width: 1100px) {

    :root {

        --services-side-space: 45px;

    }


    .services-hero {

        height: 365px;

    }


    .services-hero-content {

        width: 480px;

    }


    .services-hero-title {

        font-size: 36px;

    }


    .services-intro-container {

        grid-template-columns: 46% 54%;

    }


    .services-intro-visual {

        margin-left: 10px;

    }


    .services-grid {

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

        gap: 12px;

    }


    .service-card-image {

        height: 145px;

    }


    .service-card-content {

        min-height: 135px;

    }


    .services-approach-description {

        left: 340px;

    }

}


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

@media (max-width: 767px) {

    :root {

        --services-side-space: 22px;

    }


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

    .services-section-label {

        font-size: 9px;

        letter-spacing: 3.5px;

    }


    .services-section-title {

        font-size: 26px;

    }


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

    .services-hero {

        height: 560px;

    }


    .services-hero-background {

        background-position: 65% center;

    }


    .services-hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(3,4,4,.97) 0%,
                rgba(3,4,4,.84) 48%,
                rgba(3,4,4,.38) 100%
            ),

            linear-gradient(
                180deg,
                rgba(0,0,0,.38) 0%,
                rgba(0,0,0,.05) 42%,
                rgba(0,0,0,.72) 100%
            );

    }


    .services-hero-container {

        align-items: flex-end;

        padding-bottom: 35px;

    }


    .services-hero-content {

        width: 100%;

    }


    .services-hero-title {

        font-size: 34px;

        line-height: 1.05;

    }


    .services-hero-description {

        width: 100%;

        max-width: 350px;

        font-size: 10px;

        line-height: 1.55;

        margin-top: 12px;

    }


    .services-hero-side {

        display: none;

    }


    .services-hero-highlights {

        flex-wrap: wrap;

        gap: 10px 0;

        margin-top: 22px;

    }


    .services-hero-highlight {

        min-width: 100px;

        padding-right: 12px;

        margin-right: 12px;

    }


    .services-hero-highlight img {

        width: 24px;
        height: 24px;

    }


    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .services-intro {

        min-height: auto;

        padding: 28px 0;

    }


    .services-intro-container {

        display: block;

        min-height: auto;

    }


    .services-intro-content {

        padding-left: 14px;

        padding-right: 0;

    }


    .services-intro-content .services-section-title {

        font-size: 27px;

    }


    .services-intro-description {

        max-width: 370px;

        font-size: 10px;

    }


    .services-intro-stats {

        margin-top: 20px;

    }


    .services-intro-stat {

        min-width: 0;

        flex: 1;

        padding-right: 10px;

        margin-right: 10px;

    }


    .services-intro-stat strong {

        font-size: 18px;

    }


    .services-intro-stat span {

        font-size: 8px;

    }


    .services-intro-visual {

        height: 230px;

        margin: 25px 0 0;

        grid-template-columns: 70% 30%;

    }


    .services-intro-panel-title {

        font-size: 11px;

    }


    .services-intro-image-panel {

        padding: 15px 10px;

    }


    .services-intro-image-panel p {

        font-size: 7px;

    }


    /* -----------------------------------------------------
       CORE SERVICES
    ----------------------------------------------------- */

    .services-core {

        padding: 27px 0;

    }


    .services-core-heading {

        display: block;

        margin-bottom: 18px;

    }


    .services-core-heading .services-section-title {

        font-size: 27px;

    }


    .services-core-heading-right {

        display: block;

        margin-top: 10px;

    }


    .services-core-heading-right p {

        width: 100%;

        max-width: 350px;

        font-size: 9px;

    }


    .services-view-all {

        margin-top: 8px;

    }


    .services-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .service-card-image {

        height: 190px;

    }


    .service-card-content {

        min-height: 130px;

        padding: 13px;

    }


    .service-card-heading {

        min-height: 38px;

    }


    .service-card-heading img {

        width: 30px;
        height: 30px;

    }


    .service-card-heading h3 {

        font-size: 12px;

    }


    .service-card-content > p {

        max-width: 300px;

        font-size: 9px;

    }


    .service-card-link {

        font-size: 9px;

    }


    /* -----------------------------------------------------
       APPROACH
    ----------------------------------------------------- */

    .services-approach {

        min-height: 560px;

    }


    .services-approach-background {

        background-position: center center;

    }


    .services-approach-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(242,240,233,.82) 0%,
                rgba(242,240,233,.91) 48%,
                rgba(242,240,233,.98) 100%
            );

    }


    .services-approach-container {

        width: calc(100% - 44px);

        min-height: 560px;

        padding-top: 28px;

    }


    .services-approach-content {

        position: absolute;

        top: 25px;

        left: 0;

        width: 100%;

    }


    .services-approach-content .services-section-title {

        font-size: 28px;

    }


    .services-approach-description {

        position: static;

        width: 100%;

        max-width: 350px;

        margin-top: 12px;

        font-size: 9px;

    }


    .services-process {

        position: absolute;

        left: 0;
        right: 0;

        bottom: 25px;

        display: grid;

        grid-template-columns: 1fr 1fr;

        row-gap: 25px;

    }


    .services-process-step {

        padding-right: 15px;

    }


    .services-process-number {

        width: 36px;
        height: 36px;

        font-size: 11px;

    }


    .services-process-line {

        display: none;

    }


    .services-process-step h3 {

        font-size: 11px;

    }


    .services-process-step p {

        width: 140px;

        font-size: 8px;

    }


    /* -----------------------------------------------------
       WHY CHOOSE
    ----------------------------------------------------- */

    .services-why {

        padding: 28px 0;

    }


    .services-why-container {

        display: block;

    }


    .services-why-heading {

        padding-right: 0;

        margin-bottom: 22px;

    }


    .services-why-heading .services-section-title {

        font-size: 27px;

    }


    .services-trust-grid {

        grid-template-columns: 1fr 1fr;

    }


    .services-trust-item {

        min-height: 125px;

        padding: 15px 10px;

    }


    .services-trust-item:nth-child(1),
    .services-trust-item:nth-child(2) {

        border-bottom: 1px solid rgba(200,154,60,.28);

    }


    .services-trust-item:nth-child(1),
    .services-trust-item:nth-child(3) {

        border-left: none;

        border-right: 1px solid rgba(200,154,60,.28);

    }


    .services-trust-item img {

        width: 32px;
        height: 32px;

    }


    .services-trust-item h3 {

        font-size: 10px;

    }


    .services-trust-item p {

        font-size: 8px;

    }


    /* -----------------------------------------------------
       FINAL CTA
    ----------------------------------------------------- */

    .services-final-cta {

        height: 430px;

    }


    .services-final-cta-background {

        background-position: 35% center;

    }


    .services-final-cta-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(4,5,5,.12) 0%,
                rgba(4,5,5,.52) 42%,
                rgba(4,5,5,.96) 75%,
                rgba(4,5,5,1) 100%
            );

    }


    .services-final-cta-container {

        display: block;

        height: 100%;

    }


    .services-final-cta-image-space {

        height: 220px;

    }


    .services-final-cta-content {

        height: calc(100% - 220px);

        padding: 25px 0 30px;

        justify-content: center;

    }


    .services-final-cta-content h2 {

        font-size: 27px;

    }


    .services-final-cta-content p {

        max-width: 340px;

        font-size: 9px;

        line-height: 1.55;

    }

}


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

@media (max-width: 420px) {

    .services-hero {

        height: 530px;

    }


    .services-hero-title {

        font-size: 31px;

    }


    .services-intro-visual {

        height: 215px;

        grid-template-columns: 68% 32%;

    }


    .services-intro-panel-title {

        font-size: 10px;

        letter-spacing: 1px;

    }


    .services-core-heading .services-section-title {

        font-size: 25px;

    }


    .service-card-image {

        height: 180px;

    }


    .services-approach {

        min-height: 540px;

    }


    .services-approach-container {

        min-height: 540px;

    }


    .services-process {

        bottom: 20px;

    }


    .services-final-cta {

        height: 400px;

    }


    .services-final-cta-image-space {

        height: 200px;

    }


    .services-final-cta-content {

        height: calc(100% - 200px);

    }

}