/**
 * Fichier  : /pages/homepage/header/assets/css/style.css
 * Fonction : style de l'en-tête
 */


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

#welcome {
    position: relative;
}

#welcome {
    width: auto;
    height: 100svh;
}

#welcome {
    background: rgb(0, 0, 0);
    background-image:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.30) 60%,
            rgba(0, 0, 0, 0.10) 100%
        ),
        url("https://dermaboost.fr/wp-content/uploads/2026/05/1544717305.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5em;
}

#welcome {
    box-sizing: border-box;
    padding: 2em 12em;
}


/* ==================================================
   CONTENT
================================================== */

#welcome .inner {
    max-width: 50%;
}

#welcome .inner {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}


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

@media screen and (max-width: 1024px) {

    #welcome {
        flex-direction: column;
        justify-content: center;
        gap: 10px;

        padding: 6em 2em 0 2em;
    }

    #welcome .inner {
        max-width: 100%;
    }

}