/*****************************************************************
    STARTER INMOBILIARIO
    SLIDER.CSS
*****************************************************************/

/*==============================================================
    HERO
==============================================================*/

.hero{

    position:relative;

    width:100%;

    overflow:hidden;

}


/*==============================================================
    SLIDER
==============================================================*/

.hero-slider{

    position:relative;

    width:100%;

    height:700px;

}


/*==============================================================
    SLIDE
==============================================================*/

.hero-slide{

    position:relative;

    width:100%;

    height:700px;

    overflow:hidden;

}


/*==============================================================
    IMAGEN
==============================================================*/

.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==============================================================
    OVERLAY
==============================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.35)
    );

    z-index:2;

}


/*==============================================================
    CONTENIDO
==============================================================*/

.hero-content{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:3;

}


/*==============================================================
    TEXTO
==============================================================*/

.hero-text{

    max-width:900px;

    text-align:center;

    color:var(--white);

}

.hero-text h1{

    margin-bottom:var(--space-4);

    color:var(--white);

    font-size:4rem;

    font-weight:300;

}

.hero-text p{

    margin:0;

    font-size:1.35rem;

    color:var(--white);

}


/*==============================================================
    BUSCADOR
==============================================================*/

.hero-search{

    position:absolute;

    left:50%;

    bottom:60px;

    transform:translateX(-50%);

    width:100%;

    max-width:1200px;

    z-index:20;

}


/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:991px){

    .hero-slider,
    .hero-slide{

        height:500px;

    }

    .hero-text h1{

        font-size:2.5rem;

    }

    .hero-text p{

        font-size:1rem;

    }

    .hero-search{

        bottom:20px;

        width:95%;

    }

}

@media(max-width:576px){

    .hero-slider,
    .hero-slide{

        height:420px;

    }

    .hero-text h1{

        font-size:2rem;

    }

}