@font-face {
  font-family: 'Silka';
  src: url('../fonts/Silka-SemiBold.woff2') format('woff2'),
      url('../fonts/Silka-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Silka';
  src: url('../fonts/Silka-Regular.woff2') format('woff2'),
      url('../fonts/Silka-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Silka';
  src: url('../fonts/Silka-Bold.woff2') format('woff2'),
      url('../fonts/Silka-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


/* Impostazioni generali */
body {
  margin: 0; padding: 0;
  font-family: 'Silka', sans-serif;
  background: #191528; color: #fff;
  font-size: 1rem;
  position: relative; height: 100%; width: 100%;
}

a {color: #fff; text-decoration: none;}

@media (orientation: landscape) {
    body {
      font-size: 2.5vw;
    }
}

@media (min-width: 768px) {
    body {
      font-size: 2.5vw;
    }
}

@media (min-width: 1440px) {
    body {
      font-size: 2.1rem;
    }
}

  
  .container {
    max-width: 1600px;
  }
  
  /* Navigazione */
  .fixed-header {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  background-color: #191528; /* Sfondo della navigazione */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  font-weight: 600;
  }
  
  .fixed-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; margin: 0 auto; padding: 0 10px;
  }
  
  .logo img {
  height: 70px; /* Dimensione del logo */
  display: block; margin: 0; padding: 10px;
  }
  
  .logo a {
  text-decoration: none;
  }
  
  /* Pulsante Toggle Menu */
  .menu-toggle {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  position: relative;
  display: none; /* Nascondi il pulsante su desktop */
  }
  
  .open-menu {
  display: block;
  }
  
  .close-menu {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px; z-index: 2;
  }
  
  .navigation {
  display: flex;
  /*gap: 20px;*/
  }
  
  .navigation a {
  text-decoration: none;
  color: #fff; /* Testo bianco */
  font-size: 16px; 
  padding: 15px;
  text-transform: uppercase;
  }
  
  
  /* Navigazione Mobile */
  @media (max-width: 778px) {
  .menu-toggle {
    display: block; /* Mostra il pulsante toggle su mobile */
  }
  
  .navigation {
    position: fixed;
    top: 0;
    right: -100%; /* Nascondi fuori dalla viewport */
    height: 100%;
    width: 250px;
    background-color: #32a593; /* Sfondo della navigazione */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: right 0.3s ease;
  }
  
  .navigation.open {
    right: 0; /* Mostra il menu */
  }
  
  .close-menu {
    display: block; /* Mostra il pulsante di chiusura */
  }
  
  .navigation a {
    font-size: 18px;
  }
  }
  
  /* Navigazione Desktop */
  @media (min-width: 777px) {
  .menu-toggle {
    display: none; /* Nascondi il pulsante su desktop */
  }
  
  .navigation {
    position: static;
    flex-direction: row;
    height: auto;
    width: auto;
    background-color: transparent;
    justify-content: flex-end; /* Allinea i link a destra */
    align-items: center;
  }
  
  .close-menu {
    display: none; /* Nascondi il pulsante di chiusura su desktop */
  }
  }
  
  /* Sezione Video */
  .video-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  }
  
  .video-section .container-fluid {
  position: relative;
  height: 100%;
  }
  
  .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: fixed;
    top: 75px; left: 0; right: 0;
    display: block;
  }

  .background-video.portrait {display: none;}

  @media (orientation: portrait) {
      .background-video {display: none;}
      .background-video.portrait {display: block;}
  }

  .main {
    background: #191528; position: relative;
    z-index: 1; overflow-x: hidden;
  }
  
  /* Sezioni Testuali */
  .text-section h1 {
    font-size: 10rem; line-height: 7rem;
    font-weight: bolder;
  }
  .text-section h1 small {
    font-size: 7.5rem; line-height: 7.5rem;
  }

  .text-section .pink {color: #ca05cd;}
  .text-section .sky {color: #32a593;}
  .text-section .yellow {color: #d4e240;}
  .text-section .blue {color: #282f87;}
  

.text-section h1 {
  font-size: 5.5rem; line-height: .7;
}
.text-section h1 small, h3 {
  font-size: 4rem; line-height: 1;
}
.text-section h2 {
  font-size: 2.2rem; line-height: 1;
  font-weight: bolder;
}

@media (orientation: landscape) {
  .text-section h1 {
    font-size: 12vw;
  }
  .text-section h1 small, h3 {
    font-size: 10vw;
  }
  .text-section h2 {
    font-size: 7vw;
  }
}

@media (min-width: 768px) {
  .text-section h1 {
    font-size: 13vw;
  }
  .text-section h1 small, h3 {
    font-size: 11vw;
  }
  .text-section h2 {
    font-size: 8vw;
  }
}

@media (min-width: 1366px) {
  .text-section h1 {
    font-size: 12rem;
  }
  .text-section h1 small, h3 {
    font-size: 9rem;
  }
  .text-section h2 {
    font-size: 8rem;
  }
}

#section2 {
  background: transparent url(../img/bg-box1.png) bottom right no-repeat;
  background-size: 80%;
}

.CTA {
  margin-top: 1rem;
  padding: 1rem 3rem;
  display: inline-block;
  background: #d4e240;
  color: #191528;
  text-transform: uppercase;
  font-weight: bolder;
  text-decoration: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.numeri {
  background: transparent url(../img/bg-numeri.png) top right no-repeat;
  background-size: contain;
}
.numeri h3 {
  font-weight: bolder;
}

footer {font-size: smaller; line-height: normal;}


.slide1.hide {visibility: hidden;}
.slide1.show.hide {visibility: visible;}

.slide2.hide {visibility: hidden;}
.slide2.show.hide {visibility: visible;}

.slide3.hide {visibility: hidden;}
.slide3.show.hide {visibility: visible;}

.slide4.hide {visibility: hidden;}
.slide4.show.hide {visibility: visible;}

.slide5.hide {visibility: hidden;}
.slide5.show.hide {visibility: visible;}