/* ! Reset */
body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none;}
hr {color:#d2d2d7; height:0.2px; margin: 1em 0.5em;opacity: 0.5;}

body{font-family: Inter; background-color: #000;}
.spacer{height: 25vh;}
.spacer-small{height: 5vh;}
.spacer-end{height: 18vh;}

/* Title system */
.text-0{font-size: 5rem; line-height: 1;}
.text-15{font-size: 1.8rem; line-height: 1.2;}
.text-30{font-size: 3rem; line-height: 1.2;}
h1, .text-1{font-size: 4rem; line-height: 1;}
h2, .text-2{font-size: 1.6rem; line-height: 1;}
h3, .text-3{font-size: 1.5rem; line-height: 1;}
h4, .text-4{font-size: 1.2rem; line-height: 1.2;}
p, .text-5{font-size: 1rem;}

.typography{
    font-size: 1.1rem;
    line-height: 1.4211026316;
    font-weight: 400;
    letter-spacing: .012em;
    font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem;}
  .spacer-end{height: 20vh;}
}

/* -----------------------------------------------------------------------
SEZIONE END-BOX (Allineamento centrato verticale e orizzontale)
------------------------------------------------------------------------ */
.end-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

.end-box .land-wa {
  width: 90%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.land-phone {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.land-phone p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 !important;
}

.land-phone img.icon-phone {
  width: 70px;
  height: auto;
  display: block;
  margin: 0;
}

.land-phone a.button {
  margin: 0;
  padding: 0;
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

@media (max-width: 768px) {
  .end-box .land-wa {
    width: 50%;
    margin: 0 auto !important;
  }
  .land-phone a.button {
    font-size: 1.5rem;
    margin: 0 auto !important;
  }
  .land-phone img.icon-phone {
    width: 25px;
  }
  .sma-spacer-text {
    height: 20vh;
  }
}

.container-box{box-sizing: border-box;overflow: hidden!important;width: 100%;}

/* -----------------------------------------------------------------------
BUTTON SYSTEM
------------------------------------------------------------------------ */
.button{font-size: 1.2rem; background: transparent; color: #2997ff; padding: 14px 25px; display: inline-block; border-radius: 4px; position: relative;}
.button:hover{text-decoration: underline;}
.button img {position: absolute;top: 50%; transform: translateY(-50%); width: 20px;color: #2997ff; }

@media (max-width: 768px) {
  .button{font-size: 1rem;}
}


/* -----------------------------------------------------------------------
SCROLL DOWN ARROW
------------------------------------------------------------------------ */

.scroll-down-arrow {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
}

.scroll-down-arrow span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 5px solid #f6b9a1; 
  border-right: 5px solid #f6b9a1;
  transform: rotate(45deg);
  margin-top: -60px;
  margin-bottom: 60px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(10px, 10px);
  }
}

/* -----------------------------------------------------------------------
COMPONENTS
------------------------------------------------------------------------ */

/* ! Intro */
.intro{height: 100vh;position: relative;display: flex;justify-content: center;}
.intro__bg{background: url(../img/Alex-Logo-NEW.png) no-repeat center center;height: 100%;width: 40%;background-size: 50%;margin-top: -100px;position: relative;}
.video-hidden{z-index: 0;}

@media (max-width: 768px) {
  .intro {margin-top: 0px;padding-top: 50%;}
  .intro__bg{background: url(../img/Alex-Logo-NEW.png) no-repeat center center;background-size: 100%;width: 60%;margin-top: -200px;}
}

.text-gradient{
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(129deg,#dc79ff,#256bfa);
}

.text-gradient-2{
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(90deg, rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(131,58,180,1) 100%);
}

/* ! Animation */
.fade-up{opacity: 0;transform: translateY(3rem);}
.fade-up-others{opacity: 0;transform: translateY(3rem);}

/* Animazione dedicata all'icona WhatsApp: entra con fade-in e poi resta visibile. */
.fade-out{opacity: 0;transform: translateY(3rem);}

.panel-text{z-index: 1;position: relative;}
.panel-video{z-index:0;position: fixed;top: 0;left: 0;width: 100%;opacity:0;height: 100vh;}

@media (max-width: 768px) {
  .fade-up{opacity: 0;transform: translateY(0rem);}
  .fade-up-others{opacity: 0;transform: translateY(0rem);}
  .fade-out{opacity: 0;transform: translateY(0rem);}
  .panel-text{z-index: 1;position: relative;}
  .panel-text h2{font-size: 2.5rem;}
  .panel-text h3{font-size: 2rem;padding: 0.5rem;margin-bottom: 2rem;}
}

.soc-icon {width: 8%;}

@media (max-width: 768px) {
    .soc-icon {width: 18%;}
}


/* -----------------------------------------------------------------------
GRID SYSTEM
------------------------------------------------------------------------ */
.grid{display: flex; flex-wrap: wrap; max-width: 1250px; margin: 0 auto;}
.grid--full{max-width: 100%;}
.grid--small{max-width: 900px;}
.grid--footer{max-width: 1000px;}
.grid--center{justify-content: center;}

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

.col-12{width: 12.5%;}

@media (max-width: 768px) {
   [class*='col-']{width: 100%;}
   .sma-25{width: 25%;}
   .sma-33{width: 33.33%;}
   .sma-50{width: 50%;}
   .grid{padding: 30px;}
   .grid--icons{display: flex; flex-wrap: nowrap;}
}

/* -----------------------------------------------------------------------
HELPERS
------------------------------------------------------------------------ */
.br{border: 1px solid red;}

.bg-dark{background: #000; transition: all 2s cubic-bezier(.215, .61, .355, 1);}
.bg-grey{background: #eee; transition: all 2s cubic-bezier(.215, .61, .355, 1);}
.bg-white{background: #fff; transition: all 2s cubic-bezier(.215, .61, .355, 1);}

.fw200{font-weight: 200;}
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}

.img-res{width: 100%;}
.img-res-sma{width: 15%;}
.img-res-half{width: 30%;}
.img-res-mid{width: 80%;}
.img-res-big{width: 130%;}

.video-res{width: 100%;height: 100%;overflow: hidden;object-fit: cover;}

.m-0{margin: 0;}
.m-05{margin: 0.7rem;}
.m-1{margin: 1rem;}
.m-2{margin: 2rem;}
.m-3{margin: 3rem;}
.m-4{margin: 4rem;}
.m-5{margin: 5rem;}

.mt-0{margin-top: 0;}
.mt-05{margin-top: 0.7rem;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}
.mt-5{margin-top: 5rem;}
.mt-n2{margin-top: -20rem;}
.mt-n1{margin-top: -10rem;}

.mb-0{margin-bottom: 0;}
.mb-05{margin-bottom: 0.7rem;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}
.mb-5{margin-bottom: 5rem;}
.mb-10{margin-bottom: 10rem;}
.mb-14{margin-bottom: 14rem;}
.mb-15{margin-bottom: 15%;}
.mb-25{margin-bottom: 25%;}
.mb-n1{margin-bottom: -0.7rem;}

.ml-0{margin-left: 0;}
.ml-05{margin-left: 0.7rem;}
.ml-1{margin-left: 1rem;}
.ml-2{margin-left: 2rem;}
.ml-3{margin-left: 3rem;}
.ml-4{margin-left: 4rem;}
.ml-5{margin-left: 5rem;}

.mr-0{margin-right: 0;}
.mr-05{margin-right: 0.7rem;}
.mr-1{margin-right: 1rem;}
.mr-2{margin-right: 2rem;}
.mr-3{margin-right: 3rem;}
.mr-4{margin-right: 4rem;}
.mr-5{margin-right: 5rem;}

.p-0{padding: 0;}
.p-05{padding: 0.7rem;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}
.p-5{padding: 5rem;}
.p-6{padding: 6rem;}
.p-7{padding: 7rem;}

.pt-0{padding-top: 0;}
.pt-05{padding-top: 0.7rem;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}
.pt-5{padding-top: 5rem;}
.pt-6{padding-top: 6rem;}
.pt-7{padding-top: 7rem;}

.pb-0{padding-bottom: 0;}
.pb-05{padding-bottom: 0.7rem;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}
.pb-5{padding-bottom: 5rem;}
.pb-6{padding-bottom: 6rem;}
.pb-7{padding-bottom: 7rem;}

.pl-0{padding-left: 0;}
.pl-05{padding-left: 0.7rem;}
.pl-1{padding-left: 1rem;}
.pl-2{padding-left: 2rem;}
.pl-3{padding-left: 3rem;}
.pl-4{padding-left: 4rem;}
.pl-5{padding-left: 5rem;}
.pl-6{padding-left: 6rem;}
.pl-7{padding-left: 7rem;}
.pl-10{padding-left: 10rem;}

.pr-0{padding-right: 0;}
.pr-05{padding-right: 0.7rem;}
.pr-1{padding-right: 1rem;}
.pr-2{padding-right: 2rem;}
.pr-3{padding-right: 3rem;}
.pr-4{padding-right: 4rem;}
.pr-5{padding-right: 5rem;}
.pr-6{padding-right: 6rem;}
.pr-7{padding-right: 7rem;}
.pr-10{padding-right: 10rem;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

.icon-small{width: 35px;padding: 8px;}
.icon-white{filter: invert(1);}
.text-white{color: #fff;}
.v-center{display: flex; justify-content: center; flex-flow: column; align-items: center;}
.v-center-end {display: flex;justify-content: flex-end;flex-flow: column;align-items: center;}
.v-left{display: flex; justify-content: center; flex-flow: column; align-items: left;}
.v-right{display: flex; justify-content: right; flex-flow: column;align-items: right;}
.col-center{display: flex; justify-content: center; align-items: center;padding: 10px;}

.lineh{line-height: 50px;}

.none{display: none;}

.z-index-top{z-index: 100;}
.z-index-behind{z-index: 0;}

@media (max-width: 768px) {
  .sma-none{display: none;}
  .col-center-mediaq{display: flex; justify-content: left; align-items: center;}
  .none{display: block;}
}