/*==================================================
    WANTEC ACOPLAMENTOS
    responsive.css
====================================================*/

/*=========================================
    1400px
==========================================*/

@media (max-width:1400px){

.container{
    width:92%;
}

.hero h1{
    font-size:52px;
}

.section-title h2{
    font-size:38px;
}

}

/*=========================================
    1200px
==========================================*/

@media (max-width:1200px){

.container{
    width:94%;
}

.hero h1{
    font-size:46px;
}

.hero p{
    font-size:18px;
}

.grid-4{
    grid-template-columns:repeat(2,1fr);
}

.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

.products{
    grid-template-columns:repeat(2,1fr);
}

}

/*=========================================
    992px
==========================================*/

@media (max-width:992px){

header{

    background:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.logo img{

    height:48px;

}

.menu{

    display:none;

}

.menu-mobile{

    position:fixed;

    top:0;

    right:-100%;

    width:300px;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    padding:100px 30px;

    gap:25px;

    transition:.4s;

    z-index:9999;

}

.menu-mobile.active{

    right:0;

}

.menu-mobile a{

    font-size:17px;

    font-weight:600;

    color:#222;

}

.btn-menu{

    display:flex;

    width:42px;

    height:42px;

    align-items:center;

    justify-content:center;

    font-size:24px;

    cursor:pointer;

}

.hero{

    min-height:720px;

    text-align:center;

}

.hero .container{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero h1{

    font-size:40px;

    max-width:700px;

}

.hero p{

    max-width:600px;

}

.grid-3{

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

}

.grid-4{

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

}

.numbers .grid{

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

}

.form-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.contact-grid{

    grid-template-columns:1fr;

}

.about-grid{

    grid-template-columns:1fr;

}

.timeline{

    padding-left:20px;

}

}

/*=========================================
    768px
==========================================*/

@media (max-width:768px){

section{

    padding:70px 0;

}

.hero{

    min-height:650px;

    padding-top:120px;

}

.hero h1{

    font-size:34px;

    line-height:1.3;

}

.hero p{

    font-size:17px;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:15px;

}

.grid-3,
.grid-4{

    grid-template-columns:1fr;

}

.products{

    grid-template-columns:1fr;

}

.numbers .grid{

    grid-template-columns:1fr;

    gap:40px;

}

.number h3{

    font-size:44px;

}

.card{

    margin-bottom:20px;

}

.card img{

    height:220px;

}

.btn{

    width:100%;

}

.banner-interno{

    height:280px;

}

.banner-interno h1{

    font-size:34px;

}

.form-row{

    flex-direction:column;

}

.form-row .col{

    width:100%;

}

table{

    display:block;

    overflow-x:auto;

}

iframe{

    height:320px;

}

footer{

    text-align:center;

}

footer ul{

    margin-top:20px;

}

}

/*=========================================
    576px
==========================================*/

@media (max-width:576px){

.container{

    width:92%;

}

header{

    padding:5px 0;

}

.logo img{

    height:42px;

}

.hero{

    min-height:600px;

}

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:16px;

}

.section-title h2{

    font-size:26px;

}

.section-title span{

    font-size:13px;

}

.card-content{

    padding:22px;

}

.card h3{

    font-size:22px;

}

.card p{

    font-size:15px;

}

.number h3{

    font-size:38px;

}

.btn{

    padding:14px 24px;

    font-size:15px;

}

input,
select,
textarea{

    padding:15px;

    font-size:15px;

}

textarea{

    min-height:160px;

}

.whatsapp{

    width:58px;

    height:58px;

    right:18px;

    bottom:18px;

    font-size:28px;

}

.breadcrumb{

    font-size:14px;

}

}

/*=========================================
    420px
==========================================*/

@media (max-width:420px){

.hero{

    min-height:560px;

}

.hero h1{

    font-size:24px;

}

.hero p{

    font-size:15px;

}

.section-title h2{

    font-size:24px;

}

.logo img{

    height:38px;

}

.menu-mobile{

    width:100%;

}

.banner-interno{

    height:220px;

}

.banner-interno h1{

    font-size:28px;

}

.card img{

    height:190px;

}

.number h3{

    font-size:34px;

}

.copy{

    font-size:13px;

}

}

/*=========================================
    DISPOSITIVOS MUITO PEQUENOS
==========================================*/

@media (max-width:360px){

.hero h1{

    font-size:22px;

}

.hero p{

    font-size:14px;

}

.section-title h2{

    font-size:22px;

}

.btn{

    font-size:14px;

    padding:13px 18px;

}

.logo img{

    height:34px;

}

.whatsapp{

    width:54px;

    height:54px;

}

}