/* ! Reset */
body, html{
  background: #0d0d0d; font-family: 'Quicksand', Arial, Helvetica, sans-serif; font-size: 16px; box-sizing: border-box; margin: 0;padding: 0;}*,*:before,*:after{ box-sizing: border-box; }h1,h2,h3,h4,h5,h6 {margin: 0 0 1rem 0;padding: 0; color:var(--menu-color);}ol,ul,li{list-style-type: none; line-height: 30px;}img{height: auto;}h1{font-size: 4rem;} h2{font-size: 3rem;} h3{font-size: 2rem;} h4{font-size: 1rem;} h5{font-size: 0.8rem;} h6{font-size: 0.6rem;}a{text-decoration:none;}
  p, ol, ul {margin: 0 0 1rem 0;padding: 0; color: #c4c4c4;}
  p {line-height: 1.7 !important;}

.spacer {height: 100px;}
/* Menu */
:root { --menu-bg: rgb(221,227,252); --menu-color: #fff; --link-color: #fff; } 

.header { 
  background: linear-gradient(135deg, rgba(210, 1, 255, 1.0), rgba(1, 56, 217, 1.0)); 
  position: fixed; 
  top:0;  
  left:0; 
  z-index: 9999; 
  width: 100%; 
  padding: 10px 15px; 
}

.header__content{max-width: 1200px;width: 100%;margin: 0 auto; display: flex;justify-content: space-between;}

.header__logo,
.header__quick{
  display: flex; 
  gap: .6rem; 
  align-items: center;
  color:var(--menu-color)
}

.header__menu{padding: 0;margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a{color:var(--menu-color); opacity: 0.8;font-size: 15px;}

@media (max-width: 768px) {
  .header__menu{   
    position: absolute; top:60px; left:0; background: linear-gradient(135deg, rgba(210, 1, 255, 1.0), rgba(1, 56, 217, 1.0)); width: 100%; height: 100vh;
    height: 0vh; overflow: hidden;transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .header__menu li{width: 100%;border-bottom: 1px solid #ddd;}
  .menu-open .header__menu{height: 100vh;padding: 3%;}

  .icon-hamburger{
    height: 50px;
    width: 40px;
    margin-left: 20px;
    padding-top: 5px;
  }

  .icon-hamburger span{
    height: 2px; 
    width: 30px;
    background: var(--menu-color);
    position: relative;
    display: block;
    margin-top: 11px;
    transition: all 0.2s cubic-bezier(.215, .61, .355, 1);
  }

  .menu-open .icon-hamburger span:nth-child(1){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(-45deg) translateY(-9px);}

  .header__quick{display: flex; justify-content: flex-end; width: 50%;}

}

/* ! Title System */
h1, .text-1 {font-size: 3.5rem;margin-bottom:0.5rem}
h2, .text-2 {font-size: 2.4rem;margin-bottom:1rem}
h3, .text-3  {font-size: 1.8rem;margin-bottom:1rem}
h4, p, .text-4 {font-size: 1rem;margin-bottom:1rem; line-height: 1.5;}
.text-5 {text-align: right;}
a{color: var(--link-color)}

/* ! Button System */
.button { 
  font-size: 1rem; text-transform: uppercase; background: #0138D9; color:#fff;
  text-decoration: none;padding: 14px 25px; display: inline-block;
  border-radius: 4px; font-weight: 700;
}
.button:hover{ background: #002cad; }

.button-project { 
  font-size: 1rem; 
  text-transform: uppercase; 
  background: #D201FF; 
  color:#fff;
  text-decoration: none;
  padding: 14px 25px; 
  display: inline-block;
  border-radius: 4px; 
  font-weight: 700;
}
.button-project:hover{ background: #A800CC; }

.button-small { 
  font-size: 1rem; 
  text-transform: uppercase; 
  background: #D201FF; 
  color:#fff;
  text-decoration: none;
  padding: 10px 20px; 
  display: inline-block;
  border-radius: 4px; 
  font-weight: 700;
}

.button-small:hover{ background: #A800CC; }

@media (max-width: 768px) {
  .button-small { 
    font-size: 1rem; text-transform: uppercase; background: #D201FF; color:#fff;
    text-decoration: none;padding: 10px 20px; display: inline-block;
    border-radius: 4px; font-weight: 700; white-space: nowrap;
  }
  
  .button-small:hover{ background: #A800CC; }
  .mob-none {display:none;}
}

.button-small-right { 
  font-size: 1rem; 
  text-transform: uppercase; 
  background: var(--link-color); 
  color:#fff;
  text-decoration: none;
  padding: 10px 20px; 
  display: inline-block;
  border-radius: 4px; 
  font-weight: 700; 
  text-align: right;
}

.lang-button {
  background-color: transparent;
  border: none;
}



/* ! Cover */
.cover{ 
  text-align: center; padding:10px; margin:0px; min-height:600px; width:100%; 
  display:flex; flex-direction:column; justify-content:center; 
  background-position: center center; background-size:cover;
  overflow: hidden;
}

.cover > .overlay-bg {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .3);
  z-index: 10;
  scale: 0;
  transition: all 300ms;
}

.cover:hover > .overlay-bg {
  scale: 1;
}

.cover * {
  color:#fff;
}

.project-cover{ 
  text-align: center; padding:10px; margin:0px; min-height:112.5rem; width:100%; 
  display:flex; flex-direction:column; justify-content:center; 
  background-position: center center; background-size:cover;
}

.cover__content {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* aggiunta codice */
.panel {
  height: auto;
  width: 50%;
  position: relative;
  z-index: 2;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .panel {
    height: auto;
    width: 80%;
    position: relative;
    z-index: 2;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10%;
    margin-right: 10%;
  }

  .sma-none {
    display: none;
  }
}


.landscape-img {
  display: block;
  padding-top: 4.5vh;
  border-radius: 20px;
} 

.none {
  display: none;
}

.link__hover {
  text-decoration: none;
  padding: 1rem;
}

.link__hover__footer {
  text-decoration: none;
}

.link__hover:hover {
  text-decoration: underline;
}

.link__hover__footer:hover {
  text-decoration: none;
}

.cursor {
  cursor: pointer !important;
}

.bg__hover {
  background-color: #0d0d0d;
}

.bg__hover:hover {
  background-color: #252525;
  transition-duration: 300ms;
  border-radius: 0.75rem
}

.duration-300:hover {
  transition-duration: 300ms;
}

.items__center {
  align-items: center;
}



/* hero */
.hero {min-height: 100vh;
display: flex;
align-items: center;}

.hero img {z-index: 1; position: relative;}

.hero-about {min-height: 50vh;
  display: flex;
  align-items: center;}

.hero-duo {min-height: 50vh;
  display: flex;
  align-items: center;}

.blob {position: absolute;
top: -5%;
right: -8%;
width: 120%;
z-index: 0;}

@media (max-width: 768px) {
  .blob {display: none;}
}

.cta-blob {position: absolute;
  top: -20%;
  right: -3%;
  width: 110%;
  z-index: 0;}


@media (max-width: 768px) {
  .cta-blob {position: absolute;
    top: -13%;
    left: 10%;
    width: 100%;
    left: -3%;
    z-index: 0;}
  }

.duo-blob {position: absolute;
  top: -45%;
  left: 10%;
  width: 130%;
  left: -10%;
  z-index: 0;}


/* footer */
.footer{
  background: linear-gradient(500deg, #24A78D, #131619);
  padding: 4%;
  color: #fff;
}

.copy {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

.color__copy {
  color: #fff;
}



/* ! Grid System */
.grid { margin: 0 auto; padding: 0 2%; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.grid__center { 
  margin: 0 auto; 
  padding: 0 2%; 
  max-width: 1250px; 
  display: flex; 
  flex-flow: row; 
  flex-wrap: wrap; 
  justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 2%;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-50{ width: 50%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
    .sma-img-res-2 { width: 60%; height: auto; margin-bottom: 20px;vertical-align: middle; align-items:center;}
}

/* ! Helpers  */
/* .mt--1{margin-top: -10vh;} */
.mt-0{margin-top: 0 }
.mt-1{margin-top: 10px}
.mt-2{margin-top: 20px}
.mt-3{margin-top: 40px}
.mt-4{margin-top: 100px }
.mt-5{margin-top: 250px }

.mb-0{margin-bottom: 0}
.mb-1{margin-bottom: 10px}
.mb-2{margin-bottom: 20px}
.mb-3{margin-bottom: 40px}
.mb-4{margin-bottom: 100px}

.ml-1{margin-left: 20px}
.ml-2{margin-left: 40px}

.p-0{padding: 0}
.p-1{padding: 10px}
.p-2{padding: 20px}
.p-3{padding: 40px}
.p-4{padding: 100px}

.pt-1{padding-top: 10px;}
.pt-2{padding-top: 20px;}
.pt-3{padding-top: 40px;}
.pt-4{padding-top: 15vh;}
.pt-5{padding-top: 25vh;}

.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pb-3{padding-bottom: 40px;}
.pb-4{padding-bottom: 15vh;}

.pl-3{padding-left: 30px}
.pr-3{padding-right: 30px}

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.img-res { width: 100%; height: auto; margin-bottom: 20px;vertical-align: middle;}
.img-res-2 { width: 60%; height: auto; margin-bottom: 20px;vertical-align: middle;}
.img-res-3 { width: 85%; height: auto; margin-top: 80px;vertical-align: middle;}
@media (max-width: 768px) {
  .img-res-3 { width: 85%; 
    height: auto; 
    margin-top: -20px;
    margin-left: 25px;
    vertical-align: middle;}
}
.img-round {border-radius: 100%;}
.relative {position: relative;}
.round {border-radius: 20px;}
.round-med {border-radius: 60px;}
.img-small {height: 250px;
object-fit: cover;
width: 100%;}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.row{display: flex;
  flex-direction: row;}

@media (max-width: 768px) {
  .sma-text-center {
    text-align: center;
  }
  .sma-p0{padding: 3%;}
  .sma-pt{padding-top: 3vh;}
  .sma-pt-5{padding-top: 5vh;}
  .sma-pt-1{padding-top: 12vh;}
  .sma-pt-2{padding-top: 10vh;}
  .sma-pt-4{padding-top: 8vh;}
  .sma-pt-15{padding-top: 15vh;}
  .sma--pt10{padding-top: -8vh;}
  .sma--pt{padding-top: -8vh;}
  .sma--pt5{padding-top: -5vh;}
  .sma-pt-3{padding-top: 40px;}
  .sma-mxy {margin-left: 10px; margin-right: 10px;}
  .sma-mxy-lh {margin-left: 10px; margin-right: 10px; line-height: 30px;}
  .sma-mtm-1 {margin-top: 5vh}
  .sma-mtm-2 {margin-top: -8vh}
  .sma-img-res { width: 100%; height: auto; margin-bottom: 20px;vertical-align: middle;}

  .sma-pb-1{padding-bottom: 10vh;}
  .sma-pb-2{padding-bottom: 8vh;}
  .sma-pb-3{padding-bottom: 5vh;}

  .sma-round-med {border-radius: 20px;}
  .sma-pt-a{padding-top: 0vh;}
  .sma-pt-b{padding-top: -8vh;}
}

/* animations */
.fade-in {
  opacity: 0;
  transform: translateY(10vh);
  transition: all 0.9s cubic-bezier(.215, .61, .355, 1);
}

.fade-in.in-page {
  opacity: 1;
  transform: translateY(0vh);
}

a {
}