@media(max-width: 960px){



    nav{

        background: var(--white);



        width: 100%;

        height: 100%;



        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 24px;



        position: fixed;

        right: 100%;

        top: 0;

        z-index: 4;



        padding: 8px;



        transition: 1s;

    }



    nav .header-nav{

        width: 100%;



        display: flex;

        align-items: center;

        justify-content: space-between;

    }



    nav .header-nav > img{

        width: 96px;



    }



    nav .header-nav > button{

        background: none;

    }



    nav .header-nav > button:hover{

        box-shadow: none;

        

    }



    nav .header-nav > button ion-icon {

        color: var(--red);

        font-size: 32px;

    }



    nav ul {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 16px;

        

        text-align: center;



        padding: 40px;

    }



    nav .buttons{

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 8px;

    }

    nav .buttons a{
        display: flex;
        justify-content: center;
    }


    nav .buttons button{

        background: var(--header-button-bg);

    

        padding: 8px 24px;

    

        border-radius: 6px;

    

        transition: 0.6s;

    }



    nav .buttons button * {

        color: var(--white);

    }

    



    nav .buttons button:hover{

        box-shadow: none;

    }



    nav .buttons button ion-icon{

        font-size: 20px;

    }



    body{

        padding-top: 12vh;

    }



    header {

        padding: 12px 24px;

    

        box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.25);

    

        width: 100%;

        height: 12vh;

    

        position: fixed;

        left: 0;

        top: 0;

        z-index: 2;

    }



    header > img{

        min-width: 96px;

        width: 20%;

    }





    header .right{

        display: none;

    }



    header > button{

        display: block;

        background: none;

        box-shadow: none;



        padding: 12px;

    }



    header > button ion-icon{

        font-size: 32px;

        color: var(--red);

    }



    header > button:hover{

        background: none;

        box-shadow: none;

    }



    /* index.html */



    button{

        padding: 12px 32px;

        justify-content: center;



    }



    main {

        /* padding: 0 6%; */

        padding-bottom: 32px;

    

        display: flex;

        flex-direction: column;

        gap: 56px;

    }



    section{

        flex-direction: column;

    }



    section > .left, section > .right, section > img{

        width: 100%;



    }



    section > .left p, section > .right p {

        font-size: 14px;

    }



    section.quem-somos > img{

        width: 100%;

        order: 2;

    }



    section.quem-somos > .right{

        align-items: flex-start;

        text-align: left;

        width: 100%;



    }



    section.quem-somos > .right button{

        width: 100%;

    }



    section.entre-em-contato .left{

        gap: 12px;

    }



    section.entre-em-contato .left .contacts{

        gap: 8px;

    }



    section.aonde-estamos {

        gap: 24px;

    }



    section.aonde-estamos .left{

        order: 1;

    }



    section.aonde-estamos .right,

    section.nossos-produtos .left,

    section.sobre .left

    {

        gap: 6px;

    }





    main .questions{

        grid-template-columns: 1fr;

    }



    main.produtos{

        padding: 8%;

        flex-direction: column;

    }



    main.produtos .left, main.produtos .right{

        width: 100%;

    }



    main.produtos > .left .search-elements{

        gap: 8px;

    }



    main.produtos .left .search-elements #filter-button{

        display: none;

    }



    main.produtos > .left .search-elements button {

        padding: 8px 12px;

        border-radius: 6px;

    }



    main.produtos .products {

        grid-template-columns: 1fr 1fr;   

    }



    main.produtos > .right {

        display: none;

    }



    main.empresa{

        padding-top: 6%;

    }



    main.produtoExpandido{

        padding-top: 6%;

        gap: 24px;

    }



    main.produtoExpandido > .left{

        width: 100%;

    }



    main.produtoExpandido > .left .product{

        width: 100%;

        padding: 16px 40px;

    }



    main.produtoExpandido > .left .product table *{

        font-size: 13px;

    }



    main.produtoExpandido > .right{

        width: 100%;

    }



    footer{

        flex-direction: column;

        gap: 32px;

        padding: 16px 56px;



        padding-bottom: 32px;

    

    }

    

    footer * {

        text-align: center;

    }



    footer .middle .contacts {

        gap: 10px;

        align-items: center;

    }



    #whatsapp-button{

        position: fixed;

        right: 24px;

        bottom: 40px;

    

        background: #29d429;

        border-radius: 50%;

    

    

    

        padding: 16px;

    

        animation: pulse 2s infinite;

    }

    

    #whatsapp-button:hover{

        box-shadow: 0px 0px 10px 0px #29d429;

    

    }

    

    #whatsapp-button ion-icon {

        font-size: 24px;

    }

}