/* ------------------------------

   RESET BASE

------------------------------ */

body {

  margin: 0;

  font-family: "Inter", sans-serif;

  color: #333;

  background: #fff;

}



/* ------------------------------

   MENU

------------------------------ */

.main-menu {

  width: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background: white;

  padding: 12px 0;

  box-shadow: 0 2px 8px rgba(0,0,0,0.08);

  z-index: 1000;

}



.menu-inner {

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.menu-logo a {

  font-size: 1.2rem;

  font-weight: 600;

  color: #6B7A3A;

  text-decoration: none;

}



.menu-links {

  list-style: none;

  display: flex;

  gap: 22px;

  margin: 0;

  padding: 0;

}



.menu-links a {

  text-decoration: none;

  color: #444;

  font-size: 0.95rem;

  font-weight: 500;

}



.menu-links a:hover,

.menu-links a.active {

  color: #6B7A3A;

  border-bottom: 2px solid #6B7A3A;

  padding-bottom: 3px;

}



/* ------------------------------

   SLIDESHOW

------------------------------ */

.hero-slider {

  position: relative;

  height: 80vh;

  overflow: hidden;

  margin-top: 70px;

}



.hero-slider .slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  opacity: 0;

  animation: fade 15s infinite;

}



.hero-slider .slide:nth-child(1) { animation-delay: 0s; }

.hero-slider .slide:nth-child(2) { animation-delay: 5s; }

.hero-slider .slide:nth-child(3) { animation-delay: 10s; }



@keyframes fade {

  0% { opacity: 0; }

  10% { opacity: 1; }

  30% { opacity: 1; }

  40% { opacity: 0; }

  100% { opacity: 0; }

}



.hero-text {

  position: absolute;

  bottom: 60px;

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  color: white;

  text-shadow: 0 2px 6px rgba(0,0,0,0.4);

}



/* ------------------------------

   CONTENUTO

------------------------------ */

.content {

  max-width: 900px;

  margin: 50px auto;

  padding: 0 20px;

  text-align: center;

}



.content p {

  text-align: justify;

}



.section-title {

  color: #6B7A3A;

  font-size: 1.6rem;

  margin-bottom: 20px;

}



/* ------------------------------

   CARD CASE

------------------------------ */

.case-section {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 2rem;

  max-width: 900px;

  margin: 50px auto;

  padding: 0 20px;

}



.case-card {

  border: 1px solid #e8e8e8;

  border-radius: 12px;

  background: #ffffff;

  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

  overflow: hidden;

}



.case-link {

  display: block;

  text-align: center;

  padding: 18px 10px;

  text-decoration: none;

  color: inherit;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.case-link:hover {

  transform: translateY(-4px);

  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

}



.case-link img {

  width: 92%;

  height: 290px;

  object-fit: cover;

  border-radius: 10px;

  border: 3px solid #f3f3f3;

  margin: 0 auto 12px auto;

  display: block;

}



.case-link h3 {

  margin: 8px 0 6px 0;

  color: #6B7A3A;

  font-size: 1.05rem;

  font-weight: 600;

}



.case-link p {

  margin: 0 auto 12px auto;

  color: #555;

  line-height: 1.45;

  font-size: 0.95rem;

  max-width: 90%;

  text-align: justify;

}



.case-link .btn {

  display: inline-block;

  padding: 6px 16px;

  background: #6B7A3A;

  color: white;

  border-radius: 6px;

  font-weight: 500;

  font-size: 0.9rem;

}



.case-link:hover .btn {

  background: #55622E;

}



/* ------------------------------

   ESPERIENZE

------------------------------ */

.experience-section {

  max-width: 900px;

  margin: 80px auto 60px;

  text-align: center;

}





.experience-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

}



.experience-card img {

  width: 92%;

  height: 290px;

  object-fit: cover;

  border-radius: 10px;

  border: 3px solid #f3f3f3;

  margin: 0 auto 12px auto;

  display: block;

}



.experience-card h3 {

  margin-top: 10px;

  font-size: 1.1rem;

  color: #6B7A3A;

  font-weight: 600;

}



.experience-card p {

  max-width: 90%;

  margin: 8px auto 14px auto;

  color: #555;

  font-size: 0.95rem;

  line-height: 1.5;

  text-align: justify;

}



.experience-card:hover .btn-exp {

  background: #55622E;

}



/* ------------------------------

   PAGINE INTERNE (ORTO + FRANTOIO)

------------------------------ */

.page-image {

  width: 100%;

  max-width: 900px;

  border-radius: 12px;

  margin: 20px auto 30px auto;

  display: block;

  box-shadow: 0 4px 12px rgba(0,0,0,0.12);

}



.btn-back {

  display: inline-block;

  margin-top: 25px;

  padding: 8px 18px;

  background: #6B7A3A;

  color: white;

  border-radius: 6px;

  text-decoration: none;

  font-weight: 500;

  transition: background 0.25s ease;

}



.btn-back:hover {

  background: #55622E;

}



/* ------------------------------

   MAPPA

------------------------------ */

.map-section {

  max-width: 900px;

  margin: 60px auto;

  padding: 0 20px;

  text-align: center;

}



.map-container iframe {

  width: 100%;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}



/* ------------------------------

   SEO HOME

------------------------------ */

.seo-home {

  max-width: 900px;

  margin: 60px auto 40px;

  padding: 0 20px;

  text-align: center;

}



.seo-home p {

  font-size: 1.05rem;

  line-height: 1.6;

  color: #444;

  font-weight: 400;

  margin: 0 auto;

  text-align: justify;

}



/* ------------------------------

   FOOTER

------------------------------ */

.site-footer {

  background: #f7f7f7;

  padding: 50px 20px 25px 20px;

  border-top: 1px solid #e0e0e0;

  font-size: 0.95rem;

  color: #444;

}



.footer-inner {

  max-width: 900px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 20px;

}



.footer-left h3 {

  color: #6B7A3A;

  margin: 0 0 6px 0;

  font-size: 1.2rem;

}



.footer-left p,

.footer-right p {

  margin: 4px 0;

}



.footer-right {

  margin-top: 4px;

}



.footer-right a {

  color: #6B7A3A;

  text-decoration: none;

  font-weight: 500;

}



.footer-right a:hover {

  text-decoration: underline;

}



.footer-bottom {

  text-align: center;

  margin-top: 25px;

  font-size: 0.85rem;

  color: #777;

}



/* ------------------------------

   WHATSAPP FLOATING BUTTON

------------------------------ */

.whatsapp-btn {

  position: fixed;

  bottom: 20px;

  right: 20px;

  background: #25D366;

  color: white;

  padding: 12px 18px;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 600;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  z-index: 999;

}



.seo-esperienze {

  max-width: 900px;

  margin: 0 auto 40px;

  padding: 0 20px;

  font-size: 1.05rem;

  line-height: 1.6;

  color: #444;

  text-align: justify;

}



/* ------------------------------

   PAGINE MENU (panorama + liama + chisiamo + preventivo)

------------------------------ */

.page-title {

  text-align: center;

  margin: 30px 0;

}



.page-content {

  max-width: 900px;

  margin: 0 auto 40px;

  padding: 0 20px;

  font-size: 1.05rem;

  line-height: 1.7;

  color: #444;

}



.preventivo-form {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 25px;

}



.preventivo-form label {

  font-weight: 600;

  margin-top: 5px;

}



.preventivo-form input,

.preventivo-form select,

.preventivo-form textarea {

  padding: 8px 10px;

  border-radius: 6px;

  border: 1px solid #ccc;

  font-size: 1rem;

}



.preventivo-form button {

  margin-top: 15px;

  padding: 10px 16px;

  border: none;

  border-radius: 8px;

  background: #6B7A3A;

  color: #fff;

  font-size: 1rem;

  cursor: pointer;

}



.preventivo-form button:hover {

  background: #5d6a33;

}



.preventivo-note {

  margin-top: 20px;

  font-size: 0.95rem;

  color: #555;

}



/* Overlay scuro */

.overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.6);

  justify-content: center;

  align-items: center;

  z-index: 9999;

}



/* Box centrale */

.popup {

  background: #fff;

  padding: 30px;

  border-radius: 12px;

  width: 90%;

  max-width: 420px;

  position: relative;

  animation: fadeIn 0.3s ease;

}



/* Animazione */

@keyframes fadeIn {

  from { opacity: 0; transform: scale(0.95); }

  to { opacity: 1; transform: scale(1); }

}



/* Pulsante chiusura */

.closePopup {

  position: absolute;

  top: 12px;

  right: 15px;

  font-size: 28px;

  cursor: pointer;

}



/* Form */

.availability-form {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 20px;

}



.availability-form input,

.availability-form select {

  padding: 8px;

  border-radius: 6px;

  border: 1px solid #ccc;

}



.availability-form button {

  margin-top: 10px;

  padding: 10px;

  background: #6B7A3A;

  color: #fff;

  border: none;

  border-radius: 8px;

  cursor: pointer;

}



.availability-form button:hover {

  background: #5d6a33;

}



/* Risultati */

.results-box {

  margin-top: 20px;

  font-size: 1rem;

  line-height: 1.5;

}