@media (max-width: 1109px) {

    .modal-content {
        margin: 200px auto;
}

.modal-content img {
    width: 100%;
}
}

@media (max-width: 985px) {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        top: 0px;
        padding: 0 20px;
        height: 90px;
    }

    .menu-hamburger {
        display: flex;
    }

    .menu-hamburger .bar {
        background: #fff;
    }

    .nav-menu {
        position: fixed;
        top: 0px;
        right: -100%;
        height: 100%;
        width: 200px;
        background: var(--cor4);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: right 0.3s ease-in-out;
    }

    .nav-menu .submenu li a {
    top: -28px;
}

    .nav-menu.open {
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
    }

    .nav-menu ul li {
        margin: 20px 0;
    }

    .nav-menu ul li a {
        color: #000;
    }

    .btn {
        width: 170px;
        padding: 8px;
        font-size: 10px;
    }

    .main {
        flex-direction: column;
        padding: 0;
    }

    .main-texto {
        padding: 150px 0;
        width: 100%;
        text-align: center;
    }


    .ligue-1 {
        display: block;
        /* margin-left: 40px; */
        color: black;
        font-weight: bold;
        background-color: #DCB34B;
        padding: 2px;

        border-radius: 8px;
    }

    a {
        text-decoration: none;
    }

    .img-what {
        display: block;
        width: 25px;
        /* margin-left: 10px; */

        transition: transform 0.5s ease-in-out; /* Transição suave */
        transform: scale(1); /* Escala inicial */
    }

    
    .img-what:hover {
        transform: scale(1.2); /* Aumenta o tamanho ao passar o mouse */
        transition: transform 0.1s ease-in-out; /* Acelera a transição ao passar o mouse */
    }


    .logo a img {
        width: 120px;
    }
    
    .ligue-2 {
        display: none;
    }
    
    .ligue-2 span {
        color: var(--cor1);
        font-size: 20px;
        font-weight: bold;
        /* margin: 10px; */
    }
   

    .main-texto h1 {
        font-size: 30px;
    }

    .main-img {
        position: relative;
        top: -120px;
        width: 100%;
    }

    .main-texto p {
        padding: 30px;
        font-size: 16px;
    }

    .main-img img {
        width: 80%;
        margin: 0 auto;
    }



    .home {
        padding: 40px 0px;
    }

    .sinais-bateria h2, .produtos h2, .home h2 {
        font-size: 18px;
        /* width: 420px; */
    }

    
.empresas-parceira h1 {
    font-size: 23px;
}

.empresas-parceira h1::before {
    top: -20px;
    width: 80%; /* Ajusta para o tamanho do texto */
}


    .home-box-esquerda p:nth-of-type(2) {
        font-size: 13px;
    }


    .home-box {
        display: flex;
        flex-direction: column;
    }
    
    .home-box-esquerda {
        width: 90%;
    }

    .home-box-esquerda .texto{
        font-size: 14px;
    }
    
    
    .home-box-direita {
        width: 90%;
        margin-top: 30px;
    }
    
    .home-box-direita img {
        width: 550px;
    }


    .baterias-box-car h3 {
        font-size: 16px;
    }

    .sinais-bateria {
        padding: 10px;
    }



    .qualidade {
        padding: 10px;
    }


    .qualidade-box-1 {
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .qualidade-texto-1 {
        width: 100%;
    } 
    
    .qualidade-texto-2 {
        width: 100%;
    }

    .qualidade-texto-1 h2 {
        font-size: 13px;
    }

    .qualidade-texto-1 h3 {
        font-size: 20px;
    }

    .qualidade-texto-2 h2 {
        font-size: 15px;
    }


    .faq {
        padding: 0px;
    }

    .faq-box p {
        padding: 10px;
    }
    
    
    .rodape-box {
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 20px;
    }

    .logo-rodape {
        margin: 0 auto;
        width: 200px;
    }

    .logo-rodape img {
        width: 100%;
    }


    .contato {
        margin-top: 18px;
    }
    
    .contato h2 {
        font-size: 18px;
        color: var(--cor1);
    }
    
    .contato span {
        color: var(--cor4);
    }
    
    .rodape {
        padding: 30px 0;
    }
    
    
    .rodape-box-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top: 1px solid var(--cor4);
        width: 90%;
        margin: 0 auto;
        padding: 15px 0;
    }
    
    .rodape-box-info p {
        color: var(--cor4);
    }



    /* ===============
    PAGINA HELIAR
    CONTAINER HELIAR
    ==================
     */

     .heliar-container-box {
        display: flex;
        justify-content: center; /* centraliza horizontalmente */
        align-items: center;     /* centraliza verticalmente */
        text-align: center;  
        padding: none;
        padding: 0 10px;
    }

    .heliar-container-texto {
        flex: none;
        width: 100%;
    }

    .vazio {
        display: none;
    }

    .heliar-container-texto p {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
        letter-spacing: normal;
        color: #fffffff;
        letter-spacing: normal;
        padding: 10px;
    }

    /* ===============
    FIM
    CONTAINER HELIAR
    ==================
     */




     /* ===============
    BATERIA EM MACAÉ HELIAR PARA CARRO
    ==================
     */
    .heliar-carro-container {
        max-width: 1290px;
        width: 100%;
        margin: 0 auto;
        padding: 30px 20px;
    }

    .heliar-carro-box img {
        width: 320px;
    }

    .heliar-carro-box-box {
        flex-wrap: wrap;
    }

     
     /* ===============
    FIM
     BATERIA EM MACAÉ HELIAR PARA CARRO
    ==================
     */

    

}



@media (max-width: 787px) {


/* BATERIAS DE MOTO */
.bateria-motos {
    padding: 120px 60px 20px 60px;
}

.bateria-motos h2 {
    color: var(--cor1);
    font-size: 18px;
}


.bateria-motos-box img {
    width: 300px;
    margin: 25px auto;
}

.bateria-motos-box .texto-hover {
    font-size: 13px;
}

.bateria-motos-box:hover img {
    filter: blur(3px);
}

.bateria-motos-box:hover .texto-hover {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



.empresas-parceira h2 {
    font-size: 18px;
}


}



@media (max-width: 595px) {

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 30px;

        top: 190px;
        width: 86%;
        height: 70%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
    }
    
    .modal-content {
        width: 90%;
        height: 70%;
        margin: auto;
        display: block;
        transition: transform 0.2s ease-in-out;
    }

    .swiper {
        width: 100%;
        height: 250px;
      }
    

    .swiper-slide img {
        display: block;
        width: 100%;
        /* height: 100%; */
        object-fit: cover;
      }


    .marquee-img h2{
        /* font-size: 13px; */
        padding: 10px 0;
    }

    
    
    .marquee-img {
       width: 40%;
       margin: 10px;
       /* padding: 10px 0 0 0; */
    }
    
    
    .marquee-img img {
        max-width: 40%; 
    }


    .whatsapp {
        bottom: 10px;
    }


    /* ===============
    PAGINA HELIAR
    CONTAINER HELIAR
    ==================
     */

    .heliar-container-texto span {
        font-size: 18px;
    }

    .heliar-container-texto h1 {
        font-size: 44px;
    }

    .heliar-container-texto p {
        font-size: 16px;
    }


     /* ===============
    FIM
    CONTAINER HELIAR
    ==================
     */


}