/*#region global*/
* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;

}

@font-face {
  font-family: 'DM_Serif_Text';
  src: url('../font/DM_Serif_Text-Regular.ttf');
}

@font-face {
  font-family: 'Julee';
  src: url('../font/Julee.otf');
}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf');
}


body {
  overflow-x: hidden;
}

h2,
h5,
h6 {
  font-family: 'DM_Serif_Text';
  font-weight: 700;


}

h2.planos {
  font-family: 'DM_Serif_Text';
  font-weight: 500;


}

p {
  font-family: 'Roboto';
  font-size: 16px;

}

p.frase {
  font-family: 'Julee';
  font-size: 30px;
  font-weight: 600;
}

/*#endregion*/


/*#region navbar ( lucas)*/


/*navbar principal*/
.navbar {
  background-color: #008080;
  /*define a cor de fundo da navbarprincipal */
  height: 60px;
  /*define a altura pra ficar fixa*/
  display: flex;
  /* Ativa o Flexbox para alinhar os filhos */
  position: relative;
  /*posiciona os elementos filhos*/
  z-index: 1050;
  /*coloca a navbar acima dos elementos*/
  align-items: center;
  /*alinha os itens na pra ficar no meio d barra de 60px*/
}

/*div dentro da nav bar que organiza tudo*/
.navbar .container-fluid {
  /*divide o espaço entre os três grandes blocos*/
  height: 100%;
  /*define que ocupa toda a altura da navbar*/
  display: flex;
  /*ativa o flexbox*/
  align-items: center;
  /*alinha os itens no centro*/
  justify-content: space-between;
  /*define o espaço entre os elementos principais*/
}


.navbar-brand {
  /*container da logo*/
  height: 100%;
  /*garante que o espaço da logo ocupe o msm que o da navbar*/
}

.navbar-brand img {
  /*se aplica na propria imagem da logo*/
  height: 90px;
  /*define o tamanho da logo*/
  object-fit: contain;
  /*ajusta a imagm sem cortar*/
}

.hover-bg:hover {
  /*elementos com a classe hover-bg*/
  background-color: #e0e0e0;
  transition: background-color 0.2s;
}

/*#endregion*/


/*#region carrossel*/

/*div principal do carrosel*/
.custom-carousel-width {
  /*classe q eu atribui*/
  max-width: 1200px;
  /*define altura maxima    */
  width: 100%;
  /*define que ocupe toda a largura disponivel*/
  height: 480px;
  /*define a altura pra 480px*/
  border-radius: 10px;
  /*define a borda*/
  position: relative;
}

/*/div das imagens do carrosel*/
.carousel-inner {
  overflow: hidden;
  /*garante que nao ultrapasseos limites do carrosel*/
  border-radius: 10px;
  height: 100%;
  /*faz o carrosel ocupr toda a altura definida*/
}

.custom-carousel-width .carousel-item,
.custom-carousel-width .carousel-item img {
  height: 100%;
  /*define que cada slide e a imagem dele ocupe 100%*/
  border-radius: 10px;
  /*define uma borda*/
}

.custom-carousel-width .carousel-item img {
  object-fit: cover;
  /*faz que a imagem cubra todo o espaço, msm que corte*/
  object-position: center;
  /*centraliza a imagem dentro do espaço definido*/
}



/* Responsivo: carrossel menor em telas pequenas */
@media (max-width: 768px) {

  /*ele so se aplica quando a altura for menor que 768 pixels*/
  .custom-carousel-width {
    /*classe do carrosel principal*/
    max-width: 100%;
    /*define que o carrosel ocupe 100% da altura disponivel*/
    height: 250px;
    /*deixa o carrosel mais baixo*/
  }

  .carousel-inner {
    /*elemento que envolve todas as imagens*/
    height: 250px;
    /*garante que as imagens tbm se ajuste. */
  }
}



/*#endregion*/


/*#region cards (karlos)*/
.card-custom {
  width: 100%;
  max-width: 200px;
  height: 250px;
  margin: 15px auto;
  text-align: center;
  border: 1px solid #dee2e6;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}


.card-img-top {
  width: 100%;
  height: 220px;
  object-fit: cover;

}

@media (max-width: 768px) {
  .card-img-top {
    height: 100px;
  }
}

@media (max-width: 350px) {
  .card-img-top {
    height: 90px;
  }
}

.cor {
  background: #008080;
  padding: 0;
}

.botao-plano{
 background: #8ACF39;
}

.botao {
  background: #198754;


}

.botao:hover {
  background: #008080;
  transition: all .3s;

}

/*#endregion*/


/* #region comentarios e footer (riquelme)*/

.comentario-img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}


.footer-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  margin: 0 auto 16px auto;
  display: block;
}


.footer-petz {
  background: #008080;
  padding: 0;
}


/* media  */

@media (max-width: 768px) {
  .card-custom {
    max-width: 100%;
    height: auto;
    margin: 10px auto;
  }

  .comentario-img {
    width: 190px;
    height: 190px;
  }

  .footer-logo {
    max-width: 100px;
  }
}

@media (max-width: 350px) {

  h2,
  h3,
  h5,
  h6,
  p,
  span {
    font-size: 0.9rem !important;
  }

  .btn {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.7rem !important;
  }

  .footer-logo {
    max-width: 60px;
  }
}

/*#endregion*/




/*#region planos (rafa)*/

/* Cores e fontes principais */

/*#region fontes */
@font-face {
  font-family: 'DM Serif Text';
  src: url('fonts/DMSerifText-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'DM Serif Text';
  src: url('fonts/DMSerifText-Italic.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/NunitoSans-VariableFont_YTLC.ttf') format('truetype');
  font-weight: 100 900;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/NunitoSans-Italic-VariableFont_YTLC.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
}

/*endregion*/

/*#style region*/
body {
  font-family: 'Nunito Sans', sans-serif;
  background-color: #ffffff;
  color: #000000;
}

body {
  background-color: #ffffff;
  color: #000000;
}

/* #endregion */

/*#region topo */
.topo {
  background-color: #008080;
}

/* #endregion */

/* #region  e botao */
.logo {
  height: 100px;
}


.voltar {
  background-color: #8ACF39;
  color: white;
  border-radius: 10px;
  padding: 10px 30px;
}

.voltar:hover{
  cursor: pointer;
  background: #00c3a5;
  transition: background-color 0.3s ease;
}

/* #endregion */


/* cards region */
/* Ajuste imagem dos cards */
.card-img-top {
  height: 180px;
  object-fit: cover;
}

/* Títulos dos cards */
.card-title {
  color: #008080;
  font-weight: bold;
}

/* Preço nos cards */
.card-body h6 {
  color: #00c3a5;
  font-weight: bold;
  font-size: 1.2rem;
}


/* Botão "Compre agora" */
.btn-primary {
  background-color: #015959;
  color: #ffffff;
  border: none;
  font-weight: 600;
}

/* Botão "Serviços Inclusos" */
.btn-dark {
  background-color: #008080;
  color: #ffffff;
  border: none;
  font-weight: 500;
}

/* Botão "Fale Conosco" */
.btn-primary.btn-lg {
  background-color: #8ACF39;
  color: #ffffff;
  padding: 10px 30px;
  font-size: 1rem;
  border: none;
  font-weight: 500;
}

/* Dropdown */
select.form-select {
  background-color: #015959;
  color: #ffffff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  width: auto;
}

/*#endregion*/