@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
html,
    body {
      position: relative;
      height: 100%;
      transition: padding-top 0.3s ease-in-out;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 1rem;
      color: #000;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      text-wrap: balance;
      font-family: "Inter Tight", sans-serif;
      box-sizing: border-box;

    }
  /*aminazioni*/
  /* Definisci l'animazione */
@keyframes badge {
  from { opacity: 0; transform:translate(200%, 0%)}
  to { opacity: 1; transform:translate(0%, 0%)}
}

/* Applica l'animazione all'elemento */
.elemento {
  animation-name: esempio;
  animation-duration: 2s; /* Durata dell'animazione */
  animation-delay: 3s; /* Ritardo prima dell'inizio dell'animazione */
}

    /*tipografia fluida*/
    h1, h2 {padding: 0;margin: 0;font-weight: 800; font-size: 4rem; text-align: center;margin:auto;}

    @media(max-width:991px){
      h1, h2{font-size:2.8rem;}
      p{font-size:1.2rem;}
      }
    @media(max-width:570px){
        h1{font-size:2rem;}
        p{font-size:1rem;}
        }

    @media(max-width:360px){
      h1, h2{font-size:1.8rem;}
      p{font-size:1rem;}
      }

 /* big carousel*/
    .swiper {width: 100%; height: 120%;}
    .swiper-slide { text-align: center; background: #fff; display: flex; justify-content: center; align-items: center; }
    .hero-slide{ position: absolute; left:50%; top:-50%;  transform:translate(-50%, -50%); width: 50%; text-align: center; color:#fff; opacity: 0;}
    .hero-slide h1{font-size:4rem;line-height: 100%;}
    .hero-slide p{font-size: 1.5rem; line-height: 100%;}

    .hero-slide-2{ position: absolute; width:88%; border: 1px solid red; top:45%; left:12%;transform: translate(0%, -45%); display:flex; flex-wrap: wrap;}
    .hero-slide__txt{ text-align: left; flex:0 0 35%}
    .hero-slide__txt h1{text-align: left;line-height: 100%; color:#fff;margin:0 0 10px 0} 
    .hero-slide__txt p {text-align: left;line-height: 100%; color:#fff;font-size:1.5rem; line-height:1.8rem;} 
    .hero-slide__txt.full h1{text-align: center;line-height: 100%; color:#fff;margin:0 0 10px 0} 
    .hero-slide__txt.full p {text-align: center;line-height: 100%; color:#fff;font-size:1.5rem; line-height:1.8rem;} 
    .hero-slide__img img{width:100%;height: 100%; object-fit: cover; object-position: center;}
    .hero-slide-video{ position: absolute; width:100%; max-width:85vw; border: 1px solid red; top: 45% !important;; left:7.5%;transform: translate(0%, -45%); display:flex; flex-wrap: wrap;}
    .hero-slide-video .hero-slide__txt{flex:0 0 45%; border:1px solid red}
    .hero-slide-video .hero-slide__txt.full{flex:0 0 100%; text-align: center;}
    .hero-slide-video .hero-slide__img{flex: 0 0 55%; border: 1px solid;position:relative}
    .hero-slide-video .hero-slide__img .img-hero{object-fit:contain}
    .hero-slide-video .layer--2{ position: absolute;width: 100px !important; height: auto !important; top: 15%; left: 50%}
    .hero-slide-video .layer--3{position: absolute;width: 100px !important; height: auto !important; bottom: 33%; left: 0%}
    .hero-slide-video .layer--4{position: absolute;width: 100px !important; height: auto !important; top: 20%; left: 30%}
    video{height: 100%;width:100%;object-fit: cover;}

    .swiper-slide-active .hero-slide {top: 50%; opacity: 1 !important; z-index: 1; transition: top 1s ease-in-out;}
    .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}
    .navigation { z-index: 9999; position: absolute;  bottom: 25%;  width: 10%;  left:50%; transform: translateX(-50%);}

  /*animazioni*/
  .hero-slide-2 .hero-slide__img {flex:0 0 65%; transform:translate(0%, 100%);opacity:0;}
  .swiper-slide-active .hero-slide-2 .hero-slide__img {position:relative;transform:translate(0%, 0%); transition: all .5s ease-in-out; opacity:1}
  .hero-slide__layer {position: absolute;opacity: 0; }

  /*qui gestisco una serie di immagini con posizione assoluta che gestisco tramite animate css in un js*/
  .hero-slide-2 .layer--1{left: 10%; width: 100px; top: 0%; animation: badge 1s .5s ease-in-out;}    
  .hero-slide-2 .layer--2{right: 10%; width: 100px; bottom: 0%;  animation: badge 2s .5s ease-in-out;}    
  .hero-slide-2 .layer--4{ position: absolute;width:100px !important; height:auto !important;top:0%;left:10%; opacity:0}
  .hero-slide-2 .layer--5{ position: absolute;width:100px !important; height:auto !important;bottom:0%;right:10%; opacity: 0;}

  @media (min-width:1920px){
    .hero-slide-video{ position: absolute; width:100%; max-width:65vw;left:17.5%;}

  }

    @media (max-width: 1440px) {
      .hero-slide-2{ position: absolute; width:94%; border: 1px solid rgb(83, 255, 3); top:45%; left:6%;transform: translate(0%, -45%); display:flex; flex-wrap: wrap;}

    }
    @media(max-width:991px){
      .hero-slide{width:80%;}
      .hero-slide h1{font-size:2.8rem;}
      .hero-slide p{font-size:1.2rem;}
      .hero-slide-2{width:100%; border: 1px solid red; top:45%; left:0%;display:flex; flex-wrap: wrap;}
      .hero-slide-2 .hero-slide__txt{ text-align: left; flex:0 0 100%; text-align: center;}
      .hero-slide-2 .hero-slide__img {flex:0 0 100%;}
      .hero-slide-2 .hero-slide__txt * {text-align: center;}
      }


    @media(max-width:570px){
        .swiper {height:95vh;}
        .hero-slide{width:90%;}
        .hero-slide h1{font-size:2rem;}
        .hero-slide p{font-size:1rem;}
        .navigation { width: 30%;}

        }
    @media(max-width:360px){
      .hero-slide{width:94%;}
      .hero-slide h1{font-size:1.8rem;}
      .hero-slide p{font-size:1rem;}
      }


    /*carosello 2*/
    .mySwiper2 .swiper-slide {height:100%;aspect-ratio: 2/3; border-radius: 30px;overflow: hidden;}
    .mySwiper2 .swiper-slide{transform: translate3d(10px, 0px, -200px) rotateX(0deg) rotateY(0deg) scale(1)!important;}
    .mySwiper2 .swiper-slide-prev, .mySwiper2 .swiper-slide-next{transform: translate3d(10px, 0px, -100px) rotateX(0deg) rotateY(0deg) scale(1)!important;}
    .mySwiper2 .swiper-slide-active{transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1)!important;}
    .mySwiper2 .swiper-pagination{position: absolute;bottom: 0; }
    .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-left, .swiper-slide-shadow-coverflow {background-image:linear-gradient(to right, rgba(198, 198, 198, 0.5), rgba(0, 0, 0, 0))!important}

    /*sections*/
    .section{
      padding:4rem 0 4rem 0; text-align:center; min-height: 10vh; height:max-content }
    .section--1{padding:4rem 0 0rem 0; position: relative; background-color:#fff}
    .section--2{background: url("./img/backgroundpurple.jpg");background-attachment: fixed;background-size:100%;background-position:center;position: relative;}
    .section--2::before{content:"";position:absolute;z-index: 0; top:0; left: 0; width: 100%; height: 100%; backdrop-filter: saturate(180%) blur(0px);background-color: rgba(135, 2, 212, 0.623);box-shadow: 0 13px 22px -5px rgba(6,6,39,.06);box-shadow: 0 13px 22px -5px rgba(0,0,0,.06);}
    .section h1{ font-size: 4rem; text-align: center; line-height: 100%;}
    .section p{ font-size: 1.5rem; text-align: center; line-height: 100%; color:#fff; margin-bottom:3rem;}
    .section:nth-child(even){ background-color: #060627;}
    .section:nth-child(even) h1, .section:nth-child(even) h2{ color: #fff;}
    .section:nth-child(odd){ background-color:#EEEEEE;}
    .section:nth-child(odd) h1,.section:nth-child(odd) h2{ color: #000;}
    .section:nth-child(odd) p{ color:#464646;}
    .element-container{ width:100%; max-width: 1200px; padding:3rem 0; margin:auto;  border-radius: 30px;  transform: translateY(-20%); background-color: #fff; position: relative;  z-index: 4;}
    .contenitore{ width:100%; max-width: 1200px; margin:auto}
    
    @media(min-width:1920px){
      .contenitore{ max-width: 65vw; margin:auto}
    }

    @media (max-width: 992px) {
      .section--2{background: url("./img/backgroundpurple.jpg");background-attachment: scroll;background-size:cover;background-position:center;background-repeat:no-repeat;}

    }
    @media (max-width:1440px){
      .section--1{height:max-content; padding:4rem 0 0rem 0; position: relative;border:5px solid red;}
    }
    @media (max-width: 570px) {
      .element-container{transform: translateY(-10%);}
    }



    /*cards*/
    .cards-section-1{display: flex;margin:auto; width:80%;justify-content: space-between;flex-wrap: wrap; }
    .cards-section-1 .card{ width:24.5%;aspect-ratio: 3/3; margin:0 0 .5rem 0; border:0px;}
    .cards-section-1 .card img{ max-width: 100%; height: auto; object-fit: contain; object-position: center; }
    .cards-section-1 .card p{padding:0;  margin:0; font-size:1rem; }
    @media (max-width: 570px) {
      .cards-section-1 .card{
        width:49.5%; aspect-ratio: 3/3; margin:0 0 .5rem 0; }
      .element-container h1{ font-size:3rem; }
    }

    @media (min-width: 1920px) {
      .element-container { max-width: 65vw; }
    }

    /*section 2*/
    .contenitore.box-container  h1{text-align: center; margin:auto;}
    .contenitore.box-container {align-items: center;  display: flex; flex-wrap: wrap;  padding: 0;  width: 100%;  max-width: 1200px;position:relative;z-index: 2;}
    .box-item { position: relative; overflow: hidden;width: 32%; margin: 0 .5% 35px .5%; max-width: 100%;}
    .flip-box {-ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;perspective: 1000px; -webkit-perspective: 1000px; }
    .flip-box-front, .flip-box-back { border-radius: 30px; aspect-ratio: 3/3; -ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1); transition: transform 0.7s cubic-bezier(.4,.2,.2,1); 
      -webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1); -webkit-backface-visibility: hidden; backface-visibility: hidden;}

    .flip-box-front img, .flip-box-back img {width: 100%;height: 100%;object-fit: cover; object-position: center; border-radius:30px;}
    .flip-box-front {-ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}
    .flip-box:hover .flip-box-front { -ms-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}
    .flip-box-back {
      position: absolute;top: 0;left: 0; width: 100%; -ms-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}
    
    .flip-box:hover .flip-box-back { -ms-transform: rotateY(0deg);  -webkit-transform: rotateY(0deg); transform: rotateY(0deg);  -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}
    .flip-box .inner { position: absolute;  left: 0; width: 100%;  -webkit-perspective: inherit; perspective: inherit; z-index: 2; transform: translateY(-50%) translateZ(60px) scale(.94); -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
       -ms-transform: translateY(-50%) translateZ(60px) scale(.94);top: 50%;}
    
    .flip-box-header {font-size: 34px;}
    .flip-box p {font-size: 20px;line-height: 1.5em; color:#fff; }
    .flip-box-img {margin-top: 25px;}
    .flip-box-button {background-color: transparent;border: 2px solid #fff; border-radius: 2px; color: #fff; cursor: pointer;  font-size: 20px; font-weight: bold;  margin-top: 25px; padding: 15px 20px; text-transform: uppercase; }

    @media (max-width: 992px) {
      .box-item{width: 49%; margin: 0 .5% 35px .5%;}
    }

    @media (max-width: 720px) {
      .box-item{width: 98%; margin: 0 1% 35px 1%;}
    }
        
    @media screen and (min-width:992px) {
      .box-container { flex-direction: row}
    }

    @media (min-width: 1920px) {
      .contenitore.box-container {max-width: 65vw; }
    }
    

    /* isotope*/
  :root { a{text-decoration: none;}}

  .portfolio-menu { text-align: center; margin: 30px auto;}
  .portfolio-menu ul li { display: inline-block; margin: 0; list-style: none; border: 1px solid #ffffff; color:#fff; cursor: pointer; transition: all .5 ease; padding:.5rem;}
  .portfolio-menu ul { padding:0;}
  .portfolio-menu ul li:hover { border: 1px solid #ffffff; background: #ffffff; color: #000000;}
  .portfolio-menu ul li.active {background: #ffffff; color: #000000;}
  .portfolio-item { width: 100%; margin: 30px auto;}
  .portfolio-item .item { width: 32%; display: inline-block; margin: 0 .25% 10px 0.25%; aspect-ratio: 3/3; border-radius: 10px; overflow: hidden; border:1px solid #ccc; position:relative}
  .portfolio-item .item img {height: 100%; width:100%; object-fit: cover; object-position: center;}

  /*bottone play per video*/
  #play-button {width: 60px;height: 60px;border-radius: 50%;background-color: #0084ff; /* Colore rosso stile YouTube */border: none;color: white;position: relative;cursor: pointer;outline: none;
    display: flex; justify-content: center;align-items: center;transition: background-color 0.3s ease;position: absolute;top:50%;left:50%;z-index: 3; transform: translate(-50%, -50%); }
  
  #play-button.play::before {content: ''; border-style: solid;border-width: 10px 0 10px 20px; /* Triangolo per la freccia */border-color: transparent transparent transparent white; /* Colore della freccia */display: inline-block; margin-left: 5px; /* Leggera spaziatura per centrare la freccia */}
  #play-button.pause::before { content: ''; width: 15px; height: 20px; background-color: white; position: relative; }
  #play-button.pause::before { content: '';display: flex; gap: 5px; /* Spaziatura tra le barre della pausa */ }
  #play-button.pause::before {content: ''; display: flex; }
  #play-button.pause::before {content: ''; width: 5px;height: 20px; background-color: white; margin-right: 5px; }
  #play-button.pause::after {content: ''; width: 5px;height: 20px; background-color: white;}
  
  #play-button:hover {background-color: #0070cc; /* Colore rosso scuro al passaggio del mouse */}
  
 
  @media screen and (max-width: 1024px) {
    .portfolio-item .item {width: 49%;}
 }
  
  @media screen and (max-width: 640px) {
    .portfolio-item .item { width: 100%;}

  }


      /*footer*/
      footer{background-color: #060627;}
      .footer__content{width:100%;max-width: 1200px; display: flex;justify-content: space-between;margin:auto;padding:4rem 0 8rem 0; color:#fff}
      .footer__content ul {padding: 0%; margin: 0; list-style-type:none;}
      .footer__menu {width: calc(100% - 20%);display:flex; justify-content: space-around;}
      .footer__content a{color:#fff; text-decoration: none;display:block}
      .footer__menu .col{ width:max-content;}
      .footer__menu .col a{margin:0 0 10px 0;}
  
      @media(min-width:1920px){
        .footer__content{ max-width: 1400px; margin:auto}
      }