.latest-news-area {
    padding: 40px 0; /* Espaciado superior e inferior para la sección */
  }
  
  .custom-column {
    margin-top: 60px; /* Ajusta el relleno según sea necesario */
  }
  
  .news-card {
    border: 1px solid #dee2e6; /* Borde claro para las tarjetas */
    border-radius: 0.5rem; /* Bordes redondeados */
    transition: transform 0.3s; /* Efecto de transformación */
  }
  
  .news-card:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el mouse */
  }
  
  .card-img-top {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 200px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Mantiene la proporción de la imagen y recorta si es necesario */
    border-top-left-radius: 0.5rem; /* Bordes redondeados en la parte superior */
    border-top-right-radius: 0.5rem; /* Bordes redondeados en la parte superior */
  }
  
  .img-custom {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 150px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Mantiene la proporción de la imagen y recorta si es necesario */
    border-radius: 0.5rem; /* Bordes redondeados para las imágenes */
  }
  
  .carousel-inner {
    padding: 20px 0; /* Espaciado superior e inferior para el carrusel */
  }
  
  .carousel-controls {
    display: flex; /* Usar flexbox para alinear las flechas */
    justify-content: center; /* Centrar las flechas horizontalmente */
    margin-top: 20px; /* Espacio entre el carrusel y las flechas */
  }
  
  .btn-custom1 {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    border: none; /* Sin borde */
    border-radius: 50%; /* Flechas redondeadas */
    width: 50px; /* Ancho de las flechas */
    height: 50px; /* Alto de las flechas */
    display: flex; /* Flexbox para centrar el icono */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    margin: 0 10px; /* Espacio entre las flechas */
  }
  
  .btn-custom1:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo más oscuro al pasar el mouse */
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 20px; /* Ajustar el tamaño del icono */
    height: 20px; /* Ajustar el tamaño del icono */

    border-radius: 50%; /* Flechas redondeadas */
  }