/* ===============================
   Link nelle griglie
   =============================== */
.row a{ text-decoration:none; color:#59918c; }
.row a:hover{ text-decoration:none; color:#3f7b76; }

:root{ --nav-h: 84px; } /* aggiorna se serve */

/* FULLSCREEN */
.hero-right{
  position: relative;
  overflow: hidden;
  background:#000;
  isolation:isolate;
  margin:0 !important;
  height: 100vh;        /* fallback */
  height: 100svh;       /* viewport reale mobile */
  height: 100dvh;       /* viewport dinamico */
  width: 100%;
}

/* ► FOCUS SUL FONDO: mantieni il muretto visibile */
.hero-right .hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 92%;   /* era 50% 35% → porta il focus in basso */
  display:block; z-index:0;
}

/* Overlay più “leggero” vicino al bordo, per non oscurare il muretto */
.hero-right .hero-right-overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.38) 14%,
    rgba(0,0,0,.22) 36%,
    rgba(0,0,0,0) 70%
  );
  pointer-events:none; z-index:1;
}
.hero-right::after{ display:none !important; }

/* Caption: spostala leggermente su, così non poggia sul muretto */
.hero-right .hero-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(16px,4vw,36px);
  /* alza un po’ il testo dal bordo per non coprire il muretto */
  padding-bottom: clamp(32px, 7vh, 80px);
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6);
  z-index:2;
}

/* Tipografia (Nunito) */
.hero-right .hero-caption h1{
  margin:0 0 .15em 0;
  font-family:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:800; line-height:1.06;
  font-size:clamp(28px,4.8vw,56px); letter-spacing:.2px;
}
.hero-right .hero-caption .lead{
  font-family:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:300; text-transform:lowercase;
  line-height:1.45; font-size:clamp(16px,2.1vw,22px);
  margin:0; max-width:60ch;
}

/* Mobile: ancora più focus sul fondo */
@media (max-width: 991.98px){
  .hero-right .hero-photo{ object-position: 50% 96%; }  /* porta ancora più giù */
}

.service-card {
  background-color: #e6f2ff;
  border-radius: 20px;
  padding: 30px 20px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.service-card:hover {
  background-color: #f8f9fa; /* magenta chiarissimo */
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.service-card h5 {
  margin-top: 15px;
  font-weight: 600;
  color: #2c2e35;
}

.service-card img {
  transition: transform 0.3s ease;
}

.service-card:hover img {
  transform: scale(1.02);
}

.service-card i.icon {
  font-size: 40px;
  color: #2c2e35; /* grigio scuro iniziale */
  transition: color 0.3s ease, transform 0.3s ease;
}

.service-card:hover i.icon {
  color: green; /* magenta al passaggio */
  transform: scale(1.2);
}


/* forza dimensione e taglio immagine */
img.img-equal{
  display:block;                 /* evita spazi bianchi inline */
  width:100%;
  height:270px !important;       /* altezza fissa */
  object-fit:cover;
  object-position:center;        /* o 'bottom' se preferisci */
  border-radius:.5rem;
  /* ombra più “larga” e visibile su sfondi chiari */
  box-shadow:0 14px 28px rgba(0,0,0,.22), 0 10px 10px rgba(0,0,0,.12);
  transition:transform .3s ease, box-shadow .3s ease;
}
img.img-equal:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,.28), 0 14px 14px rgba(0,0,0,.16);
}


/* Hero: variante "mid" ~65% della viewport */
.hero-right.hero-65 {
  height: 65vh !important;   /* sovrascrive eventuale 100vh */
  min-height: 420px;         /* evita che sia troppo basso su schermi piccoli ma larghi */
}

/* Mobile: un filo meno alto così il fold è più vicino */
@media (max-width: 576px) {
  .hero-right.hero-65 {
    height: 58vh !important;
    min-height: 360px;
  }
}

/* Assicurati che l'immagine riempia il box */
.hero-right.hero-65 .hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.after-body{
  background-color: #425D14;
  padding-top: clamp(24px, 4vw, 64px);
}