:root {
     --primary-wine: #6b1437;
     --primary-wine-dark: #4b0f29;
     --gold: #d2a35b;
     --text-dark: #1b1b1b;
     --text-light: #f8f8f8;
     --bg-light: #f5f3f7;
   }

   * {
     box-sizing: border-box;
   }

   body {
     font-family: "Poppins", sans-serif;
     color: #2b2b2b;
     background-color: #ffffff;
     overflow-x: hidden;
   }


   /* NAVBAR */
   .navbar {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.3));
     backdrop-filter: blur(12px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .navbar-brand {
     font-family: "Playfair Display", serif;
     font-size: 1.4rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: #fff !important;
   }

   .brand-highlight {
     color: var(--gold);
   }

   .nav-link {
     color: #f5f5f5 !important;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     position: relative;
     padding-bottom: 0.2rem;
   }

   .nav-link::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--gold), var(--primary-wine));
     transition: width 0.3s ease;
   }

   .nav-link:hover::after,
   .nav-link.active::after {
     width: 100%;
   }

   .btn-outline-light.rounded-pill {
     border-width: 1px;
     font-size: 0.8rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     padding: 0.4rem 1.3rem;
   }

   /* HERO NUOVA */
   .hero-section {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     color: #fff;
     overflow: hidden;
   }

   .hero-bg-img {
     position: absolute;
     inset: 0;
     background: url("https://images.pexels.com/photos/1407858/pexels-photo-1407858.jpeg?auto=compress&cs=tinysrgb&w=1600") center/cover no-repeat;
     transform: scale(1.05);
     filter: saturate(1.1);
   }

   .hero-overlay {
     background-color: red !important;
     position: absolute;
     inset: 0;
     background:
       linear-gradient(to right, rgba(4, 2, 8, 0.96) 0%, rgba(4, 2, 8, 0.9) 35%, rgba(4, 2, 8, 0.35) 70%, rgba(0, 0, 0, 0.75) 100%),
       radial-gradient(circle at top left, rgba(210, 163, 91, 0.25), transparent 55%);
   }

   .hero-content {
     position: relative;
     z-index: 2;
     padding-top: 5rem;
     padding-bottom: 4rem;
   }

   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.3rem 0.9rem;
     border-radius: 999px;
     background: rgba(0, 0, 0, 0.55);
     margin-bottom: 1rem;
     font-size: 0.8rem;
     color: #f3e9d4;
     text-transform: uppercase;
     letter-spacing: 0.18em;
   }

   .hero-title-main {
     font-family: "Playfair Display", serif;
     font-size: clamp(2.8rem, 4.2vw, 3.9rem);
     line-height: 1.05;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     margin-bottom: 0.75rem;
   }

   .hero-title-main span {
     display: block;
     color: var(--gold);
     font-size: 0.7em;
     letter-spacing: 0.4em;
   }

   .hero-subtitle {
     font-size: 1.05rem;
     color: #f1e7ff;
     max-width: 520px;
     margin-bottom: 1.6rem;
   }

   .hero-info {
     font-size: 0.88rem;
     color: #d3c8e3;
     max-width: 520px;
     margin-bottom: 1.8rem;
   }

   .hero-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 0.9rem;
     margin-bottom: 1.5rem;
   }

   .btn-main {
     border-radius: 999px;
     padding: 0.75rem 1.9rem;
     font-size: 0.9rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     border: none;
     background: linear-gradient(135deg, var(--gold), var(--primary-wine));
     color: #160909;
     font-weight: 600;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
     transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
   }

   .btn-main:hover {
     transform: translateY(-2px);
     filter: brightness(1.06);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
     color: #160909;
   }

   .btn-ghost {
     border-radius: 999px;
     padding: 0.75rem 1.8rem;
     font-size: 0.9rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     border: 1px solid rgba(255, 255, 255, 0.6);
     background: transparent;
     color: #f1f1f1;
     backdrop-filter: blur(4px);
     transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
   }

   .btn-ghost:hover {
     background: rgba(0, 0, 0, 0.4);
     transform: translateY(-2px);
     color: #fff;
   }

   .hero-small-note {
     margin-top: 0.6rem;
     font-size: 0.8rem;
     color: #cfc7d9;
     display: flex;
     align-items: center;
     gap: 0.4rem;
     opacity: 0.9;
   }

   .hero-small-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--gold);
     box-shadow: 0 0 15px rgba(210, 163, 91, 0.7);
   }

   .hero-right-panel {
     position: relative;
     z-index: 2;
     display: flex;
     justify-content: flex-end;
   }

   .hero-mini-card {
     border-radius: 24px;
     padding: 1.5rem 1.7rem;
     background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.9));
     border: 1px solid rgba(255, 255, 255, 0.14);
     width: 320px;
     box-shadow: 0 22px 50px rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(8px);
   }

   .mini-title {
     font-family: "Playfair Display", serif;
     font-size: 1.1rem;
     color: #fff;
     margin-bottom: 0.4rem;
   }

   .mini-label {
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     color: var(--gold);
     margin-bottom: 0.4rem;
   }

   .mini-text {
     font-size: 0.82rem;
     color: #e0d6f1;
     margin-bottom: 0.9rem;
   }

   .mini-pill {
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
     padding: 0.25rem 0.7rem;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.25);
     font-size: 0.75rem;
     color: #f7f0ff;
     margin-bottom: 0.4rem;
   }

   /* SECTIONS BASE */
   section {
     position: relative;
     padding: 4.5rem 0;
   }

   .section-title {
     font-family: "Playfair Display", serif;
     font-size: 2rem;
     color: #f6f1ff;
     margin-bottom: 0.5rem;
   }

   .section-subtitle {
     font-size: 0.9rem;
     color: #b9b0c8;
     max-width: 520px;
   }

   /* STORIA */
   .story-section {
     background: #ffffff;
   }


   .story-text {
     font-size: 0.95rem;
     line-height: 1.7;
     color: #ddd3ea;
   }

   .story-highlight {
     border-left: 3px solid var(--gold);
     padding-left: 1rem;
     margin-top: 1.2rem;
     font-size: 0.9rem;
     color: #e8deff;
   }

   .story-image-wrapper {
     border-radius: 24px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.12);
   }

   .story-image-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.03);
     transition: transform 0.4s ease;
     filter: saturate(1.1);
   }

   .story-image-wrapper:hover img {
     transform: scale(1.07);
   }

   .story-tag {
     position: absolute;
     bottom: 1rem;
     left: 1rem;
     background: rgba(0, 0, 0, 0.7);
     color: #f9f3ff;
     padding: 0.4rem 0.8rem;
     border-radius: 999px;
     font-size: 0.78rem;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     border: 1px solid rgba(255, 255, 255, 0.3);
   }

   /* SERVIZI */
  .services-section {
  background: #f9f6f2;
}


   .service-card {
     border-radius: 20px;
     padding: 1.6rem 1.7rem;
     background: linear-gradient(145deg, #1b121f, #09040f);
     border: 1px solid rgba(255, 255, 255, 0.09);
     color: #f5f0ff;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
     height: 100%;
     position: relative;
     overflow: hidden;
   }

   .service-card::before {
     content: "";
     position: absolute;
     inset: -30%;
     background: radial-gradient(circle at top, rgba(210, 163, 91, 0.2), transparent 60%);
     opacity: 0;
     transition: opacity 0.4s ease;
   }

   .service-card:hover::before {
     opacity: 1;
   }

   .service-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95);
     border-color: rgba(210, 163, 91, 0.7);
   }

   .service-icon {
     width: 42px;
     height: 42px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     background: radial-gradient(circle at top, rgba(210, 163, 91, 0.18), rgba(0, 0, 0, 0.85));
     border: 1px solid rgba(255, 255, 255, 0.25);
     margin-bottom: 0.7rem;
   }

   .service-title {
     font-size: 1rem;
     font-weight: 500;
     margin-bottom: 0.3rem;
   }

   .service-text {
     font-size: 0.86rem;
     color: #d4c9ec;
     margin-bottom: 0.9rem;
   }

   .service-label {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     color: var(--gold);
     margin-bottom: 0.3rem;
   }

   /* PRODOTTI IN EVIDENZA (CHICCHE) */
   .featured-section {
  background: #ffffff;
}


.product-card,
.service-card,
.story-image-wrapper {
  background: #ffffff !important;
  border: 1px solid #eaeaea !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}

.product-name,
.service-title {
  color: #222 !important;
}
.product-meta,
.service-text {
  color: #555 !important;
}


   .product-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
     border-color: rgba(210, 163, 91, 0.55);
   }

   .product-image-wrapper {
     height: 210px;
     overflow: hidden;
     background: radial-gradient(circle at top, #3b1223, #050309);
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .product-image {
     max-height: 180px;
     width: auto;
     filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.9));
     transform: translateY(4px);
     transition: transform 0.35s ease;
   }

   .product-card:hover .product-image {
     transform: translateY(0);
   }

   .product-body {
     padding: 1.1rem 1.2rem 1.2rem;
   }

   .product-name {
     font-family: "Playfair Display", serif;
     font-size: 1.1rem;
     margin-bottom: 0.25rem;
   }

   .product-meta {
     font-size: 0.78rem;
     margin-bottom: 0.5rem;
   }

   .product-price {
     font-size: 1rem;
     color: var(--gold);
     font-weight: 600;
     margin-right: 0.5rem;
   }

   .product-actions {
     margin-top: 0.8rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.8rem;
   }

   .product-tag {
     font-size: 0.75rem;
     border-radius: 999px;
     padding: 0.25rem 0.7rem;
     border: 1px solid rgba(255, 255, 255, 0.18);
   }

   .btn-product {
     font-size: 0.8rem;
     border-radius: 999px;
     padding: 0.4rem 0.9rem;
     border: none;
     background: linear-gradient(135deg, var(--primary-wine), var(--gold));
     color: #140809;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
   }

   .btn-product:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
     color: #140809;
   }
   /* SCROLL REVEAL */
   .reveal {
     transform: translateY(24px);
     transition: opacity 0.7s ease, transform 0.7s ease;
   }

   .reveal.revealed {
     opacity: 1;
     transform: translateY(0);
   }

   @media (max-width: 991.98px) {
     .hero-section {
       text-align: left;
     }

     .hero-right-panel {
       justify-content: flex-start;
       margin-top: 2rem;
     }

     .hero-mini-card {
       margin-left: 0;
     }
   }

   @media (max-width: 575.98px) {
     .hero-section {
       padding-top: 6rem;
     }

     .hero-title-main {
       font-size: 2.4rem;
     }

     .hero-buttons {
       flex-direction: column;
     }
   }

   .validd {
  color: green;
}

.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}


/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
  color: red;
}

.invalidd {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}

#confermapassword {
  display: none;
  color: #000;
  position: relative;
  padding: 10px;
  margin-top: 5px;
}

#confermapassword p {
  padding: 0px 35px;
  font-size: 13px;
}

.nonattivo {
  pointer-events: none;
}

.attivo {
  pointer-events: visible;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display: none;
  color: #000;
  position: relative;
  padding: 10px;
  margin-top: 5px;
}

#message p {
  padding: 0px 35px;
  font-size: 13px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}