/* Estilo base para la sección de columnas */
.columns-section {
  max-width: 100%;
 display: flex;
  justify-content: center; /* Centra el contenedor de columnas horizontalmente */
  padding: 1em; /* Espaciado opcional alrededor del contenedor */
  box-sizing: border-box;
}

.columns {
  column-count: 4;
  column-gap: 5em; /* Espacio entre columnas */
  column-rule: 1px solid #bbb; /* Línea divisoria entre columnas */
  max-width: 100%; /* Asegura que el contenedor de columnas no se desborde */
  box-sizing: border-box;
}

.column-item {
  /* Ajuste opcional para cada item de columna */
  break-inside: avoid; /* Evita que los elementos se dividan entre columnas */
}

/* Para pantallas más pequeñas, por ejemplo, tablets */
@media (max-width: 768px) {
  .columns {
    column-count: 2;
    column-width: 45%; /* Ajusta el ancho de las columnas para adaptarse mejor */
  }
}

/* Para pantallas muy pequeñas, como móviles */
@media (max-width: 480px) {
  .columns {
    column-count: 1;
    column-width: 100%; /* Permite que la columna ocupe el 100% del ancho disponible */
  }
}


.videos{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* Estilo base para el contenedor de la imagen */
.image-container {
  position: relative; /* Contexto para el posicionamiento de la imagen en estado ampliado */
  display: inline-block; /* Ajusta el contenedor al tamaño de la imagen */
}

/* Estilo para la imagen */
.expandable-image {
  display: block;
  width: 100%; /* Ocupa el 100% del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Transiciones suaves para el zoom y opacidad */
}

/* Efecto de zoom y posición al pasar el cursor sobre el contenedor de la imagen */
.image-container:hover .expandable-image {
  position: fixed; /* Posiciona la imagen en relación con la ventana del navegador */
  top: 197px; /* Ajusta la posición vertical para estar claramente debajo de la barra de navegación */
  right: 10%; /* Posiciona la imagen en el lado derecho */
  transform: scale(1.218); /* Aumenta el zoom en un 1.5% adicional */
  z-index: 1000; /* Asegura que la imagen esté por encima de otros elementos */
  max-width: 20vw; /* Limita el ancho máximo al 20% del ancho de la ventana */
  max-height: 50vh; /* Aumenta la altura máxima al 50% de la altura de la ventana */
  opacity: 1; /* Asegura que la imagen sea visible */
}

/* Estado normal de la imagen */
.image-container .expandable-image {
  position: static; /* Mantiene la posición normal cuando no se hace hover */
  max-width: 100%; /* Vuelve al tamaño original */
  max-height: auto; /* Mantiene la proporción original */
  transform: scale(1); /* Vuelve al tamaño original */
  opacity: 1; /* Asegura que la imagen sea visible cuando no se hace hover */
}

/* Fondo oscuro detrás de la imagen para destacar el anuncio (opcional) */
.image-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Fondo oscuro con transparencia */
  z-index: 999; /* Asegura que el fondo esté por debajo de la imagen */
  opacity: 0; /* Inicialmente oculto */
  transition: opacity 0.3s ease; /* Transición suave para la visibilidad */
  pointer-events: none; /* Evita que el fondo oscuro interfiera con los eventos del mouse */
}

.image-container:hover::before {
  opacity: 1; /* Muestra el fondo oscuro al hacer hover sobre el contenedor */
}

.pagos_titulo{   
font-family: Montserrat, sans-serif;
    font-size: 35px;
    background: #84c474;
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    padding: 22px;
    margin-right: 5px;
    font-weight: 300;
    font-style: italic;
}

.button-pse {
    display: inline-block;
    position: relative;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #0059b1;;
    background-color: #ffffff;
    border: 2px solid #0059b1;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.button-pse img {
    width: 70px; /* Tama�0�9o del logo */
    vertical-align: middle;
    margin-right: 10px; /* Espacio entre el logo y el texto */
}

.button-pse span {
    display: inline-block;
    vertical-align: middle;
}

.button-pse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.5s ease;
    transform: translate(-50%, -50%) scale(0);
    z-index: 0;
}

.button-pse:hover::before {
    transform: translate(-50%, -50%) scale(2);
}

.button-pse:hover {
    background-color: #003d80;
    border-color: #003d80;
    color: #ffffff;
}

.button-pse:hover img {
    filter: brightness(0) invert(1); /* Invertir colores del logo en hover */
}

.button-pse:hover span {
    transform: translateX(10px); /* Mover el texto a la derecha en hover */
}

.button-pse:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}




.button-efecty {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #ffc107;
    border: 2px solid #ffc107;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.button-efecty img {
    width: 90px; /* Tama�0�9o del logo */
    vertical-align: middle;
    margin-right: 10px; /* Espacio entre el logo y el texto */
}

.button-efecty span {
    display: inline-block;
    vertical-align: middle;
}

.button-efecty::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.5s ease;
    transform: translate(-50%, -50%) scale(0);
    z-index: 0;
}

.button-efecty:hover::before {
    transform: translate(-50%, -50%) scale(2);
}

.button-efecty:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #ffffff;
}

.button-efecty:hover img {
    filter: brightness(0) invert(1); /* Invertir colores del logo en hover */
}

.button-efecty:hover span {
    transform: translateX(10px); /* Mover el texto a la derecha en hover */
}

.button-efecty:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}


.button-bancolombia {
    display: inline-block;
    position: relative;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #ffc107;
    border: 2px solid #ffc107;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.button-bancolombia img {
    width: 100px; /* Tama�0�9o del logo */
    vertical-align: middle;
    margin-right: 10px; /* Espacio entre el logo y el texto */
}

.button-bancolombia span {
    display: inline-block;
    vertical-align: middle;
}

.button-bancolombia::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.5s ease;
    transform: translate(-50%, -50%) scale(0);
    z-index: 0;
}

.button-bancolombia:hover::before {
    transform: translate(-50%, -50%) scale(2);
}

.button-bancolombia:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #ffffff;
}

.button-bancolombia:hover img {
    filter: brightness(0) invert(1); /* Invertir colores del logo en hover */
}

.button-bancolombia:hover span {
    transform: translateX(10px); /* Mover el texto a la derecha en hover */
}

.button-bancolombia:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}