@charset "UTF-8";
/* CSS Document */




/* hamburger icon----------------------------*/

.burger-icon > span {
  height: 3px; !important
}

.burger-icon > span {
  background-color: white !important;
}

.burger-icon > span {
  display: block;
  height: 3px;
  background-color: #ffffff;
  margin: 5px 0;
  transition: background-color 0.3s ease-in, opacity 0.3s ease-in, transform 0.3s ease-in;
}

/*body.ltr #offcanvas-toggler.offcanvas-toggler-right {
  position: absolute;
  margin-right: 0px;
  display: none;
  padding-right: 20px;
  padding-top: 20px}*/



.burger-icon {
  width: 40px;
}

.offcanvas-active .burger-icon > span, 
#modal-menu-toggler.active .burger-icon > span {
  background-color: white !important; /*------------------------------------ cambia il colore della chiusura hamburger*/
}


.offcanvas-menu {
   background-color: rgba(31,93,166,0.7); !important
	color: #000000; !important 
}


.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
  color: #ffffff; !important 
}

.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
  color: #ffffff;
  font-weight: 800 !important; /* -----------riga aggiunta da me per il grassetto rollver------------------------------------------------------------*/
}



/*---------------------------------------------menu off canvas menu attivo-------------------------------------------------------------------------------*/

/*First level*/
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
    color: #ffc700;
}
/*Sub levels*/
.offcanvas-menu .offcanvas-inner ul.menu>li li.active > a {
    color: #ffc700;
}

/*third levels*/
.offcanvas-menu .offcanvas-inner ul.menu>li li li.active > a {
    color: #ffc700;
}

/*fine ---------------------------------------menu off canvas menu attivo------------------------------------------------------------------------------*/




/* fine hamburger icon----------------------------------------------------------------------------------------------------------------------------*/





/* inizio Top bar-------------------------------------------------------------------*/

#sp-top-bar {
  background: #c4d0cb; !important
  color: #3a6353; !important
    padding-top: 0px; !important
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  font-size: 0.875rem;
}

/* fine Top bar----------------------------------------------------------------*/






/* inizio codice lingua-------------------------------------------------------------------*/
div.mod-languages ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* fine codice lingua-------------------------------------------------------------------*/








/* inizio tutto sul header---------------------------------------------------------------------------------------------------*/


/*#sp-header {
  background: #3a6353;
	  height: 90px;
  width: 100%;
  position: relative;
  z-index: 99;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  animation: spFadeIn 0.5s;
}

/* fine tutto sul header---------------------------------------------------------------------------------------------------*/







/* inizio tutto sui social---------------------------------------------------------------------------------------------------*/

/*ul.social-icons > li {
  display: inline-block;
  line-height: 2; /* era 2.5*/
  /* font-size: 130%;} /* agginta*/

/* fine tutto sui social---------------------------------------------------------------------------------------------------*/







/* inizio tutto logo---------------------------------------------------------------------------------------------------*/

/*.logo-image {
  height: 50px;
  margin-top: 30px; !important
}
/* fine tutto logo---------------------------------------------------------------------------------------------------*/




/* inizio tutto il cerca modulo---------------------------------------------------------------------------------------------------*/

#sp-search {
  margin-top: 2%; !important
}

/* fine tutto il cerca modulo---------------------------------------------------------------------------------------------------*/




/* inizio tutto la grafica del modulo popup---------------------------------------------------------------------------------------------------*/



/* fine tutto la grafica del modulo popup---------------------------------------------------------------------------------------------------*/

/* icona social---------------------------------------------------------------------------------------------------*/
ul.social-icons {
float: right;
}



/* elimina logo offcanvas menu----------------------------*/
.offcanvas-menu .logo {display: none !important;}
/* elimina logo offcanvas menu----------------------------*/


/* si modifica il titolo camera caption----------------------------*/
.camera_caption_title {
  font-size: 1.3em;
  font-weight: normal; !important
  line-height: 1em;
}

/*------------------------------------------------------------------------------------------------------------*/



/* inizio per problema sottomenu heli ultimate--------------------------------------------------------------------------------------------------------*/

body.ltr .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler {
  right: 0;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler::after, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler::after {
  content: "\f055";
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent.menu-parent-open > a > .menu-toggler::after, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent.menu-parent-open > .menu-separator > .menu-toggler::after {
  content: "\f056";
}


.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler {
  color: rgba(255, 255, 255, 0.8); !important
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler::after, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler::after {
    content: "\f055";

}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent .menu-toggler::after {
content: "\f055";
}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent li.menu-parent.menu-parent-open .menu-toggler::after {
  content: "\f056";
}


.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
	   color: rgba(255, 255, 255, 0.8); !important
	 border-bottom: 0px solid rgba(255, 255, 255, 0);
  max-width: 100%;
  display: block;
}

/* fine per problema sottomenu helix ultimate---------------------------------------------------------------------------------------------*/


/* il plug-in easy caption------------------------------------*/
.easy_img_caption_inner > span {
	 font-size: 90%; 
}




/* scrolling testo orizzontale--------------------------------------------------------*/
.card-body {
}

.card {
 font-size: 130%; !important
}
/* scrolling testo orizzontale------------------------------------------------------*/



/* mio background------------------------------------------------------*/
.visita {
background-color: #F0F0F0;
padding: 4% 4% 4% 4%;
}
/* mio background------------------------------------------------------*/


/* responsive font------------------------------------------------------*/

@media screen and (min-width:991px) and (max-width:1199px) {
	
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-size: 90% !important;

}
}

/* codice per mettere il footer in piepagina-------------------------------------------*/
.body-innerwrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#sp-main-body {
margin-bottom: auto;
}
/* chiusura codice per mettere il footer in piepagina-------------------------------------------*/

 /* classe dissolvenza----------------------------------*/      
.fade-in {
	animation: fadeIn 6s;

	}

.fade-out {
	animation: fadeout 3s;

	}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
	
	}
@keyframes fadeOut {
	from {
		opacity: 1;
	}
	
	to {
		opacity: 0;
	}
	}
 /* classe dissolvenza----------------------------------*/ 


.animated-text {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    animation: fadeIn 3s ease-in-out infinite;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*___________________________________________________________________-*/

   
/* Sezioni Parallax */
.parallax {
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
}

/* Contenitore del testo sopra il background */
.content {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra orizzontalmente */
    transform: translate(-50%, -50%); /* Sposta per ottenere un vero centramento */
    width: 100%;
    text-align: center;
    z-index: 10;
}

/* Stile del testo */
.text-container {
    opacity: 0; /* Inizialmente invisibile */
    transform: translateY(20px); /* Movimento iniziale verso il basso */
    transition: opacity 3s ease-out, transform 2s ease-out; /* Transizioni per l'opacità e il movimento */
    font-size: 50px;
    color: white;
    z-index: 20;
    position: relative;
}

/* Visibilità del testo quando entra in vista */
.text-container.show {
    opacity: 1; /* Rende il testo visibile */
    transform: translateY(0); /* Riporta il testo alla posizione originale */
    transition-delay: 0.3s; /* Ritardo di 0.3s prima che inizi l'animazione */
}

/* Personalizzazioni dei testi */
#text1-container {
    color: #999999; /* Colore del testo */
    font-size: 1200%; /* Dimensione del font */
    font-weight: bold; /* Impostazione del grassetto */
    line-height: 0.8; /* Miglioramento dell'altezza della linea per una lettura migliore */
    text-align: left; /* Allineamento a sinistra */
    font-family: Arial, sans-serif; /* Impostazione di un font moderno e leggibile */
    margin-left: 40px; /* Rimuove i margini predefiniti */
    padding: 0; /* Rimuove il padding */
}


#text2-container {
    color: #ffffff; /* Colore del testo */
    font-size: 900%; /* Dimensione del font */
    font-weight: bold; /* Impostazione del grassetto */
    line-height: 0.8; /* Miglioramento dell'altezza della linea per una lettura migliore */
    text-align: left; /* Allineamento a sinistra */
    font-family: Arial, sans-serif; /* Impostazione di un font moderno e leggibile */
    margin-left: 40px; /* Rimuove i margini predefiniti */
    padding: 0; /* Rimuove il padding */
}

#text3-container {
        color: #999999; /* Colore del testo */
    font-size: 900%; /* Dimensione del font */
    font-weight: bold; /* Impostazione del grassetto */
    line-height: 0.8; /* Miglioramento dell'altezza della linea per una lettura migliore */
    text-align: left; /* Allineamento a sinistra */
    font-family: Arial, sans-serif; /* Impostazione di un font moderno e leggibile */
    margin-left: 40px; /* Rimuove i margini predefiniti */
    padding: 0; /* Rimuove il padding */
}


 .mio-div {
      font-size: 20px;
      color: #999999;
      padding: 30px;
      text-align: center;
      border: 2px solid #000000;
      border-radius: 55px;
      width: 60%;
      max-width: 600px;
      transition: all 0.3s ease;
	 margin-left: 50%;
	 margin-right: 50%;
    }

    .mio-div:hover {
        color: #ffffff;
     background-color: #999999;
		border: 0px solid #000000;
   
    }

    .mio-div p {
      font-size: 29px;
      margin: 0;
      color: #999999;
		font-weight: 900;
    }

  .mio-div p:hover {
      font-size: 29px;
      margin: 0;
      color: #ffffff;
		font-weight: 900;
    }
   
/* inizia codice moduli___________________________________________________________*/

/*modulo1___________________________________________________________*/
.text-section {
  position: relative;
        width: 100%;
       height: 50vh;
        display: flex;
        align-items: top; /* Allinea verticalmente al centro */
        padding-left: 3%; /* Margine sinistro di 20px */
	 padding-top: 3%; /* Margine sinistro di 20px */
        color: #aaa; /* Testo grigio chiaro */
        font-size: 9.5em; /* Dimensione font */
        font-weight: bold; /* Grassetto */
        box-sizing: border-box; /* Include padding nella larghezza/tipo */
	    line-height: 80%;
    }
/*fine modulo1___________________________________________________________*/

/*modulo2___________________________________________________________*/
.parallax {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 5.5em;
        background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80') no-repeat center center fixed; 
        background-size: cover;
    }
/*fine modulo2___________________________________________________________*/

/*modulo3___________________________________________________________*/
.text-section2 {
        position: relative;
        width: 100%;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
        font-size: 8em;
        font-weight: bold;
        background-color: #e6e6e6;
    }
/*fine modulo3___________________________________________________________*/

/*modulo4___________________________________________________________*/

    .content-section {
        background-color: #f8f9fa; /* Grigio chiaro per sfondo */
    }

    .text-secondary {
        color: #6c757d !important; /* Grigio secondario per il titolo */
    }

    .text-muted {
        color: #adb5bd !important; /* Grigio più chiaro per il testo */
		
    }

/*fine modulo4___________________________________________________________*/


/* ---------------------------------inzio scritta su video*/

  /* Body e reset per margini/padding */
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  /* Container video */
  .video-container {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  /* ------------------------------------------------------------Video che copre tutta la pagina */

  /* Reset per margini e padding */
  body {
    margin: 0;
    padding: 0;
  }

  /* Container video */
  .video-container {
    position: relative;
    width: 100%;
    height: auto; /* Altezza completa della finestra del browser */
    overflow: hidden; /* Nascondi eventuali contenuti fuori dallo schermo */
  }

  /* Video che copre tutta la larghezza e mantiene le proporzioni */
  video {
    width: 100%;
    height: 100%; /* Fa sì che il video si adatti in altezza */
    object-fit: cover; /* Fa sì che il video copra tutta la finestra mantenendo le proporzioni */
  }

  /* Scritta sopra il video (centrata) */
  .fade-text {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra orizzontalmente */
    transform: translate(-50%, -50%); /* Traslazione per centrare esattamente */
    font-size: 5vw; /* Usa le unità viewport per rendere il testo dinamico in base alla larghezza */
    color: white;
    opacity: 0; /* Partiamo con il testo invisibile */
    animation: fadeIn 3s forwards; /* Animazione di dissolvenza */
    text-align: left; /* Centra il testo all'interno del div */
    max-width: 90%; /* Limita la larghezza massima del testo per evitare che diventi troppo grande */
	  line-height: 100%;
  }

  /* Animazione della dissolvenza */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Media query per dispositivi mobili (schermi più piccoli) */
  @media (max-width: 768px) {
    .fade-text {
      font-size: 4vw; /* Più grande sui dispositivi mobili rispetto al desktop */
    }
  }

  /* Media query per schermi molto piccoli (es. smartphone in modalità verticale) */
  @media (max-width: 480px) {
    .fade-text {
      font-size: 6vw; /* Ancora più grande su schermi molto piccoli */
    }
  }
/* ----------------------------------------------------------------------------------fine scritta su video*/


/* ----------------------------------------------------------------------------inizio css scritta esplosione*/
 
  
    .section {
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        position: relative;
        perspective: 1000px;
		padding-top: 5%;
		padding-bottom: 10%;
			padding-left: 5%
    }

    .text-container2 {
        font-size: 8.8em;
        font-weight: 800;
        line-height: 0.9;
		color: #999999;
		/*text-transform: lowercase;*/
		padding-left: 1%;
			letter-spacing: -18px;
    }

    .letter {
        display: inline-block;
        opacity: 0;
        transform: translateY(50px);
        transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    }

    .animate-visible .letter {
        transform: translateY(0);
        opacity: 1;
    }

    .animate-exit .letter {
        transform: translateY(-50px);
        opacity: 0;
    }

.animate-visible {
    transition: opacity 2s ease-out, transform 2s ease-out; /* Durata: 2 secondi */
    opacity: 1;
    transform: translateY(0);
}

.animate-exit {
    transition: opacity 2s ease-out, transform 2s ease-out; /* Durata: 2 secondi */
    opacity: 0;
    transform: translateY(50px); /* Effetto di uscita */
}

/* parte qui il responsive per i vari devices*/


   @media (min-width: 768px) and (max-width: 1195px) { 
.text-container2 {
        font-size: 4.8em;
        font-weight: 800;
        line-height: 0.9;
		color: #999999;
		padding-left: 1%;
			letter-spacing: -12px;
    }
}

  @media (min-width: 1200px) and (max-width: 1599px) { 
.text-container2 {
        font-size: 6em;
        font-weight: 800;
        line-height: 0.9;
		color: #999999;
		padding-left: 1%;
			letter-spacing: -15px;
    }
}

  @media (min-width: 1600px) and (max-width: 1920px) { 
.text-container2 {
        font-size: 6.5em;
        font-weight: 800;
        line-height: 0.9;
		color: #999999;
		padding-left: 1%;
			letter-spacing: -15px;
    }
}
   @media (min-width: 208px) and (max-width: 767px) { 
.text-container2 {
        font-size: 2.1em;
        font-weight: 800;
        line-height: 0.9;
		color: #999999;
		padding-left: 0.5%;
			letter-spacing: -5px;
    }
}

   @media (min-width: 768px) and (max-width: 1119px) { 
.text-container2 {
        font-size: 3.6em;
        font-weight: 800;
        line-height: 0.9;
		color: #999999;
		padding-left: 0.5%;
			letter-spacing: -8px;
    }
}
/* ----------------------------------------------------------------------------fine css scritta esplosione*/

#chi-siamo  {
        font-size: 4em;
        font-weight: 900;
        line-height: 0.9;
		color: #e6e6e6;
		/*text-transform: lowercase;*/
		letter-spacing: -1px;
	padding-bottom: 4%;
    }

@media (min-width: 100px) and (max-width: 760px) { 
#chi-siamo  {
        font-size: 3em;
        font-weight: 900;
        line-height: 0.9;
		color: #e6e6e6;
		/*text-transform: lowercase;*/
		letter-spacing: -1px;
	padding-bottom: 4%;
    }
}

#testo_chi_siamo  {
        font-size: 2em;
        font-weight: 200;
        line-height: 1.3;
		color: #999999;
		/*text-transform: lowercase;*/
			letter-spacing: -1px;
    }

@media (min-width: 100px) and (max-width: 760px) { 
#testo_chi_siamo  {
        font-size: 1.7em;
        font-weight: 200;
        line-height: 1.3;
		color: #999999;
		/*text-transform: lowercase;*/
			letter-spacing: -1px;
    }
}

/* Stile base del link */
#link_sapere a {
  display: inline-block; /* Tratta il link come un blocco inline */
  color: #c11515; /* Colore del testo */
  font-size: 2em;
  font-weight: bold; /* Testo in grassetto */
  text-decoration: none; /* Rimuove la sottolineatura di default */
  position: relative; /* Per gestire la posizione della linea */
  padding-bottom: 5px; /* Distanza tra il testo e la linea */
	padding-top: 7%; /* Distanza tra il testo e la linea */
}

/* Linea sottostante visibile sempre */
#link_sapere a::after {
  content: ''; /* Nessun testo */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Altezza della linea */
  background-color: #000; /* Colore della linea iniziale */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Transizione per l'animazione */
  transform: scaleX(1); /* La linea è sempre visibile */
}

/* Effetto hover sulla sottolineatura */
#link_sapere a:hover {
  color: #666666; /* Cambia il colore del testo al passaggio del mouse */
}

/* Effetto hover sulla linea sottostante */
#link_sapere a:hover::after {
  background-color: #3498db; /* Cambia il colore della linea quando si passa sopra */
 /* transform: scaleX(1.1); /* Espande la linea orizzontalmente */
}



/* ----------------------------------------------------------------------------fine css scritta chi siamo e contenuto*/



/* ----------------------------------------------------------------------------inizio link in basso*/
  

  .custom-module {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .custom-module .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .custom-module .item:last-child {
    border-bottom: none;
  }

  .custom-module .item a {
    color: gray;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .custom-module .item a:hover {
    color: #d81f05;
  }

  .custom-module .item img {
    width: 24px;
    height: 24px;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
  }

  .custom-module .item a:hover img {
    filter: invert(0);
  }
   
/* ----------------------------------------------------------------------------fine link in basso*/


/* ----------------------------------------------------------------------------inizio Scroll Triggered Animation-----------------------*/

/* Imposta lo stato iniziale: trasparente e un po' più in basso */
.mod-scroll-trigger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Stato visibile dopo l'animazione */
.mod-scroll-trigger.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------------------fine Scroll Triggered Animation-----------------------*/


/* ----------------------------------------------------------------------------inizio scritta immagine-----------------------*/
.image-container_scritta {
            position: relative;
            display: inline-block;
            float: left;
        }

        .image-container_scritta img {
            width: 100%;
            height: 100%;
            transition: filter 0.3s ease;
        }

        .image-container_scritta:hover img {
            /*filter: grayscale(100%);*/
			 filter: blur(10px); /* Effetto sfumato al passaggio del mouse */
            transform: scale(1.00); /* Leggero effetto zoom */
		
        }

     .overlay-text {
            position: absolute;
            top: 50%;
            left: 70%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 6em;
            font-weight: bold;
            text-align: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 2; /* Assicura che il testo sia sopra l'immagine */
            /*background-color: rgba(0, 0, 0, 0.2);  Sfondo semi-trasparente per migliorare la leggibilità */
            padding: 10px 20px;
            border-radius: 5px;
        }

        .image-container_scritta:hover .overlay-text {
            opacity: 1;
        }
			/* ----------------------------------------------------------------------------fine scritta immagine-----------------------*/

.my-module-hr::after {
    content: "";
    display: block;
    border-bottom: 1px solid #ccc; /* Stile della riga */
    margin-top: 20px; /* Spazio sopra la riga */
    margin-bottom: 20px; /* Spazio sotto la riga */
}


/* ----------------------------------------------------------------------------inizio scritta prima pagina2-----------------------*/

        .text-container65 {
			font-size: 9rem;
			font-weight: 700;
            text-align: left;
            padding-left: 5%;
			padding-top: 1%;
			letter-spacing:-20px;
			color: #e6e6e6; 
			white-space: nowrap; /* Impedisce la divisione delle righe */
			line-height: 1; /* Riduce lo spazio tra le righe */
			 margin-bottom: 3%; /* Spazio dal fondo */
			 margin-top: 0%; /* Spazio dal top */
        }

/* parte da qui il responsive per devices*/

   @media (min-width: 768px) and (max-width: 1198px) { 
.text-container65 {
        font-size: 4.8em;
        font-weight: 700;
        text-align: left;
            padding-left: 5%;
	        padding-top: 1%;
			letter-spacing:-10px;
			color: #e6e6e6; 
			white-space: nowrap; /* Impedisce la divisione delle righe */
			line-height: 1; /* Riduce lo spazio tra le righe */
			 margin-bottom: 3%; /* Spazio dal fondo */
			 margin-top: 0%; /* Spazio dal top */
    }
}

  @media (min-width: 1200px) and (max-width: 1599px) { 
.text-container65 {
        font-size: 5.8em;
        font-weight: 700;
       text-align: left;
            padding-left: 5%;
	        padding-top: 1%;
			letter-spacing:-14px;
			color: #e6e6e6; 
			white-space: nowrap; /* Impedisce la divisione delle righe */
			line-height: 1; /* Riduce lo spazio tra le righe */
			 margin-bottom: 3%; /* Spazio dal fondo */
			 margin-top: 0%; /* Spazio dal top */
    }
}

  @media (min-width: 1600px) and (max-width: 1920px) { 
.text-container65 {
        font-size: 7em;
        font-weight: 700;
        text-align: left;
            padding-left: 5%;
	padding-top: 1%;
			letter-spacing:-10px;
			color: #e6e6e6; 
			white-space: nowrap; /* Impedisce la divisione delle righe */
			line-height: 1; /* Riduce lo spazio tra le righe */
			 margin-bottom: 3%; /* Spazio dal fondo */
			 margin-top: 0%; /* Spazio dal top */
    }
}
   @media (min-width: 208px) and (max-width: 767px) { 
.text-container65 {
        font-size: 2.1em;
        font-weight: 700;
       text-align: left;
            padding-left: 3%;
	padding-top: 2%;
			letter-spacing:-3px;
			color: #e6e6e6; 
			white-space: nowrap; /* Impedisce la divisione delle righe */
			line-height: 1; /* Riduce lo spazio tra le righe */
			 margin-bottom: 3%; /* Spazio dal fondo */
			 margin-top: 0%; /* Spazio dal top */
    }
}

   @media (min-width: 768px) and (max-width: 1119px) { 
.text-container65 {
        font-size: 3.7em;
        font-weight: 700;
        text-align: left;
            padding-left: 5%;
	padding-top: 2%;
			letter-spacing:-8px;
			color: #e6e6e6; 
			white-space: nowrap; /* Impedisce la divisione delle righe */
			line-height: 1; /* Riduce lo spazio tra le righe */
			 margin-bottom: 3%; /* Spazio dal fondo */
			 margin-top: 0%; /* Spazio dal top */
    }
}



/* -------------------------------------------------------------finisce qui il responsive per devices*/

        .line {
            display: block;
			margin-bottom: 0em; /* Riduce lo spazio tra le righe (aggiusta se necessario) */
        line-height: 0.9; /* Riduce lo spazio tra le lettere verticalmente */

        }
        .letter {
            display: inline-block;
            opacity: 0;
            animation: fadeIn 3s ease-in-out forwards;
         letter-spacing: -0.1em; /* Riduce lo spazio tra le lettere */
        }

.spacer {
        display: inline-block;
        width: 0.3em; /* Larghezza dello spazio */
       /* height: 1em;  Altezza dello spazio (opzionale) */
    }

        @keyframes fadeIn {
            0% { opacity: 0; transform: translateX(-20px); }
            100% { opacity: 1; transform: translateX(0); }
        }

/* ----------------------------------------------------------------------------fine scritta prima pagina2-----------------------*/
#sp-header.header-sticky {
background-color:rgba(31, 93, 166, 0.8);
}


/* per il modulo jo-form*/
.checkbox-group, .radio-group {
  display: flex !important;  /* Usa Flexbox */
  flex-direction: column !important ;  /* Disponi gli elementi in verticale */
  gap: 2px !important ; /* Spazio tra gli elementi */
}

/* tutto il codice articolo prima---------------------------------*/
.header-container {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: left;
    border-radius: 20px;
	color:#1f5da6;
	 font-weight: 900;
}
.customizable-section {
    font-size: 22px;
    color: #333;
    background-color: #f9f9f9;
    padding: 15px;
    border-left: 5px solid #007BFF;
    margin: 20px 0;
    line-height: 1.6;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ff7a00;
  color: #0d0d0d;
  padding: 24px 28px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin-top: 14px;
  font-size: 120%;
  text-decoration: none; /* Rimuove il sottolineato per i link */
  transition: all 0.3s ease; /* Aggiunge una transizione fluida */
  box-shadow: 0 6px 12px rgba(255, 122, 0, 0.3); /* Ombra leggera */
}

.cta:hover {
  background: #e66c00; /* Colore di sfondo più scuro al passaggio del mouse */
  color: #ffffff; /* Testo diventa bianco */
  transform: scale(1.05); /* Effetto di ingrandimento */
  box-shadow: 0 8px 16px rgba(255, 122, 0, 0.4); /* Ombra più pronunciata */
}

.cta svg {
  transition: transform 0.3s ease; /* Transizione per l'icona */
}

.cta:hover svg {
  transform: translateX(5px); /* Effetto di movimento dell'icona verso destra */
}

.service-header {
  color: #1f5da6; /* Testo diventa bianco */
}


  @media (min-width: 900px){
.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
}

.grid {
  display: grid;
  gap: 20px;
}

.card3:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.card3 {
  background: #1f5da6;
  border: 1px solid;
  padding: 20px;
  border-radius: 14px;
  transition: .3s;
}
.card3 h3 {
  margin-top: 0;
  color:#cdd362;
  font-weight: 900;
  
}

.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 14px;
  background: #ff7a00;
  color: #111;
  border-radius: 10px;
  font-weight: 700;
}

.btn:hover {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 14px;
  background: #eae711 !important;
  color: #111;
  border-radius: 10px;
  font-weight: 700;
	border:1px solid black;
}

 .custom-div {
        font-weight: bold;
        color: white;
        padding: 5px;
    }

    .custom-h1 {
 font-weight: 900 !important;
    }

.faq details {
  background: #e6e6e6;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.faq summary {
  cursor: pointer;
  font-weight: 900;
  color:black;
}

.table-dark2{
  background: #cdd362;

}

.card-title {
  color:#1f5da6;
}

.card-body2 {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color:black;
	background: #f4f4f4;
}

/* Stile personalizzato per le liste */
.list-custom {
  list-style: none; /* Rimuove gli stili predefiniti */
  padding-left: 1.5rem; /* Spazio per i punti */
}

.list-custom li {
  position: relative; /* Permette di posizionare il punto */
  padding-left: 1rem; /* Spazio tra il punto e il testo */
}

.list-custom li::before {
  content: "•"; /* Simbolo del punto */
  position: absolute;
  left: 0;
  color: #000; /* Colore del punto */
  font-size: 1.2em; /* Dimensione del punto */
}

.mt-4 { 
	color:#1f5da6;
	font-weight: 900 !important;
}

/* Stile del pulsante fluttuante */
.whatsapp-float {
    position: fixed;
    bottom: 50%;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Colore verde WhatsApp */
    color: white;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Stile dell'icona */
.whatsapp-icon {
    width: 40px;
    height: 40px;
}

/* Hover effect */
.whatsapp-float:hover {
    background-color: #128C7E; /* Colore verde scuro al passaggio del mouse */
}

/* fine tutto il codice articolo prima--------------------*/

li {
  margin-bottom: 10px !important; /* Spazio sotto ogni elemento */
}

.content-box {
    background-color: #f5f5f5; /* Sfondo grigio chiaro */
    border-radius: 10px; /* Angoli arrotondati */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Effetto in rilievo */
    padding: 20px; /* Spazio interno */
    margin-bottom: 20px; /* Distanza dal contenuto successivo */
}

.green-text {
    color: #008000; /* Colore verde per il testo */
}

.card4:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.card4 {
  background: #278222;
  border: 0px solid;
  padding: 20px;
  border-radius: 14px;
  transition: .3s;
}

.card4 h3 {
  margin-top: 0;
  color:#cdd362;
  font-weight: 900;
  
}

.servizio-box {
  text-align: center; /* Allinea il testo e gli elementi al centro */
  transform: scale(1.3); /* Ingrandisce tutto del 130% */
  font-weight: 900; /* Grassetto pesante */
 /*  display: inline-block; Permette di centrare il div stesso se necessario */
padding-bottom:2%;
}


.cta2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1f75bd;
  color: #0d0d0d;
  padding: 24px 28px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin-top: 14px;
  font-size: 120%;
  text-decoration: none; /* Rimuove il sottolineato per i link */
  transition: all 0.3s ease; /* Aggiunge una transizione fluida */
  box-shadow: 0 6px 12px rgba(255, 122, 0, 0.3); /* Ombra leggera */
}

.cta2:hover {
  background: #e66c00; /* Colore di sfondo più scuro al passaggio del mouse */
  color: #ffffff; /* Testo diventa bianco */
  transform: scale(1.05); /* Effetto di ingrandimento */
  box-shadow: 0 8px 16px rgba(255, 122, 0, 0.4); /* Ombra più pronunciata */
}

.cta2 svg {
  transition: transform 0.3s ease; /* Transizione per l'icona */
}

.cta2:hover svg {
  transform: translateX(5px); /* Effetto di movimento dell'icona verso destra */
}