/* ===================================
RESPONSIVO
=================================== */

@media(max-width:768px){

.container{

    width:90%;

    max-width:100%;

    margin:0 auto;

}

/* HEADER */

header .container{

    width:100%;

    padding:0 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-sizing:border-box;

}

html,
body{

    overflow-x:hidden;

}

.menu-mobile{

    background:none;

    border:none;

    color:#fff;

    font-size:2.8rem;

    cursor:pointer;

    z-index:9999;

    transition:.3s;

}

.menu-mobile:hover{

    color:var(--purple);

}



.btn-header{

    display:none;

}

.menu-mobile{

    display:block;

    font-size:2rem;

}

/* HERO */

.hero{

    display:flex;

    flex-direction:column;

    text-align:center;

    gap:50px;

    padding-top:120px;

}

.hero h1{

    font-size:3rem;

    line-height:.95;

}

.hero p{

    font-size:1.1rem;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a{

    width:100%;

}

/* ABOUT */

.about{

    display:flex;

    flex-direction:column;

    text-align:center;

}

.about img{

    max-width:100%;

}

.about h2{

    font-size:3rem;

}

/* GALERIA */

.gallery{

    display:grid;

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

    gap:12px;

}

.gallery img{

    width:100%;

}

/* SERVIÇOS */

.services{

    grid-template-columns:1fr;

}

#servicos h2{

    font-size:3rem;

}

/* PROCESSO */

#process h2{

    font-size:3rem;

}

.timeline{

    flex-direction:column;

    gap:30px;

}

.connector{

    transform:rotate(90deg);

}

/* REVIEWS */

.reviews{

    grid-template-columns:1fr;

}

#reviews h2{

    font-size:3rem;

}

/* FAQ */

#faq h2{

    font-size:3rem;

}

/* CTA */

.cta h2{

    font-size:3.5rem;

    line-height:.95;

}

.cta a{

    width:100%;

    display:flex;

    justify-content:center;

}

/* FOOTER */

footer{

    text-align:center;

}

}

/* ===========================
MENU MOBILE
=========================== */

@media(max-width:768px){

    .menu{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    height:calc(100vh - 80px);

    background:#080808;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:120px;

    gap:40px;

    transition:.35s;

    z-index:998;

}

    .menu.active{

        left:0;

    }

}