h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  font-family: 'Eras Bold', sans-serif;
}

.pt-10 {
    padding-top: 100px;
}

.text-justify {
    text-align: justify;
}

.triangle-up {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid white;
}

.triangle-down {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgba(255, 255, 255, .5);
}


.card-title.plan-basico {
  background: repeating-linear-gradient(
    45deg,          /* Ángulo del patrón */
    rgba(0, 123, 255, 1),         /* Color inicial (primary) con 80% de opacidad */
    rgba(0, 123, 255, 1) 20px,    /* Fin del color inicial en 20px */
    rgb(51, 51, 51) 20px,        /* Inicio del color secundario (negro) con 20% de opacidad en 20px */
    rgba(51, 51, 51, 1) 40px
  );
  /*background-color: #007bff; !* Color de fondo azul *!*/
  color: white; /* Color del texto blanco */
  padding: 1rem; /* Espaciado interno */
}

.card-title.plan-intermedio {
  background-color: #28a745; /* Color de fondo verde */
  color: white; /* Color del texto blanco */
  padding: 1rem; /* Espaciado interno */
}

.card-title.plan-avanzado {
  background-color: #dc3545; /* Color de fondo rojo */
  color: white; /* Color del texto blanco */
  padding: 1rem; /* Espaciado interno */
}

.list-primary li {
  position: relative;
  padding-left: 1.2rem; /* Espacio para la viñeta personalizada */
}

.list-primary li::before {
  content: '\2713'; /* Unicode para el check (✔) */
  position: absolute;
  left: 0;
  top: -0.1rem; /* Ajusta según sea necesario */
  font-size: 1.2rem; /* Tamaño del check */
  /*color: #007bff; !* Color del check (primary) *!*/
  /*color: white;*/
  font-weight: bold;
}


.carousel-control-prev,
.carousel-control-next {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color); /* Color primary */
  /*border-radius: 50%;*/
  opacity: 0.7; /* Transparencia ligera */
  top: 50%;
  transform: translateY(-50%);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1; /* Opacidad completa al pasar el mouse */
}

.custom-control {
  color: white; /* Color del símbolo */
  font-size: 2rem; /* Tamaño del símbolo */
  font-weight: bold; /* Negrita para mayor visibilidad */
}

.mission-text-container {
  max-width: 70%; /* El texto ocupará un máximo del 80% del ancho total */
  margin: 0 auto; /* Centrará el texto dentro del carrusel */
  color: white; /* Color del texto */
  background-color: var(--primary-color); /* Fondo primary */
  padding: 1rem; /* Espaciado interno */
  min-height: 300px;
  /*border-radius: 0.5rem; !* Esquinas redondeadas opcional *!*/
}

.carousel {
  min-height: 300px; /* Establece un alto mínimo para todo el carrusel */
}

.my-carousel-item {
  min-height: 300px; /* Establece un alto mínimo para cada item */

}

.service-card {
  height: 100%;
}

.image-container {
  width: 100%;
  height: 300px; /* Altura fija */
  overflow: hidden; /* Oculta el exceso de la imagen */
}

.image-container img {
  width: 100%; /* Escalar la imagen al ancho del contenedor */
  /*height: 100%; !* Escalar la imagen al alto del contenedor *!*/
  object-fit: cover; /* Recortar proporcionalmente desde el centro */
  object-position: center; /* Centrar la imagen en el contenedor */
}

.img-16-9, .img-4-3 {
  display: none;
  width: 100%;
  height: auto;

  /*max-height: 300px;*/
  /*max-width: 70%;*/
}

@media (min-aspect-ratio: 16/9) {
  .img-16-9 {
    display: block;
  }
}

@media (max-aspect-ratio: 16/9) {
  .img-4-3 {
    display: block;
  }
}