/* Reset de estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

/* Estilos generales */
body {
    font-family: 'Montserrat', sans-serif;
    color: #09527F;
}

header {
    position: sticky;
    top: 0;
    background-color: white;
    border-bottom: 20px solid #09527F;
    z-index: 100;
}

.container {
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Añade un poco de espacio alrededor del encabezado */
}

.logo img {
    max-width: 400px;
    margin-left: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    margin-right: 50px;
}

nav li {
    margin-left: 50px;
}


nav a {
    text-decoration: none;
    font-family: 'Montserrat-ExtraBold', sans-serif;
    color: #09527F;
    font-weight: 800;
    font-size: 22px;
}
/*---------------------------------------------------*/

/* Banner inicial */
.container .abrir-menu, .cerrar-menu{
    display: none;
} 
.banner {
    position: relative;
    display: flex;
    justify-content: center;
    height: 400px;
}

.banner .background-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner .background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .overlay {
    background-color: rgba(80, 169, 223, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner .container-frase {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    position: absolute; /* Agrega esto para posicionar el texto en relación con el banner */
    top: 0; /* Alinea el texto en la parte superior del banner */
}

.banner-content{
    width: 100%;
}
.banner-content h1 {
    font-size: 80px;
    color: white;
    font-weight: 800;
    margin-top: 0; /* Elimina el margen superior para centrar el texto verticalmente */
}

.banner-content p {
    font-size: 20px;
    color: white;
    font-weight: 800;
    margin-top: 20px;
}
/*---------------------------------------------------*/

/* Blue Banner */
.blue-banner {
    background-color: #09527F;
    width: 100%;
    height: 240px;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-TeBrindamos {
    display: flex;
    padding: 0 20px;
}

.blue-banner-text {
    text-align: left;
    font-size: 33px;
    font-weight: 750;
    margin-bottom: 10px;
    flex: 1; /* Rellena el espacio disponible horizontalmente */
}

.divider {
    width: 4px;
    height: 170px;
    background-color: white;
    margin: 0 20px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
    font-weight: 700;
}

.contact-info .number{
    font-size: 80px;
    margin-top: -15px;
}

.contact-info a{
    color: #D0EDFF;
    font-weight: 800;
    font-size: 40px;
    transition: color 0.2s;
    transition: transform 0.3s;
}

.contact-info a:hover{
    color: #b2cfe0;
    transform: translateY(-10px);
}

.fa-whatsapp{
    color: #D0EDFF;
    margin-left: 20px;
    font-size: 65px;
    transition: color 0.2s;
}

.fa-whatsapp:hover{
    color: #D0EDFF;
    margin-left: 20px;
    font-size: 65px;
    color: #9dc1d7;
}

.contact-info a {
    display: block;
    margin: 10px 0;
}
/*---------------------------------------------------*/

/* SERVICIOS */
.servicios--encabezados{
    width: 100%;
    text-align: center;
    margin-top: 50px;
}

.servicios--encabezados h1{
    font-weight: 800;
    font-size: 60px;
    margin-bottom: 10px;
}
.servicios--encabezados p{
    font-size: 29px;
}

.our-services {
    background-color: #fff;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
}

.our-services .container {
    max-width: 1200px;
    margin: 0 auto;
}

.our-services h2 {
    color: #09527F;
    font-size: 36px;
    margin-bottom: 20px;
}

.our-services p {
    color: #707070;
    font-size: 18px;
    margin-bottom: 40px;
}

.our-services .container{
    display: flex;
    flex-direction: column;
}

.service {
    display: flex;
    border: 1px solid #707070;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
}

.service-image {
    flex: 1;
    max-width: 512px
}

.service-image img{
    width: 100%;
    display: block;
    opacity: 0.7;
}

.service-title{
    position: absolute; /* Posiciona el título de manera absoluta dentro del servicio */
    background-color: #09527F; /* Fondo azul para el título */
    color: #fff; /* Color de texto blanco para el título */
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    padding: 10px 20px; /* Espacio alrededor del título */
    top: 50px; /* Ajusta la posición vertical del título según tus preferencias */
    left: 60px; /* Ajusta la posición horizontal del título según tus preferencias */
    z-index: 1;
}

.service-details {
    flex: 3;
    padding: 0 20px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
   
}
.service-details p {
    color: #707070;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 0;
}

.service-points {
    display: flex;
    align-items: left;
    justify-content: left;
    list-style: none;
    padding: 0;
    margin-top: 5px;
    font-size: 20px;
    font-weight: 600;
}

.service-points ul{
    display: flex;
    align-items: center;
    justify-content: left;
}

.service-points li {
    display: flex;
    align-items:center ;
    margin-right: 50px;
    margin-top: 15px;
    color: #000000;
}

.service-points img {
    width: 30px; /* Ajusta el tamaño de la imagen según tus necesidades */
}

.contact-button {
    max-width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Fondo transparente */
    color: #09527F; /* Color del texto azul para que coincida con tu color original */
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #09527F; /* Borde azul con el color original */
    border-radius: 5px; /* Aumentamos el borde para que sea más redondeado como en la imagen */
    padding: 8px 8px;
    text-decoration: none;
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s; /* Transición para fondo, borde y color del texto */
    cursor: pointer; 
}

.container-button{
    width: 100%;
    display: flex;
    justify-content: center;
}

.service-container{
    display: flex;
    flex-direction: column;
    align-items: left;
}

.contact-button img{
    color: #36BB22;
    width: 30px;
    margin-right: 10px;
    margin-left: 1px;
    font-size: 25px;
    transition: color 0.2s;
}

.contact-button:hover{
    background-color: #eeeeee; 
}
.blue-banner-text p {
    display: block;
}
.blue-banner-text .mobile-text{
    display: none;
}

/*SERVICIO COMERCIAL*/
.service-tittle-comercial{
    font-size: 22px;
    margin-top: 10px;
}

.service-tittle-utilizalo{
    font-size: 22px;
    margin-top: 18px;
}

.service-image2 {
    flex: 1;
    max-width: 512px;
    max-height: 780px;
}
.service-image2 img{
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.7;
    object-fit: cover;
}

.service-title2{
    position: absolute; /* Posiciona el título de manera absoluta dentro del servicio */
    background-color: #09527F; /* Fondo azul para el título */
    color: #fff; /* Color de texto blanco para el título */
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    padding: 10px 20px; /* Espacio alrededor del título */
    top: 50px; /* Ajusta la posición vertical del título según tus preferencias */
    left: 70px; /* Ajusta la posición horizontal del título según tus preferencias */
    z-index: 1;
}

.service-title3{
    position: absolute; /* Posiciona el título de manera absoluta dentro del servicio */
    background-color: #09527F; /* Fondo azul para el título */
    color: #fff; /* Color de texto blanco para el título */
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    padding: 10px 20px; /* Espacio alrededor del título */
    top: 50px; /* Ajusta la posición vertical del título según tus preferencias */
    left: 40px; /* Ajusta la posición horizontal del título según tus preferencias */
    z-index: 1;
}
.service-image3{
    flex: 1;
    max-width: 512px;
    max-height: 200px;
}

.service-image3 img{
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.7;
    object-fit: cover;
}

.contact-button2{
    max-width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Fondo transparente */
    color: #09527F; /* Color del texto azul para que coincida con tu color original */
    font-size: 18px;
    font-weight: 600;
    border: 2px solid #09527F; /* Borde azul con el color original */
    border-radius: 5px; /* Aumentamos el borde para que sea más redondeado como en la imagen */
    padding: 8px 8px;
    text-decoration: none;
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s; /* Transición para fondo, borde y color del texto */
    cursor: pointer; 
}

.contact-button2 img{
    color: #36BB22;
    width: 30px;
    margin-right: 10px;
    margin-left: 1px;
    font-size: 25px;
    transition: color 0.2s;
}

.contact-button2:hover{
    background-color: #eeeeee;
}
/*---------------------------------------------------*/

/* PORTAFOLIO */

.portfolio-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.portfolio-banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #09527F; /* Color de fondo azul, ajústalo si tienes otro tono específico */
    padding: 20px 0; /* Espacio arriba y abajo, ajústalo según tus necesidades */
}

.portfolio-banner h1 {
    color: #FFFFFF; /* Título en blanco */
    margin: 0; /* No margen adicional */
    font-size: 60px
}

.portfolio-description {
    color: #707070;
    font-size: 28px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.portfolio-img img{
    max-width: 1050px;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 30px;
}

.portfolio-img a:hover img {
    transform: scale(1.05);
}

.container-cilindros {
    width: 1000px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    margin-bottom: 30px;
}

.container-cilindros .header {
    background-color: #09527F; /* color azul */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 20px;
}
.container-cilindros .header h2{
    color: #fff;
}

.expand-icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.content, .content2{
    max-height: 0;
    padding: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, visibility 0.3s ease;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 10px;
}

.content.expanded, .content2.expanded{
    max-height: 1200px;
    padding: 10px;
    visibility: visible;
}

.contet_texto{
    font-size: 25px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #707070;
}

.contet_texto2{
    font-size: 25px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #707070;
}
.content_dimensiones{
    font-size: 25px;
    margin-bottom: 20px;
}

.content img{
    margin-left: 30px;
    margin-right: 30px;
    max-width: 130px; /* ajusta este valor según prefieras */
}

.fa-solid{
    color: #ffffff;
    margin-left: 20px;
    font-size: 25px;
    transition: transform 0.3s ease;
}

.content2 .content-img-granel{
    max-width: 250px;
    margin-right: 20px;
}
/*---------------------------------------------------*/

/*FOOTER*/

footer {
    margin-top: 50px;
    width: 100%;
    background-color: #09527F;
    color: white;
}

.footer-border {
    width: 100%;
    height: 20px;
    background-color: #1185CD;
}

.footer-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0; /* Esto da un espacio en la parte superior e inferior del contenido del footer */
    max-width: 1200px; /* Puedes ajustar este valor si lo necesitas */
    margin: 0 auto; /* Centra el contenido del footer si su ancho es menor que el ancho del viewport */
    text-align: center; /* Centra el texto y los íconos */
}

.footer-content a{
    text-decoration: none;
    color: white;
    font-weight: 400;
    font-size: 30px;
    margin-left: 20px;
}

.fa-facebook{
    margin-right: 10px;
    font-size: 35px;
}

.fa-square-whatsapp{
    margin-right: 10px;
    font-size: 35px;
}

.fa-envelope{
    font-size: 35px;
}

.icon-section p{
    font-size: 30px;
    margin-left: 0px;
}


.footer-text {
    font-size: 24px; /* Puedes ajustar el tamaño del texto según lo necesites */
    margin-bottom: 20px; /* Espacio entre el texto y la línea blanca */
}

.white-line {
    width: 75%; /* Puedes ajustar el ancho de la línea si lo necesitas */
    border: 0;
    height: 2px;
    background-color: white;
    margin-top: 20px;
    margin-bottom: 40px;
}

.footer-icons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espacio entre los íconos y el texto */
}

.icon-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Espacio entre el ícono y el texto de cada sección */
}

/* Aquí puedes añadir estilos específicos para los íconos si lo necesitas */

/*---------------------------------------------------*/

/*Boton wp*/
.whatsapp-button {
    position: fixed;
    bottom: 20px; 
    right: 20px; 
    width: 6vw;
    height: 6vw; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; 
    transition: transform 0.3s;
}
#whatsapp-icon {
    width: 6vw; 
    height: 6vw; 
}
.whatsapp-button:hover {
    background-color: #26C45B;
    transform: translateY(-10px);
}

/*---------------------------------------------------*/

/*-------------------RESPONSIVE PORTATIL---------------------*/

@media (max-width: 1400px) {
    body {
        font-size: 14px;
    }

    .container {
        padding: 5px 10px;
    }

    .logo img {
        max-width: 300px;
    }

    nav ul {
        align-items: center;
    }

    nav li {
        margin-left: 20px;
    }

    nav ul li a{
        font-size: 20px;
    }

    .portfolio-banner {
        width: 100%;
    }

    .banner-content h1 {
        font-size: 50px;
    }

    .footer-content {
        padding: 30px 0;
    }
    .our-services{
        margin-left: 80px;
        margin-right: 80px;
    }

}


@media (max-width: 700px){
    .container {
        /* Ajustes para el contenedor para que tenga un padding menor y así el contenido tenga más espacio */
        padding: 5px 10px;
    }

    .container .abrir-menu, .cerrar-menu{
        display: block;
        border: 0;
        font-size: 2rem;
        background-color: transparent;
        cursor: pointer;
        color: #09527F;
    } 
    nav{
        opacity: 0;
        visibility: hidden;
        position: fixed;
        flex-direction: column;
        width: 80%; /* Asegura que el menú ocupe todo el ancho */
        height: 100vh; /* Asegura que el menú ocupe todo el alto del viewport */
        gap: 1rem;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: white;
        padding: 1rem;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
        z-index: 1000;
        transition: opacity 0.3s, visibility 0.3s; /* Agrega transiciones suaves */
    }
    
    .nav.visible{
        opacity: 1;
        visibility: visible;
    }
    nav ul, nav li{
        flex-direction: column;
        align-items: end;
        margin: 0;
    }
   

    .logo img {
        /* Reducir el tamaño del logo para dispositivos móviles */
        max-width: 240px;
        margin-left: 5px;
    }

    .banner {
        /* Ajustes para el banner para dispositivos móviles */
        height: 70px; /* La altura se ajusta al contenido */
        min-height: 150px; /* Altura mínima para asegurarse de que el contenido no se amontone */
    }

    .banner .container-frase {
        /* Ajustes para el contenedor de la frase o título dentro del banner */
        position: absolute;
        top: 50%; /* Centrar verticalmente */
        left: 50%; /* Centrar horizontalmente */
        transform: translate(-50%, -50%); /* Ajuste fino para el centrado */
        width: 100%;
    }

    .banner-content h1 {
        width: 100%;
        /* Ajustes para el título dentro del banner */
        font-size: 30px; /* Tamaño de la fuente más grande para visibilidad */
        color: white; /* Color de la fuente */
    }
    .banner .overlay {
        background-color: rgba(80, 169, 223, 0.7);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

    }

    .banner .background-image img {
        /* Cambia a background-size: cover para cubrir todo el espacio */
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .banner .background-image {
        position: relative;
        width: 100%;
        background-size: cover; /* Esto hará que la imagen de fondo se ajuste proporcionalmente */
        background-position: center;
    }
    .blue-banner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px; /* Añade padding para evitar que el contenido toque los bordes */
        height: auto; /* La altura se ajusta al contenido */
        border-bottom: none; /* Elimina la línea blanca si existe */
    }
    .container-TeBrindamos{
        flex-direction: column;
    }

    .blue-banner-text,
    .contact-info {
        display: flex;
        width: 100%; /* Ocupa todo el ancho disponible */
        text-align: center; /* Alinea el texto al centro */
        margin: 10px 0; /* Agrega un margen entre los elementos */
        font-size: 13px;
        margin-bottom: 0px;
    }
    .blue-banner-text p{
        display: none;
    }

    .blue-banner-text .mobile-text {
        display: block;
        text-align: center; /* Asegura que el texto esté centrado */
        font-size: 15px; /* Ajusta el tamaño del texto según necesites */
        color: white; /* Color del texto */
    
    }
    .blue-banner-text .mobile-text {
        display: block; /* Esto mostrará el texto móvil en dispositivos móviles */
    }
    .divider {
        /* Elimina el divisor ya que los elementos estarán en columna */
        display: none;
    }

    .contact-info {
        /* Ajustes adicionales para la información de contacto si es necesario */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

    .contact-info a {
        /* Estilos para el enlace de contacto */
        font-size: 20px; /* Tamaño de fuente ajustado para dispositivos móviles */
        margin-top: 10px; /* Espacio adicional después de la información de contacto */
    }
    .contact-info .number{
        font-size: 20px;
        margin-top: 2px;
        margin-left: 15px;
    }
    .fa-whatsapp{
        font-size: 20px;
        margin-left: 10px;
    }
    .servicios--encabezados{
        margin-top: 30px;
    }
    .servicios--encabezados h1{
        font-size: 35px;
        margin-bottom: 0px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .servicios--encabezados p{
        font-size: 20px;
        margin: 10px 10px 10px 10px;
    }
    
    /* Servicios */
    .our-services{
        padding: 0;
        margin: 0;
    }
    .service {
        flex-direction: column; /* Cambia la dirección del flex a columna para dispositivos móviles */
        align-items: center; /* Centra los elementos hijos horizontalmente */
        max-width: 350px; /* Establece un ancho máximo para el contenedor */
        width: 100%; /* Permite que el contenedor se ajuste al ancho de la pantalla */
        margin: auto; /* Centra el contenedor en la pantalla */
        padding: 10px; /* Añade un poco de padding */
        box-sizing: border-box; /* Asegúrate de que el padding no aumente el ancho del contenedor */
        margin-bottom: 30px;
    }

    .service-image, .service-image2 {
        position: relative;
        width: 100%; /* Establece que el contenedor de la imagen ocupe todo el ancho disponible */
        margin-bottom: 10px; /* Añade un margen debajo de la imagen */

    }

    .service-image img, .service-image2 img{
        width: 100%; /* Asegura que la imagen se estire para ocupar todo el ancho del contenedor */
        height: 400px;
        object-fit: cover; /* Asegúrate de que la imagen cubra todo el contenedor sin distorsionarse */
    }
    .service-title, .service-title2{
        position: absolute; /* Cambia la posición a estática para que fluya con el documento */
        margin: 0; /* Elimina los márgenes personalizados */
        width: 68%; /* Ajusta el título para que ocupe el ancho completo del contenedor */
        text-align: center; /* Centra el texto del título */
    }

    .service-tittle-comercial{
        font-size: 18px;
        text-align: center;
    }
    .service-tittle-utilizalo{
        font-size: 18px;
        text-align: center;
    }
    .service-image2{
        position: relative;
        width: 100%; /* Establece que el contenedor de la imagen ocupe todo el ancho disponible */
        margin-bottom: 10px; /* Añade un margen debajo de la imagen */
    }
    .service-details {
        width: 100%; /* Asegura que los detalles ocupen todo el ancho del contenedor */
        margin: 0;
        padding: 0 0 5px 5px;
    }
    .service-details p {
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
    }

    .service-points {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        margin-top: 5px;
        font-size: 13px;
        font-weight: 600;
    }
    .service-points li {
        display: flex;
        align-items:center ;
        margin: 10px 0 0 0;
    }

    .service-image3 img {
        width: 100%; /* La imagen se estira para ocupar todo el ancho */
        height: auto; /* Mantiene la proporción de la imagen */
        object-fit: cover; /* Cubre el área de la imagen, posiblemente recortando si es necesario */

    }
    .service-title3 {
        position: relative; /* Posición relativa para que el título fluya con el documento */
        top: -170px; /* Ajusta según sea necesario para superponer la imagen */
        left: 32%; /* Centra el título horizontalmente */
        transform: translateX(-50%); /* Ajusta la traducción en X para centrar el título */
        z-index: 2; /* Asegúrate de que el título esté sobre la imagen */
        background-color: #09527F; /* Fondo azul para el título */
        color: white; /* Color de texto blanco para el título */
        padding: 10px 20px; /* Espacio alrededor del título */
        width: fit-content; /* El ancho del título se ajusta al contenido */
        margin: 0 auto; /* Centrado automático */
        border-radius: 5px; /* Bordes redondeados para el título */
    }
    .service-details-comercial p{
        margin-top: 10px;
    }


    /*portafolio*/
    .portfolio-banner {
        width: 100%;
    }
    .portfolio-banner h1 {
        font-size: 40px
    }

    .portfolio-description {
        text-align: center;
        font-size: 18px;
        margin: 30px 20px 10px 10px;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .portfolio-img img{
        max-width: 350px;
    }

    .container-cilindros{
        max-width: 350px;
    }

    .content img{
        margin-left: 10px;
        margin-right: 10px;
        max-width: 110px; /* ajusta este valor según prefieras */
    }
    
    .content .contet_texto{
        font-size: 20px;
        margin-left: 10px;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto; 
    }
    .content_dimensiones{
        font-size: 22px;
        margin-left: 10px;
    }
    .contet_texto2{
        font-size: 20px;
        text-align: justify;
        margin-left: 10px;
        text-justify: inter-word;
        hyphens: auto; 
    }

    .content2{
        width: 100%;
        display: flex;
        flex-direction: column;

    }

    .content2 img{
        margin-left: 20px;
    }

    /*Footer */
    .footer-text{
        font-size: 20px; /* Puedes ajustar el tamaño del texto según lo necesites */
        margin: 0 10px 0px 10px;
    }
    
    .footer-content a{
        text-decoration: none;
        color: white;
        font-weight: 400;
        font-size: 30px;
        margin-left: 20px;
    }
    .white-line {
        width: 93%; /* Puedes ajustar el ancho de la línea si lo necesitas */
        margin-bottom: 20px;
    }
    
    .footer-icons {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px; /* Espacio entre los íconos y el texto */
    }
    .footer-content a{
        font-size: 23px;
        margin-left: 20px;
    }

    .icon-section{
        width: 100%;
    }

    .icon-section p{
        font-size: 23px;
    }
    .fa-envelope{
        font-size: 23;
    }

    .whatsapp-button{
        width: 14vw; /* Ajusta el ancho según tus necesidades */
        height: 14vh; /* Ajusta la altura según tus necesidades */

    }
    #whatsapp-icon {
        width: 14vw; /* Ajusta el ancho según tus necesidades */
        height: 14vw; /* Ajusta la altura para mantener la proporción */
    }
}