@font-face {

  font-family: "CircularXXWeb-Medium";

  src: url("CircularXXWeb-Medium.woff2") format("woff2"),

       url("CircularXXWeb-Medium.woff") format("woff");

}



@font-face {

  font-family: "CircularXXSub-Medium";

  src: url("CircularXXSub-Medium.woff2") format("woff2"),

       url("CircularXXSub-Medium.woff") format("woff");

}



.main {

  margin-top:15vh;

}

.margin-cell-header {

  margin-top: 15px;

}



img.lazy-fade-in {

  opacity: 0 !important;

  transition: opacity 1s ease !important;

}



img.lazy-fade-in.visible {

  opacity: 1 !important;

}



.col-4, .col-md-1, .col-md-3 {

  background-color: rgba(255, 255, 255, 0.53);

  z-index: 9999 !important;

  padding-left: 5px !important;

  padding-right: 5px !important;

}



body {

  background-color: transparent; /* o altro colore */

}



h1 {

    z-index: -9999 !important;

}





/* BODY & TYPOGRAPHY */



body {

   -webkit-font-smoothing: antialiased; /* più sottile e soft su Chrome/Safari */

  transition: all 0.5s ease;

  font-size: 11px !important;

  line-height: 11px !important;

  font-family: 'CircularXXWeb-Medium', Arial, sans-serif !important;

  color: black !important;

}



p {

  font-size: 11px !important;

  line-height: 11px !important;

  margin-bottom: 5px !important;

}







a:hover {



  color: black;

}



h1 {

  transition: all 0.5s ease;

  font-size: 8vw !important;

  line-height: 5vw !important;

  letter-spacing: -0.05em !important;

  margin-left: -0.1em !important;

  font-family: 'CircularXXWeb-Medium', Arial, sans-serif !important;

  color: black;

}



.container-shadow {

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

      margin-bottom: 2.5vw;;

      max-width: 100%;

}



.container-shadow:last-of-type {

  margin-bottom: 0;

}





/* NAVBAR */



.navbar-custom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

}



.navbar-links-buttons {

  display: flex;

  gap: 20px;

}



.nav-link-custom {

  display: flex;

  align-items: flex-end;





  height: 20px;

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

  text-decoration: none;

  color: black;

  font-size: 19px;

  text-align: left;

  transform-origin: center;

  transition: background 0.3s ease, transform 0.3s ease;

    transform: rotate(0deg); /* stato normale */

}





/* Hover: effetto temporaneo */

.nav-link-custom:hover {

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 100%);

  transform: rotate(-45deg);

  color: black;

}



/* Quando attivo o selezionato: torna allo stato normale */

.nav-link-custom:focus,

.nav-link-custom:active,

.nav-link-custom:visited {

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 100%);

  transform: rotate(-45deg);

}





.navbar-logo {

  width: 100%;

  height: auto;

}

.btn-talk,

.btn-shop {

  display: inline-block;

  padding: 6px 0px 4px 0px;

  border: none;

  font-size: 19px;

  box-shadow: 0 5.5px 5.5px 0 rgba(0, 0, 0, 0.1);

  outline: none;

  transition: transform 0.3s ease, background 0.3s ease;

  transform-origin: center center; /* ✅ migliorato */

  border-radius: 999999px !important;

  will-change: transform; /* ✅ aiuta a evitare tremolii */

  backface-visibility: hidden; /* ✅ riduce glitch visivi */

}



.btn-talk {

  background-color: #FF4200;

  color: black; 

  padding: 6px 10px 4px 10px;

  min-width: 100px;

    box-shadow: 0 5.5px 5.5px 0 rgba(0, 0, 0, 0.1);

}



.btn-talk-close {

  display: block;

  padding: 5px 10px;

  border: none;

  font-size: 19px;

  box-shadow: 0 5.5px 5.5px 0 rgba(0, 0, 0, 0.1);

  outline: none;

  border-radius: 999999px !important;

  background-color: #FF4200;

  color: black;

  width: 85px;

    margin-top: 0px !important;

      margin-bottom: 20px !important;

        margin:-left 0px !important;

  margin-right: 0 !important;

  padding-bottom: 5px;

}



.btn-shop {

  background-color: rgba(255, 255, 255, 0.93);

  color: black;

    padding: 6px 6px 4px 6px;

      box-shadow: 0 5.5px 5.5px 0 rgba(0, 0, 0, 0.1);

}



.btn-talk:hover,

.btn-shop:hover {

  transform: rotate(-45deg);

}





/* Per Chrome, Edge, Safari */

::-webkit-scrollbar {

  width: 5px;

}



::-webkit-scrollbar-track {

  background: transparent; /* o un colore di sfondo se vuoi */

}



::-webkit-scrollbar-thumb {

  background-color: #FF4200; /* rosso scuro, cambia con il tuo colore rosso */

  border-radius: 10px;

  border: 1px solid transparent;

}



/* Per Firefox */

* {

  scrollbar-width: thin;      /* rende la scrollbar più sottile */

  scrollbar-color: #FF4200 transparent; /* colore pollice, colore track */

}





/* LIGHTBOX */



.goverlay {

  display: none !important;

}



.glightbox-clean .gslide-media {

  box-shadow: none !important;

}



.gslide-image {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}



.gslide-image img {

  width: 98.5% !important;

  height: 98.5% !important;

  width: auto;

  height: auto;

  object-fit: contain;

  margin: 0px  !important;

  padding: 0px !important;

  box-shadow: none !important;

}





/* Personalizzazione bottoni navigazione GLightbox */



.glightbox-container .gnext,

.glightbox-container .gprev {

  height: 100vh !important;      /* altezza schermo intero */

  width: 50vw;                   /* metà larghezza viewport */

  top: 0 !important;

  transform: none !important;    /* rimuove trasformazioni originali */

  opacity: 1 !important;         /* sempre visibili */

  background: none !important;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 99 !important;

}



.glightbox-container .gprev {

  left: 10px !important;

}



.glightbox-container .gnext {

  right: 10px !important;

}



/* Nasconde le icone SVG centrali */



.glightbox-container .gprev svg,

.glightbox-container .gnext svg {

  display: none !important;

}













/* LOADING */



.loading {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: white;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: opacity 0.5s ease;

}



.loading.hidden {

  opacity: 0;

  pointer-events: none;

}



.loading img {

  position: absolute;

  max-width: 25vw;

  height: auto;

  opacity: 0;

  transition: opacity 0.1s ease;

}



.loading img.active {

  opacity: 1;

}



/* MAIN */



main {

  opacity: 0;

  transition: opacity 0.5s ease;

}



main.visible {

  opacity: 1;

}







#info-box {

    box-shadow: 0 5.5px 5.5px 0 rgba(0, 0, 0, 0.1);

    background-color: rgba(255,255,255,0.93); 

    padding: 5px; 

    margin-left: 5px !important;

    border-radius: 4px; 

    position: absolute; 

    margin-top:-20px !important;

    overflow: scroll;

    max-height: 98vh;

    width:19vw !important;

}

/* EXTRA STYLES */



#info-box p {

  margin: 0 0 10px 0;

  font-size: 14px;

  line-height: 1.4;

}





#extra-text {

  height: 0;

  opacity: 0;

  overflow: hidden;

  transition: height 0.4s ease, opacity 0.4s ease;

  color: black;

}



#extra-text.open {

  opacity: 1;

}



#toggle-link {

  opacity: 1;

  transition: opacity 0.3s ease;

  display: inline;

}



#toggle-link.fade-in {

  opacity: 0;

}





@media (max-width: 1200px) {



  h1 {

  transition: all 0.5s ease;

  font-size: 11vw !important;

  line-height: 9vw !important;

  letter-spacing: -0.05em !important;

  margin-left: -0.1em !important;

  font-family: 'CircularXXWeb-Medium', Arial, sans-serif !important;

  color: black;

}





.margin-cell-header {

  margin-top: 0px;

}



#info-box {

  width:30vw !important;

  margin-top: -20px !important;

}



.main {

  margin-top:13vh;

}

}









@media (max-width: 1036px) {

.margin-cell-header {

  margin-top: 0px;

}



#info-box {

  width:30vw !important;

  margin-top: -25px !important;

}



.main {

  margin-top:15vh;

}

}



.container-links {

  display: none;

}



@media (max-width: 767px) {



   .container-links {

  display: flex;

  display: flex !important; /* Forza sempre display flex */

  visibility: visible !important;

  opacity: 1 !important;

  height: auto !important;

  width: 100%;

    padding: 5px !important;

    align-items: flex-end !important; /* allinea i link in basso */

}



.container-links a {

 display: grid;

  width: 33.3333%;      /* Ogni link occupa 1/3 della larghezza */

  text-decoration: none;

  box-sizing: border-box;

    padding: 0px !important;

}



.link-left {

  text-align: left !important;

}



.link-center {

  text-align: center !important;

}



.link-right {

  text-align: right !important;

}



  .babas {

    display: none !important;

  }



.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7, .col-md-8,

.col-md-9, .col-md-10, .col-md-11, .col-md-12  {

  padding-left: 5px !important;

    padding-right: 5px !important;

      padding-top: 0px !important;

        padding-bottom: 0px !important;    

}





.btn-shop {

    padding: 5px 10px 5px 10px;

      transform: rotate(0deg) !important; /* stato normale */

}



.btn-talk {

    padding: 5px 10px 5px 10px;

      transform: rotate(0deg) !important; /* stato normale */

}



#toggle-link2 {

  margin-top: 5px;

  display: inline-block;

  position: absolute;

  top: 0px;

  left: 5px;



}



.nav-link-custom {

  display: flex;

  align-items: flex-end;

  height: 20px;

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

  text-decoration: none;

  color: black;

  font-size: 19px;

  text-align: left;

  transform-origin: center;

  transition: background 0.3s ease, transform 0.3s ease;

  transform: rotate(0deg) !important; /* stato normale */

}



/* Disattiva effetti su hover */

.nav-link-custom:hover,

.nav-link-custom:focus,

.nav-link-custom:active,

.nav-link-custom:visited {

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

  transform: rotate(0deg) !important;

  color: black;

}



   

  .navbar-logo {

  width: 100vw;

  height: auto;

  padding: 5px !important;



}



body {

  overflow-x: hidden !important;

  max-width: 100vw !important;

}



  .navbar{

  padding: 0px !important;

}



.nav-link-custom {

height: 25px;

margin-top: -15px !important;

color: black;

font-size: 19px;

padding: 5px !important;

}



.glightbox-container .gclose {

  position: fixed; /* necessario per centrare rispetto allo schermo */

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%);

  background-color: #FF4200 !important;

  color: rgba(255, 255, 255, 0.93) !important;

  font-family: inherit;

  font-size: 16px;

  padding-top: 5px !important;

  border-radius: 4px;

top: 15px !important;

  text-transform: uppercase;

  border: none;

  height: auto;

  width: 80px !important;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999; /* opzionale, per sicurezza sopra tutti */

}





  .glightbox-container .gclose {

    top: 0 !important;

    right: auto !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    position: absolute !important;

    margin-top: 5px; /* margine sopra */

  }



  .glightbox-container .gclose:hover {

    transform: translateX(-50%) !important;

  }













  p {

  font-size: 11px !important;

  line-height: 11px !important;

  margin-bottom: 0px !important;

}



.w-100  {

  width: auto !important;

}



      .swiper-slide img {

      height: 100vw !important; /* altezza fissa */

    }



    .loading img {

  position: absolute;

  max-width: 50vw;

  height: auto;

  opacity: 0;

  transition: opacity 0.4s ease;

}





.scrolling-title {

  font-size: 25vw;

  line-height: 20vw;

  letter-spacing: -0.4rem;

width: 100vw;

max-width: 100vw;

  white-space: nowrap;

  position: relative;

   z-index: 9999 !important;

}



.project {

  overflow: hidden;

}

.scrolling-track {

  display: flex;

  width: max-content;

}



.scrolling-track.animate {

  animation: scroll-loop 60s linear infinite;

}



.scrolling-track span {

  white-space: nowrap;

  padding-right: 1rem;

}



@keyframes scroll-loop {

  0% {

    transform: translateX(0%);

  }

  100% {

    transform: translateX(-50%);

  }

}





#info-box2 {

  position: absolute;

  padding: 5px;

  margin-left: 0px !important;

  border-radius: 4px;

  overflow: scroll;

height: 5vh;

    width: 85vw;

  min-height: 26px;

  background-color: transparent;

  /* Nascondo ombra e sfondo di default */

  box-shadow: none; 

  transition: box-shadow 0.3s ease, background-color 0.3s ease;

}



#info-box2.active {

    width: 85vw;

    max-height: 99vh !important;

    height: 100vh !important;

  padding: 5px;

    background-color: rgba(255, 255, 255, 0.93);

  /* Ombra e sfondo solo quando è attivo (accordion aperto) */

  box-shadow: 0 5.5px 5.5px 0 rgba(0, 0, 0, 0.1);

}



/* EXTRA STYLES */

#info-box2 p {

  margin: 0 0 0px 0;

  font-size: 19px;

  line-height: 1.4;

}



#extra-text2 {

      border-radius: 4px; 

  height: 0;

  opacity: 0;

  overflow: hidden;

  transition: height 0.4s ease, opacity 0.4s ease;

  color: black;

}



#extra-text2.open {

  opacity: 1;

}



#toggle-link2 {

  opacity: 1;

  transition: opacity 0.3s ease;

  display: inline;

}



#toggle-link2.fade-in {

  opacity: 0;

}



.margin-cell-header {

  margin-top: 25px;

}



}