body {
  background: white;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: .5px;
  font-style: helvetica, sans-serif;
   
   color:#272f7a;
  
}

.nav-link {
 color:#272f7a;
  font-weight: 600;
  transition: color 0.3s ease-in-out;
}

.custom-navbar {
  background-color: #0cbfef;
  
}

.section-title {
  font-style: helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: .3px;
   color:#272f7a;
}


.me-2{
  background: white;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(161, 57, 57, 0.3);
  
}

.section-title {
  font-family: helvetica, sans-serif;
  
   color:#272f7a;
  font-weight: 800;
  letter-spacing: .3px;
 
}

.card {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(129, 213, 171, 0.08);
}

.badge-soft {
  color: #b29a63;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
  
}

.footer {
  background: lch(24.6% 45.99 290.93);
  color: #fff;
  padding: 18px 0;
}

.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: #25D366;
  color: #fff;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.whatsapp-float:hover {
  color: #fff;
  filter: brightness(.95);
}

.gallery img {
  border-radius: 14px;
  width: 100%;
  height: 150px;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.eslogan {
  font-size: 1.5rem;
  color:#272f7a;
}

.banner img {
  background: white;
  padding: 10px;

 /*border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);*/
}

/* Ajustes para el banner y las imágenes del carousel */
.banner {
  
  /*background: linear-gradient(135deg, #f7f8f9, #e3eaf3); /* Fondo con gradiente */
  background: #fff;
  color:#272f7a;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 20px 0; /* Espaciado vertical */
  border-radius: 15px; /* Bordes redondeados para el banner */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Estilo para las imágenes dentro del carousel */
.carousel-inner img {
  width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
  height: 100%; /* Hace que las imágenes se ajusten a la altura */
  object-fit: cover; /* Mantiene la relación de aspecto de la imagen */
  border-radius: 15px; /* Bordes redondeados para las imágenes */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animación suave */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* Sombra sutil para las imágenes */
}

/* Efecto hover para las imágenes del carousel */
.carousel-inner img:hover {
  transform: scale(1.05); /* Hace que la imagen aumente de tamaño */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Sombra más grande al hacer hover */
}

/* Estilo de los controles de navegación (anterior y siguiente) */
.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: #0b4fa3; /* Color personalizado para los controles */
  border-radius: 50%; /* Hace los controles circulares */
  padding: 10px; /* Espaciado dentro de los controles */
}

/* Cambiar el color de los controles cuando se pasa el ratón */
.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
  background-color: #084f8e; /* Color más oscuro al hacer hover */
}