:root {
    --banner-height        : 90px;
    --landing-padding-left : 10%;
    --landing-padding-right: 10%;
}

.d-flex {
    display: flex;
}

.logo {
    height: 42px;
}

.section-container {
    width    : 100%;
    max-width: 1366px;
}

header {
    height    : var(--banner-height);
    background: #FFFFFF;
    box-shadow: 0px 3px 25px #00000029;
    position  : fixed;
    inset     : 0;
    z-index   : 999999;

    a:not(.green-button) {
        color          : #344A4B;
        font-size      : 14px;
        line-height    : 21px;
        font-weight    : 600;
        text-decoration: none;

        &:hover {
            color: #344A4B;
        }
    }

    .section-container {
        height         : 100%;
        align-items    : center;
        justify-content: space-between;
        padding-right  : var(--landing-padding-right);
        padding-left   : var(--landing-padding-left);
    }

    .actions {
        gap            : 20px;
        align-items    : center;
        justify-content: flex-end;
    }
}

.banner {
    margin-top: var(--banner-height);
    padding   : 140px 0 60px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #b1e4e336 100%);

    .section-container {
        flex-direction: column;
        align-items   : center;
        text-align    : center;
        gap           : 20px;
        padding-right : var(--landing-padding-right);
        padding-left  : var(--landing-padding-left);
    }

    h1 {
        max-width: 23ch;
    }

    img {
        max-width: 776px;
        margin   : 0 auto;
    }

    .green-button {
        margin-top: -85px;
    }
}

/*SECTION SCAN*/
.scan-section {
    margin-top   : 150px;
    margin-bottom: 150px;

    .section-container {
        padding-right: var(--landing-padding-right);
        padding-left : var(--landing-padding-left);
    }

    .image-container,
    .content {
        width : 50%;
        height: auto;
    }

    .image-container img {
        width : 100%;
        height: auto;
    }


    .content {
        padding-right: 15px;
        padding-top  : 15px;

        p {
            margin-bottom: 30px;
        }

        h2 {
            width        : 100%;
            margin-bottom: 30px;
        }

    }

}

/*END SECTION SCAN*/
/*SECTION OPINIONS*/
.opinions-section {
    background-color: #b1e4e32f;
    padding-top     : 60px;

    h2 {
        text-align    : center;
        padding-bottom: 45px;
        width         : 80%;
        margin        : 0 auto;
    }

    h4 {
        margin: 0;
    }

    p {
        margin: 0 auto;
    }

    img {
        height       : 110px;
        aspect-ratio : 1/1;
        margin-bottom: 20px;
        margin       : 0 auto;
    }

    .section-container {
        flex-direction: column;
        padding-left  : 3%;
        padding-right : 3%;
    }

    .opinion {
        flex      : 1;
        background: #FFFFFF;
        padding   : 18px;
        text-align: center;
    }

    .customers-container {
        display        : flex;
        justify-content: space-between;
    }

    .customers-container {
        gap: 20px;
    }

    .green-button {
        display: none;
    }
}

/*END SECTION OPINIONS*/

/*SECTION TRANSFORMATION*/
.three-steps-section {
    padding-top   : 160px;
    padding-bottom: 135px;

    .section-title {
        margin-bottom: 72px;
    }

    .green-button {
        width : 300px;
        margin: -20px auto 0 auto;
    }

    .section-container {
        text-align    : center;
        display       : flex;
        flex-direction: column;
        padding-right : var(--landing-padding-right);
        padding-left  : var(--landing-padding-left);
    }

    .step {
        --step-number-width: 70px;

        margin-bottom: 152px;
        display      : flex;
        align-items  : center;
        position     : relative;

        h2,
        p {
            margin: 0;
        }

        .image img {
            width: 127%;
        }

        .content {
            min-height    : 430px;
            display       : flex;
            gap           : 35px;
            flex-direction: column;
            width         : 61%;
            background    : #F4F4F4;
            text-align    : start;
            padding       : 45px 50px 45px 18%;
        }

        &.second-step {
            img {
                margin-left: -27%;
            }

            .content {
                padding: 45px 18% 45px 50px;
            }

            .image .step-number {
                top      : 50%;
                left     : calc(-27% - var(--step-number-width) / 2);
                transform: translateY(-50%);
            }
        }

        .image {
            width         : 40%;
            z-index       : 9;
            display       : flex;
            flex-direction: row;
            align-items   : center;
            position      : relative;
        }

        .image .step-number {
            top      : 50%;
            right    : calc(-27% - var(--step-number-width) / 2);
            transform: translateY(-50%);
        }

    }

    .step-number {
        display           : flex;
        justify-content   : center;
        align-items       : center;
        width             : var(--step-number-width);
        aspect-ratio      : 1 / 1;
        background        : #27C0B1;
        color             : white;
        position          : absolute;
        font-size         : 40px;
        line-height       : 48px;
        font-weight       : 600;
        /* left           : 50%;
        top               : 50%;
        transform         : translate(-50%, -50%); */
        border-radius     : 50px;
        z-index           : 999;
    }
}

footer {
    padding   : 90px var(--landing-padding-left) 30px var(--landing-padding-right);
    background: #effaf9;

    .section-container {
        display       : flex;
        align-items   : center;
        flex-direction: column;
        text-align    : center;
    }

    ul {
        list-style: none;
        padding   : 0;

        li a.nav-link {
            padding        : 0;
            display        : flex;
            align-items    : center;
            justify-content: center;
            gap            : 10px;
        }
    }

    .social-icons {
        margin         : 30px 0;
        display        : flex;
        align-items    : center;
        justify-content: center;
        gap            : 40px;
    }

    .logo-link {
        margin-top: 60px;
    }

    .copyright,
    .copyright a {
        font-size      : 14px;
        color          : #344A4B;
        text-decoration: none;
        margin         : 0;
    }
}

/*END SECTION TRANSFORMATION*/

@media screen and (min-width: 1366px) {
    :root {
        --landing-padding-left : 135px;
        --landing-padding-right: 135px;
    }

}

@media screen and (max-width: 1100px) {
    :root {
        --landing-padding-left : 5%;
        --landing-padding-right: 5%;
    }

    .banner {
        padding: 60px 0;
    }

    .scan-section {
        margin-top   : 60px;
        margin-bottom: 60px;
    }

    .three-steps-section {
        padding-top   : 95px;
        padding-bottom: 90px;
    }

}

@media screen and (max-width: 992px) {
    :root {
        --landing-padding-left : 35px;
        --landing-padding-right: 35px;
    }

    header {

        .logo {
            height: 36px;
        }

        nav {
            padding      : 0;
            padding-right: var(--landing-padding-right);
            padding-left : var(--landing-padding-left);
        }

        .row-icon-number {
            display: none;
        }

        .green-button {
            max-width: 130px;
        }
    }

    .banner {

        img {
            max-width: 100%;
        }

        .green-button {
            margin-top: 0;
        }
    }

    .scan-section {
        margin-top   : 0;
        margin-bottom: 25px;

        .section-container {
            width         : 100%;
            padding       : 0;
            flex-direction: column-reverse;
        }

        .content,
        .image-container {
            width: 100%;
        }

        .content {
            padding: 45px var(--landing-padding-left) 45px var(--landing-padding-right);
        }
    }

    .three-steps-section {
        padding-top   : 95px;
        padding-bottom: 90px;
    }

    .opinions-section {
        .section-container {
            padding-right: var(--landing-padding-right);
            padding-left : var(--landing-padding-left);
        }

        .customers-container {
            flex-direction: column;
            align-items   : center;

            .opinion {
                width         : 100%;
                padding-bottom: 40px;
            }

            .green-button {
                margin : 25px auto 60px auto;
                display: flex;
            }
        }
    }

    .three-steps-section {
        .section-container {
            padding: 0 18px;
        }

        .step {
            flex-direction: column;
            margin-bottom : 45px;


            .image img {
                max-width: 100%;
                margin   : 0 auto;
            }

            a.green-button,
            a.white-button {
                max-width: 200px;
            }

            .image {
                padding      : 0 18px;
                margin-bottom: -85px;
            }

            .image,
            .content {
                width: 100%;
            }

            .content {
                padding: 150px 18px 45px 18px !important;
            }

            .image .step-number,
            &.second-step .image .step-number {
                left     : 50%;
                top      : calc(100% - var(--step-number-width) / 2);
                transform: translateX(-50%);
            }

            &.second-step {
                flex-direction: column-reverse;
            }
        }

        .green-button {
            margin-top: 0 !important;
        }
    }

}