@import url(main.css);
/*----------------------------*/
.servicos {
   background: var(--bg-azul-escuro-2);
}
/*----------------------------*/
.cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   place-items: center;
}
/*----------------------------*/
.card {
   height: 44rem;
   width: 27rem;
   margin: 2rem;
   background: #ccc;
   border-radius: 40px;
   overflow: hidden;
   box-shadow: var(--sombra-card);
}
/*--------------------*/
.card img {
   width: 100%;
   height: 20rem;
   object-fit: cover;
}
/*----------------------------*/
.card .content {
   width: 100%;
   height: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
/*--------------------*/
.card .content .text {
   text-align: center;
   padding: 20px 20px;
}
/*--------------------*/
.card .content .text h2 {
   font-size: 2rem;
   color: var(--azul);
   text-shadow: var(--sombra-letras);
}
/*--------------------*/
.card .content .text p {
   color: #000;
   margin: 10px 0;
   font-size: 1.4rem;
   text-shadow: none;
   text-align: center;
   text-indent: 0;
   font-weight: 700;
}
/*--------------------*/
.card .content .text .btn {
   display: inline-block;
   padding: 12px 25px;
   margin-top: 0;
}
/*----------------------------*/
.servico {
   background: var(--bg-azul-escuro-2);
} 
/*----------------------------*/
.servico img {
   box-shadow: var(--sombra-card);
   border-radius: 2rem;
}
/*----------------------------*/
.piscina {
   background: var(--bg-azul-escuro-1);
}
/*----------------------------*/
.piscina img {
   border-radius: 40px;
   box-shadow: var(--sombra-card);
}


/*--------------------------------------------------------------------------------*/
                                /* CONFIG. MOBILE */ 
/*--------------------------------------------------------------------------------*/
                        @media screen and (max-width: 900px) {                             
/*--------------------------------------------------------------------------------*/
   .card {
      height: 45rem;
       width: 31rem;
   }
/*--------------------*/
   .card .content {
    width: 100%;
    height: 24rem;
   }
/*--------------------*/
   .card .content .text p {
      font-size: 1.6rem;
   }
}
/*--------------------------------------------------------------------------------*/
                        @media screen and (max-width: 600px) {                             
/*--------------------------------------------------------------------------------*/
   .cards {
      grid-template-columns: 1fr;
   }
}