@font-face{font-family:"Roboto-Regular";src:url(../../fonts/roboto/Roboto-Regular.ttf)}
@font-face{font-family:"Roboto-Bold";src:url(../../fonts/roboto/Roboto-Bold.ttf)}

body{margin:0;padding:0;font-family:"Roboto-Regular"}

#banner-header{
    width:100%;
    min-height:220px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#2c2c2c;
}

#banner-header h1{
    font-family:"Roboto-Bold";
    font-size:2.2rem;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
    text-align:center;
    padding:0 20px;
    margin:0;
}

@media(max-width:720px){
    #banner-header h1{font-size:1.5rem}
}

#container-servicos{
    padding:50px 5%;
}

.card-servico{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    text-align:center;
    border-radius:8px;
    padding:30px 20px;
    margin-bottom:24px;
    min-height:190px;
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease;
    border:none;
}

.card-servico:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,.15) !important;
    text-decoration:none;
}

.icone-servico{
    font-size:2.6rem;
    margin-bottom:16px;
    line-height:1;
}

.titulo-servico{
    font-family:"Roboto-Bold";
    font-size:.95rem;
    line-height:1.4;
    margin:0;
}

.seta-servico{
    margin-top:16px;
    font-size:.85rem;
    opacity:.7;
}