:root {
  --color-primary: #f6a461;
  --color-secondary: rgb(248, 242, 242);
}

.text-Csecondary {
    color: var(--color-primary);
}
@font-face{
  font-family: "SF UI Display";
  src:url('../../static/fonts/fonts-text/SF-UI-Display-Regular.otf');
}

body{
  font-family: SF UI Display;
}
h5{
  font-family: SF UI Display;
}
h6{
  font-family: SF UI Display;
}

/* Bloque de mediaquerys*/
/*xl*/
@media (min-width: 1200px){
  html{
    font-size: 13px;
  }
}
/*lg*/
@media (min-width: 992px) and (max-width: 1199px){
  html{
    font-size: 13px;
  }
}
/*md*/
@media (min-width: 768px) and (max-width: 991px){
  html{
    font-size: 11px;
  }
}
/*sm*/
@media(min-width: 576px) and (max-width: 767px){
  html{
    font-size: 11px;
  }
}
/*xs*/
@media (max-width: 575px){
 html{
    font-size: 10px;
  }
}
/* Fin Bloque*/

/* body{
  font-family: Manrope-Regular;
} */

.bg-Clogin{
  background: url('../../static/images/fondo1.png');  
}

.full-Cimage{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  
}

.bg-CimageHome {
    height: 75vh;
    min-height: 500px;
    background-image: url('../../static/images/fondo1.png');
  }


@media (orientation: portrait) {
    .ptp-C40 {
      padding-top: 40% !important;
    }
    .ptp-C50 {
      padding-top: 50% !important;
    }
    .ptp-C60 {
      padding-top: 60% !important;
    }
    .ptp-C70 {
      padding-top: 70% !important;
    }
    .ptp-C80 {
      padding-top: 80% !important;
    }
  }

.pt-C25 {
  padding-top: 25%;
}

.pt-C35 {
  padding-top: 35%;
}

.pt-C17 {
  padding-top: 17%;
}
.pb-C17 {
  padding-bottom: 17%;
}
/* Fin Bloque*/

.bg-Cprimary{
  background-color: var(--color-primary);
}

.bg-Csecondary{
  background-color: var(--color-secondary);
}

.bg-Ctertiary{
  background-color: var(--color-black);
}


.text-Cprimary{
  color: var(--color-primary);
}

.text-Csecondary{
  color: var(--color-secondary);
}

.text-Ctertiary{
  color: var(--color-tertiary);
}


a:hover{
  color: #000000;
}
.btn:hover {
    color: #e79751;
}
i:hover {
    color: #e79751;
}

.border-Cprimary{
  border: 1px var(--color-primary) solid;
}

.min-vh-C76 {
  min-height: 78vh !important;
}

.vh-C65{
  height: 65vh;
}

.vh-C10{
  height: 2vh;
}

.vh-C75{
  height: 75vh;
}

.mt-C5{
  margin-top: 5vh;
}


.rounded-C30{
  border-radius: 30px;
}


ul.ui-autocomplete {
  background-color: rgb(233, 236, 239);
  position: absolute;
  border: 1px var(--color-secondary) solid;
  padding-left: 8px; 
  z-index: 9999;
}

ul.ui-autocomplete li{
  list-style-type: none;
  padding:2px;
} 
ul.ui-autocomplete li:hover{
  background: rgba(var(--color-secondary),0.3);

} 
ul.ui-autocomplete li .ui-state-active{
  background: rgba(var(--color-secondary),0.3);
}

[aria-live="assertive"]{
  display: none;
}

.cpointer {
  cursor: pointer;
}


/* Contenedor del carrusel */
.carousel-inner {
  display: flex;
  height: 100vh; /* Altura completa de la vista */
  overflow: hidden; /* Oculta el contenido que excede el contenedor */
}

/* Estilo para los elementos del carrusel */
.carousel-item {
  display: flex;
  align-items: center; /* Alinea verticalmente la imagen y el texto */
  justify-content: center; /* Centra el contenido horizontalmente */
  height: 100%; /* Altura completa del contenedor del carrusel */
  flex: 1 0 100%; /* Asegura que cada item ocupe el 100% del contenedor */
}

/* Estilo para el contenedor de imagen y texto */
.carousel-item .d-flex {
  width: 100%;
  height: 100%;
  max-width: 100%; /* Asegura que el contenido no exceda el ancho del carrusel */
}

/* Estilo para la imagen del carrusel */
.carousel-profile-img {
  width: 150px; /* Ajusta el ancho de las imágenes */
  height: 150px; /* Ajusta la altura de las imágenes */
  object-fit: cover; /* Asegura que la imagen cubra el área sin perder la proporción */
  border-radius: 50%; /* Hace que las imágenes sean circulares */
  margin-right: 20px; /* Espacio a la derecha de la imagen */
}

/* Estilo para el texto del carrusel */
.carousel-caption {
  background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro semitransparente para mejorar la legibilidad del texto */
  border-radius: 5px; /* Bordes redondeados para el caption */
  padding: 20px; /* Padding alrededor del texto */
  color: white; /* Color del texto */
  flex: 1; /* Ocupa el espacio restante del contenedor */
  max-width: 50%; /* Limita el ancho del contenedor de texto */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinea el texto a la izquierda */
}

/* Estilos para el título y descripción */
.carousel-caption h5 {
  font-size: 1.5rem; /* Tamaño de fuente del título */
  margin-bottom: 10px; /* Espacio debajo del título */
}

.carousel-caption p {
  font-size: 1rem; /* Tamaño de fuente de la descripción */
  margin: 0; /* Elimina márgenes para un ajuste más preciso */
}

/* Estilos para los indicadores del carrusel */
.carousel-indicators li {
  width: 12px; /* Ancho del indicador */
  height: 12px; /* Altura del indicador */
  border-radius: 50%; /* Hace que el indicador sea circular */
  background-color: #000; /* Color del indicador */
}

/* Estilo para el indicador activo */
.carousel-indicators .active {
  background-color: #f6a461; /* Color del indicador activo */
}

