:root {
--primary: #152D47;
--blue-accent: #036A90;
--blue-light: #2962a8;
--light-bg: #F3F3F2;
--neutral: #ffffff;
--text: #333;
--orange-accent: #F08119;
--blue: #036A90;
}

body {
margin: 0;
font-family: 'Inter', Arial, sans-serif;
line-height: 1.6;
color: var(--text);
background: var(--light-bg);
}

header {
background: var(--primary);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
flex-wrap: wrap;
position: relative;
}

header .logo img {
width: 150px;
height: auto;
}

.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}

.menu-toggle span {
background: white;
height: 3px;
margin: 4px 0;
width: 25px;
display: block;
}


nav {
/*display: flex;
gap: 1rem;*/
}

nav a {
color: white;
text-decoration: none;
font-weight: bold;
}

.button {
color: white;
padding: 0.75rem 1.25rem;
border: none;
border-radius: 5px;
text-decoration: none;
display: inline-block;
margin: 1rem 0;
}


#main-nav {
  a {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    padding: 10px 20px;
  }
}

.button-white {
background: var(--neutral);
color: var(--blue-accent);
border-radius: 30px;
border: none;
text-decoration: none;
min-width: 220px;
text-align: center;
outline: 0;
display: inline-block;
text-align: center;
cursor: pointer;
font-weight: 600;
font-size: 20px;
padding: 13px 35px;
margin: 30px 10px;
white-space: nowrap;
text-transform: uppercase;
font-weight: 600 !important;
}

.button-white:hover {
  box-shadow: 0 0 10px 5px rgb(256 256 256 / 50%);
  transition: box-shadow 0.3s ease;

}

.button-blue {
background: var(--blue-accent);
color: var(--neutral);
border-radius: 30px;
border: none;
text-decoration: none;
min-width: 150px;
width: 250px;
text-align: center;
outline: 0;
display: inline-block;
text-align: center;
cursor: pointer;
font-weight: 600;
font-size: 20px;
padding: 13px 30px;
margin: 30px 10px;
white-space: nowrap;
text-transform: uppercase;
font-weight: 600 !important;
}

.section {
padding: 3rem 1rem;
background: var(--neutral);
}

.section.descr {background: var(--light-bg);margin: 1rem auto; max-width: 1100px;}

.section:nth-child(even) {
background: var(--light-bg);
}

.brochure {text-align: left;width: 100%; margin: 20px 0;}
.testo-sotto { text-align: center; font-size:20px; margin: 0px 10px 50px 10px; color:var(--primary) }

#facts {
background-color: var(--blue);
h2 {color: var(--neutral);}
padding: 2rem 4rem 4rem 4rem;
}

#apply {
background-color: var(--blue-accent);
h2 {color: var(--neutral); padding: 0; margin: 0}
padding: 4rem;
text-align: center;
margin: 0;
}

li {margin: 6px 0;}
#explore {background-color: var(--neutral)}

.key-facts {
  max-width: 1400px;
  padding-bottom: 3rem;
  --swiper-pagination-bullet-size:10px;
  --swiper-theme-color:#F08119;
  --swiper-pagination-bullet-inactive-color:#fff;
  --swiper-pagination-bullet-inactive-opacity:1;
  --swiper-pagination-bullet-horizontal-gap:6px;

  .swiper-slide{
    height: auto;
    padding: 12px;
  }






/*#key-facts-dots .carousel-dots {
display: none; !* Hidden on desktop *!
text-align: center;
margin-top: 15px;
}*/

.carousel-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.carousel-dot .active { background-color: #333; }
}

.fact-box, .apply-step {
background: white;
border-radius: 20px;
padding: 1rem;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#how-to-apply img {margin-bottom: 20px;}
#how-to-apply h6 {color: var(--primary); line-height: 1.2em; font-size: 24px;font-weight: 700; margin-bottom: 20px}

.fact-box {
background: white;
border-radius: 20px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
color: var(--primary);
font-size: 16px;
line-height: 1.3em;
font-weight:300;
height: 100%;
  padding:8% 10% 10%;


img, h6 {margin-bottom: 20px;}
h6 {
  color: var(--primary);
  line-height: 1.2em;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .5px;}
}

.swiper-apply{
  max-width: 1400px;
  padding-bottom:3rem;
  --swiper-pagination-bullet-size:10px;
  --swiper-theme-color:#F08119;
  --swiper-pagination-bullet-inactive-color:#152D47;
  --swiper-pagination-bullet-inactive-opacity:1;
  --swiper-pagination-bullet-horizontal-gap:6px;
  .swiper-slide{
    padding:16px;
    height: auto;
    .card{
      width: 100%;
      max-width: unset;
    }
  }
}
.swiper-testimonial{
  max-width: 1600px;
  padding-bottom:3rem;
  --swiper-navigation-size:30px;
  --swiper-pagination-bullet-size:10px;
  --swiper-theme-color:#F08119;
  --swiper-pagination-bullet-inactive-color:#152D47;
  --swiper-pagination-bullet-inactive-opacity:1;
  --swiper-pagination-bullet-horizontal-gap:6px;
  .swiper-slide{
    padding:16px;
    height: auto;
    .card{
      width: 100%;
      max-width: unset;
      height: 100%;
    }
  }
  .swiper-button-next, .swiper-button-prev{
    top:auto;
    bottom:6px;
  }
  .swiper-button-next{
    right:calc(50% - 90px);
  }
  .swiper-button-prev{
    left:calc(50% - 90px);
  }

}


.video-group{

}
.video-group-intro{
  width: 90%;
  margin:0 auto;
  max-width: 670px;
  color:var(--neutral);
  h2{
    color:var(--neutral);
    font-size: 40px;
  }
  p{
    font-size: 24px;
    line-height: 1.5em;
    font-weight: 200;
  }
}
#videoLanding{
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16/9;
  margin:60px auto;
  position: relative;
}

.testimonials {
padding: 50px 0;
text-align: center;
/*max-width: 600px;*/
margin: 0 auto;
background: var(--primary) !important;
background: linear-gradient(180deg,rgba(21, 45, 71, 1) 81%, rgba(243, 243, 242, 1) 80%) !important;
}

.testimonials h2 span {

}

.testimonial {
display: none;
}

.testimonial.active {
display: block;
background: white;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.faq-item {
background: white;
border-radius: 10px;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.faq-question {
padding: 20px 30px;
background: var(--neutral);
color: var(--primary);
cursor: pointer;
font-weight: 500;
font-size: 20px;
align-items: center;
display: flex;
justify-content: space-between;
}

.faq-answer {
display: none;
padding: 15px 30px 30px 30px;
color: var(--primary);
}

.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("images/AW-web.png");
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
width: 65%;
}

.hero-text button {
border: none;
outline: 0;
display: inline-block;
color: var(--blue-accent);
background-color: var(--neutral);
text-transform: uppercase;
text-align: center;
cursor: pointer;
font-weight: 400;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
padding: 13px 30px;
margin: 30px 10px;
width: 200px;
}

/*.hero-text button:hover {
background-color: #555;
color: white;
}*/
h1 {
font-size: 60px;
line-height: 70px;
font-weight: 700;
margin-bottom:25px;
padding:0;
span {background: var(--blue);padding: 3px 5px;}
}
h2 {
text-align:center;
font-weight: 600;
font-size: 48px;
line-height: 54px;
margin: 0 0 20px 0;
color: var(--primary);
font-weight: 700;

.blu{ background: var(--blue) !important }
span {background: var(--orange-accent);padding: 3px 20px;color:var(--neutral);
}

}
h3 {
text-align: center;
font-weight: 700;
font-size: 40px;
color: var(--primary);
letter-spacing: .5px;
}
h4 {
color: var(--neutral);
text-align: left;
font-size: 24px;
span {background: var(--blue);padding: 3px 5px; }
}
h5 {text-align: center;font-weight: 300;font-size: 20px;color:var(--neutral)}

.two-column-section, .two-columns-section  {
display: flex;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
}

.two-column-text, .two-column-image {
flex: 1 1 300px;
width: 100%;
}
.two-column-image {
text-align: center;
}
#how-to-apply {background-color: var(--light-bg); justify-content: center; padding: 3rem 0;}
.how-to-apply { display: flex; gap: 1rem; font-size: 18px; width: 100%; justify-content: center}

.two-column-image img {
max-width: 100%;
height: auto;
border-radius: 10px;
}

.loghi {
background-color: var(--blue-light);
border-radius: 0 0 30px 30px;
text-align: center;
padding: 25px 10px;
}
.points {
background: var(--neutral);
padding: 20px;
border-radius: 15px;
/*font-size: 18px;
line-height: 25px;*/
color: var(--primary);
ul { list-style-image: url('images/check-mark.png') }
}

.apply-step {
img { margin: 10px auto 15px; display: block}
}

footer {
background: var(--primary);
color: white;
text-align: center;
padding: 8rem 1rem 4rem;
}
footer img{
  background: var(--blue-light);
  padding:10px 30px;
}

.carousel-wrapper {
position: relative;
max-width: 100%;
}

.scroll-container {
display: flex;
gap: 0;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
}

.card {
flex: 0 0 auto;
height: 410px;
padding: 16px;
scroll-snap-align: start;
text-align: left;
background-color: white;
border-radius: 15px;
padding: 25px;
max-width: 440px;
margin: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

div.icona {text-align: center}
}

.plus {font-weight: bold;font-size: 2rem;margin-left: 1rem;color:var(--orange-accent);transition: transform 0.3s ease; }

.stars {
color: #F97316; /* arancione */
font-size: 18px;
margin-bottom: 8px;
}

.name {
font-weight: 700;
font-size: 20px;
color: #1E293B; /* testo scuro */
margin: 0;
text-align: left;
}

.subtitle {
color: #64748B;
margin: 4px 0 16px 0;
}

.divider {
border: none;
border-top: 2px solid #F97316;

margin-bottom: 16px;
}

.quote {
color: #001A33;
line-height: 19px;
font-size: 14px;
}

.scroll-container::-webkit-scrollbar {
display: none;
}

.scroll-container {
-ms-overflow-style: none;
scrollbar-width: none;
}

.arrow {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 10;
}

.arrow.left, .arrow.right {
display: none;
right: -16px;
}

.dots {
display: none;
text-align: center;
margin-top: 10px;
}

.dot {height: 10px; width: 10px; margin: 0 5px;background-color: #ccc; border-radius: 50%; display: inline-block;cursor: pointer;}

.dot.active {background-color: #333;}

.sticky-top {
position: sticky;
top: 0;
background-color: var(--primary);
color: white;
padding: 15px 50px;
text-align: center;
z-index: 100;
}

.sticky-bottom { display: none }
.apply-step { width:400px }

.carousel-indicators [data-bs-target] {
border-radius: 50%;
width: 19px;
height: auto;
background: #152D47;
margin-right: 10px;
margin-left: 10px;
}


/* Colore frecce carousel Bootstrap */
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-image: none;
width: 2rem;
height: 2rem;
background-color: transparent;
position: relative;
}

.carousel-control-prev::after,
.carousel-control-next::after {
content: '';
display: inline-block;
width: 0.8rem;
height: 0.8rem;
border-top: 3px solid #F08119;
border-right: 3px solid #F08119;
transform: rotate(-135deg);
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}

/* Ruota la freccia per "next" */
.carousel-control-next::after {
transform: rotate(45deg);
}

#carousel2 .carousel-indicators-custom {
position: static; /* toglie il posizionamento assoluto */
margin-top: 1rem;
text-align: center;
}

#carousel2 .carousel-indicators-custom button {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #888;
border: none;
margin: 0 5px;
opacity: 0.5;
}

#carousel2 .carousel-indicators-custom button.active {
background-color: #F08119;
opacity: 1;
}

/*
@media (min-width: 768px) {
  #carousel1-container {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    overflow: visible;
  }


  #carousel1 .carousel-control-prev {
    left: -60px;
    width: 40px;
    opacity: 1;
  }

  #carousel1 .carousel-control-next {
    right: -60px;
    width: 40px;
    opacity: 1;
  }

  #carousel1 .carousel-inner {
    display: flex;
    overflow: hidden;
  }

  #carousel1 .carousel-item {
    margin-right: 0;
    flex: 0 0 50%;
    display: block;
    transition: transform .6s ease-in-out;
  }

#carousel1 .carousel-indicators { top: -40px; bottom: auto; }
} */

/* Nascondi mobile/desktop dove necessario */
.carousel-mobile {
display: none;
}

.carousel-dots-container {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 30px;
}

.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #888;
border: none;
margin: 0 5px;
padding: 0;
cursor: pointer;
opacity: 0.5;
}

.carousel-dot.active {
background-color: #333;
opacity: 1;
}

/*#key-facts-dots .carousel-dot.active { background-color: #FFF; opacity: 1; }*/

.card-carousel .card { min-width: 300px;margin: 0 auto; }

#carouselPhd{
  --swiper-navigation-size:22px;
  --swiper-pagination-bullet-size:12px;
  --swiper-theme-color:#F08119;
  max-width: 1400px;
  padding: 4rem 1rem;
  .swiper-slide {
    padding:0 20px;
    img{
      width: 100%;
    }
  }
  .swiper-pagination{
    top:0;
    bottom:auto;
  }
}

/* Per la versione desktop nascondiamo completamente i dots */
@media (min-width: 769px) {
  .carousel-dots-container { display: none; }
}

/* Per la versione mobile mostriamo i dots */
@media (max-width: 768px) {
 /*     .carousel-mobile .carousel-dots-container { display: flex; margin-top: 15px; }
      .carousel-desktop { display: none; }*/
      .key-facts {
     /* display: block;
      position: relative;
      background-color: var(--neutral);
      border-radius: 15px;
      padding: 15px;
      height: 400px;*/

      /*.carousel-container {
      overflow: hidden;
      }

      .carousel-slides {
      display: flex;
      overflow-x: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      }*/
    }

    #facts {padding: 2rem 0 4rem 0}
    .fact-box {
      /*flex: 0 0 100%;
      scroll-snap-align: start;
      transition: transform 0.3s ease;
      align-items: center;
      box-shadow: none;
      border-radius: 0;
      background: none;
      padding: 7%;*/

      img { width: 55px; padding: 0 15px 0 0 }
    }

    .fact-box:last-child {
      border-bottom: none;
    }

    #carouselFacts .carousel-dots {display: flex;justify-content: center;margin-top: 15px;text-align: center;}

    .how-to-apply {display: flex;
    padding: 25px 0;
    list-style: none;
    overflow-x: scroll;
      justify-content: flex-start;}

    .apply-step {
    display: flex;
    flex-direction: column;
    flex: 0 0 80%;
    padding: 20px;
    background: var(--neutral);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 15%);
    scroll-snap-align: start;
    transition: all 0.2s;
    }

    .sticky-bottom {
      display: block;
      position: sticky;
      bottom: 0;
      background-color: var(--primary);
      color: white;
      text-align: center;
      z-index: 100;
    }

      .button-white.menu {display: none}

      header{ padding: 1.5rem }
      header .logo img { width: 80px }
        .menu-toggle {
        display: flex;
      }



      nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--primary);
        position: absolute;
        top: 100%;
        left: 0;
        text-align: center;
      }

      nav.show {
        display: flex;
        z-index: 1;
      }
      #main-nav{
        padding: 3rem 25%;
        border-radius:0 0 60px 60px;

           a {
            padding: 1rem 1rem;
            border-top: 1px solid var(--orange-accent);
            &:first-child{
              border-top:0;
            }
          }
      }
      .hero-image {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/AW-mobile.png");
      }

      h1 {
      font-size: 40px;
      line-height: 50px;
      margin:0 10px;
      padding:0;
      }
      h2 { font-size: 30px; line-height:35px; }
      h2.sfondo-blu-m { background: var(--blue) !important; padding: 2%; width: 90%; margin: auto;}
      h3 { font-size: 32px; line-height: 35px; margin:20px 10px; }
      h4 {text-align: center;}
      .two-column-section {
        flex-direction: column-reverse;gap:0;
      }
      h5 {font-size: 18px;padding: 25px;}
      .section.descr {width: auto}
    /*  .key-facts {gap: 0rem; background-color:var(--neutral); border-radius: 15px}*/
      /*.fact-box {
        display:flex; border-radius: 0; background: none; box-shadow: 0 0 2px rgba(240, 129, 25, 1); align-items: center;
        img {width: 35px; padding: 0px 10px 0 0}
      }*/
      .testo, .testo-sotto {margin-top: 25px}
      .loghi img{width:96%;}
      footer img {width: 300px}
      #apply {padding: 5rem 0 3rem}
      .card {width: 300px; height: 520px}
      #carousel2 .card {height: 390px; margin-bottom: 10px }
      .name {font-size: 20px; padding: 7px 0;text-align: left;}
      .hero-text {width: 98%}
      .button-blue,.hero-text button {width:80%; padding: 0.75rem}
      .dots {display: initial}
      .arrow.right,.arrow.left {display: none}
      .brochure {text-align: center}
      .subtitle {margin: 2px 0}

      .carousel {
      scroll-snap-type: x mandatory;
      overflow-x: auto;
      scroll-behavior: smooth;
      display: flex;
      }

      .carousel-item {
        flex: 0 0 100%;
        scroll-snap-align: start;
      }
      /*.key-facts .carousel-item img {width: 300px}*/

    }

@media (max-width: 1024px) {
      .scroll-container { gap: 15px; margin: 0 2% }
    }

@media (min-width: 1441px) {
      .scroll-container {
        display: flex;
        gap: 5px;
        padding-bottom: 15px;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0 5%;
      }
}