/* ==========================
   SEÇÃO SERVIÇOS
========================== */

#servicos{
    width: 1200px;
    width: 100%;


    background-color: rgb(255, 222, 34);

}

#servicos h2{
    text-align: center;
    color: #111;
    font-size: 2rem;
    margin-bottom: 35px;
    padding: 3%;
}
.link{
    display: flex;
    justify-content: center;
    align-items: center;

}
#servicos a{
    padding: 1%;
    color: #ffffff;
    background-color: #111;
    margin: 50px;
    text-decoration: none;
}


/* ==========================
   GRID
========================== */

.servicos-grid{

    margin-left: 15px;
    margin-right: 15px;
    display: grid;

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

    gap: 18px;

}

/* ==========================
   CARD
========================== */

.card-servico{

    display: grid;

    grid-template-columns: 65px 1fr;

    align-items: center;

    gap: 15px;

    padding: 15px 18px;

    min-height: 120px;

    background: linear-gradient(to bottom,#ffffff,#eef8ff);

    border: 2px solid #cfe6f8;

    border-radius: 18px;

    box-shadow: 0 6px 16px rgba(0,0,0,.18);

    transition: .3s;

}

.card-servico:hover{

    transform: translateY(-4px);

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

}

/* ==========================
   IMAGEM
========================== */

.card-servico img{

    width: 60px;

    height: 60px;

    object-fit: contain;

}

/* ==========================
   TEXTO
========================== */

.texto{

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.texto h3{

    font-size: 1.05rem;

    font-weight: 800;

    color: #111;

    line-height: 1.15;

    margin-bottom: 6px;

}

.texto p{

    font-size: .82rem;

    color: #555;

    line-height: 1.3;

}

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

@media(max-width:1100px){

    .servicos-grid{

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

    }

}

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

@media(max-width:768px){

    #servicos{

        width:95%;

    }

    .servicos-grid{

        grid-template-columns:1fr;

    }

    .card-servico{

        grid-template-columns:55px 1fr;

        min-height:100px;

        padding:14px;

    }

    .card-servico img{

        width:50px;

        height:50px;

    }

    .texto h3{

        font-size:.95rem;

    }

    .texto p{

        font-size:.75rem;

    }

}