/* static\css\home\contacto\contacto-main.css*/

.contacto-contenedor {
    margin: 0; /* Elimina cualquier margen externo */
    padding: 0; /* Elimina cualquier padding interno */
    position: relative; /* Permite el uso de posicionamiento relativo */
    background-image: url('/static/images/home/4.webp'); /* Ruta a tu imagen de fondo */
    background-size: contain; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen en el contenedor */
    background-repeat: repeat; /* Evita que la imagen se repita */
    
}



.contacto-contenedor {
    position: relative;
    margin: 5vh auto; /* Márgenes de 10vh arriba y abajo, centrado horizontalmente */
    padding: 15vh; /* Padding de 5vh para que sea responsivo */
    max-width: 90%; /* Limita el ancho máximo del contenedor */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del elemento */
    z-index: 1; /* Asegura que el contenido esté por delante de la imagen */

}

.contacto-contenedor::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/static/images/home/Five-Circle-Collage.webp'); /* Establece la imagen de fondo */
    background-repeat: repeat; /* Repite la imagen en ambas direcciones */
    background-size: 55vw 55vh; /* Ajusta el tamaño de la imagen para que sea más pequeña y se repita adecuadamente */
    background-position: center; /* Centra la imagen en el contenedor */
    opacity: 0.1; /* Ajusta la transparencia de la imagen */
    z-index: -1; /* Asegura que el pseudo-elemento esté detrás del contenido */
}