/* azzera i margini */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* setta i colori di default */
:root {
  --whiteL: rgb(249, 249, 249);
  --blackSmoke: rgb(1, 12, 21);
  --azzurro: rgb(6, 199, 235);
  --blu1: rgb(34, 80, 114);
  --blu2: rgb(30, 71, 103);
  --blu3: rgb(28, 53, 91);
  --arancio: rgb(255, 123, 0);
  --grigio1: rgb(250, 250, 250);
  --grigio2: rgb(243, 243, 243);
  --borderShadow: 10px 10px 70px -6px rgba(0, 0, 0, 0.64);
}
/* colori predefiniti */
.white {
  color: var(--whiteL);
}

.black {
  color: var(--blackSmoke);
}
.azzurro {
  color: var(--azzurro);
}
.arancio {
  color: var(--arancio);
}
.blu1 {
  color: var(--blu1);
}
.blu2 {
  color: var(--blu2);
}
.blu3 {
  color: var(--blu3);
}
.grigio1 {
  color: var(--grigio1);
}
.grigio2 {
  color: var(--grigio2);
}

/*  altro per il testo */
.bold {
  font-weight: bold;
}
.upper {
  font-variant: small-caps;
  font-size: 80% !important;
}
.noSpace {
  margin: 0 !important;
  padding: 0 !important;
}
.spazio {
  height: 20px; /* Altezza della riga vuota */
}
.piccolo {
  font-size: 70% !important;
}

.center {
  text-align: center !important;
}

/* imposta pagina html */
html {
  scroll-behavior: smooth;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Imposta l'altezza minima del body/html al 100% dello schermo */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--whiteL);
  color: var(--blackSmoke);
}

p {
  padding: 10px;
  line-height: 1.69;
}

/* setta grafica del testo link senza sottolineatura */
a {
  text-decoration: none;
  color: inherit;
}

/* stili H1-H5 */
h1 {
  padding: 20px 0 10px 0;
  font-size: 2.5rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  letter-spacing: 0.3px;
  font-variant: small-caps;
  margin-bottom: 30px;
  font-weight: 300;
}
h2 {
  padding: 0;
  font-size: 1.7rem;
  font-weight: 200;
}
h3 {
  padding: 15px 0 10px 0;
  font-size: 1.4rem;
  font-weight: 300;
}
h4 {
  padding: 10px 0 8px 0;
  font-size: 1.2rem;
  font-variant: small-caps;
}
h5 {
  font-size: 0.8rem;
  font-weight: 100;
}

/* Immagini responsive */
.image-container {
  max-width: 800px;
  margin: 0 auto; /* Centra il contenitore orizzontalmente */
  padding: 60px 20px;
}

.image-container img {
  max-width: 100%;
  height: auto;
  display: block; /* Necessario per il centramento */
  margin: 0 auto; /* Centra l'immagine orizzontalmente */
}

.image-container-footer {
  max-width: 600px;
  margin: 0 auto; /* Centra il contenitore orizzontalmente */
  padding: 20px 20px;
}

.image-container-footer img {
  max-width: 50%;
  height: auto;
  display: block; /* Necessario per il centramento */
  margin: 0 auto; /* Centra l'immagine orizzontalmente */
  margin-bottom: 30px;
}

img {
  max-width: 80%;
  height: auto;
  display: block; /* Necessario per il centramento */
  margin: 0 auto; /* Centra l'immagine orizzontalmente */
}

footer {
  background-color: var(--grigio2);
  padding-top: 40px;
  padding-bottom: 50px;
}

 /* button link oranga */
 .custom-button {
  background-color: transparent; /* Interno trasparente */
  color: var(--white); /* Colore blu per il testo */
  padding: 16px 24px; /* Spaziatura interna */
  border: 3px solid var(--arancio); /* Bordo arancione di 3px */
  border-radius: 25px; /* Bordi arrotondati */
  text-decoration: none; /* Rimuove la sottolineatura del link */
  display: inline-block; /* Per un comportamento corretto */
  font-size: 16px; /* Dimensione del testo */
  cursor: pointer; /* Mano al passaggio del mouse */
  transition: all 0.3s; /* Transizione smooth per l'hover */
  margin-top: 20px;
}
.custom-button:hover {
  background-color: var(--arancio); /* Riempie di arancione al passaggio del mouse */
  color: #ffffff; /* Testo bianco sull'hover */
}

 /* Stile per il video di sfondo */
 .video-background {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Assicura che il video copra l'intero contenitore */
  z-index: 1; /* Posizionato sotto il contenuto */
}
  

  /* Contenitore principale */
  .square-container {
      position: relative;
      width: 100%;
      height: 1000px; /* Altezza fissa per consistenza */
      overflow: hidden;
  }

  /* Primo contenitore */
  .square-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--blu1);
      -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
      clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .square-bottom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--whiteL);
  }

  /* Secondo contenitore */
  .square-top-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--whiteL);
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%);
  }

  .square-bottom-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--blu3);
  }

  /* Contenuti SEZIONI OBLIQUE*/
  .content-left-up, .content-left-down {
      position: absolute;
      left: 5%;
      color: var(--whiteL);
      text-align: left;
      z-index: 2;
  }

  .content-left-up {
      top: 80px;
      transform: translateY(-5%);
  }
  .content-left-down {
      bottom: 50px;
  }
  .content-left-up h2 {
      font-size: 4rem;
  }
  .content-left-down h2 {
      font-size: 6rem;
  }

  .content-right-up, .content-right-down {
      position: absolute;
      right: 10px;
      color: var(--blu3);
      text-align: right;
      padding: 10px;
      z-index: 2;
  }

  .content-right-up {
      top: 5px; /* Aggiunto per posizionamento */
      transform: translateY(1%);
  }
  .content-right-up h3 {
      font-size: 1.8rem;
  }

  .content-right-down {
      bottom: 40px;
  }
  .content-right-down h1 {
      font-size: 4rem;
  }

   /* Immagine standalone senza bordi, padding o margini */
   img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0; /* Nessun margine */
      padding: 0; /* Nessun padding */
      border: none; /* Nessun bordo */
  }

  .container{
    background: var(--whiteL);
    max-width: 800px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .container h2{
   font-size: 20px;
   margin-bottom: 40px;
   padding: 10px;
  }

  .container p{
    font-size: 18px;
    padding: 20px;
    text-align: justify;
   }

  /* *********************************
  ** SEZIONE PER FRAME VIDEO YOUTUBE **
  ********************************** */
  /* Then style the iframe to fit in the container div with full height and width */
  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--borderShadow);
  }

  .youtubeBox iframe {
    box-shadow: var(--borderShadow);
  }

  .bbox {
    box-shadow: var(--borderShadow);
    max-width: 900px;
    margin: 0 auto;
  }

  /* iframe youtube */
  .youtubeBox {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }