/*==================================================
=              RESPONSIVE - MÓVILES               =
==================================================

Se utiliza un único breakpoint de 768px.
Probado en dispositivos Android y con Chrome DevTools.

==================================================*/

@media (max-width:768px){

/*==================================================
=                  HERO RESPONSIVE                 =
==================================================*/
	
.hero{
    height:380px;
}

    .hero-overlay h1{

        font-size:22px;
        line-height:1.2;
        margin:10px 0;

    }

.hero-overlay{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:20px;

}

    .hero-overlay p{

        font-size:12px;

    }

	.hero-overlay img{

    width:100px;
    height:auto;
    margin-bottom:10px;

}
	
/*==================================================
=                FOOTER RESPONSIVE                =
==================================================*/
	
    .footer{

        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:25px;

    }

    .footer-logo{

        display:flex;
        justify-content:center;

    }

    .footer-logo img{

        max-width:180px;
        height:auto;

    }

}