/*=========================================================
    QUEIROZ RADIADORES
    RESPONSIVE.CSS
    Versão 1.0
=========================================================*/

/*=========================================================
                    NOTEBOOK
=========================================================*/

@media (max-width:1200px){

    .container{

        width:94%;

    }

    .hero-content h2{

        font-size:56px;

    }

    .menu ul{

        gap:25px;

    }

}

/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:992px){

    .header .container{

        height:85px;

    }

    .logo img{

        width:75px;

    }

    .logo-info h1{

        font-size:24px;

    }

    .logo-info span{

        font-size:15px;

    }

    .btn-header{

        display:none;

    }

    .menu{

        position:fixed;

        top:85px;

        right:-100%;

        width:280px;

        height:calc(100vh - 85px);

        background:#050505;

        transition:.35s;

        padding-top:40px;

        border-left:1px solid rgba(255,255,255,.08);

    }

    .menu.active{

        right:0;

    }

    .menu ul{

        flex-direction:column;

        gap:30px;

    }

    .menu-mobile{

        display:block;

    }

    .hero{

        min-height:650px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content h2{

        font-size:48px;

    }

    .hero-content p{

        font-size:18px;

    }

    .empresa-grid{

        grid-template-columns:1fr;

    }

    .contadores{

        grid-template-columns:repeat(2,1fr);

    }

    .contato-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

/*=========================================================
                    CELULAR
=========================================================*/

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    .header .container{

        height:80px;

    }

    .logo img{

        width:65px;

    }

    .logo-info h1{

        font-size:20px;

    }

    .logo-info span{

        font-size:13px;

        letter-spacing:1px;

    }

    .hero{

        min-height:600px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-tag{

        font-size:12px;

        padding:8px 18px;

    }

    .hero-content h2{

        font-size:36px;

        line-height:1.2;

    }

    .hero-content p{

        font-size:16px;

        margin-bottom:35px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:320px;

    }

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:16px;

    }

    .servicos-grid{

        grid-template-columns:1fr;

    }

    .galeria-grid{

        grid-template-columns:1fr;

    }

    .contadores{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo img{

        margin:0 auto 20px;

    }

    .scroll-down{

        display:none;

    }

}

/*=========================================================
                CELULARES PEQUENOS
=========================================================*/

@media (max-width:480px){

    .container{

        width:94%;

    }

    .hero{

        min-height:540px;

    }

    .hero-content h2{

        font-size:30px;

    }

    .hero-content p{

        font-size:15px;

    }

    .section-title h2{

        font-size:28px;

    }

    .empresa-conteudo h2{

        font-size:34px;

    }

    .contato-info h2{

        font-size:34px;

    }

    .servico img{

        height:230px;

    }

    .galeria-item img{

        height:240px;

    }

    .whatsapp-float{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

    }

    .back-top{

        right:18px;

        bottom:90px;

    }

}

/*=========================================================
                    VÍDEO RESPONSIVO
=========================================================*/

@media (max-width:768px){

    .video-section{

        padding:80px 0;

    }

    .video-background{

        height:300px;

        border-radius:15px;

    }

    .video-overlay{

        padding:20px;

    }

    .video-overlay span{

        font-size:12px;

        letter-spacing:2px;

    }

    .video-overlay h2{

        font-size:28px;

        margin:15px 0;

    }

    .video-overlay p{

        font-size:15px;

        line-height:1.6;

    }

    .play-video{

        width:70px;

        height:70px;

        font-size:28px;

        margin-top:20px;

    }

    .video-box{

        width:95%;

    }

    .fechar-video{

        top:-40px;

        font-size:35px;

    }

}

.video-box{

    width:95%;

    max-width:1000px;

}

.video-box iframe{

    width:100%;

    aspect-ratio:16/9;

    height:auto;

}

.hero-top-info{

    flex-direction:column;

    border-radius:20px;

    padding:18px;

    gap:12px;

    text-align:center;

}

.hero-top-info span{

    justify-content:center;

    font-size:14px;

}

@media(max-width:768px){

.galeria-capa img{

height:300px;

}

.galeria-capa-overlay{

padding:25px;

}

.galeria-capa-overlay h3{

font-size:24px;

}

.btn-galeria{

width:100%;

max-width:320px;

}

#fecharGaleria{

right:15px;

bottom:90px;

font-size:13px;

padding:14px 18px;

}

}