@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
}

#parallax
{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    
}
#parallax .layer
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#parallax .layer.bg
{
    background: url(business-office-buildings.webp);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
#parallax .layer.overlay
{
    position: relative;
    top:100px;
    background: url(LogoASYSA.webp);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height:70%;
    opacity: 0.5;
}
#parallax .layer.businessman
{
    position: absolute;
    top:100px;
    width: 70%;
    height: 100%;
    background-image: url(1920-businessman.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    left: 40%;

}
section
{
    padding:0 20px 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}
section img
{
max-width: 700px;
}
section p
{
color: #fff;
font-size: clamp(18px, 2vw, 20px);
margin-top: 5px;
text-align: justify;
}
@media (max-width: 400px) {
    #parallax .layer.overlay {
        width: 400px; /* Ancho completo en móviles */
        height: 150px;
        display:flex;
        top: 30%;   
    }
}
@media (max-width: 400px) {
    #parallax .layer.businessman {
       
        top:100px;
        width: 100%;
        height: 100%;
        left: 10%;
    }
}