@media (max-width: 1024px) {
    h6.has-background {
        padding: 0 !important;
    }

    .hero,
    .why-row,
    .service-row,
    .contact-row,
    .services-row,
    .quality-row,
    .clients-rows,
    .team-row,
    .footer-contact {
        flex-direction: column !important;
    }

    .wp-block-group.is-layout-flex,
    .wp-block-buttons {
        justify-content: center !important;
    }

    .wp-block-buttons {
        flex-direction: column !important;
    }

    * {
        text-align: center !important;
    }

    .header-container {
        .header {
            width: 100% !important;
            max-width: 1200px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;

            .nav {
                padding-right: 0 !important;
            }
        }
    }

}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    overflow-x: hidden;
}

.quality-row {
    margin-bottom: 20px !important;
}

.carrousel-row {
    overflow-x: hidden !important;
}

.square-icon-box {
    background-color: #2e8857;
    aspect-ratio: 1 / 1;
    width: 20vw;
    max-width: 75px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

    img {
        width: 50%;
        height: 50%;
        object-fit: contain;
        display: block;
    }
}

.hero-animation {
    width: clamp(200px, 50%, 600px) !important;
    height: auto !important;

    @media (max-width: 600px) {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: flex;
    }

    .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
}

@media (min-width: 1025px) {
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    .wp-block-navigation__responsive-container-content {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        display: block;
    }
}

@media (max-width: 1024px) and (min-width: 500px) {
    .header-container {
        gap: 25%;
    }
}