.header {
    width: 100%;
    margin: 0 auto;
    height: 100vh;
    background-image: url(../assets/homepage/hp_top_bg.svg);
    background-size: cover;
}

.hero-top {
    display: flex;
    height: 50vh;
    align-items: center;
    justify-content: center;
}

.hero-top p {
    font-size: 1.4rem;
    font-family: "Ubuntu", Arial, Helvetica, sans-serif;
    font-weight: var(--medium);
    margin-top: 30vh;
}

.hp-top-btn {
    width: 140px;
    padding: 5px;
    text-align: center;
    font-size: 1.4rem;
    border: 3px solid var(--bleu-canard);
    border-radius: 10px;
    background-color: var(--bleu-canard);
    display: block;
    margin: 0 auto;
    color: var(--white);
    transition: all 0.2s;
}

.hp-top-btn:hover {
    border-color: var(--dore-canard);
    background-color: var(--white);
    color: var(--dore-canard)
}

.hero-img {
    display: none;
}

.hero-img.active {
    display: block;
}