/* ---- header ---- */
nav {
    background-image: linear-gradient(to bottom,
            #535353 5%,
            rgb(37, 30, 30) 95%);
}

* {
    font-family: "Montserrat", sans-serif;
}

.button-custom-header {
    /*background-color: rgb(134, 255, 65);*/
    background-color: #99FF33;
    font-size: 16px;
}

h4 {
    font-size: 16px;
    font-weight: 500;
}

.class-icon-nav {
    max-width: 120px;
    height: auto;
}

.navbar-position {
    z-index: 1000;
    /* Assicura che sia sopra ad altri elementi */
}

.menu-open-body {
    /* Impedisce lo scorrimento della pagina */
    overflow: hidden;
    /* Fa in modo che il body mantenga la sua posizione, prevenendo saltellamenti */
    position: fixed;
    /* Assicura che il body occupi l'intera larghezza */
    width: 100%;
    /* Assicura che il body occupi l'intera altezza */
    height: 100%;
    /* Inizia dalla parte superiore della finestra */
    top: 0;
}

.fullscreen-menu {
    display: none;
    position: fixed;
    top: -100%;
    /* Inizia completamente fuori dallo schermo in alto */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    /* Transizione solo per la proprietà 'top' */
    background-image: url('/img/background/img-background-menu.webp');
    background-size: cover;
    /* Scala l'immagine per coprire l'intero contenitore */
    background-position: center;
    /* Centra l'immagine all'interno del contenitore */
    background-repeat: no-repeat;
    /* Animazione menu a tendina */
    transition: top 0.3s ease-in-out;
}


.fullscreen-menu.open {
    /* Scorre in posizione */
    top: 0;
}

/* animazione link del full screen */
.menu-items {
    list-style: none;
    padding: 0;
    margin-top: 100px;
    /* Spazio dal bordo superiore */
}

.menu-items li {
    font-size: calc(1.325rem + .9vw);
    opacity: 0;
    /* Inizialmente trasparenti */
    transform: translateY(20px);
    /* Inizialmente spostati di 20px verso il basso */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.fullscreen-menu.open .menu-items li {
    opacity: 1;
    /* Diventano opachi quando il menu è aperto */
    transform: translateY(0);
    /* Tornano alla loro posizione originale */
}

/* Applichiamo un ritardo all'animazione di ogni elemento <li> */
.fullscreen-menu.open .menu-items li:nth-child(1) {
    transition-delay: 0.1s;
}

.fullscreen-menu.open .menu-items li:nth-child(2) {
    transition-delay: 0.2s;
}

.fullscreen-menu.open .menu-items li:nth-child(3) {
    transition-delay: 0.3s;
}

.fullscreen-menu.open .menu-items li:nth-child(4) {
    transition-delay: 0.4s;
}

.fullscreen-menu.open .menu-items li:nth-child(5) {
    transition-delay: 0.4s;
}

/* aggiunto colorazione hover ai link anchor */
.menu-items li a {
    color: white;
    text-decoration: none;
    transition: color 0.03s linear;
}

.menu-items li a:hover {
    color: rgb(134, 255, 65);
}

/* animazione dell'icon nav, list address e list social del full screen */
.fade-in {
    opacity: 0;
    animation: fadeIn 2s ease-in-out;
}

.fullscreen-menu.open .fade-in-off {
    opacity: 1;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* icon nav white */
.immagine-rotante {
    animation: rotazione 10s linear infinite;
    max-width: 80px;
    height: auto;
}

@keyframes rotazione {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* svg */
header .svg-size {
    width: 20px;
    height: auto;
}

header .svg-size-instagram {
    width: 25px;
    height: auto;
}

header svg {
    transition: fill 0.03s linear;
}

header svg:hover {
    fill: rgb(134, 255, 65);
}

#Dribbble-Light-Preview {
    transition: fill 0.03s linear;
}

#Dribbble-Light-Preview:hover {
    fill: rgb(134, 255, 65);
}