/* Reset base */
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
body {
	background-color: #04525300;
  color: #ffffff;
	background-attachment: fixed, fixed, fixed;
	background-image:
	url("/images/foglie.jpg");
	background-position: center center;
  background-repeat: no-repeat;
	background-size: 100% 100%;
  font-family: 'Helvetica Neue', sans-serif;
}
main {
    position: absolute; 
    top: 0;          
    left: 0;         
    width: 100%;     
}

/* Contenitore menu */
.menu-categorie {
  position: fixed;
  top: 8vh;
  height: 50px;
  left: 0;
  width: 100%;
  z-index: 1000; /* per tenerlo sopra gli altri elementi */
  /* Resto del tuo codice */
  background: transparent;
  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* per Safari */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: 'Garamond', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
 
}


/* Menu principale a destra */
.main-menu {
  display: flex;
  align-items: center;
  margin-top: 30px;
  
}

/* Menu Item */
.menu-item {
  position: relative;
}

/* Link del menu principale */
.menu-link a {
  color: white;
  margin-top: -20px;  
  font-size: 1rem;
  padding: 8px 0;
  display: inline-block;
  position: relative;
  transition: none !important;
  transform: none !important;
  animation: none !important;
}


/* Linea che compare sotto */
.menu-link a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background-color: #e6cb45;
  transition: width 0.3s ease;
}

.menu-link a:hover::after {
  width: 100%;
}

.menu-link a:hover {
  color: #e6cb45;
  transform: none !important;
}

/* Freccia */
.arrow-icon {
  margin-left: 6px;
  transition: transform 0.2s ease;
  fill: #ffffff;
}

.menu-item:hover .arrow-icon {
  transform: rotate(180deg);
}


/* Submenu */
.submenu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background-color: #000000;
  border-radius: 4px;
  min-width: 230px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  padding: 10px 10px;
  display: none;
  z-index: 100;
}

.menu-item:hover .submenu {
  display: block;
}

/* Voci sottomenu */
.submenu li a {
  display: block;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 0.95rem;
  position: relative;
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Linea sotto sottomenu in hover */
.submenu li a::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 8px;
  width: 0;
  height: 1px;
  background-color: #b48c15;
  transition: width 0.3s ease;
}

.submenu li a:hover::after {
  width: calc(100% - 36px);
}

.submenu li a:hover {
  color: #ffffff;

  transform: none !important;

}

.search-bar-wrapper { 
  display: flex; /* Usa flex normale */ 
  align-items: center; /* Allinea verticalmente al centro */ 
  justify-content: flex-start; /* Allinea orizzontalmente a sinistra */
  margin-top: -20px; 
} 

.search-button 
{ background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; /* Allinea verticalmente il contenuto */ justify-content: center; /* Centra all'interno del bottone */ }
.search-button .search-icon:hover {
  fill:#eab61a;
  scale: 1.05;
}

/* Quando la ricerca è attiva, sfoca il contenuto dietro */
body.search-active > *:not(.fullscreen-search) {
  filter: blur(1.8px);
}

/* Overlay della barra di ricerca */
.fullscreen-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 20vh; /* Copri tutta la pagina */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Quando attivo, mostra e sfoca lo sfondo */
.fullscreen-search.active {
  opacity: 1;
  pointer-events: auto;
}

/* Input centrale */
.fullscreen-search .search-form {
  width: 90%;
  max-width: 600px;
}

.fullscreen-search input[type="text"] {
  width: 100%;
  padding: 15px 20px;
  font-size: 1.2rem;
  border: none;
  border-radius: 24px;
  outline: none;
  background: #fff;
  color: #000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}



.articoli-recenti {
    margin-top: 3rem;
}
.articoli-recenti h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.articoli-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.articolo-item {
    width: 30%;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background: #f9f9f9;
    text-align: center;
    transition: all 0.3s ease;
}
.articolo-item:hover {
    background: #f0f0f0;
}
.articolo-item h4 {
    font-size: 1rem;
    margin-top: 0.5rem;
}
.recent-section {
  max-width: 1920px;
  margin: 70px auto 40px auto; /* aumento margine superiore da 50px a 80px */
  padding: 0 30px;
}


.recent-slider-container {
  display: flex;
  gap: 40px;
  align-items: flex-start; /* <-- cambia qui */
  justify-content: flex-start;
}

.swiper-container.recenti-swiper {
  width: 70% !important; /* aumenta un po' */
  height: 650px !important; /* più alto */
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
}

.swiper-slide.card {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  height: 100%;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swiper-slide.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
  z-index: 1;
}

.swiper-slide.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}


.card-image img {
  width: 100%;
  height: 350px; /* da 300 a 350 */
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}


.card-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  z-index: 2;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff;
}

.card-meta {
  font-size: 0.9rem;
  color: #ddd;
  margin-bottom: 15px;
}

.card-excerpt {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #f0f0f0;
}
.swiper-slide.card {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.6s ease;
}

.swiper-slide-active.card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card-title,
.card-meta,
.card-excerpt {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.swiper-slide-active .card-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.swiper-slide-active .card-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.swiper-slide-active .card-excerpt {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}


.info-box {
  width: 40%; /* più larga */
  min-height: 550px !important; /* più alta per allinearsi allo slider */
  background: linear-gradient(to bottom right, #000000, #000000); /* sfondo elegante */
  padding: 80px;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  left: 50px;
  bottom: -1px;


  
}

.info-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.3), transparent);
  animation: pulse 5s infinite;
  z-index: 0;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

.info-box > * {
  position: relative;
  z-index: 1;
}


.info-box:hover {
  transform: translateY(-5px);
}
.info-box h1{
  font-size: 2rem;
  margin-bottom: 25px;
  font-weight: 800;
  color: #ffffff;
}



.info-box p {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #fafafa;
}


.swiper-button-prev,
.swiper-button-next {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 32px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 1;
}

/* ✅ Forza colore bianco sulle frecce */
.swiper-button-prev::after,
.swiper-button-next::after {
  color: #fff !important;
  font-size: 32px;
}



/* Pagination */
.swiper-pagination {
  bottom: 15px !important;
  text-align: center;
  color: #fff !important;
}

/* Responsive */
@media screen and (max-device-width: 1024px) {
  .recent-slider-container {
    flex-direction: column;
  }
  .swiper-container.recenti-swiper,
  .info-box {
    width: 100%;
  }
  .swiper-container.recenti-swiper {
    height: 400px;
    margin-bottom: 30px;
  }
}
@media screen and (max-device-width: 820px) {
  .recent-slider-container {
    flex-direction: column;
  }
  .swiper-container.recenti-swiper,
  .info-box {
    width: 100%;
  }
  .swiper-container.recenti-swiper {
    height: 400px;
    margin-bottom: 30px;
  }
}

@media screen and (max-device-width: 430px) {
  .recent-slider-container {
    flex-direction: column;
  }
  .swiper-container.recenti-swiper,
  .info-box {
    width: 90%;
  }
  .swiper-container.recenti-swiper {
    height: 400px;
    margin-bottom: 30px;
  }
}


.menu-categorie {
  display: flex;
  align-items: center;
}


.main-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 134px; 
  padding: 0 13px;
  margin-top: -10px;  
}


/* Ogni gruppo (sinistra, centro, destra) */
.menu-group {
  display: flex;
}

/* Allineamento dei 3 gruppi */
.menu-group.left {
  justify-content: flex-start;
  order: 1;
  transform: translateX(0%);
}

.menu-group.center {
  justify-content: center;
  order: 2;
  transform: translateX(0%);
}

.menu-group.right {
  justify-content: flex-end;
  order: 3;
  transform: translateY(4%) translateX(-20%);
}



.menu-item {
  white-space: nowrap;
}

.recent-slider-container {
  position: relative;
  min-height: 100vh; 
  padding-bottom: 300px; 
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 61%;
  top: 45%; 
  gap: 20px; 
  position: absolute;       
}



.card-articoli {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  max-width: 600px;
  max-height: 310px; /* aumentato da 310px a 450px */
  height: 310px;      /* altezza fissa per uniformità */
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  color: white;
}

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

.card-content {
  padding: 20px;
  background: rgba(0, 0, 0, 0.6); /* overlay scuro per leggibilità */
  backdrop-filter: blur(2px);
  border-radius: 0 0 10px 10px;
}
.card-content h1 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #ffffff;
  font-family: 'Helvetica Neue', sans-serif;
}
.card-content p.excerpt {
  font-size: 14px;
  color: #fafafa;
  margin-bottom: 10px;
}

.card-content small {
  font-size: 12px;
  color: #fafafa;
  display: block;
  margin-bottom: 10px;
}


/* Button */
.card-content button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  background-color: #232323;
  padding: 1em 2em;
  border: none;
  border-radius: .6rem;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 110px;
  height: 40px;
}
.card-content button span:not(:nth-child(6)) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  width: 30px;
  background-color: #0a0a0a;
  border-radius: 50%;
  transition: .6s ease;
}

.card-content button span:nth-child(6) {
  position: relative;
}

.card-content button span:nth-child(1) {
  transform: translate(-3.3em, -4em);
}

.card-content button span:nth-child(2) {
  transform: translate(-6em, 1.3em);
}

.card-content button span:nth-child(3) {
  transform: translate(-.2em, 1.8em);
}

.card-content button span:nth-child(4) {
  transform: translate(3.5em, 1.4em);
}

.card-content button span:nth-child(5) {
  transform: translate(3.5em, -3.8em);
}

.card-content button:hover span:not(:nth-child(6)) {
  transform: translate(-50%, -50%) scale(4);
  transition: 1.5s ease;
}
  
/* Modal base */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #000000;
  padding: 40px;
  max-width: 800px;
  width: 50%;
  border-radius: 8px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-content .close {
  background: #f00;
  color: rgb(0, 0, 0);
  border: none;
  padding: 6px 12px;
  font-size: 14px;
  float: right;
  cursor: pointer;
  border-radius: 4px;
}
/* Iscrizione Dal Giardino */
.form {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 600px;               /* ✅ PIÙ LARGO */
  padding: 40px 20px;
  background: linear-gradient(to right, rgb(33, 33, 34));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* ✅ CONTENUTO ALLINEATO A SINISTRA */
  text-align: left;           /* ✅ TESTO ALLINEATO A SINISTRA */
  color: white;               /* ✅ colore del testo (opzionale) */
}

.title {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}

.description {
  line-height: 1.5rem;
  font-size: 1rem;
  margin-top: 1rem;
  color: rgb(209 213 219);
}

.form div {
  display: flex;
  max-width: 28rem;
  margin-top: 1rem;
  column-gap: 0.5rem;
}

.formField {
  position: relative;
  top: 10px;
}

.formField input {
  padding: 10px 15px;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: #ffffff;
  color: #272525;
  font-size: 16px;
  font-weight: 450;
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 0 5px transparent;
}

.formField input:hover,
.formField input:focus {
  box-shadow: 0 0 0 2px #fafafa;
}

.formField span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 15px;
  color: #333;
  font-size: 16px;
  font-weight: 450;
  transition: 0.3s ease-in-out;
  pointer-events: none;
}

.formField input:focus + span,
.formField input:valid + span {
  transform: translateY(-32px) translateX(-5px) scale(0.95);
  transition: 0.3s ease-in-out;
}

/* Button */
.form div button {
  background-color: #00000000;
  color: #fff;
  width: 5.5em;
  height: 2.9em;
  border: #000000 0.2em solid;
  border-radius: 11px;
  transition: all 0.6s ease;
  text-align: center;
}

.form div button:hover {
  background-color: #ffffff;
  cursor: pointer;
  border: #ffffff 0.2em solid;
  color: #000000;
}


.button-container {
  display: flex;
  justify-content: center;
  margin: 150px auto 45px auto; /* aumento margine superiore da 50px a 80px */
}


#loadMoreBtn {
  padding:20px;
  border-radius: 50px;
  cursor: pointer;
  width: 230px;
  border: 0;
  color: #FFFFFF; 
  background-color:  #107aae;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 12px;
  transition: all 0.5s ease;
  margin-right: 60%; /* sposta verso sinistra */
}

#loadMoreBtn:hover {
  letter-spacing: 1.5px;
  background-color: hsl(0, 0%, 5%);
  color: hsl(0, 0%, 100%);
  box-shadow: hsl(0, 0%, 10%) 0px 7px 29px 0px;
}

#loadMoreBtn:active {
  letter-spacing: 1.5px;
  background-color: hsl(0, 0%, 5%);
  color: hsl(0, 0%, 100%);
  box-shadow: hsl(0, 0%, 10%) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}

/* Animazione fade out */
.fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}


/* Animazione fade in */
.fade-in {
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
h1 a {
  color: inherit;
  text-decoration: none;
}

h1 a:hover {
  text-decoration: underline;
}


.placeholder-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  width: 100%;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 10px;
  margin: 40px 0;
}

/* Spazio Vuoto */
.placeholder-card {
  max-width: 600px;
  padding: 40px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.05);
}

.placeholder-card h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.placeholder-card p {
  font-size: 16px;
  color: #666;
}
/* === Scroll to top === */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #ffffff;
  color: #000000  !important;
  padding: 10px 14px;
  border-radius: 50%;
  font-size: 1.2rem;
  text-align: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.button {
	background-color:  #107aae;
	border-radius: 50px;
	box-shadow: inset 4px 4px 10px #107aae, inset -4px -4px 10px #107aae;
	color: #ffffff;
	cursor: pointer;
	padding: 15px 40px;
	width: auto;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	border: 2px solid rgb(206, 206, 206);
	position: relative;
	border:none;
	font-size: 15px;
	text-transform: uppercase;
	font-weight:bold;
	padding: 0.8em 1.85em;
	display: inline-block;
	cursor: pointer;
	width: auto;
	margin-top: 20px;
	}

.button:hover {
	box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
	}

.button:focus {
	outline: none;
	box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
	}

/* Responsive */
@media screen and (max-device-width: 1024px) {
  .recent-slider-container {
    flex-direction: column;
  }
  .swiper-container.recenti-swiper,
  .info-box {
    width: 100%;
  }
  .swiper-container.recenti-swiper {
    height: 400px;
    margin-bottom: 30px;
  }
}
@media screen and (max-device-width: 820px) {
  .recent-slider-container {
    flex-direction: column;
  }
  .swiper-container.recenti-swiper,
  .info-box {
    width: 100%;
  }
  .swiper-container.recenti-swiper {
    height: 400px;
    margin-bottom: 30px;
  }
}

@media screen and (max-device-width: 537px) {
  .recent-slider-container {
    flex-direction: column;
  }
  .swiper-container.recenti-swiper,
  .info-box {
    width: 90%;
  }
  .swiper-container.recenti-swiper {
    height: 400px;
    margin-bottom: 30px;
  }
}




@media screen and (min-device-width: 1024px) and (max-device-width: 1200px) {

  .main-menu {
    flex-direction: column;
    align-items: flex-start;     
    width: 50%;
    gap: 0px;
    right: 0;                  
    left: auto;                
    top: 0;
    justify-content: flex-start; 
    background: none;
    text-align: left;        
  }
 

  
  /* nav bar */
  .nav-menu {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    
    height: 100vh;
    background-color: #000;
    background-image: linear-gradient(135deg, #354d35, #000000);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    gap: 10px;
    list-style: none;
    transition: right 0.4s ease;
    
    padding: 40px;
    list-style: none;
    z-index: 1001;
  }
  .nav-menu a {
    font-size: 0.9rem;
  }
  
  /* Mostra l'icona hamburger su mobile */
  .menu-icon {
    display: block;
    cursor: pointer;
    z-index: 1100;
  }
	/* Basic */

		

    body {
      background-size: cover;
      background-repeat: no-repeat;
      
    }

		/* Header */
		#header {
			padding: 3em 1.5em 3em 1.5em; /* più stretto su piccoli schermi */
			text-align: center;
		}

		#header .actions {
			margin: 1.5em 0 0 0;
		}
		.contact-info .title {
			font-size: 1.5em;
		}
		.contact-form .title {
			font-size: 1.5em;
			

		}
		.container h2 {
			color: #ffffff;
			font-size: 2.8rem;
			font-weight: bold;
			text-align: center;
		}
		.title {
			color: #ffffff;
			font-size: 2.8rem;
			font-weight: bold;
			margin-bottom: 1.5rem;
			text-align: center;
		}
		
		.contact-info .text  {
			font-size: 1.2em;
		}
		/* Icone lista */
		ul.major-icons li {
			padding: 1em;
			text-align: center;
		}

		ul.major-icons li .icon {
			height: 4.5em;
			line-height: 4.5em;
			width: 4.5em;
			margin: 0 auto;
		}

		ul.major-icons li .icon:before {
			font-size: 36px;
		}
   
      
		/* Icone principali */
		.icon.major {
			margin-bottom: 1em;
		}
		.container-cta {
			margin: none;
			max-width: none;
			width: none;
		}
		/* Layout verticale per il grid */
		
		.footer-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* 2 colonne */
			gap: 20px; /* spazio tra colonne e righe, opzionale */
			padding: 20px 0;
			text-align: left;
			
		}
	
		.footer-column h4 {
			font-size: 1.2em;
			margin-bottom: 0.5em;
			text-align: left;

		}

		.footer-column ul {
			padding: 0;
			text-align: left;
		}

		.footer-column ul li {
			margin: 0.5em 0;
			text-align: left;
		}

		.footer-column ul li a {
			font-size: 1em;
			color: inherit;
			
		}

		/* Legal & newsletter */
		.footer-legal {
			padding: 2em 1em;
			text-align: left;
			font-size: 0.95em;
			line-height: 1.6;
		}

		.footer-legal p.newsletter {
			font-size: 15px;
			text-align: left;
		}

		.footer-legal .legal-row {
			
			text-align: left;
		}

		.footer-legal .legal-left {
			margin-bottom: 1.5em;
			max-width: 100%;
			text-align: left;
		}

		.footer-legal .legal-icon img {
			
			height: auto;
			text-align: left;

		}


    .menu-categorie {
      position: absolute;
      top: 15vh;
      left: 0;
      width: 50%;           
      height: auto;
      display: none;
      flex-direction: column;
      align-items: flex-start;  
      text-align: left;
      padding: 28px;
      background: none;
      background-color: transparent;
      box-shadow: none;
      z-index: 1001;
      transition: right 0.3s ease;
   
    }

    .menu-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start; 
      margin-bottom: 10px;
      transform: none !important;
      order: unset !important;
    }

  
    .menu-group.right,
    .menu-group.center,
    .menu-group.left {
      align-items: flex-start !important;
      text-align: left !important;
    }
    .menu-link a {
      font-size: 1rem;
    }
    .main-menu {
      gap: 30px;
      margin-top: 40px;
    }
    .search-button {
      display: flex;
      align-items: flex-start; /* oppure center */
      position: relative;
      text-align: left;
      margin-left: 5px;
  
    }
    .search-icon {
      height: 32px; /* Aumenta a piacere */
      width: 32px;
    }

   
    hr {
      width: 100%;
      border: none;
      height: 2px;
      background-color: #333;
      margin: 15px 0;
    }

    .nav-menu .social-icon{
      top: 0vh;
    }
    .menu-categorie.active {
      display: flex;
      
    }
    .recent-section {
      margin: 40px auto 100px auto;
      padding: 0 20px;
    }
    .swiper-container.recenti-swiper {
      width: 100% !important; /* aumenta un po' */
      height: 800px !important; /* più alto */
      max-width: 1000px;
      border-radius: 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
      overflow: hidden;
      position: relative;
    }
    .info-box {
      width: 100%;
      max-width: 1000px; 
      margin: 0 auto;
      min-height: 550px !important;
      padding: 40px;
      border-radius: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      color: #ffffff;
      margin: 0 auto;
      flex-direction: column;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
      bottom: -1px;
      left: 0px;
    }
    .articoli-grid {
      display: flex;
      flex-direction: column;
      gap: 25px; /* più spazio tra gli articoli */
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
    }

    .articoli-grid > * {
      width: 100%;
      max-width: 1400px;
    }
    .card-articoli {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
      width: 100%;
      height: 600px;
      max-height: 600px;
      max-width: 1024px; /* aumentato */
      aspect-ratio: 16 / 9; /* proporzione responsiva */
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      color: white;

    }
     /* Footer layout a 3 colonne con spazio ridotto per iPad */
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15vh; /* Meno spazio tra colonne per schermo più stretto */
      padding: 20px 0;
      text-align: left;
    }
    .card-articoli .card-content {
      width: 100%;
      max-width: 100%;
      padding: 25px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      backdrop-filter: blur(6px);
      text-align: left;
    }
    .card-title {
      font-size: 2.5rem;
    }
    .card-meta .author{
      font-size: 22px;
    }
    .card-articoli .card-content h1{
      font-size: 2.5rem;
    }
    
		.logo a {
			font-size: 2.3rem;
		}
    .nav-menu .social-icon {
			position: relative;
			top: 1vh;
			justify-self: flex-end;
			padding-left: 0px;
			width: 100%;
			display: flex;
			justify-content: center;
			gap: 25px;
			transform: scale(0);
			opacity: 0;
			z-index: 1001;
			margin-left: 0px;
			transition: transform 0.4s ease, opacity 0.4s ease;
		}
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
      max-width: 1400px;
      position: relative;
      padding: 20px;
      margin: 0 auto;
    }
    #loadMoreBtn {
      margin-right: 5%;
      width: 350px;
      height: 60px;
      font-size: 1.1rem;
    }

    .button-container {
      position: relative;
      margin: -30vh auto 50px auto;
    }

    .card-content small {
      font-size: 26px;
    }

    .info-box h1 {
      font-size: 3rem;
    }

    .info-box p {
      font-size: 1.8rem;
    }
    .nav-menu.show .social-icon {
			transform: scale(1.6);
		}
		.nav-icon {
			height: 45px;
			width: 45px;
		}

		.menu-icon {
			width: 40px;
			height: 25px;
		}

		
		.nav-menu li a {
			font-size: 1.8em;
      padding: 10px 0;
		}
		/* BUTTON */
		.button-scrolly {
			font-size: 15px;
		}
		.button{
			font-size: 15px;
		}
    .card-excerpt {
      font-size: 1.6rem;
      
    }
    
    /* submenu */
    .submenu li a {
      font-size: 1.5rem;
      padding: 10px 10px;
    
    }
    /* contenuto articolo */
    .articolo-contenuto h1 {
      font-size: clamp(2.5rem, 5.5vw, 4rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto h2 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto h3 {
      font-size: clamp(1.8rem, 4.5vw, 3rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto h4 {
      font-size: clamp(1.6rem, 4vw, 2.5rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto p{
      font-size: 1.6rem;
      word-wrap: break-word;
      overflow-wrap: break-word;
      text-align: left;
    }
    .altri-articoli h2 {
      font-size: 3rem;
    }
   
	}

.logo {
  text-decoration: none;
}

@media screen and (max-device-width: 1200px) {
  .container-articolo{
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    font-family: sans-serif;
    color: #222;
  }
  .card-articoli {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    width: 100%;
    height: 600px;
    max-height: 600px;
    max-width: 1300px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    color: white;
  }
  .footer-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 39vh;
    padding: 20px 0;
    text-align: left;
  }
  .main-menu {
    gap: 20px;
    margin-top: 0px;
  }
  .nav-menu li a {
    font-size: 1.5em;
    padding: 10px 0;

  }
  .menu-categorie {
      position: absolute;
      top: 5vh;
  }
  .hero-text {
    position: absolute; 
    bottom: 40px;        
    left: 225px;         
    z-index: 2;
    text-align: left;    
    max-width: 90%;      
    padding: 5px;
    color: white;
    animation: fadeInUp 1s ease-out;
  }
}


@media screen and (min-device-width: 768px) and (max-device-width: 1200px){

  .main-menu {
    flex-direction: column;
    align-items: flex-start;     
    width: 50%;
    gap: 0px;
    right: 0;                  
    left: auto;                
    top: 0;
    justify-content: flex-start; 
    background: none;
    text-align: left;        
  }
 

  
  /* nav bar */
  .nav-menu {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    
    height: 100vh;
    background-color: #000;
    background-image: linear-gradient(135deg, #354d35, #000000);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    gap: 10px;
    list-style: none;
    transition: right 0.4s ease;
    
    padding: 40px;
    list-style: none;
    z-index: 1001;
  }
  .nav-menu a {
    font-size: 0.9rem;
  }
  
  /* Mostra l'icona hamburger su mobile */
  .menu-icon {
    display: block;
    cursor: pointer;
    z-index: 1100;
  }
	/* Basic */

		

    body {
      background-size: cover;
      background-repeat: no-repeat;
      
    }

		/* Header */
		#header {
			padding: 3em 1.5em 3em 1.5em; /* più stretto su piccoli schermi */
			text-align: center;
		}

		#header .actions {
			margin: 1.5em 0 0 0;
		}
		.contact-info .title {
			font-size: 1.5em;
		}
		.contact-form .title {
			font-size: 1.5em;
			

		}
		.container h2 {
			color: #ffffff;
			font-size: 2.8rem;
			font-weight: bold;
			text-align: center;
		}
		.title {
			color: #ffffff;
			font-size: 2.8rem;
			font-weight: bold;
			margin-bottom: 1.5rem;
			text-align: center;
		}
		/* submenu */
    .submenu li a {
      font-size: 1.5rem;
      padding: 10px 10px;
    
    }
		.contact-info .text  {
			font-size: 1.2em;
		}
		/* Icone lista */
		ul.major-icons li {
			padding: 1em;
			text-align: center;
		}

		ul.major-icons li .icon {
			height: 4.5em;
			line-height: 4.5em;
			width: 4.5em;
			margin: 0 auto;
		}

		ul.major-icons li .icon:before {
			font-size: 36px;
		}
   
      
		/* Icone principali */
		.icon.major {
			margin-bottom: 1em;
		}
		.container-cta {
			margin: none;
			max-width: none;
			width: none;
		}
		/* Layout verticale per il grid */
		
		.footer-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* 2 colonne */
			gap: 20px; /* spazio tra colonne e righe, opzionale */
			padding: 20px 0;
			text-align: left;
			
		}
	
		.footer-column h4 {
			font-size: 1.2em;
			margin-bottom: 0.5em;
			text-align: left;

		}

		.footer-column ul {
			padding: 0;
			text-align: left;
		}

		.footer-column ul li {
			margin: 0.5em 0;
			text-align: left;
		}

		.footer-column ul li a {
			font-size: 1em;
			color: inherit;
			
		}

		/* Legal & newsletter */
		.footer-legal {
			padding: 2em 1em;
			text-align: left;
			font-size: 0.95em;
			line-height: 1.6;
		}

		.footer-legal p.newsletter {
			font-size: 15px;
			text-align: left;
		}

		.footer-legal .legal-row {
			
			text-align: left;
		}

		.footer-legal .legal-left {
			margin-bottom: 1.5em;
			max-width: 100%;
			text-align: left;
		}

		.footer-legal .legal-icon img {
			
			height: auto;
			text-align: left;

		}


    .menu-categorie {
      position: absolute;
      top: 15vh;
      left: 0;
      width: 50%;           
      height: auto;
      display: none;
      flex-direction: column;
      align-items: flex-start;  
      text-align: left;
      padding: 29px;
      background: none;
      background-color: transparent;
      box-shadow: none;
      z-index: 1001;
      transition: right 0.3s ease;
   
    }

    .menu-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start; 
      margin-bottom: 10px;
      transform: none !important;
      order: unset !important;
    }

  
    .menu-group.right,
    .menu-group.center,
    .menu-group.left {
      align-items: flex-start !important;
      text-align: left !important;
    }
    .menu-link a {
      font-size: 1rem;
    }
    .main-menu {
      gap: 20px;
      margin-top: 10px;
    }
    .search-button {
      display: flex;
      align-items: flex-start; /* oppure center */
      position: relative;
      text-align: left;
      margin-left: 5px;
  
    }
    .search-icon {
      height: 28px; /* Aumenta a piacere */
      width: 28px;
    }

       
   
    hr {
      width: 100%;
      border: none;
      height: 2px;
      background-color: #333;
      margin: 15px 0;
    }

    .nav-menu .social-icon{
      top: 0vh;
    }
    .menu-categorie.active {
      display: flex;
      
    }
    .recent-section {
      margin: 40px auto 100px auto;
      padding: 0 20px;
    }
    .swiper-container.recenti-swiper {
      width: 100% !important; /* aumenta un po' */
      height: 800px !important; /* più alto */
      max-width: 1000px;
      border-radius: 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
      overflow: hidden;
      position: relative;
    }
    .info-box {
      width: 100%;
      max-width: 1000px; 
      margin: 0 auto;
      min-height: 550px !important;
      padding: 40px;
      border-radius: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      color: #ffffff;
      margin: 0 auto;
      flex-direction: column;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
      bottom: -1px;
      left: 0px;
    }
    .articoli-grid {
      display: flex;
      flex-direction: column;
      gap: 25px; /* più spazio tra gli articoli */
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
    }

    .articoli-grid > * {
      width: 100%;
      max-width: 1400px;
    }
    .card-articoli {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
      width: 100%;
      height: 600px;
      max-height: 600px;
      max-width: 900px; /* aumentato */
      aspect-ratio: 16 / 9; /* proporzione responsiva */
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      color: white;

    }
     /* Footer layout a 3 colonne con spazio ridotto per iPad */
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15vh; /* Meno spazio tra colonne per schermo più stretto */
      padding: 20px 0;
      text-align: left;
    }
    .card-articoli .card-content {
      width: 100%;
      max-width: 100%;
      padding: 25px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      backdrop-filter: blur(6px);
    }
    .card-title {
      font-size: 2rem;
    }
    .card-meta .author{
      font-size: 22px;
    }
    .card-articoli .card-content h1{
      font-size: 2rem;
    }
    
		.logo a {
			font-size: 2rem;
		}
    .nav-menu .social-icon {
			position: relative;
			top: 1vh;
			justify-self: flex-end;
			padding-left: 0px;
			width: 100%;
			display: flex;
			justify-content: center;
			gap: 25px;
			transform: scale(0);
			opacity: 0;
			z-index: 1001;
			margin-left: 0px;
			transition: transform 0.4s ease, opacity 0.4s ease;
		}
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
      max-width: 1400px;
      position: relative;
      padding: 20px;
      margin: 0 auto;
    }
    #loadMoreBtn {
      margin-right: 5%;
      width: 350px;
      height: 60px;
      font-size: 1.1rem;
    }

    .button-container {
      position: relative;
      margin: -30vh auto 50px auto;
    }

    .card-content small {
      font-size: 16px;
    }

    .info-box h1 {
      font-size: 3rem;
    }

    .info-box p {
      font-size: 1.8rem;
    }
    .nav-menu.show .social-icon {
			transform: scale(1.3);
		}
		.nav-icon {
			height: 45px;
			width: 45px;
		}

		.menu-icon {
			width: 30px;
			height: 25px;
		}

		
		.nav-menu li a {
			font-size: 1.15em;
		}
		/* BUTTON */
		.button-scrolly {
			font-size: 15px;
		}
		.button{
			font-size: 15px;
		}
    .card-excerpt {
      font-size: 1.3rem;
      
    }

    /* contenuto articolo */
    .articolo-contenuto h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto h2 {
      font-size: clamp(1.8rem, 4.5vw, 3rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto h3 {
      font-size: clamp(1.6rem, 4vw, 2.5rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto h4 {
      font-size: clamp(1.4rem, 3.5vw, 2rem);
      text-align: center;
      font-weight: bold;
      color: #000;
      word-wrap: break-word;
      text-align: left;
    }
    .articolo-contenuto p{
      font-size: 1.6rem;
      word-wrap: break-word;
      overflow-wrap: break-word;
      text-align: left;
    }
    .hero-text {
      position: absolute; 
      bottom: 40px;        
      left: 20px;         
      z-index: 2;
      text-align: left;    
      max-width: 90%;      
      padding: 5px;
      color: white;
      animation: fadeInUp 1s ease-out;
    }
	}


@media screen and (max-device-width: 768px) {
  /* menu nav */
  .main-menu {
    gap: 10px;
    margin-top: -20px;
  }
  .nav-menu li a {
    font-size: 0.8em;
    padding: 2px 0px;
  }
  .search-icon {
    height: 35px;
    width: 25px;
  }
  .hero-text {
    position: absolute; 
    bottom: 40px;        
    left: 20px;         
    z-index: 2;
    text-align: left;    
    max-width: 90%;      
    padding: 5px;
    color: white;
    animation: fadeInUp 1s ease-out;
  }
}


@media screen and (min-device-width: 290px) and (max-device-width: 537px){
  .search-bar-wrapper {
    margin-top: -35px;
  }
  .main-menu {
    flex-direction: column;
    align-items: flex-start;     
    width: 50%;
    gap: 0px;
    right: 0;                  
    left: auto;                
    top: 0;
    justify-content: flex-start; 
    background: none;
    text-align: left;        
  }
 
  .hero-text h1 {
    font-size: 1.4rem;
    text-align: left;
  }
  .card-meta .author{
    font-size: 15px;
  }
  .card-content small {
    font-size: 20px;
  }

  /* nav bar */
  .nav-menu {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    
    height: 100vh;
    background-color: #000;
    background-image: linear-gradient(135deg, #354d35, #000000);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    gap: 10px;
    list-style: none;
    transition: right 0.4s ease;
    
    padding: 40px;
    list-style: none;
    z-index: 1001;
    overflow: hidden;
  }
  .nav-menu a {
    font-size: 0.9rem;
  }
  
  /* Mostra l'icona hamburger su mobile */
  .menu-icon {
    display: block;
    cursor: pointer;
    z-index: 1100;
  }
	/* Basic */

		

    body {
      background-size: cover;
      background-repeat: no-repeat;
      
    }

		/* Header */
		#header {
			text-align: center;
		}

		#header .actions {
			margin: 1.5em 0 0 0;
		}
		.contact-info .title {
			font-size: 1.5em;
		}
		.contact-form .title {
			font-size: 1.5em;
			

		}
    .info-box h1 {
      font-size: 1.6rem;
    }
   
    .info-box p {
      font-size: 1.3rem;
    }
    .card-articoli .card-content h1{
      font-size: 1.4rem;
    }
    .nav-menu.show .social-icon {
      transform: scale(1);
    }
   
		.container h2 {
			color: #ffffff;
			font-size: 2.8rem;
			font-weight: bold;
			text-align: center;
		}
		.title {
			color: #ffffff;
			font-size: 2.8rem;
			font-weight: bold;
			margin-bottom: 1.5rem;
			text-align: center;
		}

    .card-title {
      font-size: 1.4rem;
    }
		
		.contact-info .text  {
			font-size: 1.2em;
		}
		/* Icone lista */
		ul.major-icons li {
			padding: 1em;
			text-align: center;
		}
		ul.major-icons li .icon {
			height: 4.5em;
			line-height: 4.5em;
			width: 4.5em;
			margin: 0 auto;
		}

		ul.major-icons li .icon:before {
			font-size: 36px;
		}
   
		/* Icone principali */
		.icon.major {
			margin-bottom: 1em;
		}
		.container-cta {
			margin: none;
			max-width: none;
			width: none;
		}
		/* Layout verticale per il grid */
		.logo a {
			font-size: 1.4rem;
		}
		.footer-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* 2 colonne */
			gap: 20px; /* spazio tra colonne e righe, opzionale */
			padding: 20px 0;
			text-align: left;
			
		}
	
		.footer-column h4 {
			font-size: 1.2em;
			margin-bottom: 0.5em;
			text-align: left;

		}

		.footer-column ul {
			padding: 0;
			text-align: left;
		}

		.footer-column ul li {
			margin: 0.5em 0;
			text-align: left;
		}

		.footer-column ul li a {
			font-size: 1em;
			color: inherit;
			
		}

		/* Legal & newsletter */
		.footer-legal {
			padding: 2em 1em;
			text-align: left;
			font-size: 0.95em;
			line-height: 1.6;
		}

		.footer-legal p.newsletter {
			font-size: 15px;
			text-align: left;
		}

		.footer-legal .legal-row {
			
			text-align: left;
		}

		.footer-legal .legal-left {
			margin-bottom: 1.5em;
			max-width: 100%;
			text-align: left;
		}

		.footer-legal .legal-icon img {
			
			height: auto;
			text-align: left;

		}


    .menu-categorie {
      position: absolute;
      top: 0vh;
      left: 0;
      width: 100%;           
      height: auto;
      display: none;
      flex-direction: column;
      align-items: flex-start;  
      text-align: left;
      padding: 28px;
      background: none;
      background-color: transparent;
      box-shadow: none;
      z-index: 1001;
      transition: right 0.3s ease;
   
    }
    .card-excerpt {
      font-size: 1rem;
    }
    .menu-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start; 
      margin-bottom: 10px;
      transform: none !important;
      order: unset !important;
    }

  
    .menu-group.right,
    .menu-group.center,
    .menu-group.left {
      align-items: flex-start !important;
      text-align: left !important;
    }
    .menu-link a {
      font-size: 1rem;
    }
    .main-menu {
      gap: 5px;
      margin-top: -10px;
    }
    .search-button {
      display: flex;
      align-items: flex-start; /* oppure center */
      position: relative;
      text-align: left;
      margin-left: 5px;
    }
   
    hr {
      width: 100%;
      border: none;
      height: 2px;
      background-color: #333;
      margin: 15px 0;
    }

    .nav-menu .social-icon{
      top: 0vh;
    }
    .menu-categorie.active {
      display: flex;
      
    }
    .recent-section {
      margin: 40px auto -20vh auto;
      padding: 0 20px;
    }
    .swiper-container.recenti-swiper {
      width: 100% !important; /* aumenta un po' */
      height: 500px !important; /* più alto */
      max-width: 1000px;
      border-radius: 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
      overflow: hidden;
      position: relative;
    }
    .info-box {
      width: 100%;
      max-width: 1000px; 
      margin: 0 auto;
      min-height: 550px !important;
      padding: 40px;
      border-radius: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      color: #ffffff;
      margin: 0 auto;
      flex-direction: column;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
      bottom: -1px;
      left: 0px;
    }
    .articoli-grid {
      display: flex;
      flex-direction: column;
      gap: 25px; /* più spazio tra gli articoli */
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
    }

    .articoli-grid > * {
      width: 100%;
      max-width: 1400px;
    }
    .card-articoli {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
      width: 100%;
      height: 400px;
      max-width: 1200px; /* aumentato */
      aspect-ratio: 16 / 9; /* proporzione responsiva */
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      color: white;

    }

    .card-articoli .card-content {
      width: 100%;
      max-width: 100%;
      padding: 25px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      backdrop-filter: blur(6px);
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
      max-width: 400px;
      position: relative;
      padding: 5px;
      margin: 0 auto;
    }
    #loadMoreBtn {
      margin-right: 5%;
      font-size: 1rem;
      width: 300px;

    }

    .button-container {
      position: relative;
      margin: -40vh auto 20px auto;
    }
    	
		.account-icon {
			width: 32px;
			height: 32px;
		}
		.submenuprofiles a {
			font-size: 1rem !important;
		}
    	/* submenu */
    .submenu li a {
      font-size: 1.5rem;
      padding: 10px 10px;
    
    }
     .hero-text {
      position: absolute; 
      bottom: 40px;        
      left: 20px;         
      z-index: 2;
      text-align: left;    
      max-width: 90%;      
      padding: 5px;
      color: white;
      animation: fadeInUp 1s ease-out;
    }
	}
/* Animazione fade + slide up */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Animazione fade + slide up */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
  
}

@media only screen and (min-device-width: 537px) {
	.legal-icon {
		margin-left: -0px;
    margin-top: -3vh;
	}
}


@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  
  /* Footer layout a 3 colonne con spazio ridotto per iPad */
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 200px; /* Meno spazio tra colonne per schermo più stretto */
    padding: 20px 0;
    text-align: left;
  }

  /* Paragrafi principali nei banner */
  .main.style1 .content p.major,
  .main.style2 .content p.major,
  .main.style3 .content p.major,
  .main.style4 .content p.major,
  .main.style5 .content p.major,
  .main.style6 .content p.major{
    font-size: 1.4em;
    text-align: left;
  }

  /* Titoli h1 e h2 nei banner */
  .main.style1 .content h1,
  .main.style1 .content h2,
  .main.style2 .content h1,
  .main.style2 .content h2,
  .main.style3 .content h1,
  .main.style3 .content h2,
  .main.style4 .content h1,
  .main.style4 .content h2 
  .main.style5 .content h1,
  .main.style5 .content h2,
  .main.style6 .content h1,
  .main.style6 .content h2 {
    font-size: 2.2em; /* Leggermente più piccolo rispetto a desktop */
  }

  /* Immagine responsive con copertura e centratura per iPad */
  #three.main.style7 .image.fit img {
    width: 100%;
    max-width: 80%;
    height: 250px; 
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto 30px auto; /* ↑↑ Qui aumenta il valore per più spazio */
  }
  .hero-text {
    position: absolute; 
    bottom: 40px;        
    left: 20px;         
    z-index: 2;
    text-align: left;    
    max-width: 90%;      
    padding: 5px;
    color: white;
    animation: fadeInUp 1s ease-out;
  }
  
}
/* 🎯 SOLO per dispositivi iOS (Safari su iPhone/iPad) */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-device-width: 768px) {
    /* menu nav */
    .main-menu {
      gap: 10px;
      margin-top: -30px;
    }
    .nav-menu li a {
      font-size: 1.2em;
      padding: 5px 0px;
    }
    .search-icon {
      height: 30px;
      width: 25px;
    }
    .menu-categorie {
      top: 10vh;
    }
    .main-menu {
      margin-top: 4px;
    }
    .hero-text {
      position: absolute; 
      bottom: 40px;        
      left: 20px;         
      z-index: 2;
      text-align: left;    
      max-width: 90%;      
      padding: 5px;
      color: white;
      animation: fadeInUp 1s ease-out;
    }
  }
}


@supports not (-webkit-touch-callout: none) {

  @media screen and (max-width: 1000px) and (pointer: coarse) and (hover: none) {
    .menu-categorie {
      position: absolute !important;
      top: 15vh !important; 
    }

    .nav-menu li a {
      font-size: 1.2em;
    }
  }
}




@media screen and (max-width: 1920px) {
  .main-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 142px;
    padding: 0 13px;
    margin-top: -8px;
  }
  .hero-text {
    position: absolute; 
    bottom: 40px;        
    left: 325px;         
    z-index: 2;
    text-align: left;    
    max-width: 90%;      
    padding: 5px;
    color: white;
    animation: fadeInUp 1s ease-out;
  }
}

/* Per schermi con larghezza fino a 1600px */
@media screen and (max-width: 1600px) {
  .main-menu {
    gap: 100px;
  }
  .hero-text {
    position: absolute; 
    bottom: 40px;        
    left: 225px;         
    z-index: 2;
    text-align: left;    
    max-width: 70%;      
    padding: 5px;
    color: white;
    animation: fadeInUp 1s ease-out;
  }
  .button-container {
    display: flex;
    justify-content: center;
    margin: 95px auto 45px auto; /* aumento margine superiore da 50px a 80px */
  }
}
/* Per schermi con larghezza fino a 1366px */
@media screen and (max-width: 1400px) {
  .main-menu {
    gap: 70px;
  }
  .menu-categorie {
    top: 6.5vh;
  }
}
@media screen and (max-width: 1366px) {
  .main-menu {
    gap: 55px;
  }
}
/* Per dispositivi fino a 1200px */
@media screen and (max-width: 1200px) {
  .main-menu {
    gap: 0px;
  }
  .button{
    font-size: 18px;
    padding: 0.8em 3.5em;
  }
}

/* Per schermi mobili generici */
@media screen and (max-width: 537px) {
   .main-menu {
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
  }
  .menu-categorie {
    position: absolute !important;
    top: 8vh !important; 
  }
  .nav-menu li a {
    font-size: 1.1em;
  }
  .hero-text {
    position: absolute; 
    bottom: 40px;        
    left: 20px;         
    z-index: 2;
    text-align: left;    
    max-width: 90%;      
    padding: 5px;
    color: white;
    animation: fadeInUp 1s ease-out;
  }
  .button-container {
    left: 50%;
    transform: translate(-68%, -50%);
    margin: 0px auto 0px auto; /* aumento margine superiore da 50px a 80px */
    width: 500px;
  }
  .button{
    font-size: 16px;
    padding: 0.8em 0.8em;
  }
}

/* Per schermi mobili generici */
@media screen and (max-width: 413px) {
  .main-menu {
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
  }
  .menu-categorie {
    position: absolute !important;
    top: 8vh !important; 
  }

  .nav-menu li a {
    font-size: 0.95em;
  }
  
}

/* Per schermi mobili generici */
@media screen and (max-width: 395px) {
  .main-menu {
    flex-direction: column;
    gap: 0px;
    margin-top: 4px;
  }
  .menu-categorie {
    position: absolute !important;
    top: 8vh !important; 
  }

  .nav-menu li a {
    font-size: 0.90em;
  }
}