body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa; /* Aggiungi uno sfondo per visibilità */
}

@media(max-width:1520px) {
  .left-svg {
      display: none;
  }
}

/* small css for the mobile nav close */
#nav-mobile-btn.close span:first-child {
  transform: rotate(45deg);
  top: 4px;
  position: relative;
  background: #a0aec0;
}

#nav-mobile-btn.close span:nth-child(2) {
  transform: rotate(-45deg);
  margin-top: 0px;
  background: #a0aec0;
}

/* Definizione animazione */
@keyframes slideIn {
  0% {
      transform: translateX(100%); /* Partenza fuori schermo */
      opacity: 0; /* Invisibile */
  }
  100% {
      transform: translateX(0); /* Arrivo in posizione */
      opacity: 1; /* Visibile */
  }
}

/* Classe comune per i div animati */
.animated-div {
  opacity: 0; /* Invisibile di default */
  animation: slideIn 1s ease-in-out forwards;
}

/* Ritardi per ciascun div */
.div-1 {
  animation-delay: 0s;
}

.div-2 {
  animation-delay: 1s;
}

.div-3 {
  animation-delay: 2s;
}


      /* Stile per il popup */
      .privacy-popup {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 300px;
          background-color: #fff;
          border: 1px solid #ccc;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          padding: 16px;
          z-index: 1000;
          font-family: Arial, sans-serif;
          display: none; /* Nascondo il popup di default */
      }

      .privacy-popup.active {
          display: block; /* Mostra il popup quando attivo */
      }

      .privacy-popup h4 {
          margin: 0 0 10px 0;
          font-size: 18px;
          color: #333;
      }

      .privacy-popup p {
          font-size: 14px;
          color: #666;
          margin: 0 0 15px 0;
      }

      .privacy-popup button {
          padding: 10px 15px;
          font-size: 14px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
      }

      .privacy-popup .accept {
          background-color: #28a745;
          color: white;
      }

      .privacy-popup .decline {
          background-color: #dc3545;
          color: white;
          margin-left: 10px;
      }


      .timeline {
          --accent: #71b84e;
          --text: white;
          --line: #c4c4c4;
          background: var(--background);
          color: var(--text);
          padding: 30px;
        }
        
        .timeline ul {
          list-style: none;
          position: relative;
          padding: 0;
          margin: 0;
          display: grid;
          grid-template-columns: repeat(var(--items), 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-column-gap: 0px;
          grid-row-gap: 0px;
        }
        
        .timeline ul:before {
          content: '';
          position: absolute;
          top: 50%;
          width: 100%;
          border-top: 3px solid var(--text);
          left: 11px;
        }
        
        .timeline ul:after {
          content: "\f04b";
          font-family: 'Font Awesome 5 Free';
          font-weight: 900;
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          margin-top: 1px;
          right: -15px;
          font-size: 25px;
          color: var(--accent);
        }
        
        .timeline ul li {
          --circle-size: 15px;
          grid-column: var(--index);
          overflow: hidden;
          position: relative;
          height: calc(100% + var(--circle-size) * 0.5);
        }
        
        .timeline ul li:after {
          content: '';
          width: var(--circle-size);
          height: var(--circle-size);
          background: var(--line);
          position: absolute;
          bottom: 0;
          left: var(--circle-size);
          border-radius: 100px;
          transform: translateX(-50%);
          z-index: 1;
        }
        
        .timeline ul li:nth-child(even):after {
          bottom: auto;
          top: 0;
        }
        
        .timeline ul li:nth-child(even) {
          grid-row: 2;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding-top: 40px;
          margin-top: calc(var(--circle-size) * -0.45);
        }
        
        .timeline ul li:nth-child(odd) p:after,
        .timeline ul li:nth-child(even) h3:before {
          content: "";
          display: block;
          border-left: 2px dashed var(--text);
          height: 100vh;
          margin-top: 10px;
          position: absolute;
          left: calc(var(--circle-size) - 1px);
        }
        
        .timeline ul li:nth-child(even) h3:before {
          bottom: 100%;
          margin-bottom: 5px;
        }
        
        .timeline ul li>* {
          padding-left: calc(var(--circle-size) * 0.4);
        }
        
        .timeline ul li h3 {
          color: var(--accent);
          margin: 0;
          margin-bottom: 5px;
          font-size: 1.6em;
          position: relative;
        }
        
        .timeline ul li p {
          margin: 0;
          position: relative;
          text-wrap: pretty;
        }
        
        @media (max-width: 568px) {
          .timeline ul {
            display: flex;
            flex-direction: column;
          }
          .timeline ul li {
            grid-column: 1 !important;
            grid-row: var(--index) !important;
            height: 100%;
            padding-bottom: 30px;
            padding-top: 10px;
          }
          .timeline ul:before,
          .timeline ul:after,
          .timeline ul li:after,
          .timeline ul li:nth-child(even) h3:before,
          .timeline ul li:last-child p:after {
            display: none;
          }
          .timeline ul li:first-child {
            padding-top: 0;
          }
          .timeline ul li:nth-child(even) {
            margin-top: 0;
            padding-top: 10px;
          }
          .timeline ul li p:after {
            content: "";
            display: block;
            border-left: 2px dashed var(--text);
            height: 100vh;
            margin-top: 10px;
            position: absolute;
            left: calc(var(--circle-size) - 1px);
          }
        }