@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
   font-family: 'Poppins', sans-serif;
}

div#info div.container,
div#servicos div.container,
div#avaliacoes div.container {
   padding-top: 64px;
   padding-bottom: 64px;
}

div#info a.btn {
   margin-top: 16px;
}

div#info div.col-md-3.col-6 {
   margin-top: 16px;
}

a#title,
h3#title {
   color: #0275d8;
}

div#servicos {
   background-color: #0275d8;
}

div#servicos div.card {
   margin-top: 16px;
   margin-bottom: 16px;
   color: #0275d8;
}

div#servicos img#img-card {
   border: 5px solid white;
}

div#avaliacoes div.card {
   border: none;
   background-color: #E9EAEC;
}

div#avaliacoes p.font-italic {
   color: #0275d8;
   font-weight: 700;
}

footer div.container {
   padding-top: 64px;
   padding-bottom: 64px;
}

section#dev {
   padding-top: 64px;
   padding-bottom: 64px;
}

/* estrelas */
.rating {
   direction: rtl;
   /* Mantém a direção da direita para a esquerda para a seleção correta */
   unicode-bidi: bidi-override;
   font-size: 2rem;
   display: flex;
   justify-content: flex-end;
   /* Alinha as estrelas à direita */
}

.rating input {
   display: none;
}

.rating label {
   cursor: pointer;
   color: #ccc;
   font-size: 2rem;
}

.rating input:checked~label,
.rating input:checked~label~label,
.rating input:hover~label,
.rating input:hover~label~label {
   color: #f5b301;
}

.card .rating {
   direction: ltr;
   /* Assegura que as estrelas são exibidas da esquerda para a direita */
   unicode-bidi: bidi-override;
   display: flex;
   justify-content: flex-end;
   /* Alinha as estrelas à direita */
}

.card .rating span {
   font-size: 1.5rem;
   /* Ajusta o tamanho das estrelas nos cards */
}

.card .rating span.filled {
   color: #f5b301;
   /* Cor para estrelas preenchidas */
}

.card .rating span.unfilled {
   color: #ccc;
   /* Cor para estrelas não preenchidas */
}

.g-recaptcha {
   display: inline-block;
   padding-bottom: 16px;
}


/* Estilo para a div no rodapé */
.rodape-mobile {
   display: none;
   /* Inicialmente escondido */
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.95) !important;
   /* Opacidade de 50% apenas para o fundo da div */
   padding: 20px;
   text-align: center;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
   z-index: 9999;
   /* Na frente de todos */
}

/* Estilo para o botão */
.rodape-mobile button {
   background-color: #007bff;
   color: #fff;
   border: none;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
   border-radius: 5px;
}

@media screen and (max-width: 768px) {
   #title-header {
      font-size: 1.5rem;
   }

   #sub-title-header {
      font-size: 1rem;
   }

   .rodape-mobile {
      display: block;
      /* Mostra apenas em dispositivos móveis */
   }

   #text-header {
      font-size: 1rem;
   }

}