@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
.mona-sans-100 {
  font-family: "Mona Sans", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.playfair-display-100 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "editorial-new";
  src: url(//pangrampangram.com/cdn/shop/files/PPEditorialNew-Variable.woff2?v=7118928251243937550);
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "editorial-new";
  src: url(//pangrampangram.com/cdn/shop/files/PPEditorialNew-ItalicVariable.ttf?v=16354667908536397326);
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
.editorial {
  margin: 20px 0;
  font-family: "editorial-new","Playfair Display",serif;
  font-size: 44px;
  font-weight: 200;
}
/* Reset di base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Mona Sans";
  overflow-x: hidden;
}
a,
a:link,
a:visited {
  text-decoration: none;
  color: #000;
}
a:hover {
  text-decoration: underline;
}

/* Wrapper per header, menu mobile e overlay */
.nav-container {
  position: relative;
  z-index: 1000;
}
.container {
  width: 80%;
  margin: 60px auto;
}
/* HEADER: container flex per menu, logo e icone */
header {
  position: relative;
  height: 100px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Menu classico (desktop) */
.menu a {
  text-decoration: none;
  color: #333;
  margin-right: 15px;
  border: 1px solid;
  padding: 5px 15px;
  border-radius: 21px;
  font-size: 0.9rem;
}
.menu a.selected {
  background-color: #685e4e;
  border-color: #685e4e;
  color: #fff;
}
a.link {
  border: 1px solid;
  padding: 5px 15px;
  border-radius: 21px;
  font-size: 0.9rem !important;
}
.menu a:last-child {
  margin-right: 0;
}
/* Icone (a destra) - in desktop disposte in linea */
.icons a {
  text-decoration: none;
  color: #333;
  font-size: 1.2em;
  margin-right: 15px;
}
.icons a:last-child {
  margin-right: 0;
}
/* Logo centrato nell'header */
.logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -30%);
  transition: transform 0.3s ease;
  z-index: 1;
}
.logo {
  width: 450px;
  transition: transform 0.3s ease;
}
/* Stato sticky: il logo diventa fixed e si scala */
.logo-wrapper.sticky {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 1000;
}
/* Pulsante hamburger (visibile solo in mobile) con 2 barre */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  transition: all 0.3s ease;
  position: relative; /* Assicura che il z-index venga applicato */
  z-index: 1200; /* Imposta un valore maggiore dell'overlay (1050) */
}
.hamburger span {
  display: block;
  width: 35px;
  height: 2px;
  background: #333;
}
/* Trasformazione: quando il pulsante è attivo, la seconda barra scompare 
       e la prima diventa più lunga (stanghetta) */
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(1) {
  transform: scaleX(1.5);
}
/* Menu mobile: posizionato fixed al centro della viewport */
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  max-width: 90%;
  text-align: center;
  gap: 15px;
}
/* Stato "open" del menu mobile: visibile e centrato */
.mobile-menu.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}
.mobile-menu a {
  padding: 20px 0;
  border: 1px solid;
  padding: 5px 15px;
  border-radius: 21px;
  font-size: 0.9rem !important;
  text-decoration: none;
  color: #333;
}

/* Overlay di sfondo: copre l'intera viewport, nascosto di default */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Stato "open" dell'overlay: visibile e cliccabile */
.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.brands-section {
  width: 100%;
  background: linear-gradient(to right, #685e4e, #ceba9a);
  padding: 45px 0;
  overflow: hidden;
  margin-top: 180px;
}

.top-brand {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-left: 20px;
}

.brand-list {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 25s linear infinite;
  font-size: 18px;
  color: white;
  text-align: center;
  /*animation-delay: -12s;*/
}
@keyframes scroll-left {
  0% {transform: translateX(70%);}
  100% {transform: translateX(-100%);}
}

.brand-list .brand {
  color: #fff;
  font-size: 42px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  text-decoration: none;
}

.brand-list .dot {
  color: white;
  font-size: 24px;
  padding: 0 10px;
}

.banner-text-container {
  text-align: left;
  margin-top: 20px;
}

.main-text {
  color: black;
  font-size: 28px;
  font-weight: 200;
  margin-bottom: 0;
}

.sub-text {
  color: black;
  font-size: 14px;
  margin-top: 10px;
}

.sub-text .dot {
  margin-right: 8px;
  font-size: 34px; /* aumenta la dimensione del punto; puoi regolare il valore */
  position: relative;
  top: -3px;
}
footer {
  background-color: #fff;
  text-align: center;
  color: #000;
}

.address {
  font-size: 42px;
  font-weight: 200;
  text-align: left;
  padding: 20px;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 20px;
}

.contact-left {
  text-align: left;
  flex: 1;
  min-width: 300px;
}

.contact-left p {
  font-size: 14px;
  margin: 10px 0;
}

.contact-left p.email {
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 20px;
}

.contact-right {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.contact-right table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-transform: uppercase;
}
.contact-right table tr:first-child td {
  border-bottom: 1px solid;
}

.contact-right table td {
  padding: 10px 0;
}
.contact-right hr {
  border: 0;
  border-top: 1px solid #000;
  margin: 10px 0;
}
.copyright {
  margin-top: 40px;
  text-transform: uppercase;
  font-size: 14px;
  background: linear-gradient(to right, #685e4e, #ceba9a);
  color: #ffffff;
  padding: 20px;
}
.calendly-badge-widget {
  display: none;
}
.instagram-feed {
  padding: 0 20px;
  margin-top: 40px;
}
.instagram-feed .eapps-instagram-feed-title {
  text-align: left;
  padding-left: 0;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

#calendar_widget_link {
  display: flex;
  align-items: center; /* Allinea verticalmente tutti gli elementi figli */
  gap: 0.5em; /* Spazio tra il punto e il testo, da regolare se necessario */
}

.banner-container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.left-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.text-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text-content .title {
  color: #000;
  font-family: "editor-new", sans-serif;
  font-size: 42px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  margin: 0;
}

.subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-family: "Gerstner Programm", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.32px;
}

.subtitle svg {
  flex-shrink: 0;
}
.section-55 {
  width: 50%;
}
.section-45 {
  width: 50%;
}
.left-section.section-55 img {
  position: relative;
  width: calc(100% + 10vw);
  transform: translateX(-10vw);
}
.right-section.section-55 img {
  position: relative;
  width: calc(100% + 10vw);
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
}
.dot-blink {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% {opacity: 1;}
  50% {opacity: 0;}
}
/* Contenitore centrato e con larghezza massima di 1000px */
.video-container {
  position: relative;
  max-width: 80%;
  margin: 0 auto;
}
/* Il video mantiene le proporzioni */
.video-container video {
  width: 100%;
  height: auto;
  display: block;
  transform: translateX(10vw);
}

/* Posizionamento dell'overlay:
   - top: 100% posiziona l'overlay subito dopo il video;
   - margin-top negativo sposta verso l'alto di metà altezza dell'immagine (calc(526px/3)/2 = calc(526px/6));
   - left: 50% + transform centrano orizzontalmente il blocco */
.image-overlay {
  position: absolute;
  left: 0;
  margin-top: calc(-526px / 6);
  display: flex;
  gap: 20px;
}
/* Stili per le immagini */
.image-overlay img {
  width: calc(421px / 2.5);
  height: calc(526px / 2.5);
  border-radius: 0;
  transition: transform 0.3s ease, filter 0.3s ease, margin 0.3s ease;
  filter: none;
  /* Imposta il punto d'origine della trasformazione alla base dell'immagine */
  transform-origin: bottom left;
}
/* Quando il mouse passa sopra il blocco, tutte le immagini si sfocano... */
.image-overlay:hover img {
  filter: blur(2px);
}
/* ... tranne quella effettivamente "hoverata", che ingrandisce e ripristina la nitidezza */
.image-overlay img:hover {
  transform: scale(3);
  filter: blur(0);
}
/* Spostamenti orizzontali in caso di hover sugli elementi precedenti */
.image-overlay img:nth-child(1):hover ~ img:nth-child(2) {
  margin-left: 325px;
}
.image-overlay img:nth-child(2):hover ~ img:nth-child(3) {
  margin-left: 325px;
}
/* Assicurati che il div sia nascosto all'avvio */
.toggle-content {
  display: none;
}
a.toggle-link{
  text-decoration:underline;
}
a.toggle-link:hover{
  text-decoration:none;
}

/* Media query per mobile */
@media (max-width: 1024px) {
  .container {
    width: 90%;
  }
  /* Nasconde il menu classico */
  .menu {
    display: none;
  }
  /* Mostra il pulsante hamburger */
  .hamburger {
    display: flex;
  }
  /* Riduce il logo al 50% (da 200px a 100px) */
  .logo {
    width: 260px;
  }
  .logo-wrapper {
    top: 40%;
  }
  .logo-wrapper.sticky {
    transform: translate(-50%, -50%) scale(0.8);
  }
  
  /* Dispone le icone verticalmente e le allinea a destra */
  .icons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .icons a {
    margin: 5px 0;
  }
  /* Nasconde la prima icona */
  .icons a:first-child {
    display: none;
  }
  /* .banner-container {
    flex-direction: column;
    gap: 24px;
  }
  .left-section,
  .right-section,
  .section-45,
  .section-55 {
    width: 100% !important;
  } */
  .video-container {
    position: relative;
    max-width: 100% !important;
    margin: 20px auto;
    width: 100%;
  }
  /* Il video mantiene le proporzioni */
  .video-container video {
    width: 100%;
    height: auto;
    display: block;
    transform: none;
  }
  .image-overlay {
    margin-top: -40px;
    left: 50%;
    transform: translateX(-50%);
  }
  .image-overlay img {
    width: calc(421px / 4);
    height: calc(526px / 4);
    transform-origin: center;
  }
  .image-overlay img:hover {
    transform: scale(2);
  }
  .image-overlay img:nth-child(1):hover ~ img:nth-child(2) {
    margin-left: 50px;
  }
  .image-overlay img:nth-child(2):hover ~ img:nth-child(3) {
    margin-left: 50px;
  }
  .address {
    font-size: 32px;
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .logo {
    width: 300px;
  }
  .logo-wrapper.sticky {
    transform: translate(-50%, -50%) scale(0.7);
  }
}