#menuDesk {
  position: fixed;
  width: 80%;
  z-index: 998;
  top: 3em;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.19);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 1em;

  .cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;

    .logo {
      width: 10vw;
    }

    .link {
      
      a {
        text-transform: uppercase;
        font-size: clamp(10px, 1vw, 20px);
        margin: 0 25px;
        font-weight: 500;
        font-family: 'Brockmann';
        letter-spacing: var(--spaziatura);
        white-space: nowrap;
      }
    }

    .cta-menu {
      background: var(--verde);
      padding: 10px 25px 8px;
      border-radius: .7em;
      text-transform: uppercase;
      font-weight: 500;
      font-size: clamp(10px, 1vw, 20px);
      transition: all .5s cubic-bezier(.215, .61, .355, 1);
      font-family: 'Brockmann';
      letter-spacing: var(--spaziatura);

      &:hover {
        background: var(--nero);

        a {
          color: var(--verde);
        }
      }
    }
  }
}

/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: var(--verde)!important;
  height: 3px!important;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}

  /* ----------------- Desktop ----------------- */
  
  @media screen and (min-width: 1025px) {
    #menuSm {
      display:none;
    }
  }  
  
  /* ----------------- Tablet ----------------- */
  
  @media screen and (max-width: 1024px) and (min-width: 500px) {
  
    #menuSm {
      display:none;
    }  
  }
  
  
  /* ----------------- Smartphone ----------------- */
  
  @media screen and (max-width: 500px) {
  
    #menuDesk {
      display:none;
    }

    #menuSm {
      background: rgba(255, 255, 255, 0.19);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 1em;
      position: fixed;
      z-index: 998;
      width: 95%;
      top: 1.5em;
      left: 0;
      right: 0;
      margin: 0 auto;
      padding: 5px 0;

      .container-fluid {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      img {
        width: 50px;
      }

      .cont {
        display: flex;
        gap: 10px;
      }

      .cta {
        background: var(--verde);
        padding: 5px 15px 3px;
        border-radius: .7em;
        text-transform: uppercase;
        font-family: var(--font-titolo);
        letter-spacing: var(--spaziatura);
      }

      .burger {
        background: var(--nero);
        padding: 6px 10px 0;
        border-radius: .7em;
        width: fit-content;
        cursor: pointer;

        span {
          display: block;
          width: 30px;
          height: 2px;
          background-color: var(--verde);
          margin: 3px 0;
          transition: transform .5s ease, opacity .5s ease;
        }

        &.attivo span:nth-child(1) {
          opacity: 0;
        }

        &.attivo span:nth-child(2) {
          opacity: 1;
        }

        &.attivo span:nth-child(3) {
          opacity: 0;
        }
      }
    }

    #menuSmAperto {
      width: 94%;
      margin: 0 auto;
      top: 6em;
      left: 3%;
      position: fixed;
      z-index: 999;
      border-radius: 1em;
      padding: 20px 10px;
      background: var(--verde);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity .3s ease, transform .3s ease, visibility .3s ease;

      &.aperto {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }


      a {
        font-family: var(--font-titolo);
        letter-spacing: var(--spaziatura);
        text-transform: uppercase;
        display: block;
        font-size: 1.5em;
        margin: 20px 0;
        line-height: 1em;
        color: var(--bianco);
      }
    }

}