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

@media (max-width:992px){

.container{

    width:min(100%,92%);

}

.header .container{

    height:80px;

}

.logo img{

    width:160px;

}

/* HERO */

.hero{

    padding:150px 0 90px;

}

.hero-container{

    grid-template-columns:1fr;

    gap:70px;

    text-align:center;

}

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero h1{

    font-size:46px;

}

.hero p{

    max-width:700px;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.hero-image img{

    max-width:600px;

}

/* SECTION */

.section-header h2{

    font-size:38px;

}

/* EMPRESAS */

.companies-grid{

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

}

/* SOBRE */

.about-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.about-image{

    order:-1;

}

.about-content{

    text-align:center;

}

.about-list{

    text-align:left;

}

/* SOLUÇÕES */

.solutions-grid{

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

}

/* PASSOS */

.steps-grid{

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

}

.steps-grid article::after{

    display:none;

}

/* BENEFÍCIOS */

.benefits-grid{

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

}

/* CONTATO */

.contact-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.contact-info{

    text-align:center;

}

.contact-info ul{

    align-items:center;

}

/* FOOTER */

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer img{

    margin:0 auto 25px;

}

}
/* =====================================================
RESPONSIVO
768px
===================================================== */

@media (max-width:768px){

/* HEADER */

.header .container{

    height:75px;

}

.header .btn-primary{

    display:none;

}

.logo img{

    width:145px;

}

.menu{

    display:none;

    position:absolute;

    top:75px;
    left:0;

    width:100%;

    background:#0D0D0D;

    padding:30px;

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

    z-index:999;

}

.menu.active{

    display:block;

}

.menu-list{

    flex-direction:column;

    gap:22px;

    align-items:flex-start;

}

.menu-list a{

    display:block;

    font-size:18px;

}

.menu-mobile{

    display:block;

    background:none;

    border:none;

    cursor:pointer;

}

.menu-mobile span{

    display:block;

    width:28px;

    height:2px;

    background:#FFF;

    margin:6px 0;

    transition:.35s;

}

.menu-mobile.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-mobile.active span:nth-child(2){

    opacity:0;

}

.menu-mobile.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

/* HERO */

.hero{

    padding:130px 0 70px;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

    gap:16px;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

    width:100%;

}

.hero-features{

    flex-direction:column;

    gap:14px;

    align-items:center;

}

/* SECTION */

.section-header{

    margin-bottom:55px;

}

.section-header h2{

    font-size:34px;

}

/* GRID */

.companies-grid,
.solutions-grid,
.steps-grid,
.benefits-grid{

    grid-template-columns:1fr;

}

/* SOBRE */

.about-content{

    text-align:center;

}

.about-content h2{

    font-size:38px;

}

.about-list{

    gap:18px;

}

/* CONTATO */

.contact-info{

    text-align:center;

}

.contact-form{

    padding:35px;

}

/* FOOTER */

.footer{

    text-align:center;

}

.footer-grid{

    gap:40px;

}

.footer ul{

    align-items:center;

}

}
/* =====================================================
RESPONSIVO
576px
===================================================== */

@media (max-width:576px){

.container{

    width:100%;

    padding:0 20px;

}

/* HEADER */

.header .container{

    height:70px;

}

.logo img{

    width:135px;

}

.menu{

    top:70px;

    padding:25px 20px;

}

/* HERO */

.hero{

    padding:115px 0 60px;

}

.hero-badge{

    font-size:12px;

    padding:8px 16px;

}

.hero h1{

    font-size:32px;

    line-height:1.2;

}

.hero p{

    font-size:16px;

    line-height:1.7;

}

.hero-image img{

    max-width:100%;

}

.hero-buttons{

    gap:14px;

}

.hero-features{

    gap:12px;

    font-size:15px;

}

/* SECTION HEADER */

.section-header{

    margin-bottom:45px;

}

.section-header h2{

    font-size:30px;

}

.section-header p{

    font-size:16px;

}

/* SEÇÕES */

.companies,
.about,
.solutions,
.steps,
.benefits,
.contact{

    padding:80px 0;

}

/* CARDS */

.company-card,
.solution-card,
.benefit-card,
.steps-grid article{

    padding:30px;

}

.company-card i,
.solution-card i{

    font-size:38px;

}

.company-card h3,
.solution-card h3,
.benefit-card h3,
.steps-grid h3{

    font-size:22px;

}

/* SOBRE */

.about-content h2{

    font-size:30px;

}

.about-content>p{

    font-size:16px;

}

.about-list div{

    padding:20px;

}

.about-list strong{

    font-size:18px;

}

/* PASSOS */

.steps-grid span{

    width:58px;

    height:58px;

    font-size:20px;

}

/* CONTATO */

.contact-info h2{

    font-size:30px;

}

.contact-form{

    padding:25px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    padding:16px;

    font-size:15px;

}

/* FOOTER */

.footer{

    padding:60px 0 25px;

}

.footer img{

    width:150px;

}

.footer h4{

    font-size:18px;

}

.footer p,
.footer a{

    font-size:15px;

}

.footer-bottom{

    font-size:14px;

}

}