@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap); :root {
    --primary-color: #f58900;
    --secondary-color: #47379b;
    --primary-color-hover: #f58900d4;
    --secondary-color-hover: #47379bd4;
}

body {
    font-family: Poppins;
    margin: 0;
}

section.top-message {
    display: flex;
    background: var(--primary-color);
    justify-content: center;
    color: white;
    align-items: center;
    h1 {
        font-size: 0.7rem;
    }
}
.owl-item {
    padding: 0;
}
#don-max-landing .headerDiv nav .navDesk {
}

#don-max-landing .headerDiv nav .navMobile {
    display: none;
}

header {
    background: var(--secondary-color);
    display: flex;
    .logo {
        display: inline-flex;
        width: 10%;
        img {
            max-width: 150px;
            height: auto;
        }
    }

    .burger-menu {
        display: none;
        flex-direction: column;
        justify-content: space-around;
        width: 2rem;
        height: 2rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10;
    }

    .line {
        width: 2rem;
        height: 0.25rem;
        background: white;
        border-radius: 10px;
    }

    .navDesk {
        display: inline-flex;
        width: 60%;
        ul {
            display: flex;
            justify-content: center;
            list-style: none;
            li {
                margin: 0 10px;
                a {
                    color: #ffffff;
                    text-decoration: none;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary-color-hover);
                    }

                    display: inline-flex;
                    width: fit-content;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }

    .navMobile {
        display: none;
    }

    @media (max-width: 1000px) {
        .navDesk {
            display: none;
            width: 60%;
            ul {
                display: flex;
                justify-content: center;
                list-style: none;
                li {
                    margin: 0 10px;
                    a {
                        color: #ffffff;
                        text-decoration: none;
                        font-weight: bold;
                        &:hover {
                            color: var(--primary-color-hover);
                        }

                        display: inline-flex;
                        width: fit-content;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }

        .navMobile.active {
            display: flex;
            position: absolute;
            height: 20vh;
            z-index: 999999;
            top: 135px;
            right: 0;
            left: 0;
            width: 100%;
            bottom: 0;
            background: var(--primary-color);
            ul {
                display: flex;
                justify-content: flex-start;
                list-style: none;
                li {
                    margin: 0 10px;
                    a {
                        color: #ffffff;
                        text-decoration: none;
                        font-weight: bold;
                        &: hover {
                            color: var(--primary-color-hover);
                        }

                        display: inline-flex;
                        width: fit-content;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }

        .navMobile.active ul {
            display: flex;
            flex-direction: column;
            height: 100%;
            li {
                /* height: 20%; */}

            justify-content: flex-start;
        }

        .burger-menu {
            display: flex;
        }

        nav {
            display: none;
        }

        .logo {
            display: inline-flex;
            width: 35%;
            img {
                max-width: 150px;
                height: auto;
            }
        }
    }

    .cta {
        display: inline-flex;
        a {
            background: var(--primary-color);
            padding: 15px;
            color: white;
            text-decoration: none;
            @media (max-width: 1000px) {
                padding: 5px;
                font-size: 1rem; }

            &:hover {
                background: var(--primary-color-hover);
            }
        }
    }

    align-items: center;
    padding: 10px 50px;
    justify-content: space-between;
}

article.article-flex.donMax-margin {
    display: flex;
    .text {
        width: 55%;
        .first-text {
            font-size: 2.5rem;
            margin: 0;
        }

        p {
            font-size: 1rem;
            text-align: justify;
        }

        .contact {
            background: var(--secondary-color);
            padding: 15px;
            color: white;
            text-decoration: none;
            &:hover {
                background: var(--secondary-color-hover);
            }
        }

        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .img {
        width: 30%;
        img {
            width: fit-content;
            object-fit: contain;
            width: 100%;
            height: auto;
        }

        flex-grow: 1;
    }

    gap: 20px;
    justify-content: space-between;
    @media (max-width: 1000px) {
        flex-direction: column-reverse;
        .text {
            width: 100%;
        }

        .img {
            width: 100%;
        }
    }
}

.banner-donMax {
    img {
        width: fit-content;
        object-fit: contain;
        width: 100%;
        height: auto;
    }
}

article#who-are-we {
    background: var(--primary-color);
    padding: 40px 50px;
    color: white;
    display: flex;
    .img {
        width: 40%;
        img {
            width: fit-content;
            object-fit: contain;
            width: 100%;
            height: auto;
        }
    }

    .text {
        width: 40%;
        h2 {
            font-size: 2.5rem;
            font-weight: 500;
        }

        p {
            font-size: 1rem;
        }
    }

    align-items: center;
    justify-content: space-around;
    @media (max-width: 1000px) {
        flex-direction: column;
        .text {
            width: 100%;
            h2 {
                font-size: 2rem;
                font-weight: 700;
            }
        }

        .img {
            width: 100%;
        }
    }
}

section#products {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    h2 {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    p {
        width: 70%;
        font-size: 1rem;
    }

    p.products-subtext {
        text-align: center;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    article.products {
        display: flex;
        .productCard {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
                max-width: 60px;
            }

            width: 25%;
        }

        ; justify-content: space-between;
        align-items: flex-start;
    }

    @media (max-width: 1000px) {
        display: flex;
        flex-direction: column; align-items: center; background: white; h2 {
            font-size: 2.5rem;
            font-weight: 600;
        }

        p {
            width: 100%;
            font-size: 0.9rem;
            text-align: left;
        }

        article.products {
            display: flex;
            .productCard {
                display: flex;
                width: 40%;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img {
                    max-width: 60px;
                }
            }

            flex-wrap: wrap;
            gap: 1;
        }
    }
}

section#top-show {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    article.products {
        display: flex;
        .product-show {
            width: 28%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        width: 100%;
        justify-content: center;
    }
}

section#contact-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--primary-color);
    padding: 50px 55px;
    margin: 0;
    color: white;
    h2 {
        width: 60%;
        font-size: 2rem;
        font-weight: 600;
        margin: 0;
    }

    p {
        width: 60%;
    }

    form {
        width: 80%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 15px;
        .formInput {
            width: 31%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            input {
                height: 25px;
                width: 80%;
                border: none;
            }
        }

        button {
            background: var(--secondary-color);
            color: white;
            border-radius: 4px;
            padding: 10px;
            border: none;
            font-size: 1rem;
            display: flex;
            font-weight: 600;
            width: 100%;
            align-items: center;
            cursor: pointer;
            max-width: 150px;
            justify-content: center;
            &:hover {
                background: var(--secondary-color-hover);
            }
        }

        align-items: flex-start;
    }

    @media (max-width: 1000px) {
        h2 {
            width: 90%;
            font-size: 2rem;
            font-weight: 600;
            margin: 0;
        }

        p {
            width: 90%;
        }

        form {
            width: 100%;
            .formInput {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                input {
                    height: 25px;
                    width: 100%;
                    border: none;
                }
            }
        }
    }
}

footer.donMax-margin {
    background: var(--secondary-color);
    display: flex;
    flex-direction: column;
    padding: 50px 70px;
    justify-content: space-around;
    .first-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        .logo {
            display: inline-flex;
            width: 10%;
            img {
                max-width: 150px;
                height: auto;
            }
        }

        nav {
            container: nav / inline-size;
            display: inline-flex;
            width: 60%;
            ul {
                display: flex;
                justify-content: center;
                list-style: none;
                li {
                    margin: 0 10px;
                    a {
                        color: #ffffff;
                        text-decoration: none;
                        font-weight: bold;
                        &:hover {
                            color: var(--primary-color);
                            display: inline-flex;
                            width: fit-content;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
        }

        .social-media {
            display: flex;
            gap: 5px;
            img {
                max-height: 30px;
            }
        }

        .cta {
            display: inline-flex;
            a {
                background: var(--primary-color);
                padding: 15px;
                color: white;
                text-decoration: none;
                &:hover {
                    background: var(--primary-color-hover);
                }
            }
        }

        justify-content: space-between;
    }

    .second-row {
        display: flex;
        flex-direction: row;
        border-top: 1px solid white;
        justify-content: space-between;
        p {
            font-size: 0.6rem;
            color: white;
        }
    }

    .navMobile {
        display: none;
    }

    @media (max-width: 1000px) {
        .first-row {
            .navDesk {
                display: none;
            }
        }

        .navMobile {
            display: flex;
            flex-direction: column;
            gap: 10px;
            a {
                color: white;
                border: 1px solid white;
                text-decoration: none;
                font-weight: bold;
                &:hover {
                    color: var(--primary-color);
                }

                width: 92%;
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            a.cta {
                background: var(--primary-color);
                color: white;
            }

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

section#payment-methods {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    h2 {
        font-size: 1rem;
        color: var(--secondary-color);
        margin-bottom: 0;
    }

    img {
        max-height: 75px;
    }
}

section.banners-carrousel {
    img {
        width: 100%;
        object-fit: contain;
    }
}

.donMax-margin {
    padding: 0 80px;
    margin: 50px 0;
}

@media (max-width: 1000px) {
    .donMax-margin {
        padding: 0 30px;
        margin: 20px 0;
    }

    .headerDiv {
        position: relative;
        top: 0;
        width: 100%;
        z-index: 9999;
    }

    .headerDiv.sticky {
        position: fixed;
        top: 0;
    }

    body#don-max-landing {
        /* margin-top: 140px; */
    }
}

footer.donMax-margin {
    margin: 0;
}

.cta {
    border: none;
    outline: none;
}

@media (min-width: 1600px) {
    .donMax-margin {
        padding: 0 330px;
        margin: 20px 0;
    }

    article#who-are-we {
        background: var(--primary-color);
        padding: 40px 50px;
        color: white;
        display: flex;
    }

    section#contact-form {
        form {
            width: 50%;
        }
    }

    article.article-flex.donMax-margin {
        & .text {
            p {
                font-size: 1rem;
                text-align: justify;
            }
        }
    }
}

.productCard-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 230px;
    text-align: left;
}

.productCard-img {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.buttonContainer {
    display: flex;
    width: 100%;
}

.container {
    display: flex;
}

.mobile {
    display: none;
}

section#contact-form form .formInput.textarea {
    width: 58%;
}

@media (max-width: 1000px) {
    section#contact-form form .formInput.textInput {
        width: 57%;
    }

    section#contact-form form .formInput.textarea {
        width: 100%;
    }

    #don-max-landing .headerDiv nav .navDesk {
        display: none;
    }

    #don-max-landing .headerDiv nav .navMobile {
        display: flex;
    }

    section.top-message {
        padding: 10px;
    }
}

@media screen and (max-width: 650px) {
    #top-show {
        .container {
            flex-direction: column;
        }

        .mobile {
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: space-between;
        }

        .desktop {
            display: none;
        }

        .left-column {
            width: 25%;
            .product-show {
                width: 100%;
                img {
                    height: 20%;
                    width: auto;
                    max-height: 75px;
                    object-fit: cover;
                    aspect-ratio: 1/1;
                }
            }
        }

        .right-column {
            width: 70%;
            .hidden {
                display: none;
            }
        }

        article.products.desk {
            display: none;
        }
    }

    .productCard-text {
        h3 {
            margin-bottom: 0px
        }
    }
}

section#contact-form form .formInput.textInput {
    width: 58%;
}

@media (max-width: 1000px) {
    section#contact-form form .formInput.textInput {
        width: 100%;
    }
}

.success-message.hidden {
    display: none;
}


.burger-menu {
  width: 30px;
  height: 20px;
  position: relative;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}

.burger-menu .line {
  background-color: #fff;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger-menu .line:nth-child(1) {
  top: 0px;
}

.burger-menu .line:nth-child(2) {
  top: 20px;
}
.burger-menu .line:nth-child(3) {
     top: 9px;
}

.burger-menu .line:nth-child(3) {
  bottom: 0px;
}

.burger-menu.active .line:nth-child(1) {
  top: 9px;
  transform: rotate(135deg);
}

.burger-menu.active .line:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.burger-menu.active .line:nth-child(3) {
  top: 9px;
  transform: rotate(-135deg);
}
  span.required {
    color: red;
}