/*==================================================
    AMAPT
    Feuille de style principale
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#333;
    overflow-x:hidden;

}


/**************************************************
                    HERO
**************************************************/

.hero{

    position:relative;

    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

}


/**************************************************
            IMAGE DE FOND
**************************************************/

.hero-image{

    position:relative;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    animation:zoom 300s ease-in-out infinite alternate;

}


/**************************************************
            VOILE SOMBRE
**************************************************/

.overlay{

    position:absolute;

    inset:0;

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

}


/**************************************************
                CONTENU
**************************************************/

.hero-content{

    position:relative;

    z-index:10;

    max-width:900px;

    text-align:center;

    color:white;

    padding:40px;

}

.hero-content h1{

    font-size:4.3rem;

    font-weight:700;

    margin-bottom:30px;

    text-shadow:0 5px 20px rgba(0,0,0,.55);

}

.hero-content p{

    font-size:1.35rem;

    line-height:1.8;

    margin-bottom:50px;

    text-shadow:0 2px 10px rgba(0,0,0,.55);

}


/**************************************************
                    BOUTONS
**************************************************/

.buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}


.btn{

    display:inline-block;

    padding:18px 40px;

    border-radius:60px;

    text-decoration:none;

    font-weight:bold;

    font-size:18px;

    transition:.35s;

}


.btn-primary{

    background:#14a8e6;

    color:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

}

.btn-primary:hover{

    background:#0b8dc3;

    transform:translateY(-4px);

}


.btn-secondary{

    background:white;

    color:#14a8e6;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

}

.btn-secondary:hover{

    background:#f3f3f3;

    transform:translateY(-4px);

}


/**************************************************
                ANIMATION
**************************************************/

@keyframes zoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.10);

    }

}


/**************************************************
                RESPONSIVE
**************************************************/

@media(max-width:992px){

.hero-content h1{

    font-size:3.3rem;

}

.hero-content p{

    font-size:1.2rem;

}

}


@media(max-width:768px){

.hero-content{

    padding:25px;

}

.hero-content h1{

    font-size:2.5rem;

}

.hero-content p{

    font-size:1.05rem;

    line-height:1.6;

}

.buttons{

    flex-direction:column;

    align-items:center;

}

.btn{

    width:260px;

    text-align:center;

}

}


@media(max-width:480px){

.hero-content h1{

    font-size:2rem;

}

.hero-content p{

    font-size:0.95rem;

}

}/* CSS Document */