/* ==========================================
   CARBWEL AUTOPEÇAS
   RESPONSIVE.CSS
========================================== */

/* =========================
   NOTEBOOK (1200px)
========================= */

@media (max-width:1200px){

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

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

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

    .brands-slider{
        grid-template-columns:repeat(3,1fr);
    }

}

/* =========================
   TABLET (992px)
========================= */

@media (max-width:992px){

    header{
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(15px);
    }

    .logo{
        color:var(--red);
    }

    .logo span{
        color:#777;
    }

    nav{
        display:none;
    }

    .btn-nav{
        padding:12px 20px;
        font-size:14px;
    }

    .hero{
        text-align:center;
        justify-content:center;
    }

    .hero-text{
        margin:auto;
    }

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

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

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .about-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-text{
        text-align:center;
    }

    .about-list{
        justify-content:center;
    }

    .about-list div{
        justify-content:center;
    }

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .cta-box{
        padding:60px 40px;
    }

}

/* =========================
   CELULAR (768px)
========================= */

@media (max-width:768px){

    .container{
        width:92%;
    }

    .nav{
        height:75px;
    }

    .logo{
        font-size:26px;
    }

    .btn-nav{
        display:none;
    }

    .hero{
        min-height:100vh;
        padding-top:90px;
    }

    .hero h1{
        font-size:38px;
        line-height:1.15;
    }

    .hero p{
        font-size:16px;
        line-height:1.7;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }

    .stats-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .stat-card{
        padding:30px;
    }

    .stat-card h2{
        font-size:34px;
    }

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

    .about{
        padding:80px 0;
    }

    .about h2{
        font-size:34px;
    }

    .image-card{
        height:340px;
    }

    .products{
        padding:80px 0;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .product-card{
        padding:35px 28px;
    }

    .brands-slider{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .brand{
        padding:22px 10px;
        font-size:14px;
    }

    .cta{
        padding:80px 0;
    }

    .cta-box{
        padding:50px 25px;
    }

    .cta h2{
        font-size:30px;
    }

    .cta p{
        font-size:16px;
    }

    footer h3{
        font-size:26px;
    }

}

/* =========================
   CELULAR PEQUENO (480px)
========================= */

@media (max-width:480px){

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

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

    .section-title span{
        font-size:11px;
        letter-spacing:2px;
    }

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

    .about h2{
        font-size:28px;
    }

    .stat-card i{
        font-size:34px;
    }

    .product-card .icon{
        width:65px;
        height:65px;
    }

    .product-card .icon i{
        font-size:28px;
    }

    .product-card h3{
        font-size:21px;
    }

    .brands-slider{
        grid-template-columns:1fr;
    }

    .scroll-indicator{
        display:none;
    }

}

/* =========================
   TELAS MUITO GRANDES
========================= */

@media (min-width:1600px){

    .container{
        max-width:1450px;
    }

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

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

}