/* Importa Montserrat da Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');



/* Font personalizzati 

@font-face {

  font-family: 'Script MT Bold';

  font-weight: 400;

  font-display: swap;

  font-family: 'Montserrat', Serif;

  src: url('wp-content/uploads/2021/10/ScriptMTBold.ttf') format('truetype');

}



@font-face {

  font-family: 'Corisande Regular';

  font-weight: 400;

  font-display: swap;

  font-family: 'Montserrat', Serif;

  src: url('wp-content/uploads/2021/10/CorisandeRegular.ttf') format('truetype');

}

*/

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



.custom-toggle .custom-toggle-content {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease;

}

body {

  touch-action: manipulation; /* per prevenire zoom strani da touch */

  -webkit-text-size-adjust: 100%; /* evita resize automatico su iOS */

    background-color: #e5e5e5;

}





/*html, body {

 margin: 0 !important;

  padding: 0 !important;

  height: 100%;

  /*overflow-x: hidden;*/

}*/



html, body {

  margin: 0;

  padding: 0;

  height: 100%;

  overflow-x: hidden;

}



*, *::before, *::after {

  box-sizing: border-box;

}



iframe,

.small-map,

.info-right,

.info-left,

.colonna-destra,

.colonna-sinistra,

.two-column-layout2 {

  max-width: 100%;

  /*overflow-x: hidden;*/

}



.drivillage-section {

  max-width: 100%;

}









body > *:first-child {

  margin-top: 0 !important;

  padding-top: 0 !important;

}



/* Applica Montserrat a tutto il sito */

body,

h1, h2, h3, h4, h5, h6,

p, a, li, span, div,

input, button, textarea {

  font-family: 'Montserrat', sans-serif !important;

}



/* Esempio: se vuoi usare Script MT Bold in una parte specifica */

/*.font-script {

  font-family: 'Script MT Bold', cursive;

}

*/

/* Esempio: se vuoi usare Corisande Regular in un titolo */

/*.font-corisande {

  font-family: 'Corisande Regular', sans-serif;

}*/



/* Personalizzazioni dell’admin bar WordPress */

/*#wpadminbar #wp-admin-bar-wccp_free_top_button .ab-icon:before {

  content: "\f160";

  color: #02CA02;

  top: 3px;

}



#wpadminbar #wp-admin-bar-wccp_free_top_button .ab-icon {

  transform: rotate(45deg);

}*/





/*.skip-link {

	display: none !important;

  position: absolute;

  top: -1000px;

  left: -1000px;

  height: 1px;

  width: 1px;

  overflow: hidden;

  clip: rect(1px, 1px, 1px, 1px);

  white-space: nowrap;

}



.skip-link:focus {

  top: 10px;

  left: 10px;

  height: auto;

  width: auto;

  clip: auto;

  background: #000;

  color: #fff;

  padding: 10px;

  z-index: 999;

}

*/



/*per le icone instagram e facebook*/



.header-social-icons {

  position: absolute;

  top: 1px;

  right: 20px;

  display: flex;

  justify-content: flex-end;

  gap: 10px;

  padding: 10px;

  margin-top: 0;

  text-align: right;

}



.header-social-icons a {

  color: #000;

  font-size: 20px;

  text-decoration: none;

}



.header-social-icons a:hover {

  color: #004d26;

}





/* Colori specifici */

.header-social-icons .instagram { color: #E1306C; }

.header-social-icons .facebook  { color: #1877F2; }

.header-social-icons .tiktok    { color: #000000; }

.header-social-icons .affiliazioni { color: #000000; }





/*logo*/

@media (max-width: 375px) {

 .logo {

    max-width: 60%;

  }

}



@media (max-width: 480px) {

 .logo {

    max-width: 60%;

  }

}



@media (max-width: 768px) {

/*	 .logo {

    display: flex;

    align-items: flex-end;

    order: 1;

	margin-right: auto;

  }

  

  @media (max-width: 767px) {

  */.logo {

    max-width: 60%;

  }

}



  .logo img {

    height: 60px;

  }





.logo {

  max-height: 120px;

  height: auto;

  margin: 0;

  margin-right: 2rem;

}





.logo-social-wrapper {

  display: flex;

  justify-content: space-between;

  align-items: flex-start; /* ✅ allinea tutto in alto */

  width: 100%;

  padding: 10px 20px;

  box-sizing: border-box;

}



.logo-center {

  text-align: center;

  flex: 1;

}



.logo-center .logo {

  max-height: 120px;

}



.social-left {

  

  display: flex;

  gap: 10px;

  

  align-items: center;

  justify-content: center;

  width: 150px;     /* larghezza fissa */

  height: 40px;    /* altezza fissa */

  padding: 8px;

  

  border-radius: 10px;

  border: 2px solid rgba(1, 44, 122, 1);

  background-color: rgba(255, 255, 255, 0.7);

  transition: background-color 0.3s ease;

  box-sizing: border-box;

}



.social-left a {

  color: #fff; /* o altro colore */

  font-size: 24px;

  text-decoration: none;

}



/*.social-right {

  display: flex;

  gap: 15px;

}



.social-right a {

  font-size: 24px;

  text-decoration: none;

}*/



/*.social-right {

  display: flex;

  flex-direction: column; /* Disposizione verticale */

/*  gap: 10px;



  position: absolute; /* Posizionamento in basso a destra */

/*  right: 20px;

  bottom: 20px;



  align-items: center;

  justify-content: center;



  width: 150px;     /* larghezza fissa */

/*height: 40px;    /* altezza fissa */

/*  padding: 8px;

  

  border-radius: 10px;

  border: 2px solid rgba(1, 44, 122, 1);

  background-color: rgba(255, 255, 255, 0.7);

  transition: background-color 0.3s ease;

  box-sizing: border-box;

}



.social-right a {

  color: #fff; /*#012C7A; /* più visibile su sfondo chiaro */

/*  font-size: 24px;

  text-decoration: none;

}*/





.social-right .instagram { color: #E1306C; }

.social-right .facebook  { color: #1877F2; }

.social-right .affiliazioni { color: #E1306C; }



.social-right a:hover {

  opacity: 0.7;

}



.social-left .instagram { color: #E1306C; }

.social-left .facebook  { color: #1877F2; }

.social-left .affiliazioni { color: #E1306C; }



.social-left a:hover {

  opacity: 0.7;

}



.fa-tiktok {

  color: #111111;

  filter: drop-shadow(2px 0px 0px #FD3E3E) drop-shadow(-2px -2px 0px #4DE8F4);

}

.fa-facebook {

  color: #3b5998;

}

.fa-instagram {

  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  -webkit-background-clip: text;

  /* Also define standard property for compatibility */

  background-clip: text;

  -webkit-text-fill-color: transparent;

}

/*.fa-handshake {*/

.fa-user-friends {

  color: #18741c; /* 114a13;*/

  filter: drop-shadow(3px 0px 0px #0149cd); /* 012c7a drop-shadow(-2px -2px 0px #4DE8F4);*/

}







.logo-social-row {

  display: flex;

  align-items: center;

  gap: 20px;

}



/*.cuore-roma {

  margin-left: auto;

  padding: 10px 20px;

  background: linear-gradient(to right, #f0f0f0, #ccc); /* ← cambia i colori */

  /*border-radius: 8px; /* facoltativo */

  /*color: #000; /* assicurati che il testo sia leggibile */

/*}*/



.cuore-roma-wrapper {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  width: 100%;

  padding: 0; /* RIMUOVE margini interni */

}





.cuore-roma {

  position: relative;

  display: inline-block;

  color: #fff;

  font-size: 20px;

  font-weight: bold;

  text-transform: uppercase;

  white-space: nowrap;

  padding: 10px 20px;

  z-index: 1;

  background: linear-gradient(to left, #003300, rgba(0, 0, 0, 0));

  /*border: 1px solid red; /* solo per test visibilità */

}



/*prova mobile*/

.mobile-only {

  display: none;

}

/* Solo su mobile: inverti visibilità */

@media (max-width: 375px) {

  .desktop-only {

    display: none;

  }

  .mobile-only {

    display: flex; /* usa flex per mantenere lo stile wrapper */

	/*justify-content: left;

    margin-bottom: 15px;*/

		

    justify-content: flex-end; /* allinea la scritta a destra */

    width: 100%; /* assicura che usi tutta la larghezza */

    margin-bottom: 12px;

		

    padding-right: 0; /* rimuove spazio a destra */

	 margin: 0;

 

  }

  .cuore-roma {

   font-size: 10px;

  }

}



@media (max-width: 480px) {

  .desktop-only {

    display: none;

  }

  .mobile-only {

    display: flex; /* usa flex per mantenere lo stile wrapper */

	/*justify-content: left;

    margin-bottom: 15px;*/

		

    justify-content: flex-end; /* allinea la scritta a destra */

    width: 100%; /* assicura che usi tutta la larghezza */

    margin-bottom: 12px;

		

    padding-right: 0; /* rimuove spazio a destra */

	 margin: 0;

 

  }

  .cuore-roma {

   font-size: 10px;

  }

}

@media (max-width: 768px) {

  .desktop-only {

    display: none;

  }

  .mobile-only {

    display: flex; /* usa flex per mantenere lo stile wrapper */

	/*justify-content: left;

    margin-bottom: 15px;*/

		

    justify-content: flex-end; /* allinea la scritta a destra */

    width: 100%; /* assicura che usi tutta la larghezza */

    margin-bottom: 12px;

		

    padding-right: 0; /* rimuove spazio a destra */

	 margin: 0;

 

  }

  .cuore-roma {

   font-size: 10px;

  }

}

/**/









.barra-superiore {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  padding: 0 0px;

  z-index: 2; /* Sopra il video */

  

 /* position: relative;*/

  top: 5px;

  left: 0;

  right: 0;

  

  /*display: flex;*/

  /*justify-content: space-between;*/

  /*padding: 0 0px;

  z-index: 2; /* Sopra il video 

  align-items: center;*/

}





/*per i contatti:*/

.contact-section-horizontal {

  display: flex;

  flex-direction: column;   /* metti tutti in verticale */

  gap: 5px;

  padding: 10px 15px;

  background-color: transparent;

  border-radius: 0px; /* opzionale: angoli arrotondati */

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* opzionale: un po' di profondità */

     /*width: 100%; /* si adatta solo al contenuto */

	 

	 font-size: 14px; /* o qualsiasi dimensione tu preferisca, tipo 12px, 13px, ecc. */

    align-items: stretch; /* per evitare scompensi verticali */

    justify-content: center;

    align-items: flex-start;

    font-family: 'Montserrat', sans-serif;

    text-align: left;

	height: 200px;

  overflow-y: auto;

	/*max-width: 100%;*/

  /*overflow-x: hidden; /* ← evita scroll orizzontale */

	 

}

 



.contact-item {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 14px;

  white-space: normal;   /* icona e testo sulla stessa linea */

   color: black;

   padding: 1px 0;   

  max-width: 100%;



}



.contact-title {

  width: 100%;                /* occupa tutta la larghezza */

  text-align: center;         /* centra il testo */

  display: block;             /* garantisce comportamento a blocco */

  margin-bottom: 4px;        /* spazio sotto se vuoi */

  margin-top: 1px;

  line-height: 1.2;

}









/*.contact-section {

  flex: 1 1 300px;

  max-width: 50%;

  font-family: 'Montserrat', sans-serif;

  text-align: left;

}



.contact-item {

  margin-bottom: 8px;

  color: black;

  padding: 2px 0;       /* ← AGGIUNGI questa linea se non c'è */

  /*line-height: 1.2;     /* ← AGGIUNGI per meno spazio verticale */

  

 /* display: flex;

  flex-direction: column;

  align-items: flex-start;

  max-width: 120px;

}*/

.contact-icon {

  color: #004d26;

  font-size: 18px;

  margin-right: 5px;

  margin-bottom: 4px;



}

/*.contact-section-horizontal {

	font-size: 14px; /* o qualsiasi dimensione tu preferisca, tipo 12px, 13px, ecc. */

/*   background-color: transparent;

   /*background-color: rgba(255, 255, 255, 0.8); /* bianco trasparente */

/*  padding: 10px 15px;

/*  border-radius: 0px; /* opzionale: angoli arrotondati */

/*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* opzionale: un po' di profondità */

  

/*  display: flex;

  align-items: stretch; /* per evitare scompensi verticali */

/*  justify-content: center;

  align-items: flex-start;

  gap: 15px;

  flex-wrap: wrap; /* va su due righe su schermi piccoli */

/*  font-family: 'Montserrat', sans-serif;

  text-align: left;

  width: auto; /* si adatta solo al contenuto */

 /*  max-width: 100%;  /* oppure 90%, se vuoi padding interno */

 /* margin: 0 auto;

}*/



.contact-wrapper {

  background-color: rgba(255, 255, 255, 0.8); /* stesso sfondo */

  padding: 15px;

  border-radius: 0px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  max-width: 500px; /* o qualsiasi larghezza desideri */

 

  margin: 0 auto;   /* per centrarlo orizzontalmente */

  

  /*height: 300px;

  overflow-y: auto;*/

}



/*.vertical-divider {

  width: 2px;

  height: 80px;

  background-color: #ccc;

  align-self: center;

}*/



hr {

  width: 50%;

  margin: 10px 0;

  border: 0;

  border-top: 1px solid #ccc;

}







/*@media (max-width: 768px) {

  .contact-wrapper {

    width: 90%;

    padding: 15px;

    box-sizing: border-box;

  }



  .contact-section-horizontal {

    display: flex;

    flex-direction: column;  /* verticale */

 /*   align-items: center;     /* centrato */

 /*   gap: 10px;

    padding: 0;

  }



  .contact-item {

    

	margin-top: 10px; /* o quanto vuoi */

/*	display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    white-space: nowrap;     /* normal permetti a capo */

  /*  text-align: center;

  }



  .vertical-divider {

    display: none; /* rimuove le linee verticali */

/*  }

}*/





	

	

	

	

	

	

	

	

	

	

	

	.mappa-e-contatti {

  display: flex;

  flex-wrap: wrap;

  gap: 50px;

  justify-content: left;

  align-items: flex-start;

  margin-top: 10px;

}



.mappa {

  flex: 1 1 300px;

  max-width: 90%;

  min-width: 280px;

}



.mappa-e-contatti .elementor-background-overlay {

  display: none;

}



.background-overlay {

  display: none;

}









  

  

  

  /* Base reset */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



/* Layout generale */

.section {

  padding: 0px 20px;

  background-color: #f8f8f8;

  padding-top: 0;

  margin-top: 0;

 

}



.container {

  display: flex;

  flex-wrap: wrap;

  max-width: 1200px;

  margin: 0 auto;

  gap: 20px;

}



/* Colonne */

.col-50 {

  flex: 1 1 48%;

  min-width: 300px;

}



/* Titoli */

h1, h3, h4 {

  margin-bottom: 15px;

}



h1 {

  font-size: 2.5rem;

}



h3 {

  font-size: 1.8rem;

}



h4 {

  font-size: 1.4rem;

}



/* Icon List */

ul.icon-list {

  list-style: none;

  margin-bottom: 10px;

  font-size: 1.2rem;

  padding: 0;

}



ul.icon-list li {

  display: flex;

  align-items: flex-start; /*center;*/

  margin-bottom: 6px;     /* ↓ Ridotto da 10px */

  line-height: 1.2;       /* ↓ Meno spazio verticale */

  text-align: left;

}





ul.icon-list i {

  margin-right: 10px;

flex-shrink: 0;

}



.spacer {

  height: 15px; /* o quanto spazio vuoi */

}





.spacer2 {

  height: 10px; /* o quanto spazio vuoi */

}



/* Icon contatti */

ul.icon-contatti {

  list-style: none;

  margin-bottom: 12px;

  font-size: 1.2rem;

  /*text-align: left;*/

  text-align: center;

  

}



.icon-contatti li i {

  font-size: 1.3rem;

}



ul.icon-contatti i {

  margin-right: 12px;

  text-align: left;



}

.icon-contatti .contact {

  /*font-size: 1.3rem;*/

   font-size: inherit;

  white-space: nowrap;

}

.icon-contatti li {

  text-shadow:

    -1px -1px 0 #000,  

     1px -1px 0 #000,

    -1px  1px 0 #000,

     1px  1px 0 #000;

}

.contact {

  white-space: nowrap;

}



.small-text {

  font-size: 1.0rem;

  font-weight: normal; /* ← rimuove il bold dell'h3, opzionale */

  margin: 0;            /* ← opzionale per compattezza */

  line-height: 1.2;     /* ← se vuoi meno altezza */

}

.small-text li {

  text-shadow:

    -1px -1px 0 #000,  

     1px -1px 0 #000,

    -1px  1px 0 #000,

     1px  1px 0 #000;

}









.icon-villaggio {

  /*color: #28a745 !important;*/

  color: #dc3545 !important;

}



.icon-sport {

  color: #007bff !important;

}



.icon-cibo {

  color: #ffc107 !important;

}



.icon-quota {

  color: #dc3545 !important;

}



.icon-telefono {

  color: #28a745 !important;

}



.icon-mail {

  color: #007bff !important;

}



.icon-dado {

  color: #28a745 !important;

}



.icon-futbol {

  color: #28a745 !important;

}

.icon-volley{

  /*color: #28a745 !important;*/

  color: #f58821 !important;

}



.icon-padel{

  /*color: #007bff !important;*/

  color: #04469c !important;

}



.icon-danza{

  color: #7a0155 !important;

}



.icon-risto{

  color: #8a2a2b !important;

}



.icon-eventi{

  color: #0000fe !important;

}



  #menu-link {

    color: white;

    text-decoration: none;

  }



  #menu-link:hover {

    color: lightgray;

  }

  .glightbox img {

  transition: opacity 0.5s ease-in-out;

  opacity: 1;

}



.glightbox img.loading {

  opacity: 0;

}



@media (max-width: 375px) {

  .glightbox img {

	  will-change: opacity;

    transition: opacity 0.5s ease-in-out;

    opacity: 1;

  }



  .glightbox img.loading {

    opacity: 0;

  }

}

@media (max-width: 480px) {

  .glightbox img {

	  will-change: opacity;

    transition: opacity 0.5s ease-in-out;

    opacity: 1;

  }



  .glightbox img.loading {

    opacity: 0;

  }

}



@media (max-width: 768px) {

  .glightbox img {

	  will-change: opacity;

    transition: opacity 0.5s ease-in-out;

    opacity: 1;

  }



  .glightbox img.loading {

    opacity: 0;

  }

}

 /*     a#menu-link {

      display: inline-block;

      text-decoration: none;

    }

	

  #menu-link:hover img {

  opacity: 0.8;

  transition: opacity 0.3s;

}

  

#slideshow-image {

  display: block;

  opacity: 1 !important;

  position: static !important;

}

  .slideshow {

  width: 100%;

  max-width: 500px;

  height: auto;

  overflow: hidden;

  position: relative;

  margin: 0 auto; /* centra il contenitore */

/*}



.slideshow img {

  width: 100%;

  height: auto;

  position: absolute;

  opacity: 0;

  transition: opacity 1s ease-in-out;

}



.slideshow img.active {

  opacity: 1;

}

*/





/* Social icons */

.social-icons {

  display: flex;

  gap: 10px;

  margin-top: 20px;

}



.social-icons a {

  color: #000;

  font-size: 1.5rem;

  transition: transform 0.3s ease;

}



.social-icons a:hover {

  transform: scale(1.2);

}



/* Toggle FAQ */

.toggle {

  margin-top: 20px;

}



.toggle-item {

  margin-bottom: 10px;

  cursor: pointer;

}



.toggle-title {

  background: #e0e0e0;

  padding: 10px;

  font-weight: bold;

}



.toggle-content {

  display: none;

  padding: 10px;

  background: #fff;

  border: 1px solid #e0e0e0;

}



.hero-section2 {

  display: flex;

  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  height: 100px;

  background-image: url('../img/bannerblu.png');

  /*background-image: url('../img/bannerdrivillage.png');*/

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;

}



.section .hero-section2 {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}



.hero-content2 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 2;

  

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* ✅ forza altezza */

}



.hero-content2 img {

  width: 80%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}



/* Optional overlay per leggibilità */

.hero-section2::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.hero-content2 h1 {

  margin: 0;

  line-height: 1;

}



.hero-content2 a {

  display: block;

  margin: 0;

  padding: 0;

}





.hero-section-calcio {

  display: flex;

  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  height: 100px;

  background-image: url('../img/bannerblu.png');

  /*background-image: url('../img/bannerdricalcio.png');*/

  /*background-color: white !important; /* #FFFFFF; #f8f8f8*/

  

  

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;



}



.section .hero-section-calcio {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}





.section {	

  /*width: 100vw;*/

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  width: 100%;

  /*margin: 0;*/

  /*left: 0;

  right: 0;*/

}







*, *::before, *::after {

  box-sizing: border-box;

}





.hero-content-calcio {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 2;

  

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* ✅ forza altezza */

}



.hero-content-calcio img {

  width: 80%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}





.left-img {

  position: absolute;

  left: 21rem;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

}



.left-img img {

  width: 100%;

  max-width: 100px;

  max-height: 90px;

}



.center-img img {

  width: 100%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}



/* ✅ VERSIONE MOBILE */

@media (max-width: 375px) {

 .left-img {

  left: 2rem;

 

}



  .left-img img {

    max-width: 70px;

    max-height: 60px;

  }



  .center-img img {

    max-width: 200px;

    max-height: 70px;

  }

}



@media (max-width: 480px) {

 .left-img {

  left: 2rem;

 

}



  .left-img img {

    max-width: 70px;

    max-height: 60px;

  }



  .center-img img {

    max-width: 200px;

    max-height: 70px;

  }

}



@media (max-width: 768px) {

 .left-img {

  left: 2rem;

 

}



  .left-img img {

    max-width: 70px;

    max-height: 60px;

  }



  .center-img img {

    max-width: 200px;

    max-height: 70px;

  }

}





/* Optional overlay per leggibilità */

.hero-section-calcio::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.hero-content-calcio h1 {

  margin: 0;

  line-height: 1;

}



.hero-content-calcio a {

  display: block;

  margin: 0;

  padding: 0;

}



.hero-section-beach {

  display: flex;

  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  height: 100px;

  background-image: url('../img/bannerblu.png');

  /*background-image: url('../img/bannerdribeach.jpg');*/

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;

}



.section .hero-section-beach {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}



.hero-content-beach {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 2;

  

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* ✅ forza altezza */

}



.hero-content-beach img {

  width: 80%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}



/* Optional overlay per leggibilità */

.hero-section-beach::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.hero-content-beach h1 {

  margin: 0;

  line-height: 1;

}



.hero-content-beach a {

  display: block;

  margin: 0;

  padding: 0;

}



.hero-section-padel {

  display: flex;

  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  height: 100px;

  background-image: url('../img/bannerblu.png');

  /*background-image: url('../img/bannerdripadel.jpg');*/

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;

}



.section .hero-section-padel {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}



.hero-content-padel {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 2;

  

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* ✅ forza altezza */

}



.hero-content-padel img {

  width: 80%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}



/* Optional overlay per leggibilità */

.hero-section-padel::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.hero-content-padel h1 {

  margin: 0;

  line-height: 1;

}



.hero-content-padel a {

  display: block;

  margin: 0;

  padding: 0;

}



.hero-section-danza {

  display: flex;

  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  height: 100px;

  background-image: url('../img/bannerblu.png');

  /*background-image: url('../img/bannerdridanza.jpg');*/

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;

}



.section .hero-section-danza {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}



.hero-content-danza {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 2;

  

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* ✅ forza altezza */

}



.hero-content-danza img {

  width: 80%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}



/* Optional overlay per leggibilità */

.hero-section-danza::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.hero-content-danza h1 {

  margin: 0;

  line-height: 1;

}



.hero-content-danza a {

  display: block;

  margin: 0;

  padding: 0;

}





@media (max-width: 375px) {

  .hero-content-danza img {

    width: 90%;  /* prende quasi tutta la larghezza ma resta contenuta */

    max-width: 100%; /* evita overflow */

    height: auto;

  }

}



.hero-section-pool {

  display: flex;

  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  height: 100px;

  background-image: url('../img/bannerblu.png');

  /*background-image: url('../img/bannerdripool.jpg');*/

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;

}



.section .hero-section-pool {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}



.hero-content-pool {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 2;

  

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* ✅ forza altezza */

}



.hero-content-pool img {

  width: 80%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}



/* Optional overlay per leggibilità */

.hero-section-pool::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.hero-content-pool h1 {

  margin: 0;

  line-height: 1;

}



.hero-content-pool a {

  display: block;

  margin: 0;

  padding: 0;

}



.hero-section-risto {

  display: flex;

  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  height: 100px;

  background-image: url('../img/bannerblu.png');

  /*background-image: url('../img/bannerdriristo.jpg');*/

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;

}



.section .hero-section-risto {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

}



.hero-content-risto {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: 2;

  

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%; /* ✅ forza altezza */

}



.hero-content-risto img {

  width: 80%;

  max-width: 300px;

  max-height: 90px;

  display: block;

  margin: 0 auto;

}



/* Optional overlay per leggibilità */

.hero-section-risto::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.hero-content-risto h1 {

  margin: 0;

  line-height: 1;

}



.hero-content-risto a {

  display: block;

  margin: 0;

  padding: 0;

}



body > section:first-of-type {

  margin-top: 0 !important;

  padding-top: 0 !important;

}



.field-info,

    .school-info {

      margin-top: 1.5rem;

    }



    .icon-list {

      list-style: none;

    }



    .icon-list li {

      margin: 1.8rem 0;

    }



    .icon-list i {

      margin-right: 0.5rem;

      color: white; /*#004d26;*/

    }

	

	

    .contact {

      margin: 1rem 0;

    }



    .social-icons a {

      margin-right: 1rem;

      font-size: 1.5rem;

      color: #333;

    }



   /* .carousel {

      margin-top: 2rem;

    }*/



    @media (max-width: 375px) {

      .section-title {

        flex-direction: column;

        text-align: center;

      }



      .hero-section2 {

        height: 80px;

      }

	  }

	  

    @media (max-width: 480px) {

      .section-title {

        flex-direction: column;

        text-align: center;

      }



      .hero-section2 {

        height: 80px;

      }

	  }

    @media (max-width: 768px) {

      .section-title {

        flex-direction: column;

        text-align: center;

      }



      .hero-section2 {

        height: 80px;

      }

	  

	 

/*.hero-content {

 /* position: relative;

  z-index: 1; /* davanti al video */

  /*text-align: center;

  padding-top: 10px;

}

      header img {

        max-width: 200px;

		height: 300px;

      }

	  

/*	  .hero-section video {

 

 position: absolute;

  top: 50%;

  left: 50%;

  width: 80%;

  height: 80%;

  object-fit: cover;

  transform: translate(-50%, -50%);

  z-index: 0;*/

}

	  

	  

    /*}*/

	

	.logo-home {

    position: absolute; /* o fixed se vuoi che sia visibile sempre sullo schermo */

    bottom: 0;

    left: 0;

    z-index: 2;

    padding: 20px;

}



.logo-home img {

   

    max-width: 50px !important;

    max-height: 50px !important;

	/* display: block;*/

  margin: 0 auto;



  }

@media (max-width: 375x) {

  .hero-section {

    height: 120px;

    position: relative;

    overflow: hidden;

  }



 /* .hero-section video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 120px;

    object-fit: cover;

    z-index: 0;

  }*/







  .hero-content {

    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px;

    text-align: center;

  }



  .hero-content img {

   

    max-width: 300px !important;

    max-height: 80px !important;

	 display: block;

  margin: 0 auto;



  }



  .social-left {

    position: absolute;

    bottom: 10px;

    left: 10px;

    z-index: 5;

    display: flex;

    gap: 0; /* ← più strette (prima era 10px) */

	align-items: center;

  justify-content: center;

  width: 100px;     /* larghezza fissa */

  height: 30px;    /* altezza fissa */

  padding: 8px;

  

  border-radius: 10px;

  border: 2px solid rgba(1, 44, 122, 1);

  background-color: rgba(255, 255, 255, 0.7);

  transition: background-color 0.3s ease;

  box-sizing: border-box;

  }



  .social-left a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 16px;

    text-decoration: none;

  /*margin: 0;

  padding: 0;

  background: none;

  border: none;*/

  }

  }	

  

@media (max-width: 480px) {

  .hero-section {

    height: 120px;

    position: relative;

    overflow: hidden;

  }



 /* .hero-section video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 120px;

    object-fit: cover;

    z-index: 0;

  }*/







  .hero-content {

    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px;

    text-align: center;

  }



  .hero-content img {

   

    max-width: 300px !important;

    max-height: 80px !important;

	 display: block;

  margin: 0 auto;



  }



  .social-left {

    position: absolute;

    bottom: 10px;

    left: 10px;

    z-index: 5;

    display: flex;

    gap: 0; /* ← più strette (prima era 10px) */

	align-items: center;

  justify-content: center;

  width: 100px;     /* larghezza fissa */

  height: 30px;    /* altezza fissa */

  padding: 8px;

  

  border-radius: 10px;

  border: 2px solid rgba(1, 44, 122, 1);

  background-color: rgba(255, 255, 255, 0.7);

  transition: background-color 0.3s ease;

  box-sizing: border-box;

  }



  .social-left a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 16px;

    text-decoration: none;

  /*margin: 0;

  padding: 0;

  background: none;

  border: none;*/

  }

  }	

	

	

@media (max-width: 768px) {

  .hero-section {

    height: 120px;

    position: relative;

    overflow: hidden;

  }



 /* .hero-section video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 120px;

    object-fit: cover;

    z-index: 0;

  }*/







  .hero-content {

    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px;

    text-align: center;

  }



  .hero-content img {

   

    max-width: 300px !important;

    max-height: 80px !important;

	 display: block;

  margin: 0 auto;



  }



  .social-left {

    position: absolute;

    bottom: 10px;

    left: 10px;

    z-index: 5;

    display: flex;

    gap: 0; /* ← più strette (prima era 10px) */

	align-items: center;

  justify-content: center;

  width: 100px;     /* larghezza fissa */

  height: 30px;    /* altezza fissa */

  padding: 8px;

  

  border-radius: 10px;

  border: 2px solid rgba(1, 44, 122, 1);

  background-color: rgba(255, 255, 255, 0.7);

  transition: background-color 0.3s ease;

  box-sizing: border-box;

  }



  .social-left a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 16px;

    text-decoration: none;

  /*margin: 0;

  padding: 0;

  background: none;

  border: none;*/

  }

  }





.social-left {

  

  display: flex;

  gap: 10px;

  

  align-items: center;

  justify-content: center;

  width: 150px;     /* larghezza fissa */

  height: 40px;    /* altezza fissa */

  padding: 8px;

  

  border-radius: 10px;

  border: 2px solid rgba(1, 44, 122, 1);

  background-color: rgba(255, 255, 255, 0.7);

  transition: background-color 0.3s ease;

  box-sizing: border-box;

}



.social-left a {

  color: #fff; /* o altro colore */

  font-size: 24px;

  text-decoration: none;

}



/*.social-right {

  display: flex;

  gap: 15px;

}



.social-right a {

  font-size: 24px;

  text-decoration: none;

}*/



.social-right {

  position: absolute;

  top: 10px; /* alzato per evitare taglio */

  right: 10px;



  display: flex;

  flex-direction: column;

  align-items: center;     /* centra le icone */

  gap: 10px;



  padding: 8px;

  background-color: rgba(255, 255, 255, 0.8);

  border: 2px solid rgba(1, 44, 122, 1);

  border-radius: 12px;



  box-sizing: border-box;

  z-index: 9999;



  /* forza forma verticale */

  width: auto;

  height: 110px;

}





.social-right a {

  display: flex;

  align-items: center;

  justify-content: center;



  width: 30px;

  height: 30px;



  font-size: 20px;

  color: white;

 /* background-color: #012C7A;*/

  /*border-radius: 50%;*/

  text-decoration: none;

}



@media (max-width: 375px) {

	.social-right {

    position: absolute;

    top: 3px;

    right: 3px;



    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1px ; /* icone più vicine */



    /*padding: 6px;*/

	padding: 0px 4px !important; /* 2px sopra/sotto, 6px destra/sinistra */

    background-color: rgba(255, 255, 255, 0.9);

    

	border: 2px solid rgba(1, 44, 122, 1);

    border-radius: 10px;



    box-sizing: border-box;

    z-index: 9999;



    width: auto;

    height: auto !important; /* lascia che cresca in base alle icone */

  }



  .social-right a {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 28px;

    height: 28px;



    font-size: 16px; /* icone più piccole */

    color: white;

   

    border-radius: 50%;

    text-decoration: none;

	

	    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

  }

    /* Elimina spazi residui generati da icone */

  .social-right a i {

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

    display: block; /* assicura altezza compatta */

  }





  /* 👇 blocca eventuali elementi vuoti */

  .social-right a:empty {

    display: none !important;

  }

  

  .social-right > *:not(a) {

  display: none !important;

}



}



@media (max-width: 480px) {

	.social-right {

    position: absolute;

    top: 3px;

    right: 3px;



    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1px ; /* icone più vicine */



    /*padding: 6px;*/

	padding: 0px 4px !important; /* 2px sopra/sotto, 6px destra/sinistra */

    background-color: rgba(255, 255, 255, 0.9);

    

	border: 2px solid rgba(1, 44, 122, 1);

    border-radius: 10px;



    box-sizing: border-box;

    z-index: 9999;



    width: auto;

    height: auto !important; /* lascia che cresca in base alle icone */

  }



  .social-right a {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 28px;

    height: 28px;



    font-size: 16px; /* icone più piccole */

    color: white;

   

    border-radius: 50%;

    text-decoration: none;

	

	    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

  }

    /* Elimina spazi residui generati da icone */

  .social-right a i {

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

    display: block; /* assicura altezza compatta */

  }





  /* 👇 blocca eventuali elementi vuoti */

  .social-right a:empty {

    display: none !important;

  }

  

  .social-right > *:not(a) {

  display: none !important;

}



}



@media (max-width: 768px) {

	.social-right {

    position: absolute;

    top: 3px;

    right: 3px;



    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1px ; /* icone più vicine */



    /*padding: 6px;*/

	padding: 0px 4px !important; /* 2px sopra/sotto, 6px destra/sinistra */

    background-color: rgba(255, 255, 255, 0.9);

    

	border: 2px solid rgba(1, 44, 122, 1);

    border-radius: 10px;



    box-sizing: border-box;

    z-index: 9999;



    width: auto;

    height: auto !important; /* lascia che cresca in base alle icone */

  }



  .social-right a {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 28px;

    height: 28px;



    font-size: 16px; /* icone più piccole */

    color: white;

   

    border-radius: 50%;

    text-decoration: none;

	

	    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

  }

    /* Elimina spazi residui generati da icone */

  .social-right a i {

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

    display: block; /* assicura altezza compatta */

  }





  /* 👇 blocca eventuali elementi vuoti */

  .social-right a:empty {

    display: none !important;

  }

  

  .social-right > *:not(a) {

  display: none !important;

}



}

/*.social-right {

  position: absolute;            /* oppure absolute, ma fixed è più stabile */

/*  bottom: 10px;

  right: 20px;



  display: flex;

  flex-direction: column;     /* verticale */

/*  gap: 10px;



  padding: 10px;

  border-radius: 10px;

  background-color: rgba(255, 255, 255, 0.7);

  border: 2px solid rgba(1, 44, 122, 1);

  box-sizing: border-box;

  z-index: 9999;              /* sempre visibile sopra altri elementi */

/*}*/

/*.social-right {

  display: flex;

  flex-direction: column; /* Disposizione verticale */

  /*gap: 8px;





/*  align-items: center;

/*  justify-content: center;

  /*width: 50px;     /* larghezza fissa */

  /*height: 140px;    /* altezza fissa */

/*  padding: 8px;

/*  transition: background-color 0.3s ease;

}*/



/*.social-right a {

  color: #fff; /*#012C7A; /* più visibile su sfondo chiaro */

/*  font-size: 24px;

  text-decoration: none;

}*/

	

	

	

	

	

	.icon-phone {

  background-color: #25D366; /* verde WhatsApp o simile */

  color: white;

  padding: 10px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  width: 40px;

  height: 40px;

  transition: background-color 0.3s ease;

}



.icon-phone:hover {

  background-color: #1ebe5d; /* più scuro al passaggio del mouse */

}





.icon-envelope {

  background-color: #007bff; /* Azzurro Bootstrap o simile */

  color: white;

  padding: 10px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  width: 40px;

  height: 40px;

  transition: background-color 0.3s ease;

}



.icon-envelope:hover {

  background-color: #0069d9; /* Azzurro più scuro al passaggio */

}

.icon-whatsapp {

  background-color: #25D366;     /* Verde WhatsApp */

  color: white !important;       /* Bianco icona */

  padding: 12px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  text-decoration: none;

  font-size: 22px;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s ease;

}



.icon-whatsapp:hover {

  background-color: #1DA851;     /* Sfondo più scuro al passaggio */

}







/* SFONDIIIII*/



.sfondo-drivillage {

  /*background-color: #f5f5f5; /* fallback */

  background-image: url('../img/sfondodrivillage.jpeg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*filter: brightness(1.4) contrast(0.9); /* più evidente */

  filter: none;

  position: relative;

  min-height: 400px; /* assicurati che abbia altezza */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  

  

  justify-content: center;   /* centra orizzontalmente */

  

  overflow: hidden;

  

  width: 100vw;

  

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  

}

.sfondo-dricalcio {

  /*background-color: #f5f5f5; /* fallback */

  background-image: url('../img/sfondodricalcio.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*filter: brightness(1.4) contrast(0.9); /* più evidente */

  filter: none;

  position: relative;

  min-height: 400px; /* assicurati che abbia altezza */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  

  

  justify-content: center;   /* centra orizzontalmente */

  

  overflow: hidden;

 

  width: 100vw;

  /*width: 100%;*/

    left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  

}





.sfondo-dribeach {

  /*background-color: #f5f5f5; /* fallback */

  background-image: url('../img/sfondodribeach.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*filter: brightness(1.4) contrast(0.9); /* più evidente */

  filter: none;

  position: relative;

  min-height: 400px; /* assicurati che abbia altezza */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  

  

  justify-content: center;   /* centra orizzontalmente */

  

  overflow: hidden;

  

  width: 100vw;

  

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  

}



.sfondo-dripadel {

  /*background-color: #f5f5f5; /* fallback */

  background-image: url('../img/sfondodripadel.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*filter: brightness(1.4) contrast(0.9); /* più evidente */

  filter: none;

  position: relative;

  min-height: 400px; /* assicurati che abbia altezza */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  

  

  justify-content: center;   /* centra orizzontalmente */

  

  overflow: hidden;

  

  width: 100vw;

  

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  

}



.sfondo-dridanza {

  /*background-color: #f5f5f5; /* fallback */

  background-image: url('../img/sfondodridanza.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*filter: brightness(1.4) contrast(0.9); /* più evidente */

  filter: none;

  position: relative;

  min-height: 400px; /* assicurati che abbia altezza */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  

  

  justify-content: center;   /* centra orizzontalmente */

  

  overflow: hidden;

  

  width: 100vw;

  

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  

}



.sfondo-dripool {

  /*background-color: #f5f5f5; /* fallback */

  /*background-image: url('../img/sfondodripool.jpg');*/

  background-image: url('../img/bouganville.jpg');

  /*background-image: url('../img/prova drieventi.jpeg');*/

  /*background-image: url('../img/sfondodrieventi.jpg');*/

  

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*filter: brightness(1.4) contrast(0.9); /* più evidente */

  filter: none;

  position: relative;

  min-height: 400px; /* assicurati che abbia altezza */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  

  

  justify-content: center;   /* centra orizzontalmente */

  

  overflow: hidden;

  

  width: 100vw;

  

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  

}





.sfondo-driristo {

  /*background-color: #f5f5f5; /* fallback */

  /*background-image: url('../img/sfondodriristo.jpg');*/

  background-image: url('../img/sfondodriristo2.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*filter: brightness(1.4) contrast(0.9); /* più evidente */

  filter: none;

  position: relative;

  min-height: 400px; /* assicurati che abbia altezza */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  text-align: center;

  

  

  justify-content: center;   /* centra orizzontalmente */

  

  overflow: hidden;

  

  width: 100vw;

  

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  

}





.overlay-trasparente {

  position: absolute;

  top: 0; left: 0;

  width: 100%;

  height: 100%;

  /*background-color: rgba(0, 0, 0, 0.1); /* molto più chiaro */

  z-index: 1;

}



/*.overlay-trasparente::before {

  content: '';

  position: absolute;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background-color: rgba(0, 0, 0, 0.3);

  pointer-events: none;

}*/







.contenuto {

  position: relative;

  z-index: 2; /* Più alto dell'overlay */

  max-width: 800px;

  }

  

  

  

  

.sfondodri {

  /*filter: brightness(1.0);*/

 /* background-image: url('../img/fotodrone2.jpg');*/

background-image: url('../img/bamboo.jpg');

background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  

  

  }

  

  

  /* Ottimizzazione per dispositivi mobili */

@media (max-width: 768px) {

 /* .sfondodri {

    background-position: center top;

    background-size: cover;

    /*min-height: 300px; /* o qualsiasi altezza minima tu voglia */

  /*}*/

}





/*.colonna-sinistra {

  background-image: url('../img/sfondodri.jpg');

  }



.colonna-destra {

  background-image: url('../img/sfondodri.jpg');

  }*/



.colonna-sinistra,

.colonna-destra {

  flex: 1 1 50%;

  /*min-height: 100vh;*/

  position: relative;

  background-size: cover;

  background-position: center;

  display: flex;

  /*align-items: stretch;*/

  /*overflow: hidden;*/

}



@media (max-width: 375px) {

  .colonna-sinistra,

  .colonna-destra {

    flex: 1 1 100%;

  }

}



@media (max-width: 480px) {

  .colonna-sinistra,

  .colonna-destra {

    flex: 1 1 100%;

  }

}



@media (max-width: 768px) {

  .colonna-sinistra,

  .colonna-destra {

    flex: 1 1 100%;

  }

}





.info-left, .info-right {

 

   width: 100%;

  padding: 10px;

  /*background: rgba(0, 0, 0, 0.5);*/

  color: white;

  overflow-y: auto;

  box-sizing: border-box;

}



.bg-wrapper {

  position: relative;

  width: 100%;

  height: 100%;

}



.bg-img {

  width: 100%;

  height: auto;

  display: block;

}

/*.contact-wrapper {

  background-color: #111;

  color: white;

  padding: 20px;

}*/



@media (max-width: 375px) {

  .left-column,

  .right-column {

    flex: 1 1 90%;

    min-width: 0;

  }



  .two-column-layout {

    flex-direction: column;

  }

}



@media (max-width: 480px) {

  .left-column,

  .right-column {

    flex: 1 1 100%;

    min-width: 0;

  }



  .two-column-layout {

    flex-direction: column;

  }

}



@media (max-width: 768px) {

  .left-column,

  .right-column {

    flex: 1 1 100%;

    min-width: 0;

  }



  .two-column-layout {

    flex-direction: column;

  }

}







/* Layout a due colonne */

.two-column-layout {

  display: flex;

  flex-wrap: wrap;

  gap: 40px;

  align-items: flex-start;

  margin-top: 0px; /* ← Aggiunto margine per abbassare */

}



.two-column-layout2 {

 display: flex;

  flex-wrap: wrap;

  gap: 0px;

  width: 100%;

  /*min-height: 100vh;*/

}





.left-column {

  flex: 1 1 45%;

  /*min-width: 280px;*/

  min-width: 0;

}



.right-column {

  flex: 1 1 50%;

  min-width: 300px;

  position: relative;

}



.left-column, .right-column{ position:relative; z-index:2; }



/* Carousel */

.image-carousel {

  overflow: hidden;

  width: 100%;

  position: relative;



}





.carousel-wrapper {

  position: relative;

  overflow: hidden;

  /*/*max-width: 400px; /* oppure il valore che vuoi */

  /*margin: 0 auto;   /* centra orizzontalmente */

   max-width: 400px; /* o 100% per tutto lo spazio disponibile */

  margin: 0 auto;   /* ✅ CENTRA orizzontalmente */

  width: 100%;

}



.carousel-slides {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}



.carousel-slides-DC {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}



.carousel-slides-DV {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}



.carousel-slides-DB {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}



.carousel-slides-DP {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}



.carousel-slides-DE {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}



.carousel-slides-DD {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}



.carousel-slides-DR {

  display: flex;

  transition: transform 0.5s ease-in-out;

  /*width: 100%;*/

}

/*soluzione con foto orizzontali piccole

/*.carousel-slides img {

  width: 100%; /* ← NON 300% */

/*  height: auto;

  max-height: 700px; 

  object-fit: contain;

}*/

/*soluzione con foto orizzontali grandi*/

.carousel-slides img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel-slides-DC img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel-slides-DV img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel-slides-DB img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel-slides-DP img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel-slides-DD img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel-slides-DE img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel-slides-DR img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/*.carousel-container{

  min-width: 100%;

  min-height:100%;

  box-sizing: border-box;

 /* padding-right: 10px;*/

 

/*}*/



.slide {

  min-width: 100%;

  min-height:100%;

  box-sizing: border-box;

 /* padding-right: 10px;*/

 

}





/* Pulsanti navigazione */

.carousel-prev,

.carousel-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.5);

  color: #fff;

  border: none;

  font-size: 16px;   /* ← RIDOTTA da 24px */

  padding: 6px;      /* ← PIÙ PICCOLO */

  z-index: 10;

  cursor: pointer;

  border-radius: 50%;

  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  left: unset;

  right: unset;

}





.carousel-prev {

  left: 10px;

}



.carousel-next {

  right: 10px;

}







.carousel-prev:hover,

.carousel-next:hover {

  background: rgba(0, 0, 0, 0.8);

}



.left-column h3,

.left-column .icon-list li,

.left-column .contact a

/*.left-column .inline-social-icons a*/ {

  text-shadow:

    -1px -1px 0 #000,

     1px -1px 0 #000,

    -1px  1px 0 #000,

     1px  1px 0 #000;

  color: white; /* Assicurati che il colore base sia visibile */

}



.left-column {

  background-color: rgba(0, 0, 0, 0.4); /* sfondo nero semitrasparente */

  color: white;

  padding: 10px;

  border-radius: 14px;

  box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* effetto sfumato esterno */

}







.lightbox {

  display: none;

  position: fixed;

  z-index: 9999;

  padding-top: 60px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0,0,0,0.9);

}



.lightbox-content {

  display: block;

  margin: auto;

  max-width: 90%;

  max-height: 80vh;

}



.close {

  position: absolute;

  top: 30px;

  right: 35px;

  color: #fff;

  font-size: 40px;

  font-weight: bold;

  cursor: pointer;

}







html {

  scroll-behavior: smooth;

}



/* Freccia scroll-to-top */

.scroll-to-top {

  position: fixed;

  bottom: 30px;

  right: 30px;

  background-color: #004d26;

  color: white;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  font-size: 20px;

  text-align: center;

  line-height: 48px;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  z-index: 1000;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

  display: flex;

  align-items: center;

  justify-content: center;

}



.scroll-to-top.show {

  opacity: 0.5;

  pointer-events: auto;

}



@media (max-width: 375px) {

  .scroll-to-top {

    width: 40px;

    height: 40px;

    font-size: 18px;

  }

}



@media (max-width: 480px) {

  .scroll-to-top {

    width: 40px;

    height: 40px;

    font-size: 18px;

  }

}



@media (max-width: 768px) {

  .scroll-to-top {

    width: 40px;

    height: 40px;

    font-size: 18px;

  }

}



/*vecchio smussato*/

/*.drivillage-section {

  background-color: rgba(255, 255, 255, 0.7); /* bianco trasparente */

/*  padding: 4px 0; /* meno alto */

/*  width: 70%;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* bordi sfumati */

  /*/*box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); /* effetto sfumato esterno */

  /*backdrop-filter: blur(4px); /* solo se vuoi effetto vetro (opzionale) */

 /*   border-radius: 30px; /* ✅ angoli smussati */

	

/*}*/

/*.drivillage-inner {

  text-align: center;

  /*overflow: hidden;*/

}*/



/*prova*/

.drivillage-section {

  padding: 2px 0; /* meno alto */

  width: 60%;

}



/*.drivillage-image-wrapper {

  display: inline-block;

  padding: 8px;

  border-radius: 10px;

  border: 4px solid rgba(1, 44, 122, 1); /* bordo bianco trasparente 255, 255, 255, 0.5 */

  /*background-color: rgba(255, 255, 255, 0.7); /* bianco trasparente 255, 255, 255, 0.7 */

  /*transition: background-color 0.3s ease;

  

}*/



.drivillage-image-wrapper {

  display: flex; /* per centrare immagine */

  align-items: center;

  justify-content: center;

  width: 300px;     /* larghezza fissa */

  height: 60px;    /* altezza fissa */

  padding: 8px;

  border-radius: 10px;

  border: 4px solid rgba(1, 44, 122, 1);

  background-color: rgba(255, 255, 255, 0.7);

  transition: background-color 0.3s ease;

  box-sizing: border-box;

}



.drivillage-image-wrapper:hover {

  background-color: rgba(255, 255, 255, 0.5); /* bianco semitrasparente al passaggio del mouse */

}



.drivillage-image-wrapper img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}



.drivillage-inner {

  display: flex;

  justify-content: center;

}



/*fine prova*/









.drivillage-section .container {

  max-width: 350px;

  max-height: 60px;

  margin: 0 auto;

  padding: 0 20px;

}



@media (max-width: 375px) {

  .drivillage-section {

    width: 100%; /* sezione più larga su mobile (quasi full-width) */

  }



  .drivillage-image-wrapper {

    width: 100% !important; /*250%; /* contenitore più fluido */

    height: 50px; /* puoi aumentare se le immagini sono alte */

    padding: 5px;

  }



  .drivillage-inner {

    flex-direction: column; /* impila i contenitori verticalmente */

    /*align-items: center;*/

  }

  

  .spacer2 {

  height: 2px; /* o quanto spazio vuoi */

}

}



@media (max-width: 480px) {

  .drivillage-section {

    width: 100%; /* sezione più larga su mobile (quasi full-width) */

  }



  .drivillage-image-wrapper {

    width: 250%; /* contenitore più fluido */

    height: 50px; /* puoi aumentare se le immagini sono alte */

    padding: 5px;

  }



  .drivillage-inner {

    flex-direction: column; /* impila i contenitori verticalmente */

    /*align-items: center;*/

  }

  

  .spacer2 {

  height: 2px; /* o quanto spazio vuoi */

}

}



@media (max-width: 768px) {

  .drivillage-section {

    width: 100%; /* sezione più larga su mobile (quasi full-width) */

  }



  .drivillage-image-wrapper {

    width: 250%; /* contenitore più fluido */

    height: 50px; /* puoi aumentare se le immagini sono alte */

    padding: 5px;

  }



  .drivillage-inner {

    flex-direction: column; /* impila i contenitori verticalmente */

    /*align-items: center;*/

  }

  

  .spacer2 {

  height: 2px; /* o quanto spazio vuoi */

}

}



/*@media (max-width: 768px) {

  .drivillage-section {

    height: 65px; /* o anche meno, es. 150px */

   /* padding: 0px 20px; /* meno spazio interno */

 /*  padding: 0px 0;

   width: 85%;

    background-size: cover;

    background-position: center;

display: flex;

  justify-content: center;

  align-items: center;

	}



  .drivillage-section .hero-content2 img {

    max-width: 100px;

    max-height: 60px;

  }







}*/



/* Per le altre icone (telefono, mail, whatsapp) */

.inline-social-icons {

  display: flex;

  justify-content: center;  /* Centra orizzontalmente */

  align-items: center;      /* Centra verticalmente (se serve) */

  gap: 10px;

  margin-top: 10px;

  position: relative;   /* ← Aggiunto */

  z-index: 10;          /* ← Aggiunto */

  pointer-events: auto;

}





.inline-social-icons a {

  width: 44px;

  height: 44px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: white;

  text-decoration: none;

  font-size: 20px;

  padding: 10px;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s ease;

  position: relative;   /* ← necessario per z-index */

  z-index: 99;

}



/* Colori specifici */

.icon-phone {

  background-color: #25D366;

}

.icon-phone:hover {

  background-color: #1ebe5d;

}



.icon-envelope {

  background-color: #007bff;

}

.icon-envelope:hover {

  background-color: #0069d9;

}



.icon-whatsapp {

  background-color: #25D366;

}

.icon-whatsapp:hover {

  background-color: #1DA851;

}





/* Colori specifici */

.header-social-icons .instagram { color: #E1306C; }

.header-social-icons .facebook  { color: #1877F2; }

.header-social-icons .tiktok    { color: #000000; }

.header-social-icons .affiliazioni    { color: #000000; }





.site-title {

  font-size: 1.8rem;

  font-weight: bold;

  margin: 1rem 0;

  text-align: center;

}

.site-title a {

  text-decoration: none;

  color: #333;

}



.hero-section {

  position: relative;

  width: 100%;

 /* min-height: 10vh;*/

  overflow: hidden;

 /* height: auto;

  padding: 1px 0;*/

  /*background-image: url('../img/panoramica.jpeg');*/

  /*background-image: url('../img/bamboo.jpg'); /*, url('../img/bouganville.jpg');*/

  background-image: url('../img/fotodrone2.jpg');





  justify-content: center;   /* centra orizzontalmente */

  align-items: center;       /* centra verticalmente */

  /*height: 200px;*/

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  /*margin: 0;

  padding: 0;*/

  

}



.background-video {

      position: absolute;

      width: 100%;

      height: 100%;

      object-fit: cover;

      z-index: 1;

    }

	

.hero-section video {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: translate(-50%, -50%);

  z-index: 0;

}



.hero-section video {

  display: block;

}



.hero-content {

  position: relative;

  z-index: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  padding: 10px;

}



.logo-center .logo {

  max-width: 260px;

}





/* per colonna dri + mappa*/

.dribbling-info {

  padding: 40px 20px;

  background-color: #111;

  color: #fff;

}



/* Layout a due colonne */

.info-container {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  align-items: flex-start;

  margin-top: 0px; /* ← Aggiunto margine per abbassare */

}



/*.info-container {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  max-width: 1200px;

  margin: 0 auto;

}*/







.info-left a {

  display: block;

  margin: 10px 0;

  text-align: center;

}



.info-left img {

  max-width: 60%;

  height: auto;

  transition: transform 0.2s ease;

}



.info-left img:hover {

  transform: scale(1.05);

}



.small-map {

  /*width: 100%;

  height: 300px;

  border-radius: 8px;

  margin-bottom: 10px;*/

  

  width: 500px;   /* o 300px, a seconda di quanto la vuoi stretta */

  height: 250px;

  max-width: 100%; /* per responsività */

  border: 0;

  display: block;

  border-radius: 8px;

  margin: 0 auto; /* centra orizzontalmente */

  margin-bottom: 10px;

  

}



/*.contact-wrapper {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.contact-section-horizontal {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  align-items: center;

}



.contact-item {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 16px;

}



.contact-icon {

  color: #ffcc00;

  font-size: 18px;

}*/



.custom-toggle-title {

  cursor: pointer;

  font-weight: bold;

  color: WHITE;

  margin: 10px 0;



}

/*

.custom-toggle-content {

  display: none;

  padding: 10px;

 

  border-left: 3px solid #007bff;

  margin-bottom: 10px;

  

  background-color: rgba(0, 0, 0, 0.5); /* o un verde scuro */

 /* color: white;



}*/



.custom-toggle-content {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.4s ease;

  background-color: rgba(255,255,255,0.05); /* o altro */

  color: white; /* o nero, a seconda dello sfondo */

  padding: 0 10px;

  /*border: 1px solid rgba(255,255,255,0.3);*/

  margin-top: 5px;

}

.custom-toggle.active .custom-toggle-content {

  padding: 10px;

}





.affiliations {

  background-color: #000;

  color: #fff;

  padding: 40px 20px;

  text-align: center;

}



.affiliations h2 {

  margin-bottom: 20px;

  font-size: 1.5rem;

}



.logo-wrapper {

  background-color: #f2f2f2; /* sfondo più chiaro sotto i loghi */

 /*background-color: transparent;*/

  border-radius: 0px; /* opzionale: angoli arrotondati */

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* opzionale: un po' di profondità */

  padding: 20px;

  border-radius: 10px; /* opzionale, angoli arrotondati */

  display: inline-block; /* per non riempire tutta la larghezza se non serve */

}



.affiliations-logos {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 20px;

  align-items: center;

}



.affiliations-logos img {

  max-width: 100px;

  height: auto;

  object-fit: contain;

}



@media (max-width: 375px) {

  .affiliations-logos img {

    max-width: 80px;

  }

}



@media (max-width: 480px) {

  .affiliations-logos img {

    max-width: 80px;

  }

}



@media (max-width: 768px) {

  .affiliations-logos img {

    max-width: 80px;

  }

}



.carousel-img {

  width: 100%;

  display: none;

}

.carousel-img:first-child {

  display: block;

}