/* GLOBALS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --blue-rgb: 24, 86, 156;
    --blue-gray-rgb: 247, 247, 247;
    --light-blue-rgb: 221, 230, 237;
    --gray-rgb: 213, 206, 190;
    --orange-rgb: 240, 141, 29;
    --side-margin: 14rem;
    --navbar-height: 6.4rem;
}

html {
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
}

h1 {
    font-size: 5.8rem;
}

h2 {
    font-size: 5.75rem;
}

h3 {
    font-size: 3.125rem;
    font-weight: 800;
}

h4 {
    font-size: 2.1875rem;
}

h5 {
    font-size: 1.875rem;
}

h6 {
    font-size: 1rem;
    font-weight: 400;
}

p {
    font-size: 1.8125rem;
}

button, .button {
    cursor: pointer;
    border-radius: 0.7rem;
    padding: 0.8rem 2rem;
    border: none;
    color: white;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
}

a {
    text-decoration: none;
    color: unset;
    list-style-type: none;
}

li {
    cursor: pointer;
}

.filler {
    flex: 1;
}
/* NAVBAR */
nav {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: white;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.menu-button {
    font-size: 3.125rem;
    color: rgb(var(--blue-rgb));
    display: none;
}

#menu-toggle {
    display: none;
}

nav > ul {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 2rem;
    color: rgb(var(--blue-rgb));
}

    nav > ul > a {
        list-style: none;
        font-weight: 500;
        font-size: 1.1875rem;
    }

    nav > ul > img {
        width: 0.625rem;
        height: 0.8rem;
    }
/* INQUIRE */
.inquire {
    padding: 7.375rem var(--side-margin) 4.375rem;
    max-width: 1400px;
    margin: auto;
}

    .inquire h3 {
        text-align: center;
    }

    .inquire .form-wrapper p.sent {
        text-align: center;
        color: #003cff;
    }

    .inquire .form-wrapper p.error {
        text-align: center;
        color: #ff0123;
    }

.form-wrapper {
    background-color: rgb(var(--light-blue-rgb));
    padding-top: 2.75rem;
    padding-bottom: 4.8rem;
    padding-left: 8rem;
    padding-right: 8rem;
    border-radius: 2.1875rem;
    color: rgb(var(--blue-rgb));
}

    .form-wrapper form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form-wrapper label {
        font-size: 1.5rem;
        margin-right: 1rem;
        text-align: right;
        width: 16rem;
        margin-top: 0.5rem;
    }

.form-field input, .custom-dropdown {
    color: rgb(var(--blue-rgb));
    font-size: 1.5rem;
    font-weight: 400;
    width: 30.625rem;
    height: 2.8rem;
    margin-bottom: 1.375rem;
    border: 1px solid rgb(var(--blue-rgb));
    border-radius: 0.6875rem;
    background-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

.form-field select {
    margin-bottom: 21.375rem;
}

.form-field:first-of-type {
    margin-top: 3rem;
}

.form-field input:focus {
    outline: transparent;
}

.form-field select:required:invalid {
    color: #808080;
}

.form-wrapper button {
    background-color: rgb(var(--blue-rgb));
    width: 20rem;
}

.form-field {
    display: flex;
}

    .form-field option[value=""][disabled] {
        display: none;
    }

    .form-field option {
        background-color: pink;
        max-height: 3.125rem !important;
    }

    .form-field:last-of-type {
        margin-bottom: 2rem;
    }

.custom-dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-dropdown-options {
    display: none;
    left: 0;
    top: calc(100% + 0.6rem);
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 0.6875rem;
    z-index: 1;
}

.custom-dropdown-option {
    padding: 8px;
    height: 3.125rem;
    padding-left: 1rem;
    border-bottom: 1px solid #eaebeb;
}

.custom-dropdown.open .custom-dropdown-options {
    display: block;
}
/* POPUP */
.popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    height: 100svh;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    padding: 6rem;
    background-color: rgba(0, 0, 0, 0.9);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .popup-wrapper::-webkit-scrollbar {
        display: none;
    }

.popup {
    width: 75%;
    background-color: white;
    padding: 1.2rem;
    z-index: 3;
    border-radius: 1rem;
    align-self: start;
}

.popup-data {
    position: relative;
}

.popup h5 {
    color: rgb(var(--blue-rgb));
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-weight: 800;
}

.popup p {
    font-size: 1rem;
    padding: 0px 1rem 2rem;
}

.popup img {
    width: 100%;
    height: 60svh;
    object-fit: cover;
}

.popup button {
    position: absolute;
    right: -4rem;
    top: -1rem;
    background-color: rgb(var(--blue-rgb));
    border-radius: 1000px;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 0.5rem;
    padding: 0;
}

.popup .reference {
    font-style: italic;
}

    .popup .reference a {
        text-decoration: none;
    }
/* FOOTER */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 4.8rem;
    color: rgb(var(--blue-rgb));
    text-align: center;
}

    footer h5 {
        font-weight: 400;
        line-height: 1.5rem;
    }

.icons {
    margin-top: 1.375rem;
}

    .icons a {
        margin-right: 1.6875rem;
    }

        .icons a:last-of-type {
            margin: 0;
        }
/* HOME */
/* HERO SECTION */
.hero {
    position: relative;
    overflow: hidden;
    height: 49rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .hero h1 {
        color: white;
        text-align: center;
        word-wrap: break-word;
    }

    .hero > img {
        position: absolute;
        top: 0;
        left: -1px;
        z-index: -1;
        height: 100%;
        width: calc(100vw + 2px);
        object-fit: cover;
        object-position: center bottom;
        filter: brightness(75%);
    }

a.button {
    background-color: rgb(var(--orange-rgb));
    margin-top: 4rem;
}
/* ABOUT / WHAT WE DO SECTION */
.about {
    height: 46.7rem;
    background: linear-gradient(to bottom, rgb(var(--blue-rgb)) 45%, rgb(var(--blue-gray-rgb)) 88%);
    color: white;
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .about > .contents {
        width: clamp(60%, 60%, 90%);
        margin-top: 5.2125rem;
        text-align: justify;
    }

        .about > .contents > p:first-of-type {
            font-weight: 600;
            margin-bottom: 1.8125rem;
        }

        .about > .contents > h4 {
            cursor: pointer;
            color: rgb(var(--orange-rgb));
            margin-top: 5.8125rem;
            font-weight: 500;
        }
/* TECHNOLOGIES SECTION */
.technologies {
    height: 47rem;
    background-color: rgb(var(--blue-gray-rgb));
    padding-top: 5rem;
    padding-left: var(--side-margin);
    padding-right: var(--side-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .technologies > h3 {
        color: rgb(var(--blue-rgb));
        text-align: center;
    }

    .technologies > .images {
        display: flex;
        gap: 2rem;
        width: 100%;
        margin-top: 4.435rem;
    }

        .technologies > .images .image-wrapper {
            flex-grow: 1;
            position: relative;
        }

            .technologies > .images .image-wrapper > .contents {
                position: absolute;
                color: white;
                text-align: center;
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

                .technologies > .images .image-wrapper > .contents > p {
                    width: 50%;
                }

            .technologies > .images .image-wrapper > img {
                width: 100%;
            }

    .technologies > button {
        margin-top: 2.875rem;
        background-color: rgb(var(--orange-rgb));
    }
/* LOCATION / WHERE WE ARE */
.locations {
    padding-top: 5rem;
    padding-bottom: 2.625rem;
    background: linear-gradient(to bottom, rgb(var(--blue-gray-rgb)), white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .locations > h3 {
        color: rgb(var(--blue-rgb));
    }

    .locations > .image-wrapper {
        margin-top: 5rem;
        width: auto;
        height: auto;
        position: relative;
    }

        .locations > .image-wrapper > img {
            width: 100%;
            height: 100%;
            max-height: calc(100svh - var(--navbar-height));
        }

        .locations > .image-wrapper > .pin {
            position: absolute;
            width: 10% !important;
            height: auto;
            cursor: pointer;
        }

.pin > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pin > .label-wrapper {
    position: relative;
    display: none;
}

    .pin > .label-wrapper > .label {
        left: -140%;
        min-width: 130px;
        bottom: 0;
        position: absolute;
        padding: 0.56rem 1.375rem;
        border-radius: 0.75rem;
        background-color: rgb(var(--gray-rgb));
        font-weight: 500;
        text-align: center;
    }

    .pin > .label-wrapper > .triangle {
        position: absolute;
        left: -20%;
    }

.pin:hover .label-wrapper {
    display: block;
}
/* VIDEO SECTION */
.video {
    background-color: white;
    --padding: 1.5rem;
    padding: var(--padding);
    position: relative;
    max-height: calc(100svh - var(--navbar-height));
}

    .video iframe {
        height: 100%;
        max-height: calc(100svh - var(--navbar-height) - 2 * var(--padding));
        width: 100%;
    }
/* IMPACT SECTION */
.impact {
    color: rgb(var(--blue-rgb));
    padding: 5rem var(--side-margin) 16.5625rem;
    text-align: center;
}

    .impact p {
        font-weight: 600;
    }

    .impact > .items {
        margin-top: 8.375rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 3rem;
        justify-content: center;
    }

        .impact > .items > .item > .disclaimer {
            margin-top: 0.5rem;
            padding: 0px 20%;
            font-size: 1.1875rem;
            font-weight: 400;
            line-height: 0.75rem;
        }
/* TESTIMONIALS */
.testimonials {
    background: linear-gradient(to bottom, white, rgb(var(--blue-rgb)) 50%);
}

    .testimonials h3 {
        color: rgb(var(--blue-rgb));
        text-align: center;
    }

    .testimonials .testimonials-wrapper {
        position: relative;
        margin-top: 4.435rem;
    }

        /*.testimonials .testimonials-wrapper .slick-slider .slick-track {
            width: 100%;
            white-space: nowrap;
            overflow-y: hidden;*/
            /*overflow-x: scroll;*/
            /*scroll-snap-type: x mandatory;
            -ms-overflow-style: none;
            scrollbar-width: none;
            display: flex;
        }*/

            .testimonials .testimonials-wrapper .slick-slider .item-wrapper {
                display: inline-block;
                white-space: normal;
                background-color: rgb(var(--blue-rgb));
                border-radius: 2.625rem;
                padding: 3.125rem;
                padding-top: 4.375rem;
                margin-right: 1.25rem;
                scroll-snap-align: center;
                max-width: 960px 
            }
        .testimonials .testimonials-wrapper .slick-slider .slick-list .slick-track {
            padding-left: 25%;
        }
                .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item {
                    display: flex;
                    gap: 2.3125rem;
                    /*width: 45vw;*/
                    overflow-wrap: break-word;
                    color: white;
                }

                    .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > img {
                        align-self: center;
                        width: 285px;
                        border-radius: 50%;
                    }

                    .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > .content-wrapper {
                        display: flex;
                        flex-direction: column;
                    }

                        .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > .content-wrapper > p {
                            font-size: 1.375rem;
                        }

                            .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > .content-wrapper > p:first-of-type, .testimonials > .testimonials-wrapper > .items-wrapper > .item-wrapper > .item > .content-wrapper p:last-of-type {
                                font-style: italic;
                            }

                            .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > .content-wrapper > p:nth-of-type(2) {
                                font-weight: 600;
                            }

                            .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > .content-wrapper > p:last-of-type {
                                font-size: 1rem;
                            }

                        .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > .content-wrapper > .name, .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > .content-wrapper > .residence {
                            text-align: right;
                        }

                .testimonials .testimonials-wrapper .slick-slider .item-wrapper:last-of-type {
                    margin-right: 0px;
                }

            .testimonials .testimonials-wrapper .slick-slider::-webkit-scrollbar {
                display: none;
            }

        .testimonials .testimonials-wrapper .navigation-button {
            position: absolute;
            top: 0;
            height: 100%;
            cursor: pointer;
            z-index: 1
        }

        .testimonials .testimonials-wrapper .next-button {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
        }

.recognition > h3 {  
show shortcuts
alt
+
shift
+
k

Save
Update available: Click to download
    text-align: center;
    color: white;
    margin-top: 8.45rem;
}

.recognition > .images {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0px 9rem;
    margin-top: 8.75rem;
    padding-bottom: 14.2rem;
}

    .recognition > .images > img {
        justify-self: center;
        width: 100%;
        max-width: 400px;
    }
/* ABOUT */
.about-us {
    background: linear-gradient(to bottom, rgb(var(--light-blue-rgb)) 45%, white 90%);
}

    .about-us .information {
        padding: 0px var(--side-margin);
        text-align: center;
        color: rgb(var(--blue-rgb));
    }

        .about-us .information > p {
            margin-top: 1.8125rem;
            font-weight: 500;
            font-size: 1.5625rem;
        }

            .about-us .information > p:first-of-type {
                font-weight: 700;
            }

        .about-us .information > .problem-title {
            padding-top: 6rem;
        }

        .about-us .information > .solution-title {
            margin-top: 9.5rem;
        }

        .about-us .information > .about-title {
            margin-top: 11.25rem;
        }

        .about-us .information > .images {
            padding: 5rem 2rem;
            max-width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.875rem;
        }

            .about-us .information > .images > img {
                width: 100%;
                height: auto;
                aspect-ratio: 1.5;
                object-fit: cover;
                cursor: pointer;
            }

.partners {
    background-color: rgb(var(--blue-rgb));
    padding: 5rem 19rem 12.75rem;
}

    .partners > h3 {
        color: white;
        text-align: center;
    }

    .partners > .images {
        margin-top: 8.125rem;
        gap: 1.625rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        .partners > .images > img {
            flex: 0 0 calc(25% - 20px);
            aspect-ratio: 1.7791411043;
            border-radius: 1.3rem;
            width: 200px;
        }

.about-image-popup {
    padding-left: 15vw;
    padding-right: 15vw;
}

    .about-image-popup > .popup {
        width: 100%;
    }

    .about-image-popup > .popup, .about-image-popup .popup-data, .about-image-popup img {
        height: 100%;
    }
/* END ABOUT */
/* NEWS */
.news {
    padding: 3.875rem var(--side-margin) 7.9375rem;
    background-color: rgba(var(--blue-rgb));
    color: rgb(var(--blue-rgb));
}

    .news h3 {
        text-align: center;
    }

    .news p {
        font-size: 1.2rem;
    }

    .news .items-wrapper {
        margin-top: 4.5rem;
    }

    .news .item {
        background-color: white;
        height: 17.875rem;
        margin-bottom: 1.8125rem;
        display: flex;
    }

        .news .item:last-of-type {
            margin: 0;
        }

        .news .item > .image-wrapper {
            width: 28%;
            flex: 28;
        }

        .news .item > .content {
            padding: 2.625rem;
            flex: 72;
            display: flex;
            flex-direction: column;
            justify-content: baseline;
        }

.content h5 {
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.content p {
    font-weight: 500;
}

.news .item > .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news button {
    background-color: rgb(var(--orange-rgb));
    width: 10.475rem;
    padding: 0.625rem 1.3125rem;
    font-size: 1.375rem;
}

.button-wrapper {
    display: flex;
    justify-content: flex-end;
}

.dark-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}
/* Projects */
section.projects {
    background-color: rgb(var(--light-blue-rgb));
    padding: 4.625rem 8.5rem 7.125rem;
}

    section.projects h3 {
        color: rgb(var(--blue-rgb));
        text-align: center;
    }

    section.projects .custom-dropdown-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 7.5rem;
    }

        section.projects .custom-dropdown-wrapper > .custom-dropdown {
            max-width: 330px;
        }

        section.projects .custom-dropdown-wrapper .custom-dropdown-option {
            display: flex;
            align-items: center;
            text-transform: uppercase;
        }

            section.projects .custom-dropdown-wrapper .custom-dropdown-option .filterCheckbox {
                height: 1.5rem;
                width: auto;
                aspect-ratio: 1;
                border: 3px solid rgb(var(--blue-rgb));
                margin-right: 1.875rem;
                padding: 0.25rem;
            }

                section.projects .custom-dropdown-wrapper .custom-dropdown-option .filterCheckbox .indicator {
                    background-color: rgb(var(--blue-rgb));
                    height: 100%;
                    width: 100%;
                }

        section.projects .custom-dropdown-wrapper .value {
            text-transform: uppercase;
        }

    section.projects .place {
        position: relative;
        display: flex;
        margin-bottom: 2.875rem;
    }

        section.projects .place .image-wrapper {
            flex: 3.25;
            position: relative;
            overflow: hidden;
        }

            section.projects .place .image-wrapper img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                z-index: 0;
            }

        section.projects .place .project-wrapper {
            position: relative;
            flex: 5;
            max-width: 60%;
        }

            section.projects .place .project-wrapper .navigation {
                cursor: pointer;
                --size: 3.75rem;
                width: var(--size);
                height: var(--size);
                position: absolute;
                top: calc(50% - var(--size) / 2);
                left: calc(0px - var(--size) / 2);
            }

                section.projects .place .project-wrapper .navigation:last-of-type {
                    left: unset;
                    right: calc(0px - var(--size) / 2);
                }

        section.projects .place .project {
            background-color: white;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            section.projects .place .project h5 {
                font-size: 1.6875rem;
                text-transform: uppercase;
                color: rgb(var(--blue-rgb));
                font-weight: 800;
            }

            section.projects .place .project p {
                font-size: 1.2rem;
                white-space: pre-line;
            }

            section.projects .place .project .project-details {
                flex: 0 0 auto;
                width: 100%;
                scroll-snap-align: start;
                padding: 2.375rem 6.875rem 1.75rem;
            }

                section.projects .place .project .project-details .information {
                    margin-top: 1rem;
                }

                    section.projects .place .project .project-details .information .data-wrapper {
                        margin-top: 2rem;
                    }

                        section.projects .place .project .project-details .information .data-wrapper .data {
                            display: flex;
                            margin-top: 1.0625rem;
                        }

                            section.projects .place .project .project-details .information .data-wrapper .data .name {
                                flex: 3.33;
                                font-weight: 700;
                            }

                            section.projects .place .project .project-details .information .data-wrapper .data .values {
                                flex: 5;
                                text-align: left;
                            }

            section.projects .place .project::-webkit-scrollbar {
                display: none;
            }

        section.projects .place:last-of-type {
            margin: 0;
        }

section.solutions {
    background-color: rgb(var(--light-blue-rgb));
    padding: 4.625rem 7.5rem 7.65625rem;
}

    section.solutions h3 {
        color: rgb(var(--blue-rgb));
        text-align: center;
        margin-bottom: 3.1875rem;
    }

.solution-section .information {
    display: flex;
}

    .solution-section .information .images-carousel {
        flex: 7.6;
        position: relative;
    }

        .solution-section .information .images-carousel .navigation {
            --width: 3.375rem;
            --height: 3.8125rem;
            position: absolute;
            z-index: 1;
            width: var(--size);
            height: auto;
            top: calc(50% - var(--height) / 2);
            cursor: pointer;
        }

            .solution-section .information .images-carousel .navigation:first-of-type {
                left: -1px;
            }

            .solution-section .information .images-carousel .navigation:last-of-type {
                right: 0;
            }

        .solution-section .information .images-carousel .images {
            height: 100%;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            position: relative;
            scrollbar-width: none;
        }

            .solution-section .information .images-carousel .images .image-wrapper {
                width: 100%;
                height: 100%;
                scroll-snap-align: start;
                flex: 0 0 auto;
            }

                .solution-section .information .images-carousel .images .image-wrapper img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    position: absolute;
                }

            .solution-section .information .images-carousel .images::-webkit-scrollbar {
                display: none;
            }

    .solution-section .information .details {
        flex: 9.6;
        padding: 2.375rem 3.25rem;
        background-color: rgb(var(--blue-rgb));
        color: white;
        white-space: pre-line;
    }

        .solution-section .information .details h4 {
            font-size: 2.5rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .solution-section .information .details p {
            font-size: 1.375rem;
        }

        .solution-section .information .details .button-wrapper {
            display: flex;
            justify-content: center;
        }

            .solution-section .information .details .button-wrapper button {
                width: 10.5rem;
                height: 2.7rem;
                padding: 0;
                font-size: 1.375rem;
                background-color: rgb(var(--orange-rgb));
                margin-top: 1.5rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }

.solution-section .advantages {
    border: 3px solid rgb(var(--blue-rgb));
    color: rgb(var(--blue-rgb));
    padding-top: 1.45rem;
    max-height: 25.625rem;
    overflow: auto;
}

    .solution-section .advantages h4 {
        text-align: center;
        font-weight: 800;
        margin-bottom: 1.9rem;
    }

    .solution-section .advantages .solutions-wrapper {
        padding: 0px 1.1875rem;
    }

        .solution-section .advantages .solutions-wrapper .advantages-header {
            display: grid;
            grid-template-columns: 3.5fr 6fr 7fr;
        }

            .solution-section .advantages .solutions-wrapper .advantages-header p {
                font-size: 1.4rem;
                font-weight: 700;
            }

        .solution-section .advantages .solutions-wrapper .advantage {
            display: grid;
            grid-template-columns: 3.5fr 6fr 7fr;
            margin-top: 1.625rem;
            border-bottom: 1px solid rgba(var(--blue-rgb));
        }

            .solution-section .advantages .solutions-wrapper .advantage li {
                font-weight: 500;
                margin-top: 0.9375rem;
                font-size: 1.375rem;
            }

                .solution-section .advantages .solutions-wrapper .advantage li:first-of-type {
                    margin: 0;
                }

            .solution-section .advantages .solutions-wrapper .advantage p {
                font-size: 1.4rem;
                font-weight: 700;
                padding-right: 2rem;
            }

            .solution-section .advantages .solutions-wrapper .advantage h4 {
                font-size: 1.875rem;
            }

            .solution-section .advantages .solutions-wrapper .advantage .solution, .solution-section .advantages .solutions-wrapper .advantage .traditional {
                padding-right: 8.75rem;
                padding-bottom: 2.0625rem;
            }

    .solution-section .advantages::-webkit-scrollbar {
        background-color: rgba(var(--blue-rgb));
    }

    .solution-section .advantages::-webkit-scrollbar-thumb {
        background-color: rgba(var(--blue-rgb));
    }

.solution-section:first-of-type {
    margin-bottom: 8rem;
}

.dot-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    position: absolute;
    width: 100%;
    bottom: 1.096875rem;
    left: 0;
    z-index: 1;
}

    .dot-group .dot {
        height: 0.75rem;
        width: 0.75rem;
        background-color: white;
        border-radius: 100px;
        opacity: 50%;
        cursor: pointer;
    }

        .dot-group .dot:first-of-type {
            opacity: 1;
        }
        .recaptcha-error{
            margin-bottom: 10px;
            color: orangered;
            font-size: 12px;
        }
/* BREAKPOINTS */
@media screen and (max-width: 1900px) {
    .news .item {
        height: 22rem;
    }
}
/* For smaller screens */
@media screen and (max-width: 1600px) {
    :root {
        --side-margin: 8rem;
    }

    html {
        font-size: 14px;
    }

    .partners {
        padding: 5rem var(--side-margin) 12.75rem;
    }

    .news .item {
        height: 20rem;
    }

    .project-details {
        padding: 2.375rem 3rem 1.75rem !important;
    }

    section.solutions {
        padding: 4.625rem var(--side-margin);
    }
}
/* For tablets */
@media screen and (max-width: 1200px) {
    :root {
        --side-margin: 4rem;
    }

    html {
        font-size: 12px;
    }

    .about-us > .images {
        padding: 5rem calc(var(--side-margin) * 2) 8rem;
    }

    .partners {
        padding: 5rem var(--side-margin) 5rem;
    }

    .about-image-popup {
        padding-top: 20svh;
        padding-bottom: 20svh;
    }

    .impact > .items {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "a a" "b b";
    }

        .impact > .items > .item:last-of-type {
            grid-area: b;
            justify-self: center;
        }

    .testimonials {
        background: linear-gradient(to bottom, white 10%, rgb(var(--blue-rgb)) 60%);
    }

        .testimonials > .testimonials-wrapper > .items-wrapper > .item-wrapper > .item {
            flex-direction: column;
            width: 22rem;
        }

            .testimonials > .testimonials-wrapper > .items-wrapper > .item-wrapper > .item > img {
                width: 60%;
            }

            .testimonials > .testimonials-wrapper > .items-wrapper > .item-wrapper > .item .name {
                margin-top: 3rem;
            }

        .testimonials > .testimonials-wrapper > .navigation-button {
            width: 6rem;
        }

        .testimonials > .testimonials-wrapper > .items-wrapper > .item-wrapper {
            min-height: 530px;
        }

    .recognition > .images {
        grid-template-columns: repeat(4, 1fr);
    }

    .recognition > .images {
        padding: 0px var(--side-margin);
        padding-bottom: 14.2rem;
    }

    section.projects {
        padding: 4.625rem var(--side-margin) var(--side-margin);
    }

    .about > .contents {
        width: 80%;
    }
}
@media screen and (max-width: 960px) {
    .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item {
        display: grid;
        justify-items: center;
    }
    .testimonials .testimonials-wrapper .slick-slider .item-wrapper {
        max-width: 80vw;
        height: 370px;
        padding: 2.125rem;
    }
        .testimonials .testimonials-wrapper .slick-slider .item-wrapper > .item > img {
            width: 150px;
        }
}
@media screen and (max-width: 900px) {
    .menu-button {
        display: block;
    }

    nav .filler {
        display: none;
    }

    #menu-toggle:checked + .menu-list {
        display: flex;
    }

    nav ul {
        display: none;
        animation: all 300ms ease;
        overflow: hidden;
        position: absolute;
        width: 100vw;
        height: auto;
        top: var(--navbar-height);
        right: 0;
        left: 0;
        transform: unset;
        background-color: white;
        padding: 2.5rem;
        border-radius: 0px 0px 2rem 2rem;
        border-bottom: 2px solid rgb(var(--gray-rgb));
        flex-direction: column;
    }

        nav ul li {
            width: 100%;
            text-align: center;
            font-size: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgb(var(--gray-rgb));
        }

            nav ul li:last-of-type {
                padding: 0;
                border-bottom: none;
            }

    nav .menu-bullet {
        display: none;
    }

    .form-wrapper {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .form-field {
        width: 100% !important;
        display: flex;
        flex-direction: column;
    }

        .form-field label {
            text-align: left;
            margin: 0;
        }

        .form-field input, .custom-dropdown {
            width: 100% !important;
        }

    .popup {
        width: 100%;
    }

    .about-us > .images {
        padding: 5rem calc(var(--side-margin) * 2) 4rem;
        gap: 2rem;
        grid-template-columns: 1fr;
    }

    .about-image-popup {
        padding: 30svh 4rem;
    }

    .technologies {
        height: auto;
    }

        .technologies > .images {
            flex-direction: column;
        }

    .locations > .image-wrapper {
        max-width: 90vw;
        height: auto;
    }

    .news .item {
        height: 25rem;
        height: unset;
    }

    .button-wrapper {
        margin-top: 2rem;
    }

    .news .item > .image-wrapper {
        flex: 1;
        width: 100%;
    }

    .news .item > .content {
        flex: 1;
    }

    .place {
        flex-direction: column;
    }

        .place .image-wrapper img {
            position: relative !important;
            height: 30svh !important;
        }

    .information {
        flex-direction: column;
    }

        .information .images-carousel .navigation {
            position: absolute !important;
        }

        .information .images-carousel .images {
            height: 40svh !important;
            overflow-y: hidden;
        }

            .information .images-carousel .images img {
                height: 101% !important;
                position: relative !important;
            }

    .advantages .filler {
        display: none;
    }

    .advantages .advantages-header {
        grid-template-columns: repeat(2, 1fr) !important;
        align-items: center !important;
    }

        .advantages .advantages-header p {
            text-align: center;
        }

    .advantages .advantage {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-areas: "a a" "b b";
        grid-gap: 2rem;
    }

        .advantages .advantage p {
            grid-area: a;
            text-align: center;
            padding: 0 !important;
        }

        .advantages .advantage ul {
            padding-right: 0 !important;
        }

        .advantages .advantage li {
            list-style-position: inside;
        }

    .advantages .solution, .advantages .traditional {
        padding-right: 2rem !important;
    }

    .about {
        background: linear-gradient(to bottom, rgb(var(--blue-rgb)) 75%, rgb(var(--blue-gray-rgb)) 97%);
    }

    .recognition > .images {
        grid-template-columns: repeat(2, 1fr);
    }

        .recognition > .images > img {
            max-width: 300px;
        }

    section.projects .place .project-wrapper {
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --side-margin: 2rem;
    }

    html {
        font-size: 10px;
    }

    .popup-wrapper {
        padding: 2rem;
    }

    .popup img {
        height: auto;
    }

    .popup button {
        right: 0;
        top: 0;
    }

    .about-image-popup {
        padding: 35svh 1rem;
    }

    .hero {
        height: 70svh;
    }

        .hero h1 {
            font-size: 4rem;
        }

    .about {
        height: unset;
    }

        .about > .contents {
            width: 90vw;
        }

    .technologies > .images > .image-wrapper > img {
        min-height: 20rem;
        object-fit: cover;
        border-radius: 20px;
    }

    .impact > .items {
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas: "a" "b" "c";
    }

    .recognition > .images {
        grid-template-columns: repeat(1, 1fr);
    }

    .news .item {
        flex-direction: column;
    }

    .name {
        flex: 1 !important;
    }

    .values {
        flex: 1 !important;
    }

    .projects-wrapper > .navigation {
        left: calc(0px - var(--size) / 3) !important;
    }

        .projects-wrapper > .navigation:last-of-type {
            left: unset !important;
            right: calc(0px - var(--size) / 3) !important;
        }

    .impact .value {
        font-size: 4rem;
    }

    .recognition > .images {
        grid-template-columns: repeat(2, 1fr);
    }

    .about {
        background: linear-gradient(to bottom, rgb(var(--blue-rgb)) 75%, rgb(var(--blue-gray-rgb)) 97%);
    }

        .about .contents h4 a {
            font-size: 2rem;
        }

            .about .contents h4 a img {
                width: 20px;
            }

    .testimonials .testimonials-wrapper .slick-slider .item-wrapper {
        min-height: 430px;
    }

    .solutions .solution-section .advantages {
        max-height: initial;
    }
}

@media screen and (max-width: 415px) {
    .recognition > .images {
        grid-template-columns: repeat(1, 1fr);
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 300px) {
    html, body, section, .hero, .hero > img {
        min-width: 301px;
    }

    .impact > h3 {
        font-size: 2.75rem;
    }
}