/*Solar*/

#card-item1{
    background-image: url(../images/energia-solar-projeto.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item2{
    background-image: url(../images/energia-solar-projeto2.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item3{
    background-image: url(../images/energia-solar-projeto4.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item4{
    background-image: url(../images/energia-solar-projeto5.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item5{
    background-image: url(../images/energia-solar-projeto6.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item6{
    background-image: url(../images/energia-solar-projeto7.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

}
#card-item7{
    background-image: url(../images/energia-solar-projeto3.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

}
/*Projeto eletrico*/
#card-item8{
    background-image: url(../images/projeto-eletrico-card1.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item9{
    background-image: url(../images/projeto-eletrico-card2.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item10{
    background-image: url(../images/projeto-eletrico-card3.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item11{
    background-image: url(../images/projeto-eletrico-card5.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item12{
    background-image: url(../images/projeto-eletrico-card4.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 

/*SPDA*/
#card-item13{
    background-image: url(../images/spda-card.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item14{
    background-image: url(../images/spda-card2.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item15{
    background-image: url(../images/spda-card3.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item16{
    background-image: url(../images/spda-card4.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
 
/*subestação aérea*/
#card-item17{
    background-image: url(../images/subestacao-aerea-card.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 

/*Medição Agrupada*/
#card-item18{
    background-image: url(../images/medicao-agrupada1.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#card-item19{
    background-image: url(../images/medicao-agrupada2.1.webp);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
   

} 
#descrição-serviço{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px 3%;
    
}
#conteudo-serviço{
    background-color: var(--cor-fundo);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

}
#titulo-serviço{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#titulo-serviço h2{
    font-size: 20px;
    color: var(--cor-texto1);
    font-weight: 500;
}
#titulo-serviço img{
    width: 23px;
    transition: transform 0.2s ease;
}
#titulo-serviço img:hover{
    transform: scale(1.08); 
}
@media screen and (max-width: 611px){
    #titulo-serviço h2{
        font-size: 17px;
    }
    #paragrafo-serviço p{
        font-size: 14px;
    }
}
@media screen and (max-width: 447px){
    #titulo-serviço h2{
        font-size: 16px;
    }
    #paragrafo-serviço p{
        font-size: 13px;
    }
}
@media screen and (max-width: 447px){
    #titulo-serviço h2{
        font-size: 16px;
    }
    #paragrafo-serviço p{
        font-size: 12px;
    }
}