* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
	width: 100%;
	font-size: 90%;
	font-family	: Tahoma, Verdana, sans-serif;
 	background	: #ffffff url('/images/menutop-long.gif') repeat-x;
}

.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px;
}

h1 {
	color: #324f92;
	text-align: center;
	padding: 10px 0;
	font-size:20px;
	font-weight: 400;
	margin: 15px 0 0 0;
}

h2 {
color: #324f92;
text-align: center;
padding: 10px 0;
font-size:22px;
font-weight: 400;
margin: 0 0 15px 0;

}

h3 {
	color: #324f92;
	text-align: center;
	padding: 10px 0;
	margin: 15px 0 15px 0;
}

hr {
	margin:15px 0;
}
a {
	text-decoration: none;
	color:#000000;
}

a:hover {
	color: #324f92;
}

.button {
    background-color: #324f92;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 12px;
    border: none;
    border-radius: 15px;
    margin: 100px 0;
}
.button:hover {
    background-color: darkgrey;
    color: #324f92;
}

.headerInfo {
	display: flex;
	justify-content: flex-end;
	color:#ffffff;
	font-size: 10px;
}

.headerInfo a {
	text-decoration: none;
	color:#ffffff;
}

.headerInfo a:hover {
	text-decoration: none;
	color:darkgrey;
}

.logoSfondo{
	width:100%;
	background-color: #f7f7f7;
}
.logo {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
.logoImg {
	max-width: 70%;
}
.logoProfile {
	display:flex;
	justify-content: center;
}

.logoProfileCiao {
	padding: 0 20px 0 10px;
	align-self: center;
}
.logoProfileImg {
	align-self: center;
}

/*menu per gallery responsive raduno */
.galleryH img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
}


#darkbox { position:absolute;	top:0; left:0; background-color:#333; overflow: hidden; text-align:center; }
		.darkboximg { padding:5% 5% 2% 5%; }
		.fullsizelink { margin-bottom:2rem; }
		.fullsizelink a { color:white; }


.gallery {
   line-height:0;
   -webkit-column-count:5; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:5;
   -moz-column-gap:5px;
   column-count:5;
   column-gap:5px;
   margin-top:20px;
}

.gallery img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
}

@media screen and (max-width: 1200px) {
   .gallery {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
   }
}
@media screen and (max-width: 1000px) {
   .gallery {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
   }
}
@media screen and (max-width: 800px) {
   .gallery {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}
@media screen and (max-width: 400px) {
   .gallery {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}


/*gallery family */
.galleryFamily {
   line-height:0;
   -webkit-column-count:3; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:3;
   -moz-column-gap:5px;
   column-count:3;
   column-gap:5px;
   margin-top:20px;
}

.galleryFamily img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
}

@media screen and (max-width: 1200px) {
   .galleryFamily {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
   }
}
@media screen and (max-width: 1000px) {
   .galleryFamily {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}
@media screen and (max-width: 800px) {
   .galleryFamily {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}
@media screen and (max-width: 400px) {
   .galleryFamily {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}

/*menu navigazione raduno */
.navRaduno {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.itemNavRaduno {
	margin: 10px 5px 5px 5px;
	padding: 3px 10px;
	text-decoration	: none;
	background-color: #dfe0e2;
}
.itemNavRadunoSel {
	margin: 10px 5px 5px 5px;
	padding: 3px 10px;
	text-decoration	: none;
	background-color: darkgrey;
}
.navRaduno a:hover {
	color		: #ffffff;
	background	: #cfd6da;
	text-decoration	: none;
}


.locandina {
	text-align: center;
	margin-top: 20px;
}
.locandina p {
	margin:20px 0;
}
.locandina img {
	max-width: 100%;

}

.eventi {
	text-align: center;
	margin-top: 0px;
}
.eventi p {
	margin:15px 0;
}
.eventi img {
  width:300px;

	max-width: 100%;
  margin:0 10px;

}

.prenotaOra {
	text-align: center;
	margin-top: 20px;
}

.testo {
	line-height: 1.4;
}
.testo li {
	padding-bottom:3px;
}
.testoTitle {
	font-size: 15px;
	text-align:center;
	color:#ba6c06;
	padding: 15px 0;
	text-transform: uppercase;
}
.testoDesc {
	margin-bottom:20px;
}
.testoCentrato {
	text-align: center;
}
.testoRosso {
	color:red;
}
.testoPadding10{
	padding:10px 10px 0 10px;
}
.testoDesc img {
	padding:20px;
	text-align: center;
	max-width: 100%;
}
.testoList {
	margin-left:40px;
}
.testoEvidenza {
	border: solid 2px #324f92;
	padding: 10px;
	text-align:center;
}
.votaLocandina{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.votaLocandinaImg {
  height:290px;
	width: 225px;
}


.votaLocandinaFrame {
	padding: 7px;
    margin: 20px 10px;
    background-color: #f7f7f7;
}
.votaLocandinaBig {
	width: 100px;
}
.prenSel {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.prenSelForm {
	 margin:20px;
	 padding: 10px;
}

.borderCheckBox input[type=checkbox] {
	outline: 1px solid #324f92;
}

.bookingForm{
	display:flex;
    justify-content: center;
	margin-top: 15px;
}
.bookingFieldset {
	padding: 10px 5;
	background-color: #f7f7f7;
}
.bookingAreas {
	margin: 10px 10px;
}
.bookingColor {
	color:#324f92;
}
.row {
	display:flex;
    flex-direction:row;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 20px 10px 0px 10px;
}
.column {
	display:flex;
    flex-direction:column;
	justify-content: flex-start;
	margin: 10px 10px 0px 10px;
}
.item-group {
	flex:1;
    display:flex;
    flex-direction:column;
	margin: 3px 5px 3px 0;
}
.inputName {
	width:300px;
	/*margin: 0 10px 0 0;*/
}
.inputPlace {
	width:150px;
	/*margin: 0 10px 0 0;*/
}
.inputProv {
	width:50px;
	/*margin: 0 10px 0 0;*/
}
.inputDate {
	display:flex;
    flex-direction:row;
}
label {
    font-size: 14px;
    font-weight: 500;
	padding: 0 0 2px 0;
}

textarea {
	font-size: 17px;
  	padding: 0 10px;
  	color: #666;
  	border: 1px solid #d6d6d6;
  	border-radius: 4px;
  	background: white;
}
input[type="text"] {
  font-size: 17px;
  height: 30px;
  padding: 0 10px;
  color: #666;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: white;
}
.errori {
	color:red;
}
.inputSelect {
	font-size: 14px;
	height: 30px;
	max-width:300px;
	padding: 0 10px;
	color: #666;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	background: white;
  }

/*Footer*/
.footer{
	border-top:4px #324f92 solid;
	margin-top:35px;
	font-size: 11px;
	color: #324f92;
	display: flex;
	justify-content: space-between;
	padding: 10px;
}
.footer a {
	color: #324f92;
}


/* Natale*/
.paccoNatale{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.paccoNataleImg {
  height:100px;
	width: 100px;
}

.paccoNataleFrame {
	padding: 7px;
  margin: 20px 10px;
}


/*MediaScreen*/
@media screen and (max-width:768px) {
	.logo {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}
	.logoImg {
		max-width: 100%;
	}
	.headerInfo {
		display: none;
	}
	.navRaduno {
		display: flex;
		flex-wrap: wrap;
		background-color: #dfe0e2;
	}
	.logoProfile {
		padding:5px 0 10px 0;
	}

	.locandinaHide1 {
		display: none;
	}


}
@media screen and (min-width:768px) {
	.locandinaHide2 {
		display: none;
	}


}
/*Gadget  / allevatori */
.gadget {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
  align-items: center;
}
.gadget img {
	max-width:100%;
	width: 500px;
	padding:8px;
}


/*villaggio foto */
.villaggio {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.villaggio img {
	max-width:100%;
	width: 250px;
	padding:8px;
}
/*Sponsor raduno */
.sponsor {
	background-color: lightgrey;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.sponsor img {
	max-width:100%;
	width: 320px;
	padding:5px;
	margin: 6px;
    background-color: #324f92;
    border-radius: 25px;
}

/*salute*/

.salute {
  background-color: #ffffff;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 30px;
 padding: 20px 0;
 max-width: 1200px;
 margin: 0 auto;
}

.salute-card {
 background: #f7f7f7;
 border-radius: 15px;
 overflow: hidden;
 width: calc((100% - 60px) / 3); /* Esattamente 3 cards per riga */
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 min-width: 300px; /* Minimo per mantenere la leggibilità */
}

.salute-card img {
 width: 100%;
 padding: 0;
 margin: 0;
 border-radius: 15px 15px 0 0;
 background: none;
}

.salute-caption {
 padding: 15px;
 text-align: center;
 color: #324f92;
 font-size: 16px;
 line-height: 1.4;
 min-height: 70px;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Media query per tablet */
@media screen and (max-width: 992px) {
 .salute-card {
   width: calc((100% - 30px) / 2); /* 2 cards per riga */
 }
}

/* Media query per mobile */
@media screen and (max-width: 768px) {
 .salute {
   gap: 20px;
 }
 .salute-card {
   width: 100%; /* 1 card per riga */
   min-width: unset; /* Rimuove il min-width per schermi piccoli */
 }
}

/*Westy listing iscritti */
.westyListing {
	display: flex;
	justify-content:space-around;
	flex-wrap:wrap;

}

.westyListingInfo {
	background-color: lightgrey;
	max-width: 50%;
  border: 1px solid red;
}
.westyListingInfo img {
	max-width:100%;
	width: 120px;
	padding:3px;
	margin: 1px;
  background-color: #324f92;
}

/*comments articles*/
.formStyle {
	text-align: center;
}
.formStyle fieldset {
	border 		: 0;
	margin		: 10px 0 0 0;
	color		: #324f92;
}
.formStyle textarea  {
	background	: #f7f7f7;
	font-family	: Tahoma, Verdana, sans-serif;
}

.formStyleButton input {
	color: #ffffff;
	background: #324f92;
	border: 2px outset #6b8392;
	text-align	: center;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 12px;
    border: none;
    border-radius: 15px;
    margin: 10px 0 20px 0;
}
.formStyleButton input:hover {
	background-color: darkgrey;
    color: #324f92;
}
.formStyleTextarea {
	width: 100%;
    min-height: 75px;
	font-size:12px;
}

.commStyle {
	border-top: 1px solid #6b8392;
	margin: 0 0 35px 0;
	font-size: 13px;
}
.commStyle a {
	color	: #324f92;
	text-decoration: none;
}
.commStyle a:hover {
	color	: #324f92;
	text-decoration	: underline;
}
.commStyle img {
	float	: left;
	width	: 45px;
	border	: 1px solid #324f92;
	border-top: 0;
	padding	: 2px;
	margin	: 0 5px 0 0;
}

.commStyle a img {
	text-decoration	: none;
	background-color: #ffffff;
}
.commStyle a:hover img {
	text-decoration	: none;
	background-color: #f7f7f7;
}
.commStyleGrey {
	color: grey;
	font-size:12px;
}
 /*MENU TESTATA RESPONSIVE*/

  #checkbox1,
  .toggle {
	display: none;
  }

  .menu {
	padding: 0;
	margin: 0;
	height: 35px;
	border-radius: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	list-style-type: none;
	flex-wrap: nowrap;
  }

  .menu li a {
	text-decoration: none;
	align-self: center;
	border-radius: 5px;
	font-size: 14px;
	padding: 3px 7px;
	transition: background .2s linear;
  }


  .menuNav {
	background: #324f92;
  }

  .menuNav li a {
	color: #fff;
  }

  .menuNav li a:hover {
	background: #fff;
	color: #324f92;
  }


  @media screen and (max-width: 768px) {
	.toggle {
	  clear: both;
	  display: block;
	  text-align: center;
	  font-size: 14px;
	  line-height: 40px;
	  cursor: pointer;
	  width: 100%;
	  height: 40px;
	  font-size: 18px;
	  color: #595959;
	  background: #dbdbdb;
	  border-bottom-left-radius: 5px;
	  border-bottom-right-radius: 5px;
	  transition: all .1s linear;
	}
	.toggle:hover {
	  background: #cecece;
	}
	#checkbox1:checked + label .menuNav li {
	  opacity: 1;
	  visibility: visible;
	  transition: all .7s linear;
	}

	#checkbox1:checked + label .menuNav {
	  height: 300px;
	}
	.menu {
	  border-radius: 0px;
	  border-top-left-radius: 5px;
	  border-top-right-radius: 5px;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  align-items: center;
	  height: 0px;
	  transition: height .3s linear;

	}
	.menu li {
	  display: flex;
	  align-self: center;
	  /* width: 95%; */
	  opacity: 0;
	  visibility: hidden;
	  padding: 5px 0;
	}
	.menu li a {
	  /*width: 95%;*/
	  text-align: center;
	  align-self: center;
	  align-content: center;
	}
  }




  summary {
      cursor: pointer;
  }

  details[open] > summary:first-of-type {
      list-style-type: none;
      background-color: darkgrey;
  }

  details > summary:first-of-type {
      list-style: inside none;
  }
  /*-----------------------------------*\
    #FEATURE
  \*-----------------------------------*/

  .feature{
    margin-top:25px;
  }
  .feature h1 {
    font-size:30px;
    font-weight: 400;
    margin: 0 0 15px 0;
  }

  .feature h2,
  .feature2 h2,
  .feature3 h2 {
    font-size:30px;
    font-weight: 400;
    margin: 0 0 15px 0;
  }

  .feature h3,
  .feature2 h3,
  .feature3 h3 {
    margin: 5px 0 0 0;
    padding: 0 0;
    font-weight: 400;
    text-align: left;
  }

.featurecolor {
  background: linear-gradient(to bottom, #ffffff 5%, #d0d3d5 40%, #d0d3d5 60%, #ffffff 95%);
  margin: 10px 0;
}

  .feature-banner {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 25px;
    margin-bottom: 30px;
  }

  .feature-content {
    padding: 24px 16px 0;
  }

  .feature-text {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .disclaimer {
    font-size:13px;
  }

  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .feature-list {
    padding-bottom:15px;
  }

  .feature-list li {
    list-style:none;
    padding-left:15px;
  }

  /*-----------------------------------*\
    #BREEDER
  \*-----------------------------------*/

  .region-list {
        list-style: none;
        padding: 0;
        margin: 20px;
        text-align: center;
    }

    .region-list li {
        margin: 10px 0;
    }

    .region-list label {
        display: inline-block;
        padding: 20px 20px;
        background-color: #324f92;
        color: white;
        font-size: 15px;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 15px;
        cursor: pointer;
        width:100%;
    }

    .region-list label:hover {
        background-color: darkgrey;
        color: #324f92;
    }

    .breeder-button {
        background-color: darkgrey;
        color: #ffffff;
        font-size: 13px;
        font-weight: 400;
        padding: 6px 12px;
        margin-top:12px;
        border: none;
        border-radius: 5px;
        display: inline-block;
        cursor: pointer;

    }
    .breeder-button:hover {
        background-color: darkgrey;
        color: #324f92;
    }

    /* Checkbox nascosto */
    .region-checkbox {
        display: none;
    }

    /* Popup */
    .popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      overflow: auto; /* Aggiunto: abilita lo scroll all'interno del popup */
      padding: 20px; /* Spazio interno per evitare che il contenuto tocchi i bordi */
     scroll-behavior: smooth; /* Opzionale: animazione dello scroll */
    }

    /* Mostra il popup quando il checkbox è selezionato */
    .region-checkbox:checked ~ .popup {
        opacity: 1;
        visibility: visible;
    }

    .popup-content {
      background: #fff;
      color: #000;
      padding: 20px;
      border-radius: 10px;
      max-width: 90%;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
      max-height: 90%; /* Aggiunto: il contenuto si ridimensiona al 90% dell'altezza disponibile */
      overflow-y: auto; /* Aggiunto: scroll verticale per contenuti lunghi */
      scroll-margin-top: 0; /* Garantisce che inizi dal top */
    }

    .close-btn {
      display: inline-block;
       margin-top: 20px;
       padding: 10px 15px;
       background-color: #324f92;
       color: white;
       border-radius: 5px;
       cursor: pointer;
       text-decoration: none;
    }

    .close-btn:hover {
        background-color: #1a2d61;
    }

    .breeder-details {
      margin:0 0 20px 0;
    }

    .breeder-details-blocks {
      margin:0 0 10px 0;
    }

    .breeder-title {
      font-size:17px;
    }

@media screen and (min-width:768px) {
  /*-------------BREEDER----------------------*/
  .feature .container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 15px;
  }

  .feature2 .container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 15px;
  }

  .feature3 .container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .feature-content {padding: 40px 10px 10px 15px;}

  .feature-banner {aspect-ratio: auto;}

  .feature2 .feature-banner {order: 1;}


  /*-------------BREEDER----------------------*/

 .breeder .button {
    margin: 15px 0 0 0;
    text-align:center;
    font-size:20px;
  }
  .region-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
}

@media screen and (min-width:1021px) {
  /*-------------BREEDER----------------------*/

  .region-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }
}


/* INTERVISTA */

.intervista {
  position: relative;
}
.intervista-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* mantiene le proporzioni come background-size: cover */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.header-content {
    position: relative;
    z-index: 1;
   background: rgba(0,0,0,0.5);
   padding: 70px 20px;
   border-radius: 10px;
}
.header-content h1 {
   color: #ffffff;
   font-size: 3em;
   margin-bottom: 10px;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.header-content h2 {
   color: #ffffff;
   font-size: 2em;
   margin-bottom: 20px;
}

.qa-section {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
     margin-bottom: 40px;
 }
.font-intervista {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
   font-size: 16px;
}
 .qa-item {
     margin-bottom: 20px;
 }

 .question {
     padding: 20px;
     border-radius: 8px;
     font-weight: bold;
     color: #2c3e50;
     font-size: 1.2em;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border: 1px solid #e9ecef;
     background: linear-gradient(to bottom, #ffffff, #f8f9fa);
     transition: all 0.3s ease;
 }

 .question::after {
     content: '+';
     font-size: 1.5em;
     color: #6c757d;
     transition: transform 0.3s ease;
 }

 .qa-item.active .question::after {
     transform: rotate(45deg);
 }

 .question:hover {
     background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
     border-color: #dee2e6;
 }
 .answer {
     padding: 0 20px;
     font-size: 16px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s ease, padding 0.5s ease;
     color: #555;
 }

 .qa-item.active .answer {
     max-height: 500px;
     padding: 20px;
 }

 .image-gallery {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 30px;
       margin: 40px 0;
   }

   .image-card {
       position: relative;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 5px 15px rgba(0,0,0,0.1);
       transition: transform 0.3s ease;
   }

   .image-card:hover {
       transform: translateY(-10px);
   }

   .image-card img {
       width: 100%;
       height: 400px;
       object-fit: cover;
   }

   .image-caption {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 15px;
       background: linear-gradient(transparent, rgba(0,0,0,0.8));
       color: white;
       font-size: 0.9em;
   }

@media (max-width: 768px) {
       .image-gallery {
           grid-template-columns: 1fr;
       }
}






/*aintervista llevatori - card con sue info*/


.intro-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.intro-text {
    flex: 3;
}

.allevatore-card {
    flex: 1;
    min-width: 280px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.allevatore-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #355ea3 0%, #769ddf 100%);
}

.card-inner {
    padding: 25px;
}

.allevatore-card h3 {
    margin: 0 0 15px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #343a40;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.divider {
    height: 2px;
    background: linear-gradient(90deg, #355ea3 0%, #769ddf 100%);
    margin-bottom: 20px;
    width: 40%;
}

.divider-small {
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 12px 0;
    width: 100%;
}

.allevatore-info {
    color: #495057;
}

.allevatore-nome {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.allevamento-nome {

    margin: 0 0 15px 0;
    color: #6c757d;
}

.allevatore-card ul {
    list-style-type: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.allevatore-card li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.icon {
    margin-right: 10px;
    display: inline-block;
    font-style: normal;
}

/* Responsive design */
@media (max-width: 768px) {
    .intro-container {
        flex-direction: column;
    }

    .intro-text, .allevatore-card {
        flex: 1 1 100%;
    }

    .allevatore-card {
        margin-bottom: 20px;
        min-width: 100%;
    }
}


/* BACK TO TOP */
.back-to-top {
   background-color: #324f92;
   background-image: url("../../images/backtotop.webp");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   height: 35px;
   width: 35px;
   position: fixed;
   bottom: 20px;
   right:20px;
   border-radius: 50%;
   cursor:pointer;
}




		/* Stile aggiuntivo per le schede delle piante */
		.piante-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			margin: 20px 0;
		}

		.pianta-card {
			display: flex;
			background-color: #f7f7f7;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		}

		.pianta-img {
			width: 120px;
			height: 120px;
			object-fit: cover;
		}

		.pianta-info {
			padding: 10px 15px;
			flex: 1;
		}

		.pianta-nome {
			color: #324f92;
			font-weight: bold;
			margin-bottom: 5px;
			font-size: 16px;
		}

		.pianta-desc {
			font-size: 14px;
			line-height: 1.4;
		}

		@media screen and (max-width: 768px) {
			.piante-grid {
				grid-template-columns: 1fr;
			}
		}

/* fix bug interviste allevatori expand lungo */

.qa-item .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.qa-item.active .answer {
    max-height: 10000px; /* Valore molto grande per contenere qualsiasi testo */
    overflow: visible;
    transition: max-height 1s ease;
}

@media screen and (max-width: 768px) {
    .qa-item.active .answer {
        max-height: none; /* Rimuove qualsiasi limite di altezza su mobile */
        overflow: visible;
    }
}



/* donation abnner */
    #donation-banner {
    	 background: #324f92;
    	 margin: 0 auto;
    	 width: 100%;
    	 max-width: 1140px;
    	 padding: 15px 20px;
    	 box-sizing: border-box;
    	 border-radius: 8px;
    	 margin-bottom: 20px;
    }

    #donation-banner-text {
    	 color: #FFF;
    	 font-size: 0.85em;
    	 line-height: 1.5;
    }

    #donation-banner-text p {
    	 margin: 10px 0;
    }

    .donate {
    	 text-align: right;
    	 margin-top: 15px;
    }

    .donate input[type="image"] {
    	 transition: transform 0.2s ease;
    }

    .donate input[type="image"]:hover {
    	 transform: scale(1.05);
    }

    .clear {
    	 clear: both;
    }

    @media screen and (max-width: 768px) {
    	 #donation-banner {
    			 padding: 12px 15px;
    	 }

    	 #donation-banner-text {
    			 font-size: 0.9em;
    	 }

    	 .donate {
    			 margin-top: 10px;
    	 }
    }



    /* Eventi Raduno - Grid responsivo */
    .eventi-raduno {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30px 0;
        justify-content: center;
    }

    .evento-box {
        position: relative;
        flex: 0 1 calc(33.333% - 15px);
        min-width: 280px;
        border-radius: 15px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        transition: transform 0.3s ease;
    }

    .evento-box:hover {
        transform: translateY(-5px);
    }

    .evento-box img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
    }

    .evento-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(50, 79, 146, 0.85);
        color: white;
        padding: 15px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        line-height: 1.3;
        text-transform: uppercase; /* ✨ MAIUSCOLO */
        letter-spacing: 0.5px; /* Un po' di spaziatura per eleganza */
    }

    .evento-subtitle {
        font-size: 12px;
        font-weight: 300; /* ✨ PIÙ LEGGERO (era 400) */
        opacity: 0.9;
        margin-top: 4px;
        font-style: italic;
        text-transform: none; /* Il sottotitolo resta normale */
        letter-spacing: normal;
    }

    /* Responsive */
    @media screen and (max-width: 1000px) {
        .evento-box {
            flex: 0 1 calc(50% - 10px);
        }
    }

    @media screen and (max-width: 600px) {
        .evento-box {
            flex: 0 1 100%;
            min-width: unset;
        }

        .evento-box img {
            height: 200px;
        }

        .evento-title {
            padding: 12px;
            font-size: 13px;
        }
    }



    .locandina .button {
        display: inline-block;
        margin: 5px 8px;
    }


    /* Badge "A BREVE" migliorato */
.evento-box.coming-soon::before {
    content: "A BREVE";
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(100, 100, 100, 0.95);
    color: white;
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    border: 2px solid white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.evento-box.coming-soon {
    pointer-events: none;
    opacity: 0.75;
    filter: grayscale(30%);
}

.evento-box.coming-soon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 5;
}

.button-disabled {
    background-color: #999999;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 25px;
    display: inline-block;
    margin: 5px 8px;
    cursor: not-allowed;
    opacity: 0.6;
}


/* Video Gallery */
.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.video-card {
    text-decoration: none;
    color: inherit;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: translateY(-8px);
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
    background: #000;
    height: auto; /* Altezza automatica */
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Mantiene proporzioni senza tagliare */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.video-card:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 20px;
}

.video-overlay h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: white;
    text-align: left;
}

.video-overlay p {
    margin: 0 0 8px 0;
    font-size: 14px;
    opacity: 0.9;
}



@media screen and (max-width: 768px) {
    .video-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}



.audio-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.audio-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.audio-card:hover {
    transform: translateY(-8px);
}

.audio-header {
    background: linear-gradient(135deg, #324f92 0%, #4a6bb5 50%, #6B8DD6 100%);
    color: white;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.audio-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.5s;
}

.audio-card:hover .audio-header::before {
    animation: shine 1.5s ease-in-out;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.audio-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

.audio-title h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audio-author {
    font-size: 12px;
    opacity: 0.9;
    font-style: italic;
}

.audio-player {
    padding: 20px;
}

.audio-player p {
    margin: 0 0 15px 0;
    font-size: 13px;
    color: #666;
    text-align: center;
}

audio {
    width: 100%;
    height: 35px;
}

/* Responsive */
@media screen and (max-width: 1000px) {
    .audio-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .audio-gallery {
        grid-template-columns: 1fr;
    }
}