/* Reset e Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Georgia', serif;
    line-height: 1.6;
    color: #2c3e50;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.row.align-center {
    align-items: center;
}

.col-md-6 {
    flex: 1;
    min-width: 300px;
}

.col-md-8 {
    flex: 2;
    min-width: 400px;
}

.col-md-4 {
    flex: 1;
    min-width: 250px;
}

/* Navigation */
.navbar {
    background: transparent; /* barra trasparente */
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: top 0.5s ease, background 0.3s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255); /* bianco trasparente */
    box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
/* contenitore principale: flex row, brand a sinistra, menu a destra */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 2rem;      /* lascia un padding interno, cambia a 0 per attaccare tutto al bordo */
}

/* brand = logo + testo */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;           /* spazio tra immagine e testo */
    flex: 0 0 auto;      /* non si allunga */
}

/* scritte */
.logo-text h1,
.logo-text p {
    color: white;
    transition: color 0.3s ease;
}

/* quando scrollata */
.navbar.scrolled .nav-link,
.navbar.scrolled .logo-text h1,
.navbar.scrolled .logo-text p {
    color: black !important; /* forza il nero */
}

/* hover sul link quando scrollata */
.navbar.scrolled .nav-link:hover {
    color: #333 !important;
}

/* immagine logo: usa height per mantenere proporzioni e occupare meno spazio orizzontale */
.logo-img {
    height: 65px;        /* regola tra 44-70 a seconda del logo */
    width: auto;
    display: block;
}
/* Foto card */
.service-image {
    width: 100%;
    height: 180px;       /* puoi cambiare altezza */
    object-fit: cover;   /* mantiene proporzioni e ritaglia l’eccesso */
    border-radius: 20px 20px 20px 20px; /* arrotonda solo in alto */
    margin-bottom: 1rem;
}


/* testo vicino al logo */
.logo-text h1 {
    color: white;
    font-size: 1.15rem;  /* ridotto per non far andare tutto a capo */
    margin: 0;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3)
}

.logo-text p {
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    margin: 0;
    font-style: italic;
    line-height: 1;
}

.nav-menu {
    margin-left: auto;
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    transition: color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transition: left 0.3s ease;
}

.nav-link:hover::before,
.nav-link.active::before {
    left: 0;
}

.nav-link:hover,
.nav-link.active {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.1);
}

/* hamburger (resta nascosto su desktop) */
.hamburger {
    margin-left: 1rem;
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: white;
    transition: 0.3s;
    border-radius: 2px;
}

/* MOBILE: quando il menu diventa verticale vogliamo rimuovere il margin-left:auto per evitare problemi */
@media (max-width: 768px) {
    .nav-menu {
        margin-left: 0;
    }
    .hamburger {
        display: flex;
    }
    .logo-img {
        height: 44px;
    }
    .logo-text h1 {
        font-size: 1rem;
    }
}


/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('images/case_davanti.jpg');
    background-size: cover;
    background-position: center;
    /* background-attachment fixed creates issues on mobile; disabled for better performance */
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 0 1rem;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Hero Section Caseificio */
.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    /* allow wrapping on smaller screens */
    white-space: normal;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-family: "Merienda", cursive;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    font-style: italic;
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/*Bettelmatt*/
/* Hero Section per pagine interne */
.page-hero {
    height: 50vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('images/caseificio-hero.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    margin-top: 80px; /* Compensa l'altezza della navbar fissa */
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero .hero-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-family: "Merienda", cursive;
}

.page-hero .hero-description {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Featured Product Section */
.featured-product {
    padding: 5rem 0;
    background: white;
}

.featured-title {
    font-size: 2.5rem;
    color: #283618;
    margin-bottom: 0.5rem;
}

.featured-subtitle {
    font-size: 1.8rem;
    color: #4a6741;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.featured-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: #414141;
}

.product-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.feature-item {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    color: #283618;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-hero {
        height: 40vh;
        margin-top: 70px;
    }
    
    .page-hero .hero-title {
        font-size: 2.2rem;
    }
    
    .product-features {
        grid-template-columns: 1fr;
    }
    
    .featured-title {
        font-size: 2rem;
    }
    
    .featured-subtitle {
        font-size: 1.5rem;
    }
}

/* Hero Agriturismo */
/* Common page heroes: base rules shared by all page-specific hero sections.
   Individual pages will only set the background-image and may include
   page-specific animation overrides elsewhere in the file. */
.agriturismo-hero,
.camere-hero,
.allevamento-hero,
.caseificio-hero,
.bettelmatt-hero,
.crampiolo-hero,
.burro-hero,
.yogurt-hero,
.ricotta-hero {
    height: 70vh;
    background-size: cover;
    background-position: center;
    /* background-attachment controlled globally (scroll for mobile friendliness) */
    background-attachment: scroll;
    position: relative;
    overflow: hidden;
}

/* Common hero content positioning */
.agriturismo-hero .hero-content,
.camere-hero .hero-content,
.allevamento-hero .hero-content,
.caseificio-hero .hero-content,
.bettelmatt-hero .hero-content,
.crampiolo-hero .hero-content,
.burro-hero .hero-content,
.yogurt-hero .hero-content,
.ricotta-hero .hero-content {
    position: absolute;
    top: 55%;
    left: 5%;
    transform: translateY(-50%);
    color: #ffffff;
    opacity: 1;
    transition: opacity 0.45s ease;
}

/* Common hero title */
.agriturismo-hero .hero-title,
.camere-hero .hero-title,
.allevamento-hero .hero-title,
.caseificio-hero .hero-title,
.bettelmatt-hero .hero-title,
.crampiolo-hero .hero-title,
.burro-hero .hero-title,
.yogurt-hero .hero-title,
.ricotta-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-weight: 700;
}

/* Per ogni pagina manteniamo solo la regola che imposta l'immagine di sfondo
   (le proprietà comuni sono ora gestite sopra). Le eventuali regole specifiche
   di pagina (ad es. animazioni) rimangono più in basso nel file e non vengono toccate. */
.agriturismo-hero { background-image: url('images/agrimain.jpg'); }

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-agriturismo .agriturismo-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-agriturismo .agriturismo-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar bettelmatt */
.navbar.agriturismo {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.agriturismo.no-transition {
    transition: none !important;
}

.navbar.agriturismo.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.agriturismo.scrolled .logo-text h1,
.navbar.agriturismo.scrolled .logo-text p,
.navbar.agriturismo.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.agriturismo.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero camere */
.camere-hero {
    height: 70vh;
    background-image: url('images/camera1.jpg'); /*DA FIXARE SCALATA SBAGLIATA*/
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.camere-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.camere-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-camere .camere-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-camere .camere-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar bettelmatt */
.navbar.camere {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.camere.no-transition {
    transition: none !important;
}

.navbar.camere.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.camere.scrolled .logo-text h1,
.navbar.camere.scrolled .logo-text p,
.navbar.camere.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.camere.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero allevamento */
.allevamento-hero {
    height: 70vh;
    background-image: url('images/sang.jpg'); /*DA FIXARE SCALATA SBAGLIATA*/
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.allevamento-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.allevamento-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-allevamento .allevamento-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-allevamento .allevamento-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar bettelmatt */
.navbar.allevamento {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.allevamento.no-transition {
    transition: none !important;
}

.navbar.allevamento.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.allevamento.scrolled .logo-text h1,
.navbar.allevamento.scrolled .logo-text p,
.navbar.allevamento.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.allevamento.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero Caseificio */
.caseificio-hero {
    height: 70vh;
    background-image: url('images/case2.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.caseificio-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.caseificio-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-caseificio .caseificio-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-caseificio .caseificio-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar caseificio */
.navbar.caseificio {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.caseificio.no-transition {
    transition: none !important;
}

.navbar.caseificio.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.caseificio.scrolled .logo-text h1,
.navbar.caseificio.scrolled .logo-text p,
.navbar.caseificio.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.caseificio.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero Bettelmatt */
.bettelmatt-hero {
    height: 70vh;
    background-image: url('images/bettelmatt.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.bettelmatt-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.bettelmatt-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-bettelmatt .bettelmatt-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-bettelmatt .bettelmatt-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar bettelmatt */
.navbar.bettelmatt {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.bettelmatt.no-transition {
    transition: none !important;
}

.navbar.bettelmatt.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.bettelmatt.scrolled .logo-text h1,
.navbar.bettelmatt.scrolled .logo-text p,
.navbar.bettelmatt.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.bettelmatt.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero Crampiolo-Forme */
.crampiolo-hero {
    height: 70vh;
    background-image: url('images/crampiolo.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.crampiolo-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.crampiolo-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-crampiolo .crampiolo-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-crampiolo .crampiolo-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar crampiolo */
.navbar.crampiolo {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.crampiolo.no-transition {
    transition: none !important;
}

.navbar.crampiolo.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.crampiolo.scrolled .logo-text h1,
.navbar.crampiolo.scrolled .logo-text p,
.navbar.crampiolo.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.crampiolo.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero Burro */
.burro-hero {
    height: 70vh;
    background-image: url('images/burro_2.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.burro-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.burro-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-burro .burro-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-burro .burro-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar burro */
.navbar.burro {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.burro.no-transition {
    transition: none !important;
}

.navbar.burro.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.burro.scrolled .logo-text h1,
.navbar.burro.scrolled .logo-text p,
.navbar.burro.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.burro.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero Yogurt */
.yogurt-hero {
    height: 70vh;
    background-image: url('images/yogurt_2.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.yogurt-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.yogurt-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-yogurt .yogurt-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-yogurt .yogurt-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar yogurt */
.navbar.yogurt {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.yogurt.no-transition {
    transition: none !important;
}

.navbar.yogurt.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.yogurt.scrolled .logo-text h1,
.navbar.yogurt.scrolled .logo-text p,
.navbar.yogurt.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.yogurt.scrolled .nav-link:hover {
    color: #375032;
}

/* Hero Ricotta */
.ricotta-hero {
    height: 70vh;
    background-image: url('images/yogurt_2.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* contenuto (no translateY per evitare scalino): opacità per un fade dolce se vuoi */
.ricotta-hero .hero-content {
    position: absolute;
    top: 55%;        /* leggermente sotto la metà verticale */
    left: 5%;        /* spostato a sinistra */
    transform: translateY(-50%); /* posizionamento stabile */
    color: #ffffff;
    opacity: 1;                /* visibile subito */
    transition: opacity 0.45s ease; /* fade opzionale lieve */
}

/* titolo: nessuna animazione di "scalino" (nessun translate usato) */
.ricotta-hero .hero-title {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    color: #ffffff; /* esatto colore richiesto */
    font-weight: 700;
    /* niente trasformazioni verticali qui: evita scalino */
}

/*ANIMAZIONE SCRITTA CASEIFICIO*/
.page-ricotta .ricotta-hero .hero-content {
    animation: none !important;
    transition: none !important;
    transform: translateY(-50%) !important; /* mantiene il posizionamento verticale centrale */
    opacity: 1 !important;
  }
  
  .page-ricotta .ricotta-hero .hero-title {
    opacity: 0;
    transform: translateY(30px); /* partenza sotto */
    animation: fadeInUpTitle 1.5s cubic-bezier(.22,.9,.35,1) 0.15s forwards;
    will-change: transform, opacity;
  }
  
  @keyframes fadeInUpTitle {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* Navbar ricotta */
.navbar.ricotta {
    position: fixed;
    top: -120px;                /* fuori dallo schermo */
    left: 0;
    width: 100%;
    z-index: 1100;
    background: white;          /* colore definitivo quando visibile */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: top 0.45s cubic-bezier(.22,.9,.35,1), background 0.25s ease;
    will-change: top;
}
.navbar.ricotta.no-transition {
    transition: none !important;
}

.navbar.ricotta.scrolled {
    top: 0; /* appare */
}

/* non forzare il colore: lasciamo al CSS la gestione del colore, solo pointer */
nav.navbar .nav-link,
.navbar .nav-link,
nav.navbar .nav-menu li a {
    cursor: pointer;
    /* NO color forcing here */
}



.navbar.ricotta.scrolled .logo-text h1,
.navbar.ricotta.scrolled .logo-text p,
.navbar.ricotta.scrolled .nav-link {
    color: #283618; /* colore definitivo quando la navbar è visibile */
}

/* hover leggera quando la navbar è scrolled */
.navbar.ricotta.scrolled .nav-link:hover {
    color: #375032;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, #ff6b6b, #feca57);
    color: white;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.4);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    transform: translateY(-3px);
}

.btn-outline {
    background: transparent;
    color: #2c3e50;
    border: 2px solid #2c3e50;
}

.btn-outline:hover {
    background: #2c3e50;
    color: white;
    transform: translateY(-3px);
}

/* Sections */
section {
    padding: 5rem 0;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: #283618;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    border-radius: 2px;
}

/* About Section */
.about {
    background: none;
}

.about h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #283618;
}

.about h1 {
    color: #283618;
}


.about p {
    max-width: 800px; /* larghezza massima per righe più leggibili */
    margin-bottom: 1.5rem; /* spazio tra paragrafi */
    line-height: 1.8; /* altezza riga per rendere leggibile */
    color: #414141; /* colore testo */
    font-size: 1.1rem; /* dimensione testo */
    word-wrap: break-word; /* assicura che le parole lunghe vadano a capo */
}

/* Services Section */
.services {
    background: white;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonne uguali */
    gap: 1.5rem;                           /* spazio tra le card */
}

.service-card {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease; /* animazione immagine */
}

.service-card:hover {
    transform: translateY(-5px);           /* solleva la card */
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.service-card:hover img {
    transform: scale(1.02);                /* ingrandisce leggermente l'immagine */
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}



/* Products Highlight */
.products-highlight {
    background: none;
}

.products-highlight h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #283618;
}

.products-highlight p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #414141;
}

/* Location Section */
.location {
    background: white;
}

.location h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #283618;
}

.location p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.7;
    color: #414141;
}
/*
.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    font-weight: 500;
}

.feature .icon {
    font-size: 1.5rem;
}

.info-box {
    color: white;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
}

.info-box h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.info-box p {
    margin-bottom: 1rem;
    line-height: 1.6;
}
*/

/* Image Placeholder */
.image-placeholder {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #ddd 0%, #ccc 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Image Placeholder camere */
.image-sotto {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    margin-top: 1rem; /* Aggiunge un po' di spazio sopra l'immagine */
}

/* Foto */
.photo-container {
    display: flex;
    justify-content: center;  /* centra la fila */
    gap: 10px;                /* spazio tra le foto */
    flex-wrap: wrap;           /* va a capo su schermi piccoli */
    
}

.photo-container img {
    max-width: 350px;      /* massima larghezza, scala da sola */
    width: 100%;           /* si adatta al contenitore */
    height: auto;          /* mantiene proporzioni */
    transition: transform 0.3s ease;
}

/* Responsive: riduce le colonne su schermi più piccoli */
@media (max-width: 1000px) {
    .photo-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 foto per riga */
    }
}

@media (max-width: 600px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 foto per riga */
    }
}





/* Footer */
.footer {
    background: none;             /* trasparente o cambia colore se vuoi */
    color: #333;                  /* colore testo più discreto */
    padding: 1rem 0;              /* meno spazio verticale */
    font-size: 0.85rem;           /* testo più piccolo */
    text-align: center;           /* tutto centrato */
}

.footer-content {
    display: none;                /* se vuoi solo i crediti finali */
}

.footer-bottom {
    border-top: 1px solid rgba(0,0,0,0.1); /* linea sottile */
    padding-top: 0.5rem;
    color: #666;                  /* colore testo discreto */
}

.footer-section h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background: linear-gradient(135deg, #2d8f5f 0%, #2d8f5f 100%);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0,0,0,0.05);
        padding: 2rem 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .row {
        flex-direction: column;
    }
    
    .col-md-6,
    .col-md-8,
    .col-md-4 {
        min-width: auto;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    section {
        padding: 3rem 0;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
    
    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}