/*==========================================================
JACOB ENGENHARIA 2.0
ACOMPANHAMENTO-TECNICO.CSS
PARTE 1
==========================================================*/


/*==========================================================
INTRODUÇÃO
==========================================================*/

.acompanhamento-intro{

    padding:110px 0;

    background:#ffffff;

}

.acompanhamento-intro .servico-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.acompanhamento-intro .servico-imagem img{

    width:100%;

    border-radius:24px;

    box-shadow:0 25px 70px rgba(15,23,42,.10);

}

.acompanhamento-intro .servico-texto h2{

    font-size:2.7rem;

    color:#0F172A;

    margin:20px 0;

}

.acompanhamento-intro .servico-texto p{

    color:#667085;

    line-height:1.9;

    margin-bottom:20px;

}


/*==========================================================
O QUE É
==========================================================*/

.o-que-e-acompanhamento{

    padding:110px 0;

    background:#F8FAFC;

}

.o-que-e-acompanhamento .servicos-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.o-que-e-acompanhamento .servico-card{

    background:#ffffff;

    border-radius:22px;

    padding:35px;

    border:1px solid #EEF2F6;

    text-align:center;

    transition:.35s;

    box-shadow:0 18px 45px rgba(15,23,42,.07);

}

.o-que-e-acompanhamento .servico-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 65px rgba(15,23,42,.12);

}

.o-que-e-acompanhamento .servico-card i{

    display:block;

    font-size:3rem;

    color:#D4AF37;

    margin-bottom:22px;

}

.o-que-e-acompanhamento .servico-card h3{

    color:#0F172A;

    margin-bottom:18px;

}

.o-que-e-acompanhamento .servico-card p{

    color:#667085;

    line-height:1.8;

}


/*==========================================================
QUANDO CONTRATAR
==========================================================*/

.quando-acompanhamento{

    padding:110px 0;

    background:#ffffff;

}

.quando-acompanhamento .servicos-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.quando-acompanhamento .servico-card{

    background:#F8FAFC;

    border-radius:22px;

    padding:35px;

    border:1px solid #EEF2F6;

    text-align:center;

    transition:.35s;

}

.quando-acompanhamento .servico-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(15,23,42,.10);

}

.quando-acompanhamento .servico-card i{

    display:block;

    font-size:3rem;

    color:#D4AF37;

    margin-bottom:22px;

}

.quando-acompanhamento .servico-card h3{

    color:#0F172A;

    margin-bottom:18px;

}

.quando-acompanhamento .servico-card p{

    color:#667085;

    line-height:1.8;

}

/*==========================================================
COMO FUNCIONA
==========================================================*/

.como-funciona-acompanhamento{

    padding:110px 0;

    background:#F8FAFC;

}

.etapas-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.etapa-card{

    background:#ffffff;

    border:1px solid #EEF2F6;

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.etapa-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(15,23,42,.10);

}

.numero{

    width:70px;

    height:70px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#D4AF37;

    color:#0F172A;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    font-weight:700;

}

.etapa-card h3{

    color:#0F172A;

    margin-bottom:18px;

}

.etapa-card p{

    color:#667085;

    line-height:1.8;

}


/*==========================================================
BENEFÍCIOS
==========================================================*/

.beneficios-acompanhamento{

    padding:110px 0;

    background:#ffffff;

}

.beneficios-acompanhamento .diferenciais-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.beneficios-acompanhamento .diferencial-card{

    background:#F8FAFC;

    border:1px solid #EEF2F6;

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.beneficios-acompanhamento .diferencial-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(15,23,42,.10);

}

.beneficios-acompanhamento .diferencial-card i{

    display:block;

    font-size:3rem;

    color:#D4AF37;

    margin-bottom:22px;

}

.beneficios-acompanhamento .diferencial-card h3{

    color:#0F172A;

    margin-bottom:18px;

}

.beneficios-acompanhamento .diferencial-card p{

    color:#667085;

    line-height:1.8;

}


/*==========================================================
FAQ
==========================================================*/

.faq-acompanhamento{

    padding:110px 0;

    background:#F8FAFC;

}

.faq-container{

    max-width:900px;

    margin:60px auto 0;

}

.faq-item{

    background:#ffffff;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:30px;

    margin-bottom:22px;

}

.faq-item h3{

    color:#0F172A;

    margin-bottom:15px;

}

.faq-item p{

    color:#667085;

    line-height:1.9;

}


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

@media(max-width:1200px){

.o-que-e-acompanhamento .servicos-grid,

.quando-acompanhamento .servicos-grid,

.beneficios-acompanhamento .diferenciais-grid,

.etapas-grid{

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

}

}

@media(max-width:991px){

.acompanhamento-intro,

.o-que-e-acompanhamento,

.quando-acompanhamento,

.como-funciona-acompanhamento,

.beneficios-acompanhamento,

.faq-acompanhamento{

padding:80px 0;

}

.acompanhamento-intro .servico-grid{

grid-template-columns:1fr;

gap:45px;

}

}

@media(max-width:768px){

.o-que-e-acompanhamento .servicos-grid,

.quando-acompanhamento .servicos-grid,

.beneficios-acompanhamento .diferenciais-grid,

.etapas-grid{

grid-template-columns:1fr;

}

.acompanhamento-intro .servico-texto h2{

font-size:2rem;

}

.etapa-card,

.faq-item,

.o-que-e-acompanhamento .servico-card,

.quando-acompanhamento .servico-card,

.beneficios-acompanhamento .diferencial-card{

padding:30px;

}

}

@media(max-width:480px){

.acompanhamento-intro .servico-texto h2{

font-size:1.7rem;

}

.numero{

width:60px;

height:60px;

font-size:1.3rem;

}

.o-que-e-acompanhamento .servico-card i,

.quando-acompanhamento .servico-card i,

.beneficios-acompanhamento .diferencial-card i{

font-size:2.5rem;

}

}