/* =========================================
   LISA PORTFOLIO V2
   Global style
========================================= */


/* RESET */

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


html {
    scroll-behavior: smooth;
}


body {
    background: #F5F1E8;
    color: #171614;
    font-family: "Inter", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: -0.03em;
}


a {
    color: inherit;
    text-decoration: none;
}


/* NAVIGATION */

.nav {

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

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

    padding: 40px 55px;

    z-index: 10;
}


.logo {

    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.08em;
    transition: opacity .25s ease;

}

.logo:hover{

    opacity:.7;

}



.nav-links {

    display: flex;
    gap: 28px;

}


.nav-links a {

    font-size: 14px;
    opacity: 0.65;

    transition: opacity 0.3s ease;

}


.nav-links a:hover {

    opacity: 1;

}


/* HOME IMAGE */

.hero {

    min-height: 100vh;

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

}


.hero-image {

    width: 70vw;
    height: 72vh;

}


.hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* MOBILE */

@media (max-width: 800px) {


    .nav {

        padding: 25px 20px;

    }


    .nav-links {

        gap: 18px;

    }


    .hero-image {

        width: 90vw;
        height: 65vh;

    }

}

/* WORK DROPDOWN */

    .nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-button {
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: inherit;
    opacity: 0.65;

    cursor: pointer;
    padding: 0;
    margin: 0;

    transition: opacity 0.3s ease;
}

.nav-dropdown-button:hover {
    opacity: 1;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);

    min-width: 150px;
    padding-top: 15px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-dropdown-menu a {
    display: block;
    padding: 5px 0;

    color: inherit;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

/* ouverture au survol */

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}