html, body {
  overflow-x: hidden; /* blocca lo scroll orizzontale */
  width: 100%;
}

* {
  box-sizing: border-box; /* evita che padding/margin allarghino gli elementi oltre la larghezza */
}

/* =========================
   BODY
========================= */
body {
  margin: 0;
  padding-top: 110px; /* spazio per header fisso */
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  color: #333;
  scroll-behavior: smooth;
}

/* =========================
   HEADER
========================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8); /* sfondo iniziale trasparente */
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 60px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
  z-index: 1000;
}

/* Linea decorativa sopra l’header */
.top-line {
  height: 3px;
  background-color: #b99b6b;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Header dopo lo scroll */
.header.scrolled {
  background: rgba(243, 223, 186, 0.8); /* champagne delicato */
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* Contenitore interno */
.header-container {
  display: flex;
  justify-content: center; /* centra tutto l’insieme */
  align-items: center;
  width: 100%;
}

/* =========================
   LOGO
========================= */
.logo {
  height: 90px; /* altezza logo */
  width: auto;
  flex-shrink: 0;
  margin: 0; 
}

/* =========================
   NAVBAR
========================= */
.navbar {
  display: flex;
  align-items: center;
  gap: 20px; /* distanza tra logo e link "Home" */
}

.navbar a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  position: relative;
  padding: 8px 10px;
  transition: color 0.3s;
}

.navbar a:hover {
  color: #b99b6b;
}

.navbar a.active::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #b99b6b;
  border-radius: 2px;
}

/* Pulsante login */
.login-btn {
  background-color: #b99b6b;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 25px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.login-btn:hover {
  background-color: #9c8358;
  transform: translateY(-2px);
}

/* =========================
   HERO SECTION
========================= */
.hero-section {
  position: relative;
  width: 100%;
  height: 400px;
}

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

.logo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 231, 216, 0.35);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  padding: 20px 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 500; /* sotto l’header */
}

.logo-overlay {
  width: 220px;
  height: auto;
  display: block;
}

/* =========================
   SECTION CHI SONO (HOME)
========================= */
.content {
  text-align: center;
  padding: 40px 20px;
}

.chi-sono-home-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  padding: 10px 10px;
  min-height: 30vh;
}


.chi-sono-home-img img {
  width: 200px;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.chi-sono-home-text {
  max-width: 600px;
}

.chi-sono-home-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  margin-bottom: 15px;
  color: #333;
}

.chi-sono-home-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

.chi-sono-home-text-sposi {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.chi-sono-home-text-sposi .nomi {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  color: #333;
  margin-bottom: 0.3rem;
}

.chi-sono-home-text-sposi .data {
  margin-top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  color: #333;
  letter-spacing: 2px;
}

.chi-sono-home-text-sposi p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

/* Pulsante "Leggi di più" */
.btn-leggi {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  background-color: #b99b6b;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 30px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  text-decoration: none; /* <- aggiunto per rimuovere la sottolineatura */
}

.btn-leggi:hover {
  background-color: #9c8358;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* =========================
   FULLWIDTH IMAGE
========================= */
.fullwidth-image {
  width: 100%;
  overflow: hidden;
  margin-top: 40px;
}

.fullwidth-image .img2 {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* =========================
   SERVIZI WEDDING
========================= */
.servizi_wedding_container {
  width: 100%;
  background-color: #ffffff;
  padding: 60px 20px; /* piccolo spazio ai lati */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.servizi_wedding_text {
  max-width: 1200px;
  text-align: center;
  margin-bottom: 0px;
}

.servizi_wedding_text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  color: #333;
  margin-bottom: 15px;
  
}

.servizi_wedding_text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #555;
}

/* Griglia dei servizi 4x2, quadrati grandi e attaccati */
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonne */
  gap: 0; /* quadrati attaccati */
  width: 100%;
  max-width: 1400px; /* più grande possibile */
}

/* Griglia dei servizi 3x1 centrata */
.servizi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, auto); 
  gap: 30px;
  justify-content: center;  /* centra i blocchi */
  justify-items: center;    /* centra ogni card nella cella */
}

/* Quadrati perfetti */
.servizio-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* quadrato perfetto */
  
}

.servizio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.servizio-title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 5px 10px;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  text-align: center;
}

/* Nessun effetto hover */
.servizio-card:hover {
  transform: none;
  box-shadow: none;
}

.servizi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px; /* spazio dai bordi */
}

.servizio-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: default;
  display: flex;
  flex-direction: column;
}

/* Immagine */
.servizio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto; /* niente sfocature artificiali */
  transition: transform 0.5s ease;
}

/* Titolo sempre visibile */
/* Titolo sempre visibile, centrato in alto */
.servizio-title {
  position: absolute;
  top: 10px;               /* distanza dal bordo superiore */
  left: 50%;               /* centro orizzontale */
  transform: translateX(-50%); /* centra il titolo */
  color: #fff;
  font-family: 'Cormorant Garamond';
  font-size: 1.3rem;       /* dimensione leggermente più grande */
  line-height: 1.2;
  margin: 0;
  z-index: 2;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  pointer-events: none;    /* il cursore non interagisce con il titolo */
  font-weight: normal; /* aggiunto per togliere il grassetto */
  text-transform: uppercase;
}

/* Overlay testo */
.servizio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(0px);
  color: #fff;
  padding: 50px 20px 20px 20px; /* lascia spazio per il titolo sopra */
  opacity: 0;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
}

.servizio-overlay p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  margin-top: 80px; /* sposta il testo sotto il titolo */
  color: #000; /* testo nero di default */
}

/* Hover effetto vetro */
.servizio-card:hover img {
  transform: scale(1.05);
}

.servizio-card:hover .servizio-overlay {
  opacity: 1;
  background: rgba(243, 223, 186, 0.35); /* colore champagne trasparente */
  backdrop-filter: blur(6px) saturate(180%);
}

/* =========================
   CONTATTAMI
========================= */
.contattami-container {
  width: 100%;
  padding: 60px 20px;
  display: flex;
  justify-content: center;  /* centra l'intero inner container orizzontalmente */
  align-items: center;      /* centra verticalmente */
  background-color: #b99b6b;
  color: #fff;
  margin-bottom: 100px; /* aggiunge spazio prima di “Contattami” */
}

.contattami-inner {
  display: flex;
  flex-direction: row;      /* logo a sinistra, testo a destra */
  align-items: center;      /* centra verticalmente testo+pulsante */
  gap: 40px;                /* distanza tra logo e testo */
  max-width: 1200px;
  width: 100%;
  position: relative;       /* utile se vogliamo posizionare il logo liberamente */
}

.contattami-logo {
  position: absolute;       /* logo libero sulla sinistra */
  left: 0;
  top: 62%;
  transform: translateY(-50%);
}

.contattami-logo img {
  width: 150px;
  height: auto;
}

.contattami-text {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centra verticalmente nel container */
  align-items: center;      /* centra testo + pulsante orizzontalmente */
  text-align: center;
  gap: 20px;
  width: 100%;
}

.contattami-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  margin: 0;
  color: #fff;
}

.contattami-text .btn-leggi {
  padding: 14px 32px;
  font-size: 1rem;
  background-color: rgba(243, 223, 186, 0.6);
  color: #ffffff;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  text-decoration: none; /* <- aggiunto per rimuovere la sottolineatura */
}

.contattami-text .btn-leggi:hover {
  background-color: #f9f9f9;
  color: #b99b6b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* =========================
   CHI SONO PAGE
========================= */

.chi-sono-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 100px 20px 60px;
  text-align: center;
  background-color: #f9f9f9;
}


.chi-sono-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  margin-bottom: 20px;
  color: #333;
  transform: translateX(130px); /* sposta il titolo di 30px a destra */
}

 
.chi-sono-hero p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  color: #555;
}

.chi-sono-hero-img img {
  width: 300px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.chi-sono-storia {
  padding: 60px 20px;
  background-color: #ffffff;
}

.chi-sono-storia-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.chi-sono-storia-text {
  flex: 1 1 400px;
  font-family: 'Montserrat', sans-serif;
  color: #555;
}

.chi-sono-storia-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  color: #333;
  margin-bottom: 20px;
}

.chi-sono-storia-text p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.chi-sono-storia-img {
  flex: 1 1 400px;
  margin-right: 40px; 
}

.chi-sono-storia-img img {
  width: 130%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  
}

.chi-sono-contattami {
  text-align: center;
  padding: 40px 20px;
  background-color: #b99b6b;
  color: #fff;
}

.chi-sono-contattami p {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.chi-sono-contattami .btn-leggi {
  padding: 14px 32px;
  font-size: 1rem;
  background-color: #ae7474;
  color: #ffffff;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.chi-sono-contattami .btn-leggi:hover {
  background-color: #f9f9f9;
  color: #c89ca1;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.blocco-sotto-filosofia {
  width: 100%;
  background-color: rgba(243, 223, 186, 0.6); /* champagne più visibile */
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
}

.blocco-sotto-filosofia h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  color: #6a5636; /* colore più elegante e caldo per il titolo */
  margin-bottom: 20px;
  text-align: center;
}

.blocco-sotto-filosofia p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #4a3b2b;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* =========================
   SERVIZI PAGE
========================= */
.servizi-hero {
  text-align: center;
  padding: 72px 20px 40px;
  background-color: #ffffff;
}

.servizi-hero-text {
  max-width: 800px;
  margin: 0 auto;
}


.servizi-hero-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  margin-bottom: 15px;
  color: #333;
}

.servizi-hero-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  color: #555;
}

.servizi-sezione {
  padding: 50px 20px;
  background-color: #fff;
}

.servizi-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  
  margin: 0 auto;
  width: 95%; 
}

.servizio-item {
  background-color: rgba(243, 223, 186, 0.6);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.servizio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.servizio-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.servizio-content {
  padding: 25px;
  text-align: center;
}

.servizio-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: #333;
  margin-bottom: 10px;
}

.servizio-content p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

/* =========================
   SERVIZI NUOVI (card con testo che esce)
========================= */

.servizi-nuovi {
  width: 100%;
  padding: 80px 20px;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.servizi-nuovi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  max-width: 1200px;
  width: 90%;
}

.servizio-nuovo-card {
  position: relative;
  overflow: visible;
  border-radius: 20px;
}

.servizio-nuovo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  border: 4px solid rgba(185, 155, 107, 0.6);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  display: block;
}

.servizio-nuovo-testo {
  position: absolute;
  bottom: -30px;
  right: 20px;
  background-color: rgba(243, 223, 186, 0.95);
  padding: 20px 25px;
  border-radius: 15px;
  max-width: 80%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: 'Montserrat', sans-serif;
  color: #3e3e3e;
}

.servizio-nuovo-testo h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #4a3a28;
}

.servizio-nuovo-testo p {
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0;
}

/* =========================
   TRE FOTO RETTANGOLARI GRANDI
========================= */
.tre-foto {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding: 80px 0;
}

.tre-foto-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1400px; /* occupa quasi tutta la pagina */
  width: 95%;
}

.foto-box {
  aspect-ratio: 4 / 3; /* 🔥 rettangolo (più largo che alto) */
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

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



/* =========================
   FOOTER
========================= */
.footer {
  background-color: #f3dfba; /* colore champagne chiaro */
  padding: 40px 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: #333;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

.footer-logo img {
  width: 150px;
  height: auto;
}

.footer-contacts p {
  margin: 5px 0;
  font-size: 1rem;
}

.footer-contacts a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.footer-contacts a:hover {
  color: #b99b6b;
}

.footer-social {
  display: flex;
  gap: 10px;              /* distanza tra le icone */
  align-items: center;     /* allinea verticalmente al centro */
  justify-content: center; /* centra orizzontalmente */
  padding: 10px 0;         /* padding verticale */
}

.footer-social img {
  display: block;
  height: auto;
}

/* Dimensioni specifiche per ciascuna icona */
.footer-social img.instagram-logo {
  height: 40px; /* dimensione icona Instagram */
}

.footer-social img.matrimonio-logo {
  height: 30px; /* dimensione icona Matrimonio.com */
}

.footer-bottom {
  margin-top: 5px;          /* spazio minimo sopra il copyright */
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.3;
}

.footer-bottom a {
  color: #333;
  text-decoration: none;
  margin: 0 5px;
  font-weight: 500;
}

.footer-bottom a:hover {
  color: #b99b6b;
}

/* =========================
   SERVIZI NUOVI (card con testo che esce)
========================= */

.servizi-nuovi {
  width: 100%;
  padding: 80px 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.servizi-nuovi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  max-width: 1200px;
  width: 90%;
}

.servizio-nuovo-card {
  position: relative;
  overflow: visible; /* permette al testo di uscire dal quadrato */
  border-radius: 20px;
}

.servizio-nuovo-card img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  border: 4px solid rgba(185, 155, 107, 0.6); /* bordo champagne semi-trasparente */
}

/* 🔥 Blocco testo parzialmente sovrapposto */
.servizio-nuovo-testo {
  position: absolute;
  bottom: -30px;           /* fa uscire il blocco dal contenitore */
  right: 20px;             /* o left: 20px; se vuoi spostarlo a sinistra */
  background-color: rgba(243, 223, 186, 0.95); /* champagne */
  padding: 20px 25px;
  border-radius: 15px;
  max-width: 80%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.servizio-nuovo-testo h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #4a3a28;
}

.servizio-nuovo-testo p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: #3e3e3e;
  margin: 0;
}

/* =========================
   CONTATTI SECTION
========================= */
.contatti-section {
  width: 100%;
  padding: 80px 20px;
    display: flex;
  justify-content: center;
  background-color: #b99b6b; /* sfondo del blocco */
  margin-bottom: 100px;
}

.contatti-container {
  display: flex;
  flex-wrap: wrap; /* su schermi piccoli passa sotto */
  max-width: 1200px;
  gap: 40px;
  width: 100%;
}

/* Colonna sinistra */
.contatti-info {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.contatti-img {
  width: 100%;
  max-width: 400px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.contatti-dati p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #333;
  text-align: center;
  margin: 10px 0;
}

.contatti-dati strong {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}

/* Colonna destra: form */
.contatti-form {
  flex: 1 1 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  }

.contatti-form label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.contatti-form input,
.contatti-form textarea {
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  resize: none; /* Impedisce il ridimensionamento */
}

.contatti-form button {
  padding: 14px 30px;
  background-color: #b99b6b;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contatti-form button:hover {
  background-color: #9c8358;
  transform: translateY(-2px);
}

.contatti-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.35);  /* vetro bianco trasparente */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  padding: 20px 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: fit-content;
  margin: 0 auto 40px; /* centra e aggiunge spazio sotto */
}

.contatti-logo {
  width: 220px;
  height: auto;
  display: block;
}

label[for="g-recaptcha-response"] {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}


/* ========================= 
   PRIVACY
========================= */
.privacy-content {
  max-width: 900px;        /* larghezza massima per facilitare la lettura */
  margin: 0 auto;          /* centra il contenitore orizzontalmente */
  padding: 40px 20px;      /* spazio intorno al testo */
  text-align: center;      /* centra anche i paragrafi */
  line-height: 1.6;        /* migliora la leggibilità */
  font-size: 1.1rem;       /* dimensione leggibile */
}

/* ========================= 
   cookies
========================= */
.cookie-policy {
  max-width: 900px;        /* larghezza massima per facilitare la lettura */
  margin: 0 auto;          /* centra il contenitore orizzontalmente */
  padding: 40px 20px;      /* spazio intorno al testo */
  text-align: center;      /* centra anche i paragrafi */
  line-height: 1.6;        /* migliora la leggibilità */
  font-size: 1.1rem;       /* dimensione leggibile */
}

.cookie-settings {
  max-width: 800px;      /* larghezza massima leggibile */
  margin: 50px auto 100px auto; /* margine superiore 50px, laterale auto (centrato), inferiore 100px */
  padding: 20px;
  background-color: #fff; /* sfondo chiaro */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-family: 'Montserrat', sans-serif;
}

.cookie-settings h1,
.cookie-settings h2 {
  text-align: center;
  margin-bottom: 20px;
}

.cookie-settings p, 
.cookie-settings label {
  text-align: left;
  line-height: 1.6;
}

.cookie-settings form > div {
  margin-bottom: 15px;
}

.cookie-settings button {
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background-color: #c49b66; /* colore coerente al tuo sito */
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.cookie-settings button#clear-cookies {
  background-color: #555; /* differenzia bottone cancella */
  margin-left: 10px;
}




/* ========================= 
   MEDIA QUERIES RESPONSIVE
========================= */

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

  /* Header */
  .header { padding: 15px 30px; }
  .navbar { gap: 15px; }
  .login-btn { padding: 8px 18px; font-size: 14px; }

  /* Hero Section */
  .hero-section { height: 300px; }
  .logo-wrapper { padding: 15px 30px; }

  /* Chi sono home */
  .chi-sono-home-container { flex-direction: column; gap: 40px; }
  .chi-sono-home-img img { width: 150px; }
  .chi-sono-home-text { max-width: 90%; }

  /* Servizi wedding grid */
  .servizi-grid { grid-template-columns: repeat(2, 1fr); }

  /* Servizi nuovi */
  .servizi-nuovi-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Tre foto grandi */
  .tre-foto-container { grid-template-columns: 1fr; }
  .foto-box { aspect-ratio: auto; }

  /* Contatti form */
  .contatti-container { flex-direction: column; align-items: center; }
  .contatti-form { width: 100%; padding: 30px; }
}

/* Mobile (fino a 767px) */
@media (max-width: 767px) {

  /* Header */
  .header { padding: 10px 20px; }
  .navbar { flex-direction: column; gap: 10px; }
  .login-btn { padding: 6px 14px; font-size: 13px; }

  /* Hero Section */
  .hero-section { height: 200px; }
  .logo-wrapper { padding: 10px 20px; }

  /* Chi sono home */
  .chi-sono-home-container { gap: 20px; }
  .chi-sono-home-img img { width: 120px; }
  .chi-sono-home-text h1 { font-size: 1.5rem; }
  .chi-sono-home-text p { font-size: 1rem; }

  /* Servizi wedding grid */
  .servizi-grid { grid-template-columns: 1fr; }

  /* Servizi nuovi */
  .servizi-nuovi-grid { grid-template-columns: 1fr; gap: 30px; }

  /* Tre foto grandi */
  .tre-foto-container { gap: 15px; }

  /* Footer */
  .footer-container { gap: 15px; }

  /* Contatti */
  .contatti-form { padding: 20px; }
}

/* =========================
   Hamburger e Navbar Mobile
========================= */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  z-index: 1100;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #333;
  border-radius: 2px;
  transition: 0.3s;
}

/* Navbar default */
.navbar {
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s ease;
}

/* Mobile: hamburger visibile e navbar slide-in */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .navbar {
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
    background-color: rgba(243, 223, 186, 0.95);
    padding-top: 100px;
    box-shadow: 3px 0 10px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
    z-index: 1050;
  }

  .navbar.show { left: 0; }

  /* Animazione hamburger a X */
  .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

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

  .servizi-grid,
  .servizi-container { display: flex; flex-direction: column; gap: 20-30px; padding: 0 15px; }

  .servizio-card,
  .servizio-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    position: relative;
    overflow: visible;
    gap: 0; /* niente spazio tra immagine e overlay */
    margin-bottom: 0; /* elimina margini extra */
  }

  .servizio-card img,
  .servizio-item img { width: 100%; height: auto; border-radius: 10px; object-fit: cover; }

  .servizio-overlay {
    position: static; /* blocco sotto l'immagine */
    opacity: 1;
    background-color: rgba(243, 223, 186, 0.9); /* blocco champagne */
    padding: 10px 15px; /* meno spazio sopra e sotto */
    border-radius: 0 0 10px 10px; /* bordo solo in basso */
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #333;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    margin-bottom: 30px; /* piccolo spazio prima della prossima immagine */
  }

  /* rimuove titolo duplicato */
  .servizio-overlay::before {
    content: none;
  }

  /* testo parte subito dal blocco */
  .servizio-overlay p {
    margin: 0;
    line-height: 1.4;
    font-size: 1rem;
    color: #3e3e3e;
  }
}

  .servizio-content h2 { font-size: 1.2rem; font-weight: 800; line-height: 1.4; }
  .servizio-content p { font-size: 1rem; line-height: 1.5; }


/* =========================
   Foto e titoli Mobile
========================= */
@media (max-width: 768px) {

  .contattami-logo img { width: 80px; margin-top: 80%; margin-left: -15px; }

  .chi-sono-hero {
    padding-top: 20px;
    padding-bottom: 40px;
    margin-top: 10px;
    padding: 0 15px;
  }
  .chi-sono-hero h1,
  .chi-sono-storia h2,
  .servizi-hero h1 { font-size: 1.8rem; line-height: 1.3; font-weight: 600; }
  .chi-sono-hero p,
  .chi-sono-storia p,
  .servizi-hero p { font-size: 1rem; line-height: 1.5; }

  .chi-sono-storia-img img {
    width: 100%; max-width: 100%; height: auto; display: block; margin: 15px 0 0;
    box-sizing: border-box;
  }
  .chi-sono-storia-img { width: 100%; max-width: 100%; overflow: hidden; margin: 0; }
}

@media (max-width: 768px) {

  /* Contenitore card */
  .servizi-nuovi-grid {
    display: flex;
    flex-direction: column;
    gap: 30px; /* spazio tra una card e l'altra */
    padding: 0 ;
  }

  /* Card singola */
  .servizio-nuovo-card {
    position: relative;
    width: 100%;
  }

  /* Immagine */
  .servizio-nuovo-card img {
    width: 100%;   /* immagine larga quanto la pagina */
    height: auto;
    display: block;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
  }

  /* Blocco testo sovrapposto */
  .servizio-nuovo-testo {
    position: relative;
    margin-top: -40px; /* sovrapposizione sull'immagine */
    margin-bottom: -30px; /* spazio tra il blocco testo e l'immagine successiva */
    background-color: rgba(243, 223, 186, 0.95);
    padding: 20px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    z-index: 1;
  }

  .servizio-nuovo-testo h3 {
    margin-top: 0;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .servizio-nuovo-testo p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 10px;
  }

       /* Blocchi pari (a destra) */
  .servizio-nuovo-card:nth-child(even) .servizio-nuovo-testo {
    transform: translateX(43%) translateY(-90px); /* sposta il blocco verso destra senza ridurre larghezza */
  }

    /* Tutti i blocchi champagne */
  .servizio-nuovo-card .servizio-nuovo-testo {
    transform: translateY(-90px); /* solleva tutti di 20px; aumenta il valore negativo per sollevare di più */
  }

  .servizi-nuovi-grid .servizio-nuovo-card:last-child .servizio-nuovo-testo {
    margin-bottom: -100px;

}


@media (max-width: 768px) {
  .tre-foto {
    display: none;
  }
}}

/* Tablet */
@media (max-width: 1024px) {
  .chi-sono-hero h1 {
    transform: translateX(0); /* centro il titolo */
    text-align: center;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .chi-sono-hero h1 {
    transform: translateX(0); /* cancella lo spostamento */
    text-align: center;
    font-size: 1.8rem; /* mantiene leggibile */
  }
}

/* =========================
   Countdown SPOSI
========================= */

.countdown-container {
  text-align: center;
  padding: 60px 20px;
  background-color: #F7E7CE;
}

.countdown-container h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #333;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.countdown-item {
  background: #fff;
  padding: 20px 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  min-width: 90px;
}

.countdown-item span {
  font-size: 2.5rem;
  font-weight: 600;
  display: block;
  color: #e28f8f; /* colore romantico rosa-rosso */
}

.countdown-item p {
  font-size: 1rem;
  color: #555;
  margin-top: 5px;
}

.struttura-container {
  background-color: #F7E7CE; /* champagne */
  padding: 40px 20px;
  text-align: center;
}

.struttura-container h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  color: #333;
  margin-bottom: 10px;
}

.struttura-container p {
  margin-bottom: 30px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #555;;
}

.struttura-grid {
  display: flex;
  width: 100%;
  gap: 0; /* nessuno spazio tra colonne */
  
}

.colonna {
  display: flex;
  flex-direction: column;
  gap: 0; /* nessuno spazio tra i blocchi verticali */
  flex: 1; /* tutte le colonne hanno larghezza uguale */
}

.colonna .spacer {
  flex-grow: 1; /* occupa lo spazio tra blocco superiore e inferiore */
}

/* Blocchi dentro le colonne */
.blocchi {
  width: 100%;
  overflow: hidden;
}

.blocchi img {
  width: 100%;
  display: block;
}

/* Blocco grande con testo */
.grande-testo {
  background-color: #b99b6b;
  color: #333;
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* occuperà metà della colonna */
  flex-direction: column; /* testo sopra, logo sotto */
}

.grande-testo .logo {
  margin-top: 20px; /* spazio tra il testo e il logo */
  width: 120px;      /* dimensione logo, modificabile */
  height: auto;
}

/* Pulsante sotto */
.struttura-button {
  margin-top: 20px;
}

.struttura-button .btn {
  background-color: #e28f8f;
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
}

.separator-white {
  width: 100%;
  height: 140px;
  background-color: #ffffff;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.03);
}

/* =========================
   GALLERY DINAMICA STRUTTURA
========================= */

/* =========================
   GALLERY EDITORIALE
========================= */

.gallery-editoriale {
  width: 100%;
  padding: 90px 40px;
  background-color: #F7E7CE; /* champagne */
}

.gallery-editoriale-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 30px;
  max-width: 1500px;
  margin: 0 auto;
}

.gallery-editoriale .img {
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.gallery-editoriale img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s ease;
}

.gallery-editoriale .img:hover img {
  transform: scale(1.06);
}

/* VARIANTI DIMENSIONI */

/* grandi */
.img-large {
  grid-column: span 3;
}

/* molto larga */
.img-wide {
  grid-column: span 4;
}

/* media */
.img-medium {
  grid-column: span 1;
}

/* alta */
.img-tall {
  grid-column: span 2;
  grid-row: span 2;
}

/* piccola */
.img-small {
  grid-column: span 2;
}

/* =========================
   COME ARRIVARE
========================= */

.come-arrivare-section {
  width: 100%;
  background-color: #ffffff;
  padding: 80px 20px;
}

.come-arrivare-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 50px;
  align-items: stretch;
}

/* MAPPA */
.come-arrivare-map {
  flex: 1 1 50%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.come-arrivare-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: none;
}

/* TESTO */
.come-arrivare-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.come-arrivare-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  margin-bottom: 15px;
  color: #333;
}

.come-arrivare-text .indirizzo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 25px;
  color: #555;
}

.come-arrivare-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
}


.conferma-presenza-section {
  padding: 60px 20px;
  background-color: #F7E7CE;
}

.conferma-presenza-container {
  max-width: 700px;
  margin: 0 auto;
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}


.conferma-presenza-intro h2 {
  font-family: 'Cormorant Garamond', serif;
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.conferma-presenza-intro p {
  text-align: center;
  margin-bottom: 30px;
  color: #555;
}

.conferma-presenza-form label {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: 600;
}

.conferma-presenza-form input,
.conferma-presenza-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
  margin-bottom: 10px;
}

.conferma-presenza-form .submit-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: #b89f73; /* colore matrimonio */
  color: #fff;
  font-size: 1.1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s;
}

.conferma-presenza-form .submit-btn:hover {
  background-color: #a3835a;
}

/* =========================
   STRUTTURA MOBILE index img sposi
========================= */
@media (max-width: 767px) {
  .struttura-grid {
    display: flex;
    flex-direction: column; /* tutte le colonne diventano una sotto l'altra */
    gap: 15px; /* spazio tra le immagini */
  }

  .colonna {
    display: flex;
    flex-direction: column; /* immagini una sotto l'altra */
    gap: 15px; /* spazio tra blocchi */
  }

  /* Tutte le immagini stesse dimensioni */
  .blocchi img {
    width: 100%;
    height: 200px; /* puoi modificare altezza se vuoi pi� grande/piccola */
    object-fit: cover;
    border-radius: 10px; /* opzionale, per arrotondare */
  }

  /* Blocchi grandi testo/logo centrati tra le immagini */
  .grande-testo {
    order: 4; /* posiziona questo blocco al centro, dopo le prime 3 immagini */
    height: auto; 
    padding: 20px;
  }

  .grande-testo .logo {
    width: 100px;
    margin-top: 15px;
  }

  /* Pulsante sotto la griglia */
  .struttura-button {
    margin-top: 20px;
    text-align: center;
  }

  .struttura-button .btn-leggi {
    display: inline-block;
    padding: 12px 25px;
    font-size: 1rem;
  }
}

/* Lightbox struttura-grid solo mobile */
#struttura-lightbox {
  display: none; /* nascosto di default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

#struttura-lightbox img.lightbox-img {
  max-width: 95%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 10px;
}

#struttura-lightbox .close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  font-weight: bold;
}

@media (max-width: 767px) {
  .gallery-editoriale-grid {
    display: flex;
    flex-direction: column;
    gap: 15px; /* spazio tra immagini */
  }

  .gallery-editoriale-grid .img {
    width: 100%;
  }

  .gallery-editoriale-grid .img img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 767px) {
  .come-arrivare-container {
    display: flex;
    flex-direction: column; /* impila tutto verticalmente */
  }

  .come-arrivare-map {
    order: 2; /* posiziona la mappa dopo l'indirizzo */
    margin-top: 15px; /* spazio sopra la mappa */
    width: 100%;
    height: 300px; /* altezza fissa per mobile */
  }

  .come-arrivare-text {
    order: 1; /* testo prima della mappa */
  }

  /* Se vuoi puoi anche aggiungere margini tra paragrafi */
  .come-arrivare-text p {
    margin-bottom: 15px;
  }

  /* Fai in modo che iframe riempia larghezza */
  .come-arrivare-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
}