/* ========================================
   HERO - HOME
======================================== */
.hero{
    position:relative;
    height:860px;
    overflow:hidden;
}
/* ========================================
   LAYOUT
======================================== */
.hero-layout{
    height:100%;
    display:flex;
    align-items:center;
}
/* ========================================
   IMAGEN DE FONDO
======================================== */
.hero-image{
    position:absolute;
    inset:0;
    width:100vw;
    height:100%;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
    overflow:hidden;
}
/* ========================================
   TEXTO SOBRE FONDO OSCURO
======================================== */
.hero-title{
    color:#ffffff;
}
.hero-description{
    color:#ffffff;
}
/* ========================================
   OVERLAY
======================================== */
.hero-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
}

/* ========================================
   CAPA DE CONTENIDO
======================================== */
.hero-content{
    position:relative;
    z-index:3;
}
/* ========================================
   RESPONSIVE
======================================== */
@media (max-width:1024px){
    .hero{
        height:720px;
    }
}
/* ========================================
   TABLET
======================================== */
@media (max-width: 768px){
    .hero{
        height:650px;
    }
    .hero .btn-secondary{
        margin-top:5px;
    }
}
/* ========================================
   CELULAR
======================================== */
@media (max-width: 480px){
    .hero{
        height:600px;
    }
    .hero .btn-secondary{
        margin-top:5px;
    }
}