/* =========================================================
   SERVICES BANNER
========================================================= */

.services-banner {
    position: relative;

    width: 100%;

    overflow: hidden;

    background-image:
        var(--services-banner-background);

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        cover;
}


/* =========================================================
   OVERLAY
========================================================= */

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

    position: absolute;

    inset: 0;

    background:
        rgba(
            15,
            26,
            34,
            0.66
        );

    pointer-events: none;
}


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

.services-banner__inner {
    position: relative;

    z-index: 1;

    width: 100%;

    padding:
        var(--section-spacing)
        0;
}


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

.services-banner__title {
    width: 100%;

    margin:
        0
        auto
        30px;

    color:
        #ffffff;

    font-size: 30px;
    line-height: 1.22;
    font-weight: 700;

    text-align: center;
}


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

.services-banner__grid {
    display: grid;

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

    width: 100%;

    margin-inline: auto;

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

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


/* =========================================================
   ITEM
========================================================= */

.services-banner__item {
    display: flex;

    min-width: 0;

    min-height: 62px;

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

    padding:
        13px
        18px;

    color:
        #ffffff;

    background:
        rgba(
            47,
            166,
            255,
            0.52
        );

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

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

    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;

    text-align: center;

    transition:
        background-color
        var(--transition-fast);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .services-banner__item:hover {
        background:
            rgba(
                47,
                166,
                255,
                0.74
            );
    }

}


/* =========================================================
   ACTION
========================================================= */

.services-banner__action {
    display: flex;

    width: 100%;

    justify-content: center;

    margin-top: 32px;
}


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

.services-banner__button {
    min-width: 175px;

    padding-inline: 22px;

    border-radius: 3px;

    font-size: 16px;
}


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

@media (max-width: 900px) {

    .services-banner__title {
        font-size: 26px;
    }


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


    .services-banner__item {
        min-height: 58px;

        font-size: 15px;
    }

}


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

@media (max-width: 600px) {

    .services-banner__title {
        margin-bottom: 24px;

        font-size: 24px;
    }


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


    .services-banner__item {
        min-height: 52px;

        justify-content: flex-start;

        padding:
            12px
            15px;

        text-align: left;
    }


    .services-banner__action {
        margin-top: 24px;
    }


    .services-banner__button {
        width: 100%;
    }

}