/* =============================================
       VARIABILI COLORE
    ============================================= */
    :root {
      /* Base */
      --color-white: #FFFFFF;
      --color-black: #000000;
      --color-tiber: #0b3c44;
      --color-desert-sand: #eecbb7;
      --color-blue-bell: #8e94c3;
      --color-sundance: #cfaa5d;

      /* Dal file Energy2Act */
      --color-primary:    #E8FF00;   /* giallo fluo / energia */
      --color-dark-bg:    #0D0D0D;   /* nero profondo (sfondo hero / footer) */
      --color-mid-bg:     #1A1A1A;   /* grigio scurissimo (sezioni alternate) */
      --color-surface:    #F5F5F0;   /* off-white caldo (sezioni chiare) */
      --color-accent:     #FF3300;   /* rosso acceso (accento azione) */
      --color-muted:      #6B6B6B;   /* grigio testo secondario */
      --color-border:     #2E2E2E;   /* bordi su sfondi scuri */

      /* Tipografia */
      --font-body: 'Space Grotesk', sans-serif;
    }

    /* =============================================
       RESET & BASE
    ============================================= */
    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background-color: var(--color-dark-bg);
      color: var(--color-white);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-body);
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    a { color: inherit; text-decoration: none; }

    form {

      label, input, textarea{
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border: 0;
      }

      input{
        height: 40px;
      }
      input[type="checkbox"],      input[type="checkbox"]{
        height: 20px;
        width: 20px;
      }

      input[type="submit"]{
        width: fit-content;
        padding: 5px 20px;
        text-transform: uppercase;
        background-color: var(--color-tiber);
        color: var(--color-sundance);
      }
      .wpcf7-list-item{
        margin: 0;
      }
      label:has(input[type="checkbox"]){
        display: flex;
        gap: 10px;
        justify-content: left;
      }

    }

    section{
      padding: 100px 0;
      background-size: 600px;
      background-repeat: no-repeat;

    }

    section#manifesto{
        background-image: url(../images/e2a_bg_section_op.png), url(../images/e2a_bg_section_op.png), url('../images/quadrati-left.png'), url('../images/quadrati-right.png');
        background-image: url(../images/svg-lettering/M.svg);
        background-size: 500px;
        background-position: right 100px top 200px;
        background-repeat:no-repeat;
        position: relative;

        &:before{
          content: '';
          position:absolute;
          right: 0;
          bottom: 0;
          width: 250px;
          height: 250px;
          background-image: url(../images/svg-lettering/text-black.png);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          display: none;
        }
    }

    section#timeline{
        background-image: url(../images/e2a_bg_section_op_white.png), url(../images/e2a_bg_section_op_white.png), url(../images/linee-sovr.png);
        background-image: url(../images/svg-lettering/T.svg);
        background-size: 430px;
        background-position: left 100px bottom 50px;
        background-repeat:no-repeat;
        position: relative;

        &:before{
          content: '';
          position:absolute;
          left: 20px;
          top: 20px;
          width: 250px;
          height: 250px;
          background-image: url(../images/svg-lettering/text-white.png);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          display: none;
        }


    }
    section#partner-list{
        background-image: url(../images/svg-lettering/P.svg);
        background-size: 460px;
        background-position: right 50px top 80px;
        background-repeat:no-repeat;
        position: relative;

        &:before{
          content: '';
          position:absolute;
          right: 20px;
          bottom: 60px;
          width: 250px;
          height: 250px;
          background-image: url(../images/svg-lettering/text-black.png);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          display: none;
        }
    }
    section#form{
        background-image: url(../images/form.svg), url(../images/e2a_bg_section_op.png);
        background-size: cover, 500px;
        background-position: right 100px center, left 100px bottom 100px;
        background-repeat:no-repeat;
    }
    section#partners{
        background-image: url(../images/svg-lettering/F.svg);
        background-size: 300px;
        background-position: left 50px top 50px;
        background-repeat:no-repeat;

        position: relative;

        &:before{
          content: '';
          position:absolute;
          left: 20px;
          bottom: 20px;
          width: 200px;
          height: 200px;
          background-image: url(../images/svg-lettering/text-black.png);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          display: none;
        }
    }
    .section-title{
      padding-bottom: 10px;
      border-bottom: 3px solid;
      width: fit-content;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 34px;

    }
    
    #hero {
      min-height: 100vh;
      background-color: var(--color-tiber);
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      img{
        width: 100%;
        max-width: 100%;
      }
    }

    #manifesto{
      background-color: var(--color-sundance);
      background-color: #718ec8;
      color: var(--color-black);
      color: white;

      .section-title{
        border-color: var(--color-sundance)
      }

      h2{
        text-transform: uppercase;
        font-weight: 700;
        font-size: 34px;
      }

      .manifesto--payoff{
        font-size: 20px;
        margin-bottom: 50px;
      }

      .manifesto--content{
        font-size: 24px;
        text-transform: uppercase;

        .manifesto-high{
          /* color: var(--color-tiber);
          font-weight: 500; */
        }

        .manifesto--content__parag + .manifesto--content__parag{
          margin-top: 75px;
        }

      }
    }
  
  #timeline{
    overflow: hidden;
    color: var(--color-sundance);
    background-color: var(--color-tiber);

    .section-title{
      border-color: var(--color-blue-bell)
    }



    .timeline-swiper{
      overflow: visible;
      padding-bottom: 70px;
      z-index: 99;

      .swiper-pagination{
        top: unset;
        bottom: 0px;
        .swiper-pagination-bullet{
          width: 16px;
          height: 16px;
          background-color: var(--color-blue-bell);
          opacity: 1;
          border: 1px solid var(--color-sundance);
          transition: all .2s ease;

        }
        .swiper-pagination-bullet-active{
          background-color: var(--color-tiber);
          border-color: var(--color-sundance);
          width: 48px;
          border-radius: 10px;
        }
      }

      .swiper-slide{
        position: relative;
        cursor: grab;

        &:last-of-type{
            &::after{
                display: none;
            }
        }

        height: auto;
        .timeline-card{
          color: var(--color-tiber);
          padding: 16px 16px 50px 16px;
          border-radius: 20px;
          border: 2px solid var(--color-tiber);
          height: 100%;
                      background-color: var(--color-sundance);


          &.anno_2026{
            background-color: var(--color-sundance);
          }

          &.anno_2027{
            background-color: var(--color-blue-bell);
            color: var(--color-white);
          }

          &.anno_2028{
            background-color: var(--color-desert-sand);
          }


          &.highlighted{
            transform: scale(1.05);
            position: relative;
            margin: 0 5px;

              background-color: var(--color-white) !important;
              box-shadow: 0 0 0 4px var(--color-white) !important;
              color: var(--color-tiber) !important;

            &:before{
              width: 60px;
              height: 60px;
              position: absolute;
              top: 0;
              right: 0;
              transform: translate(15px,-15px);
              background-image: url(../images/badge-e.png);
              /* background-image: url(../images/badge-e-circle.png); */
              background-size: contain;
              background-position: center;
              background-repeat: no-repeat;
            }
            
            &.anno_2026{
              background-color: var(--color-sundance);
              border: 3px solid var(--color-blue-bell);
              box-shadow: 0 0 0 4px var(--color-sundance);
            }

            &.anno_2027{
              background-color: var(--color-blue-bell);
              border: 3px solid var(--color-sundance);
              box-shadow: 0 0 0 4px var(--color-blue-bell);
              color: var(--color-white);
            }

            &.anno_2028{
              background-color: var(--color-desert-sand);
              border: 3px solid var(--color-sundance);
              box-shadow: 0 0 0 4px var(--color-desert-sand);
            }

          }

          .timeline-card--date{
            font-size: 16px;
              font-weight: 500;
              text-transform: uppercase;
            .timeline-card--date__year{
              font-size: 18px;
              display: block; 
              font-weight: 400;

            }

          }
          .timeline-card--title{
            font-size: 22px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 3px solid var(--color-tiber);
            font-weight: 700;
          }
            .timeline-card--more{
              position: absolute;
              bottom: 10px;
              right: 20px;
              cursor: pointer;
              display: block;
              padding-top: 10px;
              border-top: 2px solid var(--color-tiber);
              width: calc(100% - 40px);
              text-align: right;
            }

          
        }

        &::after{
          content: '';
          width: 50px;
          height: 50px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -55px;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='%23cfaa5d' data-name='Layer 1' viewBox='0 0 512 512'%3E%3Cpath d='m214.78 478-20.67-21.57L403.27 256 194.11 55.57 214.78 34l231.68 222Zm103.11-222L86.22 34 65.54 55.57 274.7 256 65.54 456.43 86.22 478Z'/%3E%3C/svg%3E");        }
      }
    }
  }

    #partner-list{
      background-color: var(--color-desert-sand);
      color: var(--color-tiber);
      font-size: 24px;
      text-transform: uppercase;

      .row{
        a{
          margin-bottom: 20px;
          display: block;

          transition: all .2s ease;

          &:hover{
            color: #747dc8;
            transform: scale(1.05);
          }
        }
      }
    }

    #form{
      background-color: var(--color-blue-bell);
      color: var(--color-black);
    }

  #partners{
    background-color: var(--color-white);
    color: var(--color-tiber);

    .row--main-partners{
        margin-bottom: 35px;
    }

    .partner--card{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        align-items: center;
        img{
            width: 100%;
            max-width: 100%;
            margin-bottom: 25px;
            max-width: 300px;
        }
    }
  }

  footer{
    padding-top: 50px;
    background-color: var(--color-tiber);
    color: var(--color-sundance);
    font-size: 20px;

    .footer-form-section{

      div#form{
        background-color: none;
        background-color: transparent;
        background-image: none;
        color: var(--color-white) !important;

        form {
            input[type="submit"] {
                width: fit-content;
                padding: 5px 20px;
                text-transform: uppercase;
                background-color: var(--color-sundance);
                color: var(--color-tiber);
                border: 2px solid var(--color-sundance);

                &:hover{
                  background-color: var(--color-tiber);
                  color: var(--color-sundance);

                }
            }
        }


      }

    }

    .logo--footer{
        width: 100%;
        max-width: 300px;
        margin-bottom: 35px;
    }
    .footer--title{
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 24px;
    }
    .footer--contatti{
        margin-top: 35px;
    }
    .footer--social{
        margin-top: 35px;
        background-color: var(--color-sundance);
        color: #0c3c44;
        border-radius: 10px;
        padding: 20px;
        img{
            height: 80px;
            background-color: var(--color-tiber);
            padding: 5px;
            border-radius: 50%;
        }
        a+a{
            padding-left: 10px;
        }

        &--title{
          font-size: 18px;
        }
    }
    .footer--link{
        ul{
            list-style-type: none;
            padding-left: 0;

            li+li{
                margin-top: 10px;
                
            }
        }
    }
    .footer--sub{
        margin-top: 50px;
        padding-top: 25px;
        padding-bottom: 25px;
        border-top: 2px solid var(--color-white);
        text-align: center;

        a{
          &:hover{
            color: var(--color-white);
          }
        }
    }

  }


  .truncate-6, .timeline-card--title {
    display: -webkit-box;
    -webkit-line-clamp: 6;       /* numero di linee */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .modal{
    color: #0b3c44;
    
    .modal-content{
      background-color: var(--color-white);
      border: 2px solid var(--color-tiber);
      border-radius: 20px;

      .modal-time{
        padding-bottom: 10px;
        text-transform: uppercase;
        font-size: 22px;
        border-bottom: 2px solid var(--color-tiber);
        font-weight: 700;
        .timeline-card--date__year{
            display: block;
        }
      }
      .modal-title{
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
      }
      .modal-header{
        padding: 12px 12px 0 0;
      }
      .modal-header, .modal-footer{
        border: none;
      }
    }
  }

  @media(max-width: 1024px){
    #timeline{
      .timeline-swiper{
        overflow: visible;

        .swiper-slide{
          height: auto;
          .timeline-card{
            background-color: var(--color-sundance);
            color: var(--color-tiber);
            padding: 20px 20px 50px 20px;
            border-radius: 20px;
            border: 2px solid var(--color-tiber);
            height: 100%;

            &.highlighted{
              background-color: var(--color-white);
              color: var(--color-tiber);
            }

            .timeline-card--date{
              font-size: 20px;
                font-weight: 700;
                text-transform: uppercase;
              .timeline-card--date__year{
                font-size: 22px;
                display: block; 
                font-weight: 500;

              }

            }
            .timeline-card--title{
              font-size: 24px;
              margin-top: 10px;
            }

            
          }

          &::after{
            /* content: ''; */
            width: 35px;
            height: 35px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -38px;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='%23cfaa5d' data-name='Layer 1' viewBox='0 0 512 512'%3E%3Cpath d='m214.78 478-20.67-21.57L403.27 256 194.11 55.57 214.78 34l231.68 222Zm103.11-222L86.22 34 65.54 55.57 274.7 256 65.54 456.43 86.22 478Z'/%3E%3C/svg%3E");        }
        }
      }
    }
  }

  @media(max-width: 767px){


    section#manifesto{
        padding-top: 100px;
        background-size: 190px;
        background-position: right 10px top 10px;
        background-repeat:no-repeat;
        position: relative;
        overflow: hidden;

        .manifesto--content *{
          z-index: 1;
          position: relative;
        }

        &:before{
          right: -375px;
          bottom: 375px;
          width: 750px;
          height: 750px;
          background-image: url(../images/svg-lettering/text-white.png);
          opacity: .1;
          z-index: 0;
          display: none;
        }
    }

    section#timeline{
      padding-top: 150px;
      background-size: 280px;
      background-position: right -100px top 30px;

      &::before{
        right: 0;
        bottom: -60%;
        opacity: .3;
        width: 100%;
        height: 100%;
        left: unset;
        top: unset;
      }
    }

    section#partner-list{
      padding-top: 100px;
        background-size: 200px;
        background-position: right 10px top 10px;
        background-repeat:no-repeat;
        position: relative;
        overflow: hidden;

      &::before{
        left: -70%;
        bottom: 80px;
        opacity: .3;
        width: 750px;
        height: 750px;
        right: unset;
        top: unset;
        background-image: url(../images/svg-lettering/text-white.png);
        z-index: 0;
        display: none;
      }

      a{
        position: relative;
        z-index: 1;
      }
    }
    section#partners{
      /* padding-top: 200px; */
        background-size: 0px;
        background-position: left -70px top 10px;
        background-repeat:no-repeat;
        position: relative;
        overflow: hidden;

      &::before{
        left: 40%;
        bottom: 50%;
        opacity: .1;
        width: 750px;
        height: 750px;
        right: unset;
        top: unset;
        background-image: url(../images/svg-lettering/text-black.png);
        display: none;
      }
    }
    
  
      #footer{
          /* text-align: center; */
          .footer--title{
              margin-top: 50px;
          }
      }



  }

  @media(max-width: 575px){
  
      #partners{
          .partner--card{
              text-align: center;
              img{
                  max-width: 250px;
                  margin-bottom: 50px;
              }
          }
      }

  }


.col-5ths {
  flex: 0 0 auto;
  width: 20%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}



/* Mobile: 100% sotto i 767px */
@media (max-width: 767px) {
  .col-5ths {
    width: 100%;
  }
}

/* Tablet: 2 colonne tra 768px e 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .col-5ths {
    width: 33%;
  }
}

@media (min-width: 767px) and (max-width: 991px){
  section#manifesto{
    background-size: 300px;
    background-position: right 10px top 150px;
  }
    section#timeline{
    
    &::before{
      left: unset;
      right: 20px;
    }
  }

  section#partner-list{
    background-size: 250px;
    background-position: right 10px top 150px;

    &::before{
        left: -50%;
        bottom: 80px;
        opacity: .3;
        width: 750px;
        height: 750px;
        right: unset;
        top: unset;
        background-image: url(../images/svg-lettering/text-white.png);
        z-index: 0;
        display: none;
      }
  }

}


@media (min-width: 992px) and (max-width: 1200px){

  section#manifesto{
    background-size: 400px;
    background-position: right 50px top 150px;
  }
  section#timeline{
    
    &::before{
      left: unset;
      right: 20px;
    }
  }

  section#partner-list{
    background-size: 350px;
    background-position: right 10px top 150px;
  }
}