body {

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

      background-color: #f8f9fa;

    }

    .hero {

      background: linear-gradient(to right, #0d6efd, #01bf27);

      color: white;

      padding: 100px 20px;

      text-align: center;

      position: relative;

      overflow: hidden;

    }

    .hero-icon {

      position: absolute;

      opacity: 0.13;

      font-size: 7rem;

      pointer-events: none;

      animation: heroFloat 8s ease-in-out infinite alternate;

    }

    .hero-icon.icon1 {

      top: 30px;

      left: 10%;

      color: #fff;

      animation-delay: 0s;

    }

    .hero-icon.icon2 {

      top: 120px;

      right: 12%;

      color: #fff;

      animation-delay: 2s;

    }

    .hero-icon.icon3 {

      bottom: 40px;

      left: 18%;

      color: #fff;

      animation-delay: 1s;

    }

    .hero-icon.icon4 {

      bottom: 60px;

      right: 15%;

      color: #fff;

      animation-delay: 3s;

    }

    @keyframes heroFloat {

      0% { transform: translateY(0) scale(1); }

      100% { transform: translateY(30px) scale(1.08); }

    }

    .fade-in {

      opacity: 0;

      transform: translateY(30px);

      transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    }

    .fade-in.show {

      opacity: 1;

      transform: translateY(0);

    }

    footer {

      background: #212529;

      color: white;

      padding: 20px 0;

    }

    .typing {

      border-right: 3px solid white;

      display: inline;

      white-space: nowrap;

      overflow: hidden;

    }

    .linkedin-section {

      background: #f1f1f1;

      padding: 50px 20px;

      text-align: center;

    }

    .linkedin-link {

      font-size: 2.5rem;

      color: #0a66c2;

      text-decoration: none;

      transition: transform 0.3s ease, color 0.3s ease;

    }

    .linkedin-link:hover {

      color: #084482;

      transform: scale(1.1);

    }



    .fade-in {

    opacity: 0;

    transform: translateY(50px);

    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    }



    .fade-in.show {

    opacity: 1;

    transform: translateY(0);

    }



    /* Sezione Tecnologie con sfondo dinamico */

    #tecnologie {

      background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);

      position: relative;

      overflow: hidden;

    }

    #tecnologie::before {

      content: '';

      position: absolute;

      top: -80px;

      left: -80px;

      width: 300px;

      height: 300px;

      background: radial-gradient(circle, #0d6efd55 60%, transparent 100%);

      z-index: 0;

      animation: float1 8s ease-in-out infinite alternate;

    }

    #tecnologie::after {

      content: '';

      position: absolute;

      bottom: -80px;

      right: -80px;

      width: 250px;

      height: 250px;

      background: radial-gradient(circle, #01bf2755 60%, transparent 100%);

      z-index: 0;

      animation: float2 10s ease-in-out infinite alternate;

    }

    @keyframes float1 {

      0% { transform: translateY(0) scale(1); }

      100% { transform: translateY(30px) scale(1.1); }

    }

    @keyframes float2 {

      0% { transform: translateY(0) scale(1); }

      100% { transform: translateY(-30px) scale(1.08); }

    }

    #tecnologie .row, #tecnologie .text-center {

      position: relative;

      z-index: 1;

    }



    /* Testo giustificato per la sezione Tecnologie */

    #tecnologie .fs-5 {

      text-align: justify;

    }



    /* Responsive per la scritta typing nella hero */

    @media (max-width: 575.98px) {

      .hero .typing {

        font-size: 2rem !important;

        word-break: break-word;

        white-space: normal;

        display: block;

      }

    }

    @media (max-width: 350px) {

      .hero .typing {

        font-size: 1.3rem !important;

      }

    }