/* ==========================
   RESET
========================== */

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

body{
    background:#050b16;
    font-family:Arial, sans-serif;
    overflow-x:hidden;
}

/* ==========================
   MENU
========================== */

.menu{
    position:absolute;

    top:40px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    gap:70px;

    z-index:1000;
}

.menu a{
    color:white;
    text-decoration:none;
    font-size:22px;
    font-weight:700;
    text-transform:uppercase;

    transition:0.3s;
}

.menu a:hover{
    color:#ff2b45;
}

/* ==========================
   IMAGE PRINCIPALE
========================== */

.hero-reference{
    width:100%;
}

.hero-reference img{
    width:100%;
    height:auto;
    display:block;
}

/* ==========================
   TABLETTE
========================== */

@media (max-width:1024px){

    .menu{
        gap:40px;
        top:30px;
    }

    .menu a{
        font-size:18px;
    }

}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    .menu{
        top:20px;
        gap:20px;

        flex-wrap:wrap;
        justify-content:center;
    }

    .menu a{
        font-size:14px;
    }

}