@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');

* {
  margin: 0;
  padding: 0;
}

:root {
  --padding: 1.5rem;
  --color-black: #161615;
  --color-white: #fff;
  --color-grey: #FAFAFA;
  --color-red: #d8191f; 

  --color-sand: #B19067;
  --color-sage: #C3B89C;
  --color-brown-dark: #5C420F;
  --color-ivory: #DED3A8;
  --color-taupe: #9D8C72;

  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-white);

  --font-family-sans: "Syne", Helvetica, Arial, sans-serif;
}

html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background: var(--color-background);
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  margin: 0 auto;
}
img{
  width: 100%;
  float: left;
}

b, strong {
  font-weight: 700;
}
.home{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0 !important;
  height: 70vh;
  padding-top: 0;
}
.vertical-section{
  display: flex;
  justify-content: center;
}
.extra-padding{
  padding-top: 0;
  padding-bottom: 2rem;
}

#contatti {
  scroll-margin-top: 6rem;
}

.start-box{
  padding-top: 12rem;
  margin-top: 0 !important;
}
.no-m-top{
  margin-top: 0 !important;
}
.no-p-top{
  padding-top: 0 !important;
}
.no-m-bottom{
  margin-bottom: 0 !important;
}
.no-p-bottom{
  padding-bottom: 0 !important;
}
main {
  overflow-x: hidden;
  display: flex;
  position: sticky;
  top:0;
}
.pure-g  {
    overflow: hidden;
}
.pure-g [class*="pure-u"] {
    font-family: var(--font-family-sans);
    overflow: hidden;
}
.pure-g div{
  /*overflow: hidden;*/
}

strong{
  letter-spacing: 0.04rem;
}
h1 {
  margin: 0;
  padding: 0;
}
a{
  color: var(--color-black);
}
a:hover{
  opacity: 0.6;
}
div{
  box-sizing: border-box;
}

section {
  width: 100%;
  display: block;
  float: left;
  padding-bottom: 3rem;
  padding-top: 2rem;
}

.s-no-padding{
  padding: 0;
}
figure{
  text-align: center; /* ensures the image is always in the h-middle */
  overflow: hidden; /* hide the cropped portion */
  /*max-height: 100vh;*/
  max-height: 1180px;
}
.center-img img{
  position: relative; /* allows repositioning */
  left: 100%; /* move the whole width of the image to the right */
  margin-left: -200%; /* magic! */
  overflow: hidden;
}
.scaled-img img{
  width: 100%;
  overflow: hidden;
}

.half-img img{
  width: 35%;
  margin-top: 3rem;
}
section h1{
  font-size: 6rem;
  font-weight: 700;
}
section h2{
  font-size: 2.2rem;
  line-height: 1.4;
  margin-top: 1rem;
  font-weight: 500;
}
section h3{
  font-size: 1.8rem;
  line-height: 1.4;
  margin-top: 1rem;
  font-weight: 500;
}
section span a{
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 2rem;
  margin-bottom: 1rem;
  float: left;
}
section p{
  font-size: 1.1rem;
  line-height: 1.4;
  margin-top: 1rem;
  font-weight: 300;
}

.vertical-section h1{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.7rem;
  margin-bottom: 1rem;
}

.vertical-section h2{
  font-family: var(--font-family-sans);
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
  font-weight: 300;
  margin-bottom: 0.6rem;
  margin-top: 1.2rem;
  line-height: 1.2;
}


.vertical-section h3{
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.6rem;
  margin-top: 1.2rem;
  line-height: 1.2;
}
.vertical-section h4{
  font-size: 1.2rem;
  line-height: 1.4;
  margin-top: 1rem;
  font-weight: 300;
}
.vertical-section p{
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 300;
}

.blog-prevnext h2{
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1rem;
}
.blog-prevnext a{
  text-decoration: none;
}

.bg-blue{
  background-color: var(--color-black);
  color: var(--color-white);
}
.bg-grey{
  background-color: var(--color-grey);
 
}
.full {
  width: 100%;
}

.boxed {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.over-box{
  position: absolute;
}
.header {
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
  width: 100%;
  height: 52px;
  z-index: 99;
  /*height: 360px;*/
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  transition-delay: 0.3s;

}

.scrolling .header {
  background-color: rgba(255, 255, 255, 1.0);
  height: 52px;
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  transition-delay: 0.3s;
}

.header .logo {
  float: left;
  display: block;
  background-color: rgba(0,28,44,0);
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  max-height: 72px;
}
.header .logo:hover {
  opacity: 1;
}

.header .logo svg{
  width: 183px;
  padding: 1rem 0 1rem 1rem;
  position: relative;
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  transition-delay: 0.3s;

}

.header .logo svg .geometrico{
  opacity: 1;
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  transition-delay: 0.3s;
}

.header .logo svg .d{
  fill: var(--color-white);
}

.scrolling .header .logo svg{
 width: 183px;
 padding: 1rem 0 1rem 1rem;
 transition: 0.3s cubic-bezier(.86,0,.07,1);
 margin-top: 0;
 transition-delay: 0.3s;
 pointer-events: none;
}
.scrolling .header .logo svg .geometrico{
opacity: 0;
transition: 0.3s cubic-bezier(.86,0,.07,1);
}
.header .logo svg .naming{
  opacity: 1;
  transition: 0.3s cubic-bezier(.86,0,.07,1);
}
.scrolling .header .logo svg .naming{
  opacity: 0;
  transition: 0.3s cubic-bezier(.86,0,.07,1);
}

.scrolling .menu .menu-button a{
 background-color: transparent;
}


.logo-dp{
  display: block;
  float: left;
  width: 100%;
  max-width: 220px;

}
.logo-dp svg .d{
  fill: var(--color-black);
}

.mini-logo svg{
  max-width: 150px;
}
.mini-logo svg .d{
  fill: var(--color-black);
}




#open-menu{
  cursor: pointer;
  display: block;
  height: 32px;
}
.closed #open-menu:after{
  content: "menu";
  width: 90px;
  position: relative;
  top: 0.36rem;
  transition: 0.5s cubic-bezier(.86,0,.07,1);
}
.opened #open-menu:after{
  content: "close";
  width: 90px;
  position: relative;
  top: 0.36rem;
  transition: 0.5s cubic-bezier(.86,0,.07,1);
}

.menu{
  display: block;
  float: right;
}
.menu a {
  padding: 0rem 0.6rem;
}
.menu a[aria-current] {
  text-decoration: underline;
}

.menu .menu-button {
  width: 100%; 
  width: 100%;
  margin: 0.6rem 0.6rem 0.6rem 0;
}

.menu .menu-button a{
  
}
.menu .menu-button a:hover{
  opacity: 1;
}

.menu .menu-button ul {
  width: 32px;
  height: 32px;
  float: left;
  list-style-type: none;
}
.menu .menu-button li:nth-child(1) {
  width: 24px;
  float: left;
  height: 3px;
  background-color: var(--color-black);
  margin-top: 7px;
  transition: 0.4s cubic-bezier(.86,0,.07,1);
}

.menu .menu-button li:nth-child(2) {
  width: 24px;
  float: left;
  height: 3px;
  background-color: var(--color-black);
  margin-top: 5px;
}
.menu .menu-button li:nth-child(3) {
  width: 24px;
  float: left;
  height: 3px;
  background-color: var(--color-black);
  margin-top: 5px;
}



.menu .menu-button a{
  color: var(--color-black);
  font-weight: 500;
  font-size: 1.2em;

  display: block;
  transition: 0.5s cubic-bezier(.86,0,.07,1);
}
.menu .desktop-menu{

}
.menu .desktop-menu ul{
  list-style-type: none;
  float: left;
  margin: 2rem 2rem 2rem 0;
}
.menu .desktop-menu ul li{
  margin: 0;
  padding: 0;
  float: left;
}
.menu .desktop-menu ul li a{
  color:  var(--color-black);
  text-decoration: none;
  font-size: 1rem;
  
}

.scrolling .menu .desktop-menu ul li a{
  color:  var(--color-black);  
} 
.box-menu {
  height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: var(--color-black);
  padding: 6rem 1rem;
}

.box-menu .pure-g{
  width: 100%;
}
.box-menu a{
  line-height: 1.1;
  margin: 0;
  padding: 0.5rem 0 0 0;
}
.box-menu ul{
  margin: 0;
  padding: 0;
}
.box-menu ul li{
  display: block;
  float: left;
  width: 100%;
}
.box-menu ul li a{
  color: var(--color-white);
  font-size: 2em;
  line-height: 1;
  margin: 0;
  padding: 0.5rem 2rem;
  font-weight: 700;
  text-decoration: none;
  float: left;
}
.box-menu h5{
  margin-bottom: 0.1rem;
  margin-top: 1rem;
}
.box-menu .a{
  fill: var(--color-black);
}


.opened .box-menu {
  display: block;
}




.closed{
  transition: 0.6s cubic-bezier(.86,0,.07,1);
}
.opened{
  transition: 0.6s cubic-bezier(.86,0,.07,1);
  z-index: 999;
  position: fixed;
  right: 0;
}

.opened .menu-button a {
  color: var(--color-white);
  transition: 0.5s cubic-bezier(.86,0,.07,1);
}

.hide{
  display: none;
  opacity: 0;
  transition-delay: 0.5s;
  transition: 0.6s cubic-bezier(.86,0,.07,1);
}
.show{
  display: block;
  opacity: 1;
  transition-delay: 0.5s;
  transition: 0.6s cubic-bezier(.86,0,.07,1);
}

.box-menu ul li.lang{
  width: auto;
}
.box-menu ul li.lang:after{
  width: auto;
  content: '|';
  color: var(--color-white);
  font-size: 2em;
  line-height: 1;
  margin: 0;
  padding: 0.5rem 0;
  font-weight: 700;
  text-decoration: none;
  float: left;
}
.box-menu ul li.lang:last-child:after{
  content: '';
}

.menu ul li.lang:after{
  width: auto;
  content: '|';
  color: var(--color-black);
}
.menu ul li.lang:last-child:after{
  content: '';
}
/* Corsivo a tutti i link con .external1 */
.desktop-menu ul a.external1 {
  font-style: italic;
}

/* Applico i margini ai <li> che CONTENGONO un <a.external1> */
.desktop-menu ul li:has(> a.external1) {
  margin-right: 0;     /* default */
  margin-left: 2rem;   /* di base lo do a tutti... */
}

/* ...poi lo tolgo a tutti tranne il primo della serie */
.desktop-menu ul li:has(> a.external1) ~ li:has(> a.external1) {
  margin-left: 0;
}

/* Ultimo della serie: margin-right */
.desktop-menu ul li:has(> a.external1):not(:has(~ li:has(> a.external1))) {
  margin-right: 1rem;
}


/* Base */
.box-menu ul a.external2 {
  font-style: italic;
}

/* Dai margin-top a tutti gli external2 */
.box-menu ul li:has(> a.external2) a.external2 {
  margin-top: 2rem !important;
}

/* Rimuovi il margin-top da tutti gli external2 successivi al primo */
.box-menu ul li:has(> a.external2) ~ li:has(> a.external2) a.external2 {
  margin-top: 0 !important;
}

.active a{
  text-decoration: underline !important;
}
.social {
  display: none;
  width: 48px;
  margin: 20px 2rem;
  float: right;

}
.social a {
  padding: .7rem .5rem;
}
.vertical-section .on-parallax{
  display: block;
  background-color: var(--color-black);
  float: left;
  padding: 0.8rem;

}
.vertical-section .on-parallax p{
  font-size: 1.6rem;
  color: var(--color-white);
  font-weight: 300;
  line-height: 1.6rem;
  float: left;

}
.vertical-section .on-parallax  a{
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
}


.yt-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-black);
}
.yt-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.35);
  transform-origin: center;
}
.yt-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  /*width: auto;
  height: auto;*/
  transform: translate(-50%, -50%);
  object-fit: cover;
}

  .start-button{
    position: absolute;
    top: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.start-button a{
  color: var(--color-white);
  font-family: var(--font-family-sans);
  letter-spacing: 0.1rem;
  text-decoration: none;
  font-size: 1.1rem;

}

.start-button a::after {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f063";
  font-style: normal;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 2.2rem;
  position: relative;
  animation: pulse 2.5s infinite;
  animation-timing-function: ease-in-out; 
}
@keyframes pulse {
  0% {
    top: 14px;
  }
  50% {
    top: 5px;
  }
  100% {
    top: 14px;
  }
}

.start-button a i{
  font-size: 2rem;
  width: auto;

}

.section {
  padding: 3rem 0;

}

.box1{
  padding: 2rem;
}
.box2{
  padding: 2rem;
}
.box3{
  padding: 2rem;
}
.box4{
  padding: 2rem;
}
.box5{
  padding: 2rem;
}
.box6{
  padding: 2rem;
}
.pt0{
  padding-top: 0 !important; 
}
.pb0{
  padding-bottom: 0 !important;
}
.pt1{
  padding-top: 1rem !important; 
}
.pb1{
  padding-bottom: 1rem !important;
}
.pt4{
  padding-top: 4rem !important; 
}
.pb4{
  padding-bottom: 4rem !important;
}
.box-notes-home{
  padding: 3rem;
}
.shift-1{
  margin-top: 16rem;
}

.video-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: -1;
}



.video-container video {
  width: 100%;
  position: absolute;
  z-index: -1;
  right: 0;
  top: 8rem;
  mix-blend-mode: multiply;
  opacity: 0.9;
}


.video-container-2 {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: -1;
}

.video-container-2 video {
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 15vh;
  mix-blend-mode: multiply;
  opacity: 0.9;
}
.pure-g video{
  width: 100%;
}

.footer{
  background-color: var(--color-white);
  padding-bottom: 1rem;
  margin-top: 3rem;
}
.footer ul{
  padding-left: 1rem;
  font-size: 0.9rem ;
}
.footer ul li{
  margin-top: 1rem;

}

.footer p{
  font-size: 0.9rem ;
}
.footer span{
  font-size: 0.7rem;
}
.footer p strong{
  letter-spacing: 0.01rem;
}



.only-desk{
  display: none;
}
.only-mob{
  display: block;
}

.only-desk1{
  display: none;
}
.only-mob1{
  display: block;
}

.box-menu .languages{
  margin: 2.6rem 0 0 0;
}

.box-menu .languages ul .active a{
  text-decoration: underline;
}

.box-menu .languages ul li a{
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 0.7rem;
}

.notes h3 a{
  text-decoration: none;
}

.notes h3 a:hover{
  opacity: 0.6;
}

.notes h4 a{
 text-decoration: none;
 margin-top: 1rem;
 float: left;
}
.note h5{
  margin-top: 0.6rem;
}
.note figure{
  max-height: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.note figure li{
  margin-bottom: 1rem;
}
.default figure{
  max-height: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.default figure li{
  margin-bottom: 1rem;
}
.note-tags{
  list-style-type: none;
  float: left;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.note-tags li{
  float: left;
  margin-right: 1rem;


}
.pagination{
  text-align: center;
  display: block;
  margin-top: 1rem;
}

.pagination span{
  font-size: 2.6rem;
  padding: 1rem;
  opacity: 0.3;

}

.pagination a{
  font-size: 2.6rem;
  padding: 1rem;
  text-decoration: none;
}


.hero{
  display: block;
  height: 70vh;
  z-index: 9;
  position: relative;
  padding: 30vh 20vw 0 20vw;
}

.hero h1{
  font-size: 3.2rem;
  font-weight: 500;
  margin-bottom: 2rem;
  margin-top: 1rem;
  line-height: 1.2;
}
.hero h2{
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
}
.hero a{
  margin-top: 7rem;
  font-size: 3rem;
  float: left;
  animation: updown 3s ease infinite;
}

.the-line-w{
  margin-top: 2.4rem;
  border-top: 6px solid var(--color-white);
  padding-top: 2rem;
}
.the-line-b{
  margin-top: 2.4rem;
  border-top: 6px solid var(--color-black);
  padding-top: 2rem;
}
.bg-grey{
  background-color: var(--color-grey);
}
.bg-red{
  background-color: var(--color-red);
  color: var(--color-white);
}
.bg-red a{
  color: var(--color-white);
}


.sb1-bg-red{
  background-color: var(--color-red);
  border-bottom: 6px solid var(--color-white);
}
.sb1-bg-white{
  background-color: var(--color-white);
  border-bottom: 6px solid var(--color-red);
}
.small-box-1{
  max-width: 50%;
  padding: 1.5rem;
  float: left;
  margin-bottom: 14rem;
}

.small-box-1 h1{
  font-size: 6rem;
  font-weight: 700;
}
.small-box-1 h2{
  font-size: 2.2rem;
  line-height: 1.4;
  margin-top: 0;
  font-weight: 500;
}
.small-box-1 h3{
  font-size: 1.5rem;
  line-height: 1.2;
  margin-top: 0;
  font-weight: 500;
}
.small-box-1 span a{
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 1rem;
  margin-bottom: 0;
  float: left;
}
.small-box-1  p{
  font-size: 0.9rem;
  line-height: 1.3;
  margin-top: 0.5rem;
  font-weight: 300;
}


















.form-contatto form{
  margin-top: 1.5rem;
}


.form-contatto .field{
  width: 100%;
  padding-right: 0;
  margin-bottom: 1.4rem;
  float: left;
  box-sizing: border-box;

}

.form-contatto .text-field{
  padding-right: 0;
}

.form-contatto form label{
  display: none;
}

.form-contatto form label.checkbox {
  margin-top: 1rem;
  display: block;
  font-size: 0.8rem;
}
.form-contatto form label.checkbox input {
  float: left;
  width: auto;
  margin-top: 1px;
  margin-right: 0.5rem;
  margin-left: 0.1rem;
  transform: scale(1.3);
}
.form-contatto form input:not([type=submit]){
    width: 100%;
    padding: 1rem 1.2rem;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    transition: 0.35s;
    font-family: var(--font-family-sans);
    letter-spacing: 0.1rem;
    border-bottom: 2px solid var(--color-black);
    
    
}


.form-contatto form textarea{
    width: 100%;
    padding: 1rem 1.2rem;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    transition: 0.35s;
    font-family: var(--font-family-sans);
    letter-spacing: 0.1rem;
    border-bottom: 2px solid var(--color-black);
    min-height: 180px;
    

}


.form-contatto form input[type=submit]{
    background-color: var(--color-black);
    color: var(--color-white);
    margin-top: 2rem;
    font-size: 1.6rem;
    padding: 0.4rem 2rem;
    border: 0;
    font-weight: 700;
    cursor: pointer; 
    transition: 0.35s;
    margin-bottom: 2rem;
    border-radius: 3px;
}
.form-contatto form input[type=submit]:hover{
  opacity: 0.7;
}

.form-contatto form input:focus {
  background-color: rgba(0,0,0,.1);
  outline: none;
}

.form-contatto form textarea:focus {
  background-color: rgba(0,0,0,.1);
  outline: none;
}

.form-contatto form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-black);
  opacity: 0.25; /* Firefox */
  font-weight: 500;
}

.form-contatto form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--color-black);
  opacity: 0.25;
  font-weight: 500;
}

.form-contatto form input::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--color-black);
  opacity: 0.25;
  font-weight: 500;
}

.form-contatto form textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-black);
  opacity: 0.25; /* Firefox */
  font-weight: 500;
}

.form-contatto form textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--color-black);
  opacity: 0.25;
  font-weight: 500;
}

.form-contatto form textarea::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--color-black);
  opacity: 0.25;
  font-weight: 500;
}

.form-contatto .arrow{
  font-size: 1.6rem;
}








/* POP UP modale */

.button-modals{
  cursor: pointer;
}
.body-blackout {
  position: fixed;
  z-index: 1010;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  display: none;
}
.body-blackout.is-blacked-out {
  display: block;
}

.popup-trigger {
  display: inline-block;
}

.popup-modal {
  width: 100%;
  max-width: 650px;
  background-color: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 45px;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms ease-in-out;
  z-index: 1011;
}
.popup-modal.is--visible {
  opacity: 1;
  pointer-events: auto;
}
.popup-modal__close {
  position: absolute;
  font-size: 1.4rem;
  right: 15px;
  top: 15px;
  cursor: pointer;
}





.ancora{
  scroll-margin-top: 4rem; // header height
}


.wow{
  overflow: hidden;
}


.g-map p{
  font-size: 1rem;
}

#map {
  width: 100%;
  height: 420px;
  margin-bottom: 3rem;

}


.honeypot {
    position: absolute;
    left: -9999px;
}


.newsletter-lk{
  text-decoration: underline;
}

.form-contatto .indicates-required {
  margin-top: 1rem;
  display: block;
  font-size: 0.8rem;
}

.brandingLogo{
  display: block;
  margin-top: 1rem;
}

.brandingLogo a{
  float: left;
  display: block;
  position: relative;
  left: -13px;
}

.brandingLogo a img{
  float: left;
  display: block;
}



/* INIZIO Barrette che si muovono */



.area{
    width: 100%;
   /* height:100vh;*/   
    position: relative;

    /*background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);*/  

    
   
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(23, 35, 61, 0.15);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
/* FINE Barrette che si muovono */



.vertical-section.home {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* wrapper video/immagine, se serve assicurare piena copertura */
.vertical-section.home .yt-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* HERO OVERLAY */
.home-hero {
  position: absolute;
  inset: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* così non blocca i click sotto */
  z-index: 2;
}

.home-hero-inner {
  text-align: center;
  max-width: 1400px;
  padding: 0 1.5rem;
  opacity: 0;
  animation: heroFadeInOut 6s ease-out forwards;
  animation-delay: 1.2s; /* leggero ritardo di ingresso */
}

.vertical-section h1.home-hero-title {
  font-size: clamp(3rem, 10vw, 14rem);
  line-height: 0.9;
  letter-spacing: 1rem;
  font-weight: 400;
  color: var(--color-white);
  margin: 0;
  padding: 0;
  mix-blend-mode: multiply;
}
.button1{
  margin-top: 0.3rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  background-color: var(--color-black);
  width: auto;
  float: left;
  font-weight: 500;
}
.button1 a{
  color: var(--color-white);
  margin: 0.5rem 1rem;
  float: left;
  text-decoration: none;
}
/* animazione:
   - parte invisibile
   - entra con fade + leggero movimento
   - resta al 100%
   - poi scende al 50% per lasciare visibile il video/sfondo
*/
@keyframes heroFadeInOut {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  25% {
    opacity: 0.4;
    transform: translateY(0);
  }
  60% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.1;
  }
}


/* Contenitore swiper (facoltativo: evita tagli strani) */
.swiper-gallery-06 {
  width: 100%;
}

/* Ogni slide prende la larghezza del contenuto */
.swiper-gallery-06 .swiper-slide {
  width: auto;            /* fondamentale con slidesPerView:'auto' */
  display: flex;
  align-items: center;    /* centra verticalmente */
}

/* Immagini: altezza fissa massima, proporzioni preservate */
.swiper-gallery-06 img {
  height: min(920px, 80vh); /* max 920px, ma si adatta su schermi piccoli */
  width: auto;
  max-width: none;          /* evita che si restringa */
  object-fit: contain;      /* non taglia: mostra tutta l'immagine */
  display: block;
}

.swiper-gallery-06 .swiper-button-prev,
.swiper-gallery-06 .swiper-button-next {
  color: var(--color-red);
}

.swiper-gallery-06 .swiper-pagination-bullet {
  background-color: var(--color-red);
  opacity: 0.4;
}

.swiper-gallery-06 .swiper-pagination-bullet-active {
  background-color: var(--color-red);
  opacity: 1;
}
.applicazione2 .pure-g{
  flex-direction: column-reverse;
}