/* ---------------- section hero présentation (title highlights + 2 boutons) sur la page d'accueil -------------- */
.hero-presentation{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 120px 80px;
    gap:50px;

    & h2{
        font-family:'DidotItalic';
        color:var(--black);
        font-size:2.5rem;
    }

    & p{
        font-family:'ProximaNovaLight';
        font-size:1.4rem;
        text-align:center;
        width:60%;

    }

    .presentation-cta{
        display:flex;
        gap:15px;
        & button{
            padding:15px 50px;
            & a{
                font-size:1rem;
            }
        }
    }
}



/* ---------------- responsive -------------- */
@media screen and (max-width:1024px){
    .hero-presentation{
        padding: 100px 80px;
        & h2{
            font-size:2rem;
        }
        & p{
            font-size:1.2rem;
            width:80%;
        }
    }
}

@media screen and (max-width:768px){
    .hero-presentation{
        padding:80px 50px;
        gap:30px;
        & h2{
            text-align:center;
        }
        & p{
            font-size:1.1rem;
            width:90%;
        }
        & .presentation-cta{
        gap:10px;
        & button{
            padding: 15px 30px;
            & a{
                font-size:0.9rem;
            }
        }
    }
    }
}

@media screen and (max-width:480px){
    .hero-presentation{
        padding:50px 30px;
        & h2{
            font-size:1.8rem;
        }
        & p{
            font-size:1rem;
            width:90%;
        }
        & .presentation-cta{
        flex-direction: column;
        gap:5px;
        align-items: center;
        & button{
            padding: 12px 25px;
        }
    }
    }
}