/* ============================================================
Project : Compro Doodle
Module  : Page
File    : home.css
Version : 1.0.0
Author  : Doodle IT Development
============================================================ */

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

.home-hero{

    position:relative;

    width:100%;

    overflow:hidden;

}

.home-hero picture{

    display:block;

    width:100%;

}

.home-hero img{

    display:block;

    width:100%;

    height:100%;

    max-height:85vh;

    min-height:420px;

    object-fit:cover;

    object-position:center;

}

.home-hero-content{

    position:absolute;

    inset:0;

    z-index:var(--z-base);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-end;

    gap:var(--space-16);

    padding-inline:var(--space-24);

    padding-bottom:var(--space-64);

    text-align:center;

}

.home-hero-title{

    margin:0;

    color:var(--color-text-white);

    font-size:var(--font-4xl);

    font-weight:var(--font-bold);

    line-height:var(--line-tight);

}

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

@media (max-width:767px){

    .home-hero-content{

        padding-inline:var(--space-16);

        padding-bottom:var(--space-32);

    }

    .home-hero-title{

        font-size:var(--font-2xl);

    }

}