body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #b3ffbf;
  color: #2a2a2a;
}

/* Header */
header {
  background-color: #ffffff;
  color: #144700;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 3px solid #1e8449;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header img {
  height: 100px;
  margin-right: 2rem;
}

header .title-container {
  display: flex;
  align-items: center;
}

header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
}

header a {
  color: #144700;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

header a:hover {
  background-color: #c0392b;
  color: #ffffff;
}

/* Main Content */
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

.main-content img {
  width: 50%;
  max-width: 400px;
  margin-bottom: 2rem;
  border-radius: 10px;
  /* Rounded borders for images */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
}

/* Buttons */
.buttons {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.buttons a {
  text-decoration: none;
  background-color: #c62828; /* Dark red */
  color: white;
  padding: 1rem 2rem;
  margin: 0.5rem;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* Smooth transition */
}

.buttons a:hover {
  background-color: #e57373; /* Lighter red on hover */
  transform: translateY(-2px);
  /* Elevation effect */
}

/* Info Section */
/* Estilos para centrar .info-section */
.info-section {
  display: flex;
  flex-direction: column; /* Organiza los elementos en una columna */
  align-items: center; /* Centra horizontalmente */
  justify-content: center; /* Centra verticalmente */
  text-align: center; /* Centra el texto */
  max-width: 800px; /* Ancho máximo para mejor legibilidad */
  margin: 0 auto; /* Centrar el contenedor en la página */
  padding: 20px; /* Espaciado interno */
}

/* Estilos para .left-buttons */
.left-buttons {
  display: flex;
  gap: 10px; /* Espacio entre los botones */
  margin-bottom: 20px; /* Espacio inferior */
}

.left-buttons a,
.left-buttons button {
  padding: 10px 20px; /* Espaciado interno */
  background-color: #144700;; /* Color de fondo */
  color: white; /* Color del texto */
  text-decoration: none; /* Quitar subrayado de los enlaces */
  border: none; /* Quitar borde del botón */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar cursor al pasar el mouse */
}

.left-buttons a:hover,
.left-buttons button:hover {
  background-color: #5e8442; /* Cambiar color al pasar el mouse */
}

/* Estilos para .text-content */
.text-content {
  max-width: 800px; /* Ancho máximo para mejor legibilidad */
  margin: 0 auto; /* Centrar el contenedor en la página */
  padding: 20px; /* Espaciado interno */
  text-align: justify; /* Justificar el texto */
}

.text-content h2 {
  margin-top: 20px; /* Espacio superior */
  color: #333; /* Color del texto */
  text-align: center; /* Centrar los títulos */
}

.text-content p {
  color: #666; /* Color del texto */
  line-height: 1.6; /* Espaciado entre líneas */
  margin-bottom: 20px; /* Espacio inferior */
}

/* Footer */
footer {
  background-color: #144700;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}
/* Estilos del carrusel */
.carousel-container {
  width: 100%;
  max-width: 1200px; /* Ancho máximo del carrusel */
  height: 350px; /* Altura del carrusel */
  overflow: hidden;
  margin: 20px auto; /* Centrar el carrusel en la página */
  position: relative;
}

.carousel {
  display: flex;
  width: calc(1200px * 4); /* Ancho total para 4 imágenes */
  animation: sliding 30s infinite linear; /* Animación infinita */
}

.carousel div {
  width: 1200px;
  height: 350px; /* Altura del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0; /* Evitar que las imágenes se encojan */
}

.carousel div img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubrir el espacio sin distorsionar */
}

/* Animación del carrusel */
@keyframes sliding {
  0% {
      transform: translateX(0);
  }
  25% {
      transform: translateX(-1200px);
  }
  50% {
      transform: translateX(-2400px);
  }
  75% {
      transform: translateX(-3600px);
  }
  100% {
      transform: translateX(-4800px);
  }
}

/* Estilos responsivos */
@media screen and (max-width: 768px) {
  .carousel-container {
      height: 200px; /* Altura ajustada para móviles */
  }

  .carousel div {
      height: 200px; /* Altura ajustada para móviles */
  }
}