/* Under header Homepage */

.homepage-underheader_section {
    background-image: url('../img/backgrounds/main-bg.webp');
    color: var(--white);
    background-size: cover;
    background-position: 56% 40%;
    background-attachment: scroll;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-bottom: 120px;
}

.homepage-underheader {
    text-align: center;
    padding-top: 92px;
}

.homepage-underheader_section p {
    font-size: 24px;
    text-align: center;
}


/* BOX ELEMENTS SECTION */

.homepage-box-elements_section .box-elements_container {
    width: 100%;
    display: grid;
    gap: clamp(16px, 2vw, 28px);
}

.homepage-box-elements_section .box-elements_container .box-element {
    padding: 2em;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    box-shadow: 0px 0px 18px -2px rgba(0,0,0,0.2);
}

.homepage-box-elements_section .box-elements_container .box-element .box-description {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.homepage-box-elements_section .box-elements_container .box-element .box-description img {
    width: 18%;
}

.homepage-box-elements_section .box-elements_container .box-element .box-description p {
    padding-left: 2em;
}

@media (prefers-reduced-motion: reduce) {
    .homepage-box-elements_section .box-elements_container .box-element {
        opacity: 1 !important;
        transition: none !important;
    }
}

@media (min-width: 768px) {
    .homepage-box-elements_section .box-elements_container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* BOX PRODUCT SECTION */

.homepage-products_section .products-boxes_container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    row-gap: 7em;
}

.homepage-products_section .product-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.homepage-products_section .product-box_text {
    width: 50%;
    padding: 0 4em;
}

.homepage-products_section .product-box_text h3 {
    text-align: left;
}

.homepage-products_section .product-box_text p {
    font-size: 26px;
    margin: 40px 0;
}

.homepage-products_section .product-box_img {
    width: 50%;
}

.homepage-products_section .product-box_img img {
    width: 100%;
}

.homepage-products_section .main-cta_button {
    width: 70%;
}


/* animation of box elements */
.scroll-reveal {
    --reveal: 0;
    --slide: 80px;
    opacity: var(--reveal);
    transform: translateY(calc((1 - var(--reveal)) * var(--slide)));
    transition: none;
}

@media (max-width: 640px) {
    .scroll-reveal {
        --slide: 24px;
    }
}

.scroll-reveal.wc {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: opacity 120ms linear, transform 120ms linear;
    }
}





/* ============ Mobile Nav ============ */

@media (max-width: 768px) {

    /* UNDER HEADER */
    .homepage-underheader_section .main-cta_button {
        width: 95%;
    }


    /* box elements*/
    .homepage-box-elements_section .box-elements_container .box-element {
        padding: 1em;
    }


    .homepage-box-elements_section .box-elements_container .box-element .box-description img {
        width: 25%;
    }

    .homepage-products_section .products-boxes_container {
        row-gap: 5em;
        padding-top: unset;
    }

    .homepage-products_section .product-box {
        flex-direction: column;
        align-items: center !important;
    }

    .homepage-products_section .product-box_text {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .homepage-products_section .product-box_text h3 {
        text-align: unset;
    }

    .homepage-products_section .product-box_text p {
        font-size: 18px;
        margin: 0;
    }

    .homepage-products_section .product-box_img {
        width: 100%;
    }

}