/* ===================================================
   RESET
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

/* ===================================================
   VARIÁVEIS
=================================================== */

:root{

    --azul-principal:#0B5ED7;
    --azul-escuro:#084298;
    --azul-claro:#EAF3FF;

    --cinza-claro:#F8F9FA;
    --cinza:#6C757D;
    --cinza-escuro:#212529;

    --branco:#FFFFFF;

    --radius:10px;

    --shadow:0 10px 30px rgba(0,0,0,.10);

}

/* ===================================================
   ESTILOS GERAIS
=================================================== */

body{

    font-family:Arial, Helvetica, sans-serif;
    background:var(--branco);
    color:var(--cinza-escuro);
    line-height:1.6;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

section{

    padding:90px 0;

}

/* ===================================================
   CONTAINER
=================================================== */

.hp-container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

/* ===================================================
   TOP BAR
=================================================== */

.top-bar{

    background:#062B63;

    color:#FFF;

    font-size:12px;

    padding:8px 0;

}

.top-bar .hp-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.top-left{

    display:flex;

    gap:25px;

}

.top-left span{

    display:flex;

    align-items:center;

    gap:7px;

}

.top-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.top-right a{

    color:#FFF;

    font-size:17px;

    transition:.3s;

}

.top-right a:hover{

    color:#25D366;

    transform:translateY(-2px);

}
.top-right i{

    margin-right:5px;

}

/* ===================================================
   HEADER
=================================================== */

.hp-header{

    position:sticky;

    top:0;

    background:#FFF;

    z-index:999;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.hp-header .hp-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.hp-logo img{

    height:75px;

    width:auto;

}

.hp-menu{

    display:flex;

    gap:25px;

}

.hp-menu a{

    color:var(--cinza-escuro);

    position:relative;

    padding-bottom:6px;

}

.hp-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--azul-principal);

    transition:.3s;

}

.hp-menu a:hover::after{

    width:100%;

}

.hp-menu a:hover{

    color:var(--azul-principal);

}


/* ===================================================
   AÇÕES DO HEADER
=================================================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:22px;

}

.header-phone{

    color:var(--cinza-escuro);

    text-decoration:none;

    font-weight:600;

    white-space:nowrap;

}

.header-phone i{

    color:var(--azul-principal);

    margin-right:6px;

}

.header-phone:hover{

    color:var(--azul-principal);

}


/* ===================================================
   BOTÕES
=================================================== */

.hp-btn{

    background:var(--azul-principal);

    color:#FFF;

    padding:14px 28px;

    border-radius:8px;

    transition:.3s;

    display:inline-block;

    font-weight:600;

    box-shadow:0 8px 20px rgba(11,94,215,.25);

    text-decoration:none;

}

.hp-btn:hover{

    background:var(--azul-escuro);

}


/* BOTÃO WHATSAPP */

.whatsapp-btn{

    background:#159447;

}

.whatsapp-btn:hover{

    background:#117638;

}

/* ===================================================
   HERO
=================================================== */

.hero{

    background:linear-gradient(135deg,#EAF3FF,#FFFFFF);

    padding:130px 0;

}

.hero-content{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:60px;

}

.hero-text{

    flex:1;

}

.hero-image{

    flex:0.8;

    display:flex;
    justify-content:center;

}

.hero-tag{

    display:inline-block;
    background:var(--azul-principal);
    color:#FFF;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    margin-bottom:20px;

}

.hero h1{

    font-size:48px;
    color:var(--cinza-escuro);
    line-height:1.2;
    margin:20px 0;

}

.hero p{

    font-size:20px;
    color:var(--cinza);
    margin-bottom:35px;

}

.hero-buttons{

    display:flex;
    gap:15px;
    margin-bottom:45px;

}

.hero-btn-outline{

    border:2px solid var(--azul-principal);
    color:var(--azul-principal);
    padding:14px 28px;
    border-radius:8px;
    transition:.3s;
    display:inline-block;

}

.hero-btn-outline:hover{

    background:var(--azul-principal);
    color:#FFF;

}

.hero-stats{

    display:flex;
    gap:20px;
    margin-top:40px;
    flex-wrap:wrap;

}


.hero-image img{

    width:100%;

    max-width:650px;

    height:450px;

    object-fit:cover;

    object-position:center;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.stat-card{

    flex:1;
    min-width:160px;

    background:#FFF;

    padding:1px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card h3{

    font-size:32px;

    color:var(--azul-principal);

    margin-bottom:8px;

}

.stat-card p{

    color:var(--cinza);

    font-size:15px;

}

/* ===================================================
   DIFERENCIAIS
=================================================== */

.beneficios{

    padding:35px 0;

    background:#FFF;

}

.beneficios-grid{

    display:grid;

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

}

.beneficio-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:10px 25px;

    border-right:1px solid #E5E5E5;

}

.beneficio-item:last-child{

    border-right:none;

}

.beneficio-item i{

    font-size:38px;

    color:var(--azul-principal);

    min-width:45px;

    text-align:center;

}

.beneficio-item h3{

    margin:0 0 6px;

    color:var(--azul-escuro);

    font-size:17px;

}

.beneficio-item p{

    margin:0;

    color:var(--cinza);

    font-size:13px;

}

/* ===================================================
   QUEM SOMOS
=================================================== */

.empresa{

    padding:90px 0;

    background:#FFF;

    scroll-margin-top:140px;

}

.empresa-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.empresa-texto h2{

    font-size:40px;

    line-height:1.2;

    margin:20px 0;

}

.empresa-texto p{

    color:var(--cinza);

    font-size:17px;

    margin-bottom:18px;

}

.empresa-imagem img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.empresa-destaques{

    display:grid;

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

    gap:20px;

    margin-top:60px;

}

.empresa-destaque{

    display:flex;

    align-items:center;

    gap:15px;

    padding:22px;

    background:#F8FAFC;

    border-radius:12px;

}

.empresa-destaque i{

    font-size:30px;

    color:var(--azul-principal);

}

.empresa-destaque strong{

    display:block;

    color:var(--azul-escuro);

    margin-bottom:5px;

}

.empresa-destaque span{

    color:var(--cinza);

    font-size:14px;

}

.empresa .section-tag{


    background:var(--azul-claro);

    color:var(--azul-principal);


    padding:8px 20px;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

/* ===================================================
   DESTAQUES
=================================================== */


.section-title{
    font-size:32px;
    margin-bottom:40px;
    text-align:center;
    color:var(--cinza-escuro);
}

.grid-destaques{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.card{
    background:#fff;
    padding:30px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:.3s;
    text-align:center;
}

.card:hover{
    transform:translateY(-5px);
}

.card h3{
    color:var(--azul-principal);
    margin-bottom:10px;
}

.card p{
    color:var(--cinza);
    font-size:15px;
}

/* ===================================================
   CATEGORIAS
=================================================== */

.categorias{

    padding:80px 0;
    background:var(--cinza-claro);

}

/* ===================================================
   AUTO PEÇAS
=================================================== */


.pecas{

    padding:50px 0 40px;

    background:#F8FAFC;

    scroll-margin-top:220px;

}

.pecas .section-header{

    text-align:center;

}

.pecas h2{

    font-size:32px;

    margin:15px 0;

}

.pecas .section-description{

    max-width:750px;

    margin:0 auto 35px;

}

.pecas-grid{

    display:grid;

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

    gap:15px;

}

.peca-card{

    background:#FFF;

    padding:25px 15px;

    text-align:center;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

}

.peca-card:hover{

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.peca-card i{

    font-size:34px;

    color:var(--azul-principal);

    margin-bottom:15px;

}

.peca-card h3{

    font-size:16px;

    margin-bottom:8px;

}

.peca-card p{

    color:var(--cinza);

    font-size:13px;

    margin:0;

}

.pecas-btn{

    text-align:center;

    margin-top:30px;

}

.pecas .section-tag{

    background:var(--azul-claro);

    color:var(--azul-principal);

    padding:8px 20px;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}


/* ===================================================
   CENTRO AUTOMOTIVO
=================================================== */

.centro-automotivo{

    padding:90px 0;

    background:#FFF;

    scroll-margin-top:140px;

}

.centro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/* VÍDEO */

.centro-imagem{

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.centro-imagem video{

    width:100%;

    height:520px;

    object-fit:cover;

    object-position: center 60%;

    display:block;

}


/* TEXTO */

.centro-texto h2{

    font-size:38px;

    line-height:1.2;

    margin:20px 0;

}

.centro-texto > p{

    color:var(--cinza);

    font-size:17px;

    margin-bottom:30px;

}


/* SERVIÇOS */

.servicos-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:30px;

}

.servico-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    background:#F8FAFC;

    border-radius:10px;

    border:1px solid #EAEAEA;

    transition:.3s;

}

.servico-item i{

    color:var(--azul-principal);

    font-size:20px;

}

.servico-item span{

    font-weight:600;

    font-size:14px;

}

.centro-automotivo .section-tag{


    background:var(--azul-claro);

    color:var(--azul-principal);


    padding:8px 20px;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;
}


/* ===================================================
   MARCAS PARCEIRAS
=================================================== */

.marcas{

    padding:90px 0;

    background:#F8FAFC;

    overflow:hidden;

    scroll-margin-top:140px;

}


/* TÍTULO */

.marcas .section-title{

    text-align:center;

    margin:20px 0;

}


/* DESCRIÇÃO */

.marcas .section-description{

    text-align:center;

    max-width:750px;

    margin:0 auto 50px;

}


/* ÁREA DO CARROSSEL */

.marcas-slider{

    width:100%;

    overflow:hidden;

    position:relative;

}


/* FAIXA DE LOGOS */

.marcas-track{

    display:flex;

    align-items:center;

    width:max-content;

    animation:scrollMarcas 35s linear infinite;

}


/* LOGOS */

.marcas-track img{

    width:260px;

    height:140px;

    object-fit:contain;

    margin:0 40px;

    filter:none;

    opacity:1;

    transition:.3s;

}


/* EFEITO AO PASSAR O MOUSE */

.marcas-track img:hover{

    transform:scale(1.08);

}

.marcas .section-tag{


    display:flex;

    width:fit-content;

    margin:0 auto;

    background:var(--azul-claro);

    color:var(--azul-principal);

    padding:8px 20px;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}


/* AJUSTES INDIVIDUAIS */

.logo-bosch{

    width:300px;

}

.logo-magneti{

    width:300px;

}

.logo-ngk{

    width:280px;

}


/* ANIMAÇÃO */

@keyframes scrollMarcas{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* ===================================================
   DESTAQUE WHATSAPP
=================================================== */

.whatsapp-destaque{

    padding:45px 0;

    background:var(--azul-principal);

    color:#FFF;

}

.whatsapp-destaque-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}

.whatsapp-destaque-texto{

    display:flex;

    align-items:center;

    gap:20px;

}

.whatsapp-destaque-texto > i{

    font-size:55px;

}

.whatsapp-destaque h2{

    margin:0 0 8px;

    font-size:26px;

}

.whatsapp-destaque p{

    margin:0;

    opacity:.9;

}

.whatsapp-destaque-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 25px;

    background:#FFF;

    color:#159447;

    border-radius:8px;

    font-weight:bold;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s;

}

.whatsapp-destaque-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

/* ===================================================
   LOCALIZAÇÃO
=================================================== */

.localizacao{

    padding:80px 0;

    background:#F8FAFC;

    scroll-margin-top:110px;

}

.localizacao .hp-container{

    display:flex;

    flex-direction:column;

}


/* TÍTULO */

.localizacao h2{

    font-size:40px;

    margin:15px 0 10px;

}


/* DESCRIÇÃO */

.localizacao .section-description{

    max-width:750px;

    margin:0 auto 45px;

    color:var(--cinza);

}


/* ETIQUETA */

.localizacao .section-tag{

    display:flex;

    width:fit-content;

    margin:0 auto;

    align-items:center;

    justify-content:center;

    background:var(--azul-claro);

    color:var(--azul-principal);

    padding:8px 20px;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

.localizacao .section-header{

    text-align:center;

}


/* GRID */

.localizacao-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}


/* MAPA */

.mapa{

    height:100%;

}

.mapa iframe{

    width:100%;

    height:520px;

    border:none;

    border-radius:20px;

    box-shadow:var(--shadow);

    display:block;

}


/* CARD */

.info-local{

    background:#FFF;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.local-info-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 0;

    border-bottom:1px solid #EAEAEA;

}
.horario{

    white-space:nowrap;

}

/* ===================================================
   CONTATO
=================================================== */

.contato{

    padding:90px 0;

    background:#FFF;

    scroll-margin-top:110px;

}

.contato .section-header{

    text-align:center;

    margin-bottom:50px;

}

.contato h2{

    font-size:40px;

    margin:15px 0 10px;

}

.contato .section-description{

    color:var(--cinza);

    max-width:700px;

    margin:0 auto;

}

.contato .section-tag{

    background:var(--azul-claro);

    color:var(--azul-principal);

    padding:8px 20px;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}


/* GRID */

.contato-grid{

    display:grid;

    grid-template-columns:1fr 1.5fr;

    gap:50px;

    align-items:stretch;

}


/* INFORMAÇÕES */

.contato-info{

    background:#F8FAFC;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.contato-info h3{

    color:var(--azul-principal);

    font-size:24px;

    margin:0 0 8px;

}

.contato-intro{

    color:var(--cinza);

    margin-bottom:25px;

}


/* ITENS */

.contato-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 0;

    border-bottom:1px solid #EAEAEA;

}

.contato-item > i{

    width:30px;

    min-width:30px;

    text-align:center;

    font-size:20px;

    color:var(--azul-principal);

}

.contato-item strong{

    display:block;

    margin-bottom:5px;

    color:var(--cinza-escuro);

}

.contato-item span,

.contato-item a{

    color:var(--cinza);

    text-decoration:none;

}

.contato-item a:hover{

    color:var(--azul-principal);
    

}


/* FORMULÁRIO */

.contato-form{

    display:flex;

    flex-direction:column;

    gap:18px;

    background:#FFF;

    padding:35px;

    border:1px solid #EAEAEA;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.contato-form input,

.contato-form textarea{

    width:100%;

    padding:16px;

    border:1px solid #D9D9D9;

    border-radius:10px;

    font-size:16px;

    font-family:inherit;

    box-sizing:border-box;

}

.contato-form textarea{

    resize:none;

}

.contato-form input:focus,

.contato-form textarea:focus{

    outline:none;

    border-color:var(--azul-principal);

}

.contato-form button{

    border:none;

    cursor:pointer;

    align-self:flex-start;

}

/* GRID DA SEÇÃO DE CONTATO */

.contato-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:stretch;

}


/* CARD COM OS DADOS DE CONTATO */

.contato-info{

    background:#F8FAFC;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

}


/* CARD CONVITE PARA VISITAR A LOJA */

.contato-whatsapp{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:45px;

    background:var(--azul-claro);

    border-radius:20px;

    box-shadow:var(--shadow);

}


/* ÍCONE DA LOJA */

.contato-whatsapp i{

    font-size:55px;

    color:var(--azul-principal);

    margin-bottom:20px;

}


/* TÍTULO */

.contato-whatsapp h3{

    font-size:30px;

    color:var(--cinza-escuro);

    margin:0 0 20px;

}


/* TEXTOS */

.contato-whatsapp p{

    max-width:450px;

    color:var(--cinza);

    line-height:1.7;

    margin:0 0 15px;

}


/* BOTÃO */

.contato-whatsapp .hp-btn{

    margin-top:20px;

}

/* ===================================================
   RODAPÉ
=================================================== */
.footer{

    background:#0B3D91;

    color:#FFF;

    padding:60px 0 0;

}


/* COLUNAS DO RODAPÉ */

.footer-grid{

    display:grid;

    grid-template-columns:1.6fr 1fr 1.4fr 1fr;

    gap:50px;

    align-items:start;

}


/* LOGO */

.footer-col img{

    width:180px;

    margin-bottom:20px;

}


/* TÍTULOS */

.footer-col h3{

    margin:0 0 22px;

    font-size:20px;

    color:#FFF;

}


/* TEXTOS */

.footer-col p{

    color:#D7E4FF;

    margin-bottom:12px;

    line-height:1.7;

}


/* LINKS */

.footer-col a{

    display:block;

    color:#D7E4FF;

    margin-bottom:12px;

    text-decoration:none;

    transition:.3s;

}


/* EFEITO NOS LINKS */

.footer-col a:hover{

    color:#FFF;

    padding-left:5px;

}


/* CONTATO */

.footer-contato p{

    margin-bottom:14px;

}


/* ÍCONES DO CONTATO */

.footer-contato i{

    width:22px;

    margin-right:8px;

    color:#FFF;

}


/* RODAPÉ INFERIOR */

.footer-bottom{

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

    margin-top:50px;

    padding:22px 0;

    text-align:center;

    color:#D7E4FF;

    font-size:14px;

}

/* ===================================================
   RESPONSIVIDADE
=================================================== */

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

@media (max-width:992px){

    .hp-container{
        width:92%;
    }

    .hero-content,
    .empresa-content,
    .centro-grid,
    .localizacao-grid,
    .contato-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        display:flex;
        flex-direction:column;
        gap:40px;
    }

    .hero-buttons,
    .hero-stats{
        justify-content:center;
    }

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

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

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

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

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

}

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

@media (max-width:768px){

    section{
        padding:55px 0;
    }

    .hp-container{
        width:94%;
    }

    /* Remove menu fixo */

    .hp-header{
        position:static;
        box-shadow:none;
    }

    /* Topo */

    .top-bar .hp-container{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

    .top-left,
    .top-right{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* Header */

    .hp-header .hp-container{
        flex-direction:column;
        gap:15px;
        padding:15px 0;
    }

    .hp-logo img{
        height:60px;
    }

    .hp-menu{
        justify-content:center;
        flex-wrap:wrap;
        gap:12px;
    }

    .hp-menu a{
        font-size:15px;
    }

    .header-actions{
        flex-direction:column;
        gap:12px;
        margin-top:10px;
    }

    /* Hero */

    .hero{
        padding:60px 0;
    }

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

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

    .hero-tag{
        font-size:13px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:12px;
    }

    .hero-buttons a{
        width:100%;
        max-width:320px;
    }

    .hero-image img{
        width:100%;
        height:auto;
    }

    .hero-stats{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .stat-card{
        width:100%;
        max-width:320px;
    }

    /* Títulos */

    .section-title,
    .empresa h2,
    .pecas h2,
    .centro-texto h2,
    .localizacao h2,
    .contato h2,
    .whatsapp-destaque h2{
        font-size:28px;
    }

    /* Benefícios */

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

    .beneficio-item{
        border-right:none;
        border-bottom:1px solid #EAEAEA;
    }

    /* Quem Somos */

    .empresa-destaques{
        grid-template-columns:1fr;
    }

    .empresa-imagem img{
        height:auto;
    }

    /* Auto Peças */

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

    /* Centro Automotivo */

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

    .centro-imagem video{
        height:300px;
    }

    /* Marcas */

    .marcas-track img{
        width:90px;
        height:55px;
        margin:0 12px;
    }

    /* WhatsApp */

    .whatsapp-destaque-content{
        flex-direction:column;
        text-align:center;
        gap:25px;
    }

    .whatsapp-destaque-texto{
        flex-direction:column;
        align-items:center;
    }

    .whatsapp-destaque-btn{
        width:100%;
        max-width:320px;
        justify-content:center;
    }

    /* Localização */

    .mapa iframe{
        height:300px;
    }

    .info-local{
        padding:20px;
    }

    /* Contato */

    .contato-info,
    .contato-whatsapp{
        padding:22px;
    }

    /* Rodapé */

    .footer{
        padding:35px 0 0;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:20px;
        text-align:left;
    }

    .footer-col:first-child{
        grid-column:1 / 3;
        text-align:center;
    }

    .footer-col:first-child img{
        width:140px;
        margin:0 auto 15px;
    }

    .footer-col h3{
        font-size:20px;
        margin-bottom:10px;
    }

    .footer-col p,
    .footer-col a{
        margin-bottom:6px;
        line-height:1.5;
        font-size:15px;
    }

    .footer-bottom{
        margin-top:20px;
        padding:15px 0;
        font-size:13px;
    }

}

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

@media (max-width:576px){

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

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

    .section-title,
    .empresa h2,
    .pecas h2,
    .centro-texto h2,
    .localizacao h2,
    .contato h2,
    .whatsapp-destaque h2{
        font-size:25px;
    }

}