/* Estilos generales */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
  background-image: url('../img/Columna\ pag\ we\ seijuve.png');
}

/* Estilos para el header */
header {
  background-color: #c21737; /* Color de fondo rojo */
  padding: 1rem 0;
}

header .logo img {
  width: 120px;
  height: auto;
}

header h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  color: white;
}

/* Estilos para el menú de navegación */
.nav-link {
  color: white !important; /* Color blanco para los enlaces */
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #f8f9fa !important; /* Color más claro al hacer hover */
}

.dropdown-menu {
  background-color: #c21737; /* Fondo rojo para el submenú */
  border: none;
}

.dropdown-item {
  color: white !important; /* Color blanco para los elementos del submenú */
  transition: background-color 0.3s ease;
}

.dropdown-item:hover {
  background-color: #a5142d; /* Color más oscuro al hacer hover */
}


/* Estilo de Descripcion */
.Descripcion {
  padding: 2rem 0;
  background-color: white;
}

.Descripcion h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: black;
}

.Descripcion p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: black;
}


/* Estilos para el carrusel */
.carousel-container {
  max-width: 800px; /* Ancho máximo del carrusel */
  margin: 0 auto; /* Centrar el carrusel */
  padding: 1rem; /* Espaciado interno */
}

.carousel-item {
  padding: 0 15px; /* Espaciado entre elementos del carrusel */
}

.carousel-item .row {
  margin: 0 -15px; /* Ajuste para compensar el padding de las columnas */
}

.carousel-item .col-md-4 {
  padding: 0 15px; /* Espaciado entre columnas */
}

.card {
  border: 1px solid #ddd; /* Borde suave para las tarjetas */
  border-radius: 10px; /* Bordes redondeados */
  overflow: hidden; /* Evitar que el contenido se desborde */
  transition: transform 0.3s ease; /* Efecto de hover */
}

.card:hover {
  transform: translateY(-5px); /* Efecto de elevación al hacer hover */
}

.card img {
  width: 100%; /* Ajustar la imagen al ancho del contenedor */
  height: 200px; /* Altura fija para las imágenes */
  object-fit: cover; /* Asegurar que la imagen cubra el espacio */
}

.card-body {
  padding: 1rem; /* Espaciado interno */
  text-align: center; /* Centrar el texto */
}

.card-title {
  font-size: 1.25rem; /* Tamaño del título */
  font-weight: bold; /* Negrita */
  margin-bottom: 0.5rem; /* Espacio debajo del título */
}

.card-text {
  font-size: 1rem; /* Tamaño del texto */
  color: #555; /* Color del texto */
}

/* Controles del carrusel */
.carousel-control-prev,
.carousel-control-next {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  border-radius: 50%; /* Forma circular */
  width: 40px;
  height: 40px;
  top: 50%; /* Centrar verticalmente */
  transform: translateY(-50%);
}

.carousel-control-prev {
  left: -50px; /* Posición del botón anterior */
}

.carousel-control-next {
  right: -50px; /* Posición del botón siguiente */
}

/* Estilos para la sección de logros */
.logros {
  background-color: rgba(194, 23, 55, 0.9); /* Fondo rojo semitransparente */
  background-image: url('../img/DSC00220.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  color: white;
  padding: 4rem 0;
}

.logros h2 {
  font-size: 2rem;
  font-weight: bold;
}

.logros h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.logros p {
  font-size: 1rem;
  margin-bottom: 2rem;
}

.logros .col-md-3 {
  text-align: center;
}

.logros h4 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.logros p {
  font-size: 1rem;
}

/* Estilos para la sección de testimonios */
.testimonios {
 /* Fondo gris claro */
  padding: 4rem 0;
}

.testimonios img {
  border-radius: 10px; /* Bordes redondeados para la imagen */
  max-width: 436px;
  height: auto;
}

.testimonios p {
  font-size: 1.25rem;
  font-style:inherit;
  color:black;
}

/* Estilos generales para el footer */
.footer {
  background-color: #343a40; /* Fondo oscuro */
  color: white;
}

.footer h4 {
  font-size: 1.1rem; /* Tamaño de fuente más pequeño para títulos */
  font-weight: bold;
  margin-bottom: 1rem;
}

.footer p {
  font-size: 0.9rem; /* Tamaño de fuente más pequeño para párrafos */
  margin-bottom: 0.5rem;
}

.footer a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #c21737; /* Color rojo al hacer hover */
}

/* Estilos para los íconos de redes sociales */
.social-icons {
  font-size: 1.2rem; /* Tamaño de fuente más pequeño para íconos */
}

.social-icons a {
  margin-right: 0.75rem;
}

.social-icons a:hover {
  color: #c21737; /* Color rojo al hacer hover */
}
/* Estilos responsivos */
@media (max-width: 768px) {
  header .logo img {
      width: 100px;
  }

  header h1 {
      font-size: 1.25rem;
  }

  .carousel-caption h3 {
      font-size: 1.25rem;
  }

  .carousel-caption p {
      font-size: 0.875rem;
  }

  .logros h4 {
      font-size: 1.5rem;
  }

  .testimonios {
      text-align: center;
  }

  .testimonios img {
      margin-bottom: 1rem;
  }

  .carousel-control-prev {
      left: 10px; /* Ajuste para móviles */
  }

  .carousel-control-next {
      right: 10px; /* Ajuste para móviles */
  }

  .Descripcion h2 {
    font-size: 1.5rem;
  }

  .Descripcion p {
    font-size: 0.9rem;
  }
}