.title,
.subtitle {
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}

/* ************************************************************* */
.services {

  display: flex;
  flex-direction: column;
  margin: 0 auto; /* Centraliza o container */
  width: 90%; /* Ajusta a largura do container */
}

.service__card {
  border-radius: 3%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-areas:
    "title"
    "description";
  /* grid-template-rows: 0.5fr 1fr; */
  height: 5.5rem;
  overflow: hidden;
  padding: 1rem;
  place-items: center;
  position: relative;
  transition: height 0.4s ease-out;
  z-index: 1;
}

.service__title {
  grid-area: title;
  text-align: center;
}

.service__description {
  grid-area: description;
  opacity: 0; /* Esconde a descrição inicialmente */
  transition: opacity 0.4s ease-out;
  
}

.service__card:hover {
  border: 1px solid;
  border-color: var(--color-blue);
  z-index: 10; /* Garante que o cartão fique acima dos outros */
}

.service__card:hover .service__description {
  opacity: 1; /* Mostra a descrição ao passar o mouse */
}

/* MEDIAS QUERIES ************************************************************************** */
@media screen and (min-width: 0) {
  .title {
    font-size: 2rem;
    margin-bottom: 0.1rem;
  }

  .subtitle {
    font-size: 1.6rem;
    margin: 1.6rem auto;
  }
  /* services card *********************************** */
  .service__title{
    font-size: 1.4rem;
    /* margin-top: 1rem; */
  }

  .service__description{
    font-size: 1.2rem ;
  }

  .service__card:hover {
    height: 12rem; /* Expande o cartão ao passar o mouse */
  }

}


@media screen and (min-width: 768px) {
  .about__container{
    display: flex;
  }

  .about__information{
    width: 75%;
  }
  .service__card{
    margin: 0 auto;
    width: 70%;
  } 
}

@media screen and (min-width: 1024px) {

  .title {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .subtitle {
    font-size: 1.8rem;
    margin: 1.8rem auto;
  }

  /* SERVICES *************************************** */
  .service__title {
    font-size: 1.6rem; /* Mais ajustes para telas ainda maiores */
  }

  .service__description{
    font-size: 1.4rem;
  } 

  .service__card:hover {
    height: 15rem; /* Expande o cartão ao passar o mouse */
  }
}