:root {
    --verde-floresta: #2E7D32;
    --amarelo-solar: #FFC107;
    --cinza-urbano: #757575;
    --branco-neve: #FFFFFF;
    --padding-pq: 1rem;
    --padding-md: 2rem;
    --padding-gd: 4rem;


    --cor-fundo: #181818;
    --cor-borda: #333;
    --dest_sec: #a1a1a1;
}

@media screen and (max-width: 767px) {
    button {
        color: #000;
        text-decoration: none;
    }

    /* header */

    html {
        width: 100vw;
    }

    header {
        display: flex;
        width: 100vw;
        justify-content: space-between;
        padding: 0;
    }

    header nav,
    header button {
        display: none;
    }

    .menu_mobile {
        background-color: var(--cor-borda);
        padding-bottom: 5rem;
    }

    .menu_mobile .theme_button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .menu_mobile ul li a {
        text-decoration: none;
        color: var(--branco-neve);
    }

    .menu_mobile_icon {
        display: block;
    }

    .menu_mobile_icon img {
        height: 50px;
    }

    .menu_mobile ul li {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .menu_mobile .mobile_link {
        display: block;
        padding-top: 1.2rem;
    }

    .open {
        display: block;
    }

    header .theme_button {
        display: none;
    }

    /* mobile */
    .theme-container {
        display: none;
    }

    .menu_mobile button {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    .menu_mobile button:hover {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    #mobile-theme-toggle {
        padding: 1rem;
        border: var(--cinza-urbano) 2px solid;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }
    /* hero secton */

    #hero {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("../media/images/backgd1.jpg");
        object-fit: contain;
        background-repeat: no-repeat;
        background-position-y: center;
        height: auto;
        padding-bottom: 3rem;
    }

    .hero_foreground h1 {
        font-size: 2.75rem;
        padding: 1rem;
    }

    .hero_foreground p {
        font-size: 1rem;
        font-weight: 100;
        letter-spacing: 1.5px;
    }

    /* about section */

    #about {
        height: auto;
        height: auto;
        padding-bottom: 9rem;
    }

    #about h2,
    #advantages h2,
    #HowToUse h2,
    #reviews h2,
    #cta h2 {
        padding-bottom: 2rem;
        font-size: 2.5rem;
        font-weight: 300;
        padding-top: 11vh;
        text-align: center;
    }

    .about_text {
        grid-column: 1;
        grid-row: 1;
        max-height: 70vh;
    }

    .about_images {
        display: none;
    }

    /* HowToUse section */

    #HowToUse {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("../media/images/backgd3.jpg");
        object-fit: contain;
        background-repeat: no-repeat;
        background-position-y: center;
        padding: 3rem 1rem;
    }

    .step h3 {
        font-size: 1rem;
    }

    .step p {
        font-size: .93rem;
    }

    .HowToUse_image {
        display: none;
    }

    /* advantages section */

    #advMob {
        width: 100%;
        height: auto;
        text-align: center;
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;
        background: rgb(255, 255, 255);
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(173, 216, 230, 1) 100%);
    }

    .card:hover {
        flex: 1;
    }

    #advantages {
        display: none;
    }

    /* Carousel  Review Section  */

    .slider {
        width: 100%;
        height: auto;
    }

    .slides {
        width: 400%;
        height: auto;
    }

    .slide {
        width: 25%;
        min-height: 250px;
    }

    .slide_area {
        width: 100%;
        padding: 20px;
        margin-top: 5rem;
    }

    .reviewer_avatar {
        width: 100px;
    }

    .reviewer_name {
        font-size: 14px;
        margin-top: 20px;
    }

    .reviewer_text {
        font-size: 12px;
        margin-top: 5px;
    }

    .manual_navigation {
        width: 100%;
        margin-top: 10px;
    }

    .manual_btn {
        padding: 4px;
        margin-right: 15px;
    }

    .navigation_auto {
        width: 100%;
        margin-top: 280px;
    }

    .navigation_auto div {
        padding: 4px;
        margin-right: 15px;
    }

    .navigation_auto,
    .manual_navigation,
    .slides input {
        display: none;
    }

    /* section CTA */

    #cta {
        height: auto;
        padding-bottom: 3rem;
    }

    /* footer */

    #footer {
        display: flex;
        flex-direction: column;
    }

    .social_media img {
        display: none;
    }

    .footer_links,
    .social_media,
    .footer_contact {
        margin: 2rem 0;
    }

    .footer_links,
    .social_media {
        line-height: 2rem;
    }

    .footer_contact div {
        margin: 1rem 0;
    }

    /* politica page */

    .politica_title {
        padding: 1.5rem;
    }

    /* solicitação page */

    #formulario {
        height: auto;
    }

    .form_container {
        padding: 2rem 3rem 0 2rem;
    }

    .sup {
        display: flex;
        flex-direction: row;
    }

    .inf div {
        text-align: left;
        justify-content: center;
    }

    .footer_form {
        margin: 0;
    }

    .input_msg {
        display: flex;
        flex-direction: column;
    }

    .input_msg textarea {
        width: 50vw;
        height: 25vh;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    button {
        color: #000;
        text-decoration: none;
    }

    /* header */

    html {
        width: 100vw;
    }

    header {
        display: flex;
        width: 100vw;
        justify-content: space-between;
        padding: 0;
    }

    header nav,
    header button {
        display: none;
    }

    .menu_mobile button {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    .menu_mobile button:hover {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    #mobile-theme-toggle {
        padding: 1rem;
        border: var(--cinza-urbano) 2px solid;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }
    .menu_mobile {
        background-color: var(--cor-borda);
        padding-bottom: 5rem;
    }


    .menu_mobile ul li a {
        text-decoration: none;
        color: var(--branco-neve);
    }

    .menu_mobile_icon {
        display: block;
    }

    .menu_mobile_icon img {
        height: 50px;
    }

    .menu_mobile ul li {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .menu_mobile .mobile_link {
        display: block;
        padding-top: 1.2rem;
    }

    .open {
        display: block;
    }

    header .theme_button {
        display: none;
    }


    /* mobile */
    .theme-container {
        display: none;
    }

    .menu_mobile button {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    .menu_mobile button:hover {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    #mobile-theme-toggle {
        padding: 1rem;
        border: var(--cinza-urbano) 2px solid;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }


    /* hero secton */

    #hero {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("../media/images/backgd1.jpg");
        object-fit: contain;
        background-repeat: no-repeat;
        background-position-y: center;
    }

    /* about section */

    #about {
        height: auto;
        padding-bottom: 3rem;
    }

    .about_text {
        grid-column: 1;
        grid-row: 1;
        max-height: 70vh;
    }

    .about_images {
        display: none;
    }

    .about_images img {
        width: 50vw;
    }

    /* HowToUse section */

    #HowToUse {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("../media/images/backgd3.jpg");
        object-fit: contain;
        background-repeat: no-repeat;
        background-position-y: center;
        padding-bottom: 3rem;
    }

    .HowToUse_image {
        display: none;
    }

    /* section CTA */

    #cta {
        height: auto;
        padding-bottom: 3rem;
    }

    /* footer */

    .footer_links,
    .social_media {
        margin: 1rem 0;
    }

    .footer_links,
    .social_media {
        line-height: 1rem;
    }

    .footer_contact div {
        margin: .5rem 0;
    }

    /* politica page */

    .politica_title {
        padding: 1.5rem;
    }

    /* solicitação page */

    #formulario {
        height: 100%;
    }

    .form_container {
        padding: 2rem 3rem 0 2rem;
    }

    .sup {
        display: flex;
        flex-direction: row;
    }

    .inf div {
        text-align: left;
        justify-content: center;
    }

    .footer_form {
        margin: 0;
    }
}


body.dark {
    header {
        background-color: var(--cor-fundo);
    }

    header a {
        color: var(--branco-neve)
    }

    button {
        background-color: var(--cor-fundo);
        border: 1px solid var(--branco-neve);
        color: var(--branco-neve);
    }

    button:hover {
        background-color: var(--verde-floresta);
        transition: 0.7s;
        color: var(--branco-neve);
    }

    .menu_mobile button {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    .menu_mobile button:hover {
        background: var(--cinza-urbano);
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    #mobile-theme-toggle {
        padding: 1rem;
        border: var(--cinza-urbano) 2px solid;
        cursor: pointer;
        font-size: 1rem;
        border-radius: 50%;
    }

    #about {
        background-color: var(--cor-fundo);
    }

    #about h2,
    #advantages h2,
    #HowToUse h2,
    #reviews h2,
    #cta h2 {
        color: var(--branco-neve);
    }

    .about_container p {
        color: var(--branco-neve);
    }

    #advantages {
        background: rgb(18, 18, 18);
    }

    #reviews {
        background-color: var(--cor-fundo);
    }

    .slide {
        background-color: var(--cor-fundo);
    }

    .slide_area {
        color: var(--branco-neve);
    }

    .manual_btn {
        border: 2px solid #FFF;
    }

    .navigation_auto div {
        border: 2px solid #FFF;
    }

    #radio1:checked~.navigation_auto .auto_btn1,
    #radio2:checked~.navigation_auto .auto_btn2,
    #radio3:checked~.navigation_auto .auto_btn3,
    #radio4:checked~.navigation_auto .auto_btn4 {
        background-color: #FFF;
    }

    #cta {
        background: rgb(18, 18, 18);
    }

    .cta_content {
        color: var(--branco-neve);
    }

    /* politica page */

    .politica_title {
        background-color: var(--cor-fundo);
        color: var(--branco-neve);
    }

    .politica_container {
        background-color: var(--cor-fundo);
        color: var(--branco-neve);
    }

    /* solicitação page */

    .politica_title {
        background-color: var(--cor-fundo);
        color: var(--branco-neve);
    }

    .politica_container {
        background-color: var(--cor-fundo);
        color: var(--branco-neve);
    }

    /* formulario page */

    #formulario {
        background-color: var(--cor-fundo);
        color: var(--branco-neve);
        height: 100vh;
    }

    .form_container {
        padding-bottom: 2rem;
    }

    .form_box {
        background-color: var(--cor-fundo);
    }

    .input_form input,
    select,
    textarea,
    #embalagem{
        background-color: #757575;
    }

    .input_form input::placeholder,
    select,
    #date,
    textarea::placeholder {
        color: var(--branco-neve);
    }

    .form_button {
        background-color: var(--cor-fundo);
    }

    @media screen and (min-width: 768px) and (max-width: 1024px){
        #formulario {
            padding-bottom: 5rem;
        }

        .footer_form {
            margin-top: 35rem;
        }
    }

    @media screen and (max-width: 768px) {
        #formulario {
            padding-bottom: 5rem;
        }

        .footer_form {
            margin-top: 100vh;
        }
    }

    
}