@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

:root {
   --lp2025-blu: #1a324c;
   --lp2025-arancio: #f3903a;
   --maxwidth: 1080px;
}

.bg-arancio {
   background-color: var(--lp2025-arancio);
   color: #fff;
   width: fit-content;

   h1,
   h2,
   h3 {
      margin-bottom: 0;
      color: #fff;
      font-weight: unset;
      line-height: 1;
   }
}

.arancio {
   color: var(--lp2025-arancio) !important;
}

.bianco {
   color: #fff !important;
}

.blu {
   color: var(--lp2025-blu);
}

.lp_2025 {
   .z-3 {
      z-index: 3;
   }

   .z-2 {
      z-index: 2;
   }

   .z-1 {
      z-index: 1;
   }

   width: 100%;
   overflow-x: hidden;
   font-family: 'DM Sans',
   sans-serif;
   font-size: 1.4rem;
   color: var(--lp2025-blu);

   a {
      color: unset;
   }

   p {
      margin-bottom: 1.5rem;
   }

   section {
      position: relative;
   }

   img {
      max-width: 100%;
      height: auto;
      display: block;
   }

   ul {
      list-style: none;
      padding: 0;

      li {
         position: relative;
         display: block;
         padding-left: 3rem;
         margin-bottom: 1rem;

         &:before {
            position: absolute;
            top: 14px;
            left: 0;
            width: 2.3rem;
            height: 4px;
            background-color: var(--lp2025-arancio);
            content: "";
         }

         &:last-child {
            margin-bottom: 0;
         }
      }
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   .h1,
   .h2,
   .h3,
   .h4,
   .h5,
   .h6 {
      font-family: 'DM Sans', sans-serif;
      font-weight: unset;
   }

   .maxwidth {
      max-width: var(--maxwidth);
   }

   section {
      position: relative;
   }

   .section_1 {
      position: relative;
      background: linear-gradient(to bottom, rgba(26, 50, 76, 1) 0%, rgba(169, 93, 34, 1) 100%);
      color: #fff;
      height: 90vh;


      .container {

         .logo {
            display: block;
            width: 65%;
            max-width: 500px;
            height: auto;
         }
      }

      .img_banner,
      .sfo_banner {
         position: absolute;
         bottom: 0;
         right: 0;
         height: 90%;
         width: fit-content;

         img {
            height: 100%;
            width: auto;
            display: block;
         }
      }

      .sfo_banner {
         z-index: 0;
         height: 100%;
         overflow: hidden;

         img {
            height: 110%;
            opacity: 0.8;
            filter: blur(2px);
         }
      }

      .img_banner {
         z-index: 1;
         height: 98%;
         margin-bottom: -3rem;
      }
   }

   .squadra {
      position: absolute;
      top: 0;
      left: 0;
      width: fit-content;
      height: auto;
      max-width: 20vw;
      transform: translateY(-5rem);
   }

   .section_3 {
      padding-left: calc((100vw - var(--maxwidth)) / 2);

      .bg-arancio {
         position: relative;

         &:before {
            position: absolute;
            z-index: 0;
            top: 0;
            left: 100%;
            width: calc((100vw - var(--maxwidth)) / 2);
            height: 100%;
            background-color: var(--lp2025-arancio);
            content: "";
         }

      }

      .img_casco {
         position: absolute;
         bottom: -12vh;
         right: -7vw;
         height: inherit;
         width: 23vw;
         height: auto;
         transform: rotate(15deg);
         z-index: 3;
      }
   }

   .section_4 {
      background-color: #f5f5f5;

      .maxwidth {
         padding-left: 15vw;
      }

      .img_ragazza {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 28vw;
         max-width: 500px;

      }
   }

   .section_5 {
      background-color: var(--lp2025-blu);
      color: #fff;
   }

   .cta {
      background-color: var(--lp2025-arancio);
      color: #fff;
      font-size: 2.5rem;
      padding: 1rem 3rem;
      text-decoration: none;
      display: inline-flex;
      align-items: center;

      &:hover {
         padding-left: 3.5rem;
         padding-right: 3.5rem;
         -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
         -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
         box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
      }
   }

   .transition {
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
   }

   .smaller {
      font-size: 1.2rem;
   }

   .cartina {
      margin-top: -5rem;
   }

}



@media screen and (max-width: 1440px) {
   :root {
      --maxwidth: 900px;
   }

   .lp_2025 {
      font-size: 1.3rem;
   }

   .textshadow {
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
   }
}

@media screen and (max-width: 1360px) {
   :root {
      --maxwidth: 800px;
   }

}

@media screen and (max-width: 1200px) {
   .lp_2025 {
      .cta {
         font-size: 2rem;
      }
   }
}

@media screen and (orientation: portrait) {
   .lp_2025 {
      .section_1 {
         height: 60vh;
      }
   }
}

@media screen and (max-width: 800px) {
   .lp_2025 {
      section {
         padding-left: 2rem;
         padding-right: 2rem;
      }

      .section_3 {
         .bg-arancio {
            width: 100vw;
            padding-right: 15vw !important;
         }
      }

      .section_4 {
         padding-left: 18vw;

         .img_ragazza {
            width: 30vw;
         }
      }

      img.cartina {
         margin: 0 auto;
         max-width: 400px;
      }
   }
}

@media screen and (max-width: 600px) {

   body {
      overflow-x: hidden;
   }

   .container {
      padding-left: 25px;
      padding-right: 25px;
   }

   .lp_2025 {
      section {
         padding-left: 0;
         padding-right: 0;
         width: 100%;
      }

      .section_1 {
         height: 100vh;
         padding-bottom: 2rem;

         br {
            display: none;
         }

         .payoff {
            padding: 0.5rem;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 1.2rem !important;
         }

         .container {
            .logo {
               width: 90%;
            }

         }

         .img_banner {
            left: 50%;
            height: auto;
            width: 130%;
            transform: translate(-55%, 0);

         }

         .bg-arancio {

            position: relative;
            margin-bottom: -2rem;
            margin-left: -2rem;
            width: calc(100% + 4rem);
            text-align: center;

            h1 {
               font-size: 1.4rem;
               line-height: 1.2;
            }
         }
      }

      .section_3 {
         .img_casco {
            width: 35vw;
         }
      }

      .section_4 {
         padding-left: unset;

         .maxwidth {
            padding-left: 25px;
         }

         .img_ragazza {
            order: 2;
            position: relative;
            width: 75%;
            display: block;
            margin-bottom: -1.5rem;
            left: 50%;
            transform: translateX(-50%);
         }
      }

      .squadra {
         display: none;
      }

      .cta {
         font-size: 1.5rem;
         width: 100%;
         padding-left: 2rem;
         padding-right: 2rem;
         justify-content: center;
      }

      img.cartina {
         max-width: 100%;
      }
   }
}