/* RESET*/
body, html{ font-size: 10px;    background-color: #FBFBFB;    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;font-family: 'THICCCBOI';}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none;}

/* Uso dei Font */

/* THICCCBOI FONT */

@font-face {
    font-family: 'THICCCBOI';
    src: url('/fonts/thicccboi/THICCCBOI-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
  
@font-face {
    font-family: 'THICCCBOI';
    src: url('/fonts/thicccboi/THICCCBOI-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
  
@font-face {
    font-family: 'THICCCBOI';
    src: url('/fonts/thicccboi/THICCCBOI-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'THICCCBOI';
    src: url('/fonts/thicccboi/THICCCBOI-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
  
@font-face {
    font-family: 'THICCCBOI';
    src: url('/fonts/thicccboi/THICCCBOI-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'THICCCBOI';
    src: url('/fonts/thicccboi/THICCCBOI-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}



/* ULM GROTESK FONT */
@font-face {
    font-family: 'UlmGrotesk';
    src: url('/fonts/ulm-grotesk/UlmGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'UlmGrotesk';
    src: url('/fonts/ulm-grotesk/UlmGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'UlmGrotesk';
    src: url('/fonts/ulm-grotesk/UlmGrotesk-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'UlmGrotesk';
    src: url('/fonts/ulm-grotesk/UlmGrotesk-Extrabold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}





/* ! Text System */
.didascalia { font-weight: 300;}
li,p {
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  font-weight: 500;
  color: #23273F;
}

.mini-txt {
  font-size: clamp(1.2rem, 1.4vw, 1.3rem);
  font-weight: 300;
  color: #23273F;
  opacity: .6;
}

h6 {
  font-size: clamp(2rem, 3vw, 2.4rem);
  font-weight: 500;
  color: #23273F;
  opacity: .6;
}
h5 {
    font-size: clamp(2.4rem, 2.6vw, 2.8rem);
    font-weight: 500;
    color: #23273F;
  }
  
  h4 {
    font-size: clamp(2.8rem, 3.6vw, 3.9rem);
    font-weight: 500;
    color: #23273F;
  }
  
  h3 {
    font-size: clamp(3.2rem, 4.8vw, 4.8rem);
    font-weight: 600;
    color: #23273F;
  }
  
  h2 {
    font-size: clamp(4.0rem, 5.6vw, 5.6rem);
    font-weight: 600;
    color: #23273F;
  }
  
  h1 {
    font-size: clamp(5.0rem, 6.8vw, 8rem);
    font-weight: 600;
    color: #23273F;
  }
  .titolo-grande{
    font-size: 200px;
  }
.mt-hero{
    margin-top: 6rem;
}
.description{
    margin-bottom: 10px;
    opacity: .6;
}

.font-light{
    font-weight: 400 !important;
}

.font-grotesk{
    font-family: 'UlmGrotesk';
    font-weight: 600;
}

i{
    display: flex;
    justify-content: center;
}
ol, ul {
    list-style: none;
  }
  
img {
    max-width: 100%;
    height: auto;
  }
  
a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}
.underline{
    text-decoration: underline;
}
.bold{
    font-weight: 700;
}
.padding-container{
    padding: 120px 180px;
}
.content-dark{
    color: #fff;
}

body {
    font-family: 'THICCCBOI';
    background-color: #FBFBFB;
    color: #23273F;

}
  
  
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: #23273F;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.15s ease-out; /* animazione smooth */
  }
  
  /* quando è hover sui link/pulsanti */
  .cursor.cursor-hover {
    transform:scale(2); /* ingrandimento */
    background-color: transparent !important;

  }
  

.container{
    width: 100%;
    height: auto;
}

/* BOTTONI */
.button-dark {
    padding: 14px 20px;
    background-color: #23273F;
    display: flex;
    align-items: center;
    border: 1.5px solid #23273F;
    border-radius: 100px;
    transition: all 0.4s 
ease;
}
.button-dark p{
    color: #fff;
    opacity: 1 !important;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
}
.button-dark:hover{
    transform: translateY(-10px);
    background-color: transparent;
    border: 1.5px solid #23273F;
}
.button-dark:hover p{
    color: #23273F;
}


.button-white {
    padding: 14px 20px;
    background-color: #fff;
    border: 1.5px solid #fff;
    display: flex;
    align-items: center;
    border-radius: 100px;
    transition: all 0.4s 
ease;
}
.button-white p{
    color: #23273F;
    opacity: 1 !important;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
}
.button-white:hover{
    transform: translateY(-10px);
    background-color: transparent;
    border: 1.5px solid #fff;
}
.button-white:hover p{
    color: #fff;
}

.bottom-blur {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 10vh;
    z-index: 99;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: linear-gradient(
        to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0) 100%
    );

    mask-image: linear-gradient(
        to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0) 100%
    );
    
}
/*HOMEPAGE*/


header{
    padding: 0px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: auto;
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    z-index: 999;
}

header .logo{
    width: 20%;
    height: auto;
    transition: all 0.3s ease;
    z-index: 10;
}
header .logo img{
    width: auto;
    max-height: 51px;
}
header .logo:hover img{
    opacity: .9;
}

/* NAV */
header .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid #23273F;
    border-radius: 100px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    gap: 50px;
    max-height: 51px;
}
.nav-content{
    display: flex;
    position: relative;
    width: auto;
    justify-content: center;
    align-items: center;
    height: 2rem;
    transition: all 0.2s ease;
    overflow: hidden;
    opacity: .3;
}
.nav-content.active{
    opacity: 1;
}
.nav-mobile.active{
    opacity: 1;
}


.nav-content .link-nav-1 {
    font-size: 2rem;
    transform: translateY(0);
    transition: transform 0.3s ease;
}
.nav-content .link-nav-2 {
    position: absolute;
    font-size: 2rem;
    transform: translateY(4rem);
    transition: transform 0.3s ease;
}
.nav-content:hover .link-nav-1 {
    transform: translateY(-4rem);
}

.nav-content:hover .link-nav-2 {
    transform: translateY(0);
}

.container-cta{
    width: 20%;
    justify-content: end;
    align-items: center;
    display: flex;
}
.cta-header{
    padding: 14px 20px;
    background-color: #EFF1F8;
    border: 1.5px solid #6370B4;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-height: 51px;
    width: auto;
    flex: 0 0 auto; 
    border-radius: 100px;
    transition: all 0.3s ease;

}
.cta-header p{
    font-size: 2rem;
    color: #6370B4 !important;
}
.cta-header i{
    font-size: 1.6rem;
    color: #6370B4;
    transition: transform 0.3s ease;

}
.cta-header:hover{
    box-shadow: 0 0 0 0.5px #6370B4;
}
.cta-header:hover i{
    transform: translateX(5px);
}
.hamburger-menu {
    display: none;
  }
  .open-menu{
    display: none;
  }



.hero-section{
    display: flex;
    justify-content: center;
    align-items: start;
    height: 120vh;
    text-align: center;
    background-image: url(../img/background.jpg);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    position: relative;
    padding-top: 50px;
    z-index: 1;
}
.hero-section .text{
    display: flex;
    gap: 30px;
    flex-direction: column;
    align-items: center;
} 

.hero-section .beezy-simbolo {
    position: absolute;
    bottom: 5%;
    left: 50%;   
    transform: translateX(-50%); 
    width: 28%;
    z-index: -1;
}

.text-animate{
    background-color: #fff;
    z-index: 1;
    position: relative;
    padding: 90px 180px;
}
.element{
        position: relative; 
        display: inline-block;
        margin: 0px 8px;
}
.element::after {
    content: ""; 
    position: absolute;
    bottom: 2rem; 
    height: 4rem;
    left: 50%; 
    transform: translateX(-50%) translateY(50%); 
    width: 105%; 
    background-color: #E2E2F1;
    border-radius: 100px; 
    z-index: -1; 
}


.text-animate h2{
    font-weight: 500;
    text-align: center;
}


.features-section{
    display: flex;
    flex-direction: column;
    gap: 90px;
    align-items: center;
    
}
.text-x{
    display: flex;
    align-items: start;
    justify-content: space-between;
    z-index: 1;
}
.text-x h2{
    width: 50%;
    font-weight: 500;
}
.text-x h2 span{
    font-weight: 600;
}

.text-x div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
    justify-content: start;
    width: 35%;
}

.container-cards{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}
.container-cards .row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
}
.card-md{
    padding: 30px;
    background-color: #EFF1F8;
    border: 1.5px solid rgba(35, 39, 63, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: 55vh;
    width: 100%;
    border-radius: 30px;
    flex-direction: column;
}
.card-lg{
    padding: 30px;
    background-color: #EFF1F8;
    border: 1.5px solid rgba(35, 39, 63, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    height: 55vh;
    width: 100%;
    border-radius: 30px;
    flex-direction: row;
}
.card-lg h3{
    font-weight: 500 !important;
}
.container-white {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.container-white::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10%; 
    background: linear-gradient(
        to top,
        #EFF1F8 0%,
        rgba(239, 241, 248, 0) 100%
    );
    pointer-events: none;
}
.container-white::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10%; 
    background: linear-gradient(
        to bottom,
        #EFF1F8 0%,
        rgba(239, 241, 248, 0) 100%
    );
    pointer-events: none;
    z-index: 10;
}
.card-md .container-white .top-iphone{
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px); 
}

.card-md .container-white .img-task-1{
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px); 
    height: auto;
    transition: all 0.5s ease;
}
.card-md .container-white .img-task-2{
    position: absolute;
    bottom: 93px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px); 
    height: auto;
    transition: all 0.4s ease;
}

.card-md .container-white .img-task-3{
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px); 
    height: auto;
    transition: all 0.3s ease;
}

.card-md .container-white .img-task-4{
    position: absolute;
    bottom: 42%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px); 
    height: auto;
    transition: all 0.4s ease;
}

.card-md .container-white .img-task-5{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px); 
    height: auto;
    transition: all 0.3s ease;
}

.card-md .container-white .img-logos{
    transform: translateX(-50%) translateY(-18px);
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    height:90px;
    width: auto;
    transition: all 0.3s ease;
}
.card-md .container-white .img-navbar{
    transform: translateX(-50%) translateY(-18px);
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%; 
    height: auto;
    transition: all 0.6s ease;
    opacity: 1;
}
.card-md .container-white .img-keybord{
    transform: translateX(-50%) translateY(-18px);
    position: absolute;
    bottom: -110px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%; 
    height: auto;
    transition: all 0.6s ease;
    opacity: 1;
}

/* SLIDER INFINITE */
.card-lg .container-white{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: relative;
}
.slider {
    position: absolute;
  display: flex;
  flex-direction: column;
  width: 35%;
  gap: 5px;
  }
  .slider:nth-child(1) {
   left: 32%;
  }
  .slider:nth-child(2) {
    left: 68%;
   }
  .slider.up {
    top: -10%;
    animation: slideUp 15s linear infinite;
  }
  .slider.down {
    top: 10%;
    animation: slideDown 15s linear infinite;
  }
  .slider img {
    width: 100%;
    height: auto;
  }




  @keyframes slideUp {
    0% {
      transform: translate(-50%, 0);
    }
    100% {
      transform: translate(-50%, -50%);
    }
  }
  
  @keyframes slideDown {
    0% {
      transform: translate(-50%, -50%);
    }
    100% {
      transform: translate(-50%, 0);
    }
  }



.card-md:hover .img-task-1 {
    transform: translateX(-50%) translateY(-18px);
}

.card-md:hover .img-task-2 {
    transform: translateX(-50%) translateY(-18px);
}

.card-md:hover .img-task-3 {
    transform: translateX(-50%) translateY(-18px);
}
.card-md:hover .img-task-4 {
    transform: translateX(-50%) translateY(-18px);
}

.card-md:hover .img-task-5 {
    transform: translateX(-50%) translateY(-18px);
}
.card-md:hover .container-white .img-navbar {
    transform: translateX(-50%) translateY(85px); 
    opacity: 0;
  }
  
  .card-md:hover .container-white .img-keybord {
    transform: translateX(-50%) translateY(-140px); 
    opacity: 1;
  }

  .card-md:hover .container-white .section-emoji .container-emoji img:nth-child(2){
      opacity: 1;
  }
  .card-md:hover .container-white .section-emoji .container-emoji img:nth-child(1){
    transform: scale(0.5);
}
  

.card-md .text{
    display: flex;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 15px;
    text-align: start;
    flex-direction: column;
}
.card-lg .text{
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    gap: 10px;
    text-align: start;
    flex-direction: column;
}
.text p{
    opacity: .6;
}

.container-white .section-emoji{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    height: 100%;
    padding: 0px 15px;
}
.container-white .section-emoji .container-emoji{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
}
.container-white .section-emoji .container-emoji img:nth-child(1){
    width: 80%;
    transition: all 0.6s ease;
}
.container-white .section-emoji .container-emoji img:nth-child(2){
    position: absolute;
    width: 80%;
    height: auto;
    opacity: 0;
    transition: all 0.6s ease;
}



.how-section{
    background: linear-gradient(
  to bottom,
  rgba(226, 226, 241, 0.3) 0%,
  rgba(226, 226, 241, 1) 100%
);
    position: relative;
    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 90px;
    padding-left: 180px;
    padding-right: 180px;
    padding-top: 120px;
    overflow: hidden;
}
.how-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10vh; 
    pointer-events: none;
    background: linear-gradient(
      to top,
      #FBFBFB 0%,
      rgba(229, 229, 242, 0) 100%
    );
  }

.how-section .container-how-work{
   display: flex;
   justify-content: space-between;
   align-items: start;
   width: 100%;
   align-items: stretch;
}
.how-section .container-how-work .voci-how{
    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 30px;
    width: 35%;
    height: 100%;
    padding-bottom: 120px;
}
.how-section .container-how-work .voci-how h6{
    opacity: 1;
}
.how-section .container-how-work .voci-how .voce-how{
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: start;
    flex-direction: column;
    padding: 20px;
    text-align: start;
    background-color: rgba(255, 255, 255, 0.3);
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.how-section .container-how-work .voci-how .voce-how:hover{
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
}
.how-section .container-how-work .voci-how .voce-how:hover,
.how-section .container-how-work .voci-how .voce-how.active{
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
}

.how-section .container-how-work .voci-how div .description{
    margin-bottom: 0 !important;
}



.how-section .mockup-how{
    position: relative;
    width: 55%;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    flex: 1;
    margin-left: 60px;
}
.how-section .mockup-how img{
    position: absolute;
    bottom: -10%;
    width: auto;
    max-height: 90%;
    transition: all 0.4s ease;
    transform-origin: center;
  }
  .img-how-1{
    z-index: 2;
  }
  .img-how-2{
    z-index: 1;
  }
  .img-how-3{
    z-index: 0;
  }


/* USCITA A SINISTRA */
.exit-left{
    transform: translateX(-50%) scale(1);
    opacity: 0;
  }
  
  /* STATO ATTIVO (immagine principale) */
  .is-main{
    right: 35%;
    width: 60%;
    z-index: 3;
    opacity: 1;
    transform: translateX(0) scale(1.1);
  }
  
  .is-second{
    right: 15%;
    width: 55%;
    z-index: 2;
    opacity: 1;
    transform: scale(1);
  }
  
  .is-third{
    right: 0%;
    width: 45%;
    z-index: 1;
    opacity: 1;
    transform: scale(0.9);
  }
  
  .exit-left{
    right: 35%;
    transform: translateX(-80%) scale(0.9);
    opacity: 0;
  }

/* SCALE DI ENFASI */
.scale-medium {
    transform: scale(1.15) rotate(-15deg);
  }
  
  .scale-large {
    transform: scale(1.3) rotate(-25deg);
  }

.section-integrations{
    padding-top: 120px;
    padding-bottom: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    position: relative;
    flex-direction: column;
}
.element {
  font-weight: 600 !important;
}

.text-center{
justify-content: center;
text-align: center;
display: flex;
justify-content: center;
padding-left: 180px;
padding-right: 180px;
flex-direction: column;
gap: 30px;
z-index: 1;
}
.text-center h2{
    font-weight: 500;
    }
.text-center div{
    justify-content: center;
    text-align: center;
    display: flex;
    justify-content: center;
    }
.text-center p{
    width: 60%;
    }

    .app-integrations {
        width: 100%;
        padding: 60px 180px;
        display: flex;
        justify-content: center;
        position: relative;
      }
      .app-integrations .button-dark{
        position: absolute;
        bottom: 0;
        left: 50%;
  transform: translateX(-50%);
      }
      .app-integrations .button-dark:hover{
        position: absolute;
        bottom: 10px;
      }
      
      .slider-track {
        position: relative;
        width: 100%;
        height: 60vh;
        overflow: hidden;
      }
      
      .slider-track::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 10%;
        height: 100%; 
        background: linear-gradient(
            to right,
            #FBFBFB 0%,
            rgba(239, 241, 248, 0) 100%
        );
        pointer-events: none;
        z-index: 99;
    }
    .slider-track::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 10%;
        height: 100%; 
        background: linear-gradient(
            to left,
            #FBFBFB 0%,
            rgba(239, 241, 248, 0) 100%
        );
        pointer-events: none;
        z-index: 99;
    }
    .slider-track img {
        position: absolute;
        width: 22vw;
        offset-path: ellipse(80% 50vh at 50% 120%);
        offset-rotate: 0deg;
        animation: move 24s linear infinite;
      }
      
      /* distribuiamo gli offset */
      .slider-track img:nth-child(1) { animation-delay: 0s; }
      .slider-track img:nth-child(2) { animation-delay: -3s; }
      .slider-track img:nth-child(3) { animation-delay: -6s; }
      .slider-track img:nth-child(4) { animation-delay: -9s; }
      .slider-track img:nth-child(5) { animation-delay: -12s; }
      .slider-track img:nth-child(6) { animation-delay: -15s; }
      .slider-track img:nth-child(7) { animation-delay: -18s; }
      .slider-track img:nth-child(8) { animation-delay: -21s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }

      .slider-track img:nth-child(10) { animation-delay: -27s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }
      .slider-track img:nth-child(9) { animation-delay: -24s; }
      /* duplicati: continuiamo il ciclo */
      .slider-track img:nth-child(n+9) { animation-delay: calc(-3s * ((n - 1)  8)); }
      
      @keyframes move {
        0% { offset-distance: 0%; }
        100% { offset-distance: 100%; }
      }
      
@keyframes move {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
  }
    



  .plan-section{
    position: relative;
    z-index: 1;
  }
  .hero-section-pages{
    position: relative;
    z-index: 1;
  }

  .row-plan{
display: flex;
align-items: center;
justify-content: center;
gap:60px;
flex-direction: column;
  }
.containers-plan{
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 30px;
}
.container-plan {
    position: relative;
    padding: 30px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 4px 10px rgba(18, 20, 23, 0.10);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(226, 226, 241, 0.30) 100%
    );
    min-height: 65vh ;
    overflow: hidden;
  }
  
  .container-plan::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(226, 226, 241, 0.80) 100%
    );
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: -1;
  }
  
  .container-plan:hover::before {
    opacity: 1;
  }

  
  #plan-dark {
    position: relative; 
    box-shadow: 0 4px 10px rgba(18, 20, 23, 0.10);
    background-color: #23273F;
    overflow: hidden; 
  }
  
  #plan-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(226, 226, 241, 0.20) 100%
    );
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
  }
  
  #plan-dark > * {
    position: relative;
    z-index: 1; 
  }
  
  #plan-dark:hover::before {
    opacity: 1;
  }

  #plan-dark h2,
#plan-dark h5,
#plan-dark h6,
#plan-dark p {
  color: #fff;
  opacity: 1;
}
#plan-dark .button-white p {
  color: #23273F ;
}
#plan-dark .button-white:hover p {
    color: #fff ;
  }


.container-plan .container{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 30px;
    width: 100%;
}
.container-plan .container{
    display: flex;
    align-items: start;
    justify-content: start;
    width: 100%;
}
.container-plan .container div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.container-plan .container div div{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    width: auto;
    color: #fff;
    border-radius: 100px;
    padding:8px 16px;
}
.container-plan .container div div p{
    font-size: 14px;
}
.container-plan .price-plan{
    gap: 10px;
    display: flex;
    justify-content: start;
    align-items: end;
}
.container-plan .price-plan h2{
    line-height: 0.7;
}
.container-plan .price-plan h6{
    opacity: .6;
    line-height: 1;
}
.container-plan .services-plan{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 15px;
    flex-direction: column;
}
.container-plan .services-plan .feature-plan{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.container-plan .services-plan .feature-plan div{
    width: 2.5rem;
    height: 2.5rem;
    background-color: #23273F;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}
.container-plan .description{
   margin-bottom: 0 ;
   font-size: 16px;
}
.container-plan .feature-plan .description{
    font-size: 14px;
 }
 .feature-plan div i{
    font-size: 1.5rem;
    color: white;
  
}
.button-plan{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.button-plan a{
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-plan a:hover{
    transform: translateY(0);
}

.row-plan{
    justify-content: center;
    display: flex;
    width: 100%;
    display: flex;
    margin-top: 90px;
}
.toggle-plan{
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    gap: 15px;
}
.toggle-plan .opacity-1{
    opacity: 1 !important;
}
.container-circle {
    width: 8rem;
    height: 3.7rem;
    border: 0.15rem solid #23273F;
    border-radius: 100px;
    padding: 0.2rem;
    position: relative;
    background-color: transparent;
    transition: background-color 0.3s ease;
  }
  
  .circle-toggle {
    width: 3rem;
    height: 3rem;
    background-color: #23273F;
    border-radius: 50%;
    position: absolute;
    left: 0.2rem;
    cursor: pointer;
    transition: transform 0.5s ease, background-color 0.3s ease;
  }

  .toggle-plan h6 {
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }
  
  .toggle-plan.monthly h6:first-child {
    opacity: 1;
  }
  
  .toggle-plan.yearly h6:last-child {
    opacity: 1;
  }
  .toggle-plan.yearly .container-circle {
    background-color: #23273F;
  }
  
  .toggle-plan.yearly .circle-toggle {
    transform: translateX(4.1rem);
    background-color: #ffffff;
  }


  .section-faq{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: start;
    gap: 100px;
    justify-content: space-between;
  }
  .container-text{
    flex-direction: column;
    display: flex;
    align-items: start;
    gap: 30px;
    justify-content: start;
  }
   .container-text h2{
    font-weight: 400;
  }
  .container-text .font-grotesk{
    font-weight: 500;
    font-family: 'UlmGrotesk';
  }

  
  .container-faq{
    flex-direction: column;
    display: flex;
    align-items: start;
    gap: 30px;
    justify-content: start;
  }
   .container-faq .faq{
    width: 35vw;
  background: rgba(239, 241, 248, 0.6);
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(18, 20, 23, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 1.5px solid rgba(35, 39, 63, 0.05);
  padding: 3rem;
  }

  .faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .faq-header p {
    color: #23273F;
    transition: color 0.3s ease;
  }

  .faq .icon {
    background: rgba(232, 234, 244, 1);
    border-radius: 15px;
    padding: 8px 16px;
    transition: background-color 0.3s ease;
  }
  
  .faq .icon i {
    color: #23273F;
    font-size: 1.6rem;
    transition: transform 0.5s ease, color 0.3s ease;
  }
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
  }
  
  .faq-answer p {
    margin-top: 30px;
    color: #fff;
    font-size: 1.6rem;
  }

  .faq.active {
    background: #23273F !important;
  }
  
  .faq.active .faq-header p {
    color: #ffffff;
  }
  
  .faq.active .icon {
    background-color: #ffffff;
  }
  
  .faq.active .icon i {
    color: #23273F;
    transform: rotate(180deg);
  }
  
  .faq.active .faq-answer {
    max-height: 200px; /* regola se serve */
    opacity: 0.6;

  }

  .section-get-started{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 120px;
    position: relative;
  }
  .section-get-started .text-center p{
    width: 60%;
  }
  .section-get-started .container-button-download{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.button-download{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background-color: #4A5487;
    border-radius: 100px;
    transition: all 0.5s ease;
}
.button-download:hover{
    transform: scale(0.9);
}
.button-download img{
    width: 3rem;
}
.button-download  div{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 5px;
}
.button-download  div p{
    color: #fff;
    white-space: nowrap;
    font-weight: 600;
}
.light{
    font-weight: 300 !important;
    font-size: 14px !important;
}

.img-animate{
    position: relative;
    height: 60vh;
    width: 100%;
}
.img-animate img{
    border-radius: 30px;
    transition: transform 0.8s ease, height 0.8s ease, left 0.8s ease;

}
.img-animate .animate-1 {
    position: absolute;
    bottom: 5%;   
    left: 40%; 
    transform: translateX(-50%) rotate(-5deg);
    height: 35vh;
    z-index: 1;
  }
  .img-animate .animate-2 {
    position: absolute;
    bottom: 0;   
    left: 50%; 
    transform: translateX(-50%);
    height:40vh;
    z-index: 2;
  }
  .img-animate .animate-3 {
    position: absolute;
    bottom: 5%;   
    left: 60%; 
    transform: translateX(-50%) rotate(5deg);
    height: 35vh;
    z-index: 1;
  }
  
  /* stato “attivo” quando triggerato */
  .img-animate img.active-1 {
    height: 50vh; 
    left: 20%; 
    transform: translateX(-50%) rotate(-5deg);
    z-index: 3;
  }
  
  .img-animate img.active-2 {
    height: 60vh;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    z-index: 4;
  }
  
  .img-animate img.active-3 {
    height: 50vh;
    left: 80%; 
    transform: translateX(-50%) rotate(5deg);
    z-index: 3;
  }

  .footer-section{
    position: relative;
    background-image: url(../img/BACKGROUNG-footer.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex-direction: column;
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    padding-bottom: 60px !important;
  }
  .footer-section .container{
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
  }
  .footer-section .logo-footer{
    width: 30%;
  }
  .footer-section .logo-footer img{
    width: 100%;
  }
  .footer-section .nav-footer{
    width: auto;
    display: flex;
    justify-content: end;
    align-items: start;
    gap: 90px;
  }
  .footer-section .nav-footer .content-footer{
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
  }
  .footer-section .nav-footer .content-footer a{
    opacity: .8;
  }
  .footer-section .nav-footer .content-footer h6{
    opacity: 1;
    margin-bottom: 10px;
  }
  
  .slogan-footer{
    width: 100%;
    min-height: 20rem;
    margin-top: 9rem;
    display: flex;
    align-items: center;
  }
  
  /* track animato */
  .slogan-track{
    display: flex;
    width: max-content;
    animation: slogan-scroll 35s linear infinite;
  }
  
  /* gruppo contenuti */
  .slogan-group{
    display: flex;
    align-items: center;
    gap: 60px;
    padding-right: 60px;
  }
  
  /* tuoi stili invariati */
  .circle-slogan{
    width: 10rem;
    height: 10rem;
    background-color: #23273F;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .slogan-footer .titolo-grande{
    white-space: nowrap;
  }
  
  /* animazione */
  @keyframes slogan-scroll{
    from{
      transform: translateX(0);
    }
    to{
      transform: translateX(-50%);
    }
  }


  .footer-section .nav-content{
    opacity: 1 !important;

  }


  .footer-bar{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
  }
  .footer-bar p{
    opacity: .6;
    font-size: 1.4rem;
    width: 30%;
  }
  .footer-bar .social-mobile{
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    z-index: 999;
    
  }
  .social-mobile div{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: #23273F;
    width: 5rem;
    transition: all 0.3s ease;
    height: 5rem;
  }
  .social-mobile div:hover{
    opacity: .6;
  }
  .social-mobile div img{
    width: 28px;
    height: auto;
    color: #fff;
  }
  .turn-to-top{
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #23273F;
    border-radius: 100px;
    position: relative;
    z-index: 999;
    cursor: pointer;
  }
  .turn-to-to p{
    width: 30%;
  }
  .container-turn{
    width: 30%;
    display: flex;
    justify-content: end;
  }
  
.turn-to-top i {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem;
    color: #fff;
    transition: transform 0.3s ease,
                opacity 0.3s ease;
  }
  .footer-section .container .social-inner{
    display: none !important;
}
  /* freccia visibile iniziale */
  .turn-to-top .down {
    transform: translateX(-50%) translateY(0) rotate(180deg);
    opacity: 1;
  }
  
  /* freccia nascosta sotto */
  .turn-to-top .up {
    transform: translateX(-50%) translateY(30px) rotate(180deg);
    opacity: 0;
  }
  
  /* HOVER → scambio */
  .turn-to-top:hover .down {
    transform: translateX(-50%) translateY(-30px) rotate(180deg);
    opacity: 0;
  }
  
  .turn-to-top:hover .up {
    transform: translateX(-50%) translateY(0) rotate(180deg);
    opacity: 1;
  }


  .feature-plan-section{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 60px;
    flex-direction: column;
  }
  .feature-plan-mobile{
    display: none !important;
  }

  .feature-plan-section .name-plan{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 90px;
  }
  .features-plan-type .container-mobile{
    display: none;
}
  .feature-plan-section .name-plan .container{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 40px;
    flex-direction: column;
    white-space: nowrap;
  }
  .feature-plan-section .name-plan .container div{
    display: flex;
    justify-content: start;
    align-items: end;
    gap: 5px;
  }
  .feature-plan-section .name-plan h6{
    line-height: 0.5;
    font-weight: 400;
    margin: 0 !important;
  }
  .feature-plan-section .name-plan h4{
    line-height: 0.5;
    font-weight: 600;
    margin: 0 !important;
  }
  .feature-plan-section .features-plan-type{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
  }
  .feature-plan-section .features-plan-type .name-plan-features{
    padding: 30px;
    background-color: #EFF1F8;
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    border-radius: 15px;
  }
  .feature-plan-section .features-plan-type .container{
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 30px;
    padding-left: 30px;
    border-bottom: 1.5px solid rgba(210, 210, 210, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .feature-plan-section .features-plan-type .check{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
  }
  .feature-plan-section .features-plan-type .check .container-check{
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100px;
    background-color: rgba(46, 155, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature-plan-section .features-plan-type .check .container-check i{
    font-size: 1.8rem;
    color: #2E9B00;
}
.feature-plan-section .features-plan-type .check .container-close{
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100px;
    background: rgba(255, 34, 34, 0.10);
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature-plan-section .features-plan-type .check .container-close i{
    font-size: 1.8rem;
    color: #F22;
}
  

.features{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
    gap: 60px;
    margin-top: 0px;
}
.container-features{
    padding: 60px;
    display: flex;
    background-color: #EFF1F8;
    border-radius: 30px;
    gap:60px;
    height: auto;
    max-height: 50vh;
    width: auto;
    display: flex;
    width: 100%;
}
.container-features img{
    width: 30%;
    height: auto;
    object-fit: contain;
}
.container-features .container-text-feature{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 60px;
}
.container-features .container-text-feature .container{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 15px;
}
.container-features .container-text-feature .container-points{
    display: flex;
    align-items: center;
    gap: 15px;
}
.container-features .container-text-feature .container-points .description{
    margin-bottom: 0;
}
.container-features .container-text-feature .container-points div{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    max-width: 3rem;
    height: 3rem;
    background-color: #23273F;
    border-radius: 100px;
}
.container-features .container-text-feature .container-points div i{
    font-size: 1.6rem;
    color: #fff;
}
.cta-feature{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s ease;
    margin-top: 30px;
}
.cta-feature:hover i{
   transform: translateX(5px);
   opacity: 1;
}
.cta-feature:hover h6{
    opacity: 1;
 }
.cta-feature h6{
    color: #23273F;
    opacity: 0.6;
    transition: all 0.3s ease;
}
.cta-feature i{
    font-size: 1.6rem;
    color: #23273F;
    opacity: 0.6;
    transition: all 0.3s ease;
}


.how-to-work{
    position: relative;
    flex-direction: column;
    gap: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.how-to-work .how-container{
    gap: 90px;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
}
.how-to-work .how-container .how-img{
    width: 50%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EFF1F8;
    border: 1.5px solid rgba(35, 39, 63, 0.05);
    border-radius: 30px;
}
.how-to-work .how-container .how-img img{
   width: 50%;
}
.how-to-work .how-container .text-how{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 30px;
    width: 50%;;
}
.how-to-work .how-container .text-how h6{
    opacity: 1 !important;
}
.how-to-work .how-container .text-how div{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 15px;
}

.how-app-section{
    position: relative;
    flex-direction: column;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: #23273F;
    gap: 60px;
}
.how-app-section .text-center h2{
    color: #fff !important;
}
.how-app-section .text-center p{
    color: #fff !important;
}
.how-app-section .container{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
} 
.how-app-section .container .container-how-app{
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 15px;
    padding: 30px;
    background-color: #EFF1F8;
    min-height: 30vh;
    max-height: 42vh;
    border-radius: 30px;
    flex-direction: column;
} 
.how-app-section .container .container-how-app .container-img-how{
    border-radius: 12px;
    background-color: #F7F7F7;
    display: flex;
    justify-content: center;
    padding: 10px;
    margin-bottom: 15px;
    width: auto;
    box-shadow: 0 3.75px 7.5px 0 rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(35, 39, 63, 0.20);
} 
.how-app-section .container .container-how-app .container-img-how img{
    width: 5rem;
    height: auto;
} 

.container-how-app .cta-feature{
    margin-top: 0;
}
.container-how-app .cta-feature p{
    opacity: .6;
    transition: all 0.3s ease;
}
.cta-feature:hover p{
    opacity: 1;
}
.container-how-app .cta-feature i{
    font-size: 1.2rem;
}

.container-loghi {
    width: 60%;
    height: 15vh;
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
  
  /* TRACK */
  .slider-track-loghi {
    display: flex;
    width: max-content;
    animation: scrollLoghi 25s linear infinite;
    gap: 20px;
    position: relative;
  }
  
  /* LOGO CARD */
  .slider-track-loghi div {
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    width: 8rem;
    height: 8rem;

    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2.5px 5px 0 rgba(0, 0, 0, 0.10);
  }
  
  .slider-track-loghi img {
    width: auto;
    height: 4rem;
  }
  
  
/* FADE LATERALE */
.container-loghi::before,
.container-loghi::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  z-index: 99;
  pointer-events: none;
}

.container-loghi::before {
  left: 0;
  background: linear-gradient(to right, #FBFBFB 0%, rgba(251,251,251,0) 100%);
}

.container-loghi::after {
  right: 0;
  background: linear-gradient(to left, #FBFBFB 0%, rgba(251,251,251,0) 100%);
}
  
  /* ANIMAZIONE */
  @keyframes scrollLoghi {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }


  .box-app-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
  }
  
  .box-app-section .box-app {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    border: 1.5px solid rgba(35, 39, 63, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    box-sizing: border-box;
    transition: all 0.3s ease;
  }
  .box-app-section .box-app:hover {
    background-color: #EFF1F8;
  }
  .box-app-section .box-app h5{
    font-weight: 600;
  }
  .box-app-section .box-app .description{
    margin-bottom: 0px !important;
  }
 .box-app-section .box-app .text-box-app{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 10px;
 }  
 .box-app-section .box-app .logo-app {
    padding: 15px;
    background: #F7F7F7;
    border-radius: 15px;
    box-shadow: 0 3.75px 7.5px rgba(0, 0, 0, 0.10);
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
  }
  
  .box-app-section .box-app .logo-app img {
    width: 4rem;
    max-width: 100%;
  }

  .hero-section-app{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-direction: column;
  }
  .container-back{
    display: flex;
    justify-content: start;
    gap: 15px;
    align-items: center;
    width: 100%;
    margin-bottom: 0px;
  }
  .hero-section-app .text-center img{
    width: 10vw;
    margin: auto;
  }
  .container-back i{
    font-size: 1.6rem;
    color: #23273F;
    opacity: .6;
    transition: all 0.3s ease;
  }
  .container-back  .description{
    transition: all 0.3s ease;
    margin-bottom: 0;
  }
  .container-back:hover i{
    opacity: 1;
    transform: translateX(-5px);
  }
  .container-back:hover .description{
    opacity: 1;
  }
  .hero-section-app .cta-header{
    display: inline-flex;
  align-self: flex-start;
  width: fit-content;
    margin: auto;
  }
  .hero-section-app h1{
    margin-top: 15px;
  }
  .hero-section-app .cta-header p{
    width: auto !important;
  }

  .content-app{
    position: relative;
  }
  .container-content-app{
    display: flex;
    padding: 90px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 90px;
    background: linear-gradient(180deg, rgba(226, 226, 241, 0.30) 0%, #E2E2F1 88.46%);
    border: 1px solid var(--bordo-card, rgba(35, 39, 63, 0.05));
    border-radius: 30px;
  }
  .container-content-app .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    text-align: center;
  }

  .container-content-app .main-feature{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .container-content-app .main-feature .row{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: nowrap;
  }
  .container-content-app .main-feature .row div{
    display: flex;
    padding: 30px;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 16px;
    border: 1.5px solid #fff;
    gap: 15px;
    width: 100%;
  }
  .container-content-app .main-feature .row div p{
    opacity: 0.6;
  }

  .home-section{
    flex-direction: column;
    gap: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #23273F;
    position: relative;
    overflow: hidden;
  }
  .circles-bg{
    position: absolute;
    width: 105%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .home-section .text-center{
    padding: 0px 180px;
    display: flex;
    align-items: center;
  }
  .home-section .text-center h2{
    color: #fff !important;
    width: 60%;
  }
  .home-section .text-center p{
    color: #fff ;
    text-align: center;
  }
  .slider-track-home {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  
  .row-home {
    display: flex;
    gap: 30px;
    width: max-content;
  }
  .row-forward {
    animation: scrollHome 35s linear infinite;
  }
  .row-reverse {
    animation: scrollHomeReverse 35s linear infinite;
  }
  
  /* CARD */
  .home {
    padding: 30px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 15px;
    height: auto;
    width: 26vw;
    border-radius: 30px;
    position: relative;
    flex-shrink: 0;
  }
  .home div{
    display: flex;
    justify-content: end;
    align-items: end;
    width: 100%;
    height: auto;
  }
  /* ELEMENTI INTERNI */
  .home .parentesi {
    width: 3rem;
  }
  
  .home h6 {
    width: 80%;
    color: #23273F !important;
opacity: 1;
  }
  
  .home .logo-home {
    width: 25%;
    float: right;
  }
  
  /* ANIMAZIONE */
  @keyframes scrollHome {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  
  @keyframes scrollHomeReverse {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(0);
    }
  }


  .form-section{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contact-form {
    padding: 60px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    flex-direction: column;
    justify-content: start;
    align-items: start;
    display: flex;
    gap:30px;
    width: 70%;
  }
  
  .contact-form h4 {
    margin-bottom: 30px;
    color: #1f233a;
  }
  
  .form-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: start;
    align-items: start;
    width: 100%;
  }
  
  label {
    font-size: 1.6rem;
    font-weight: 500;
    opacity: 1;
    color: #1f233a;
  }
  
  /* inputs */
  .form-section input,textarea {
    background: rgba(239, 241, 248, 0.60);
    border: none;
    padding: 15px;
    font-size: 1.6rem;
    resize: none;
    outline: none;
    border-radius: 15px;
    width: 100%;
    border: 1.5px solid rgba(239, 241, 248, 0.60);
  }
  
  textarea {
    min-height: 180px;
  }
  
  /* focus effect */
  .form-section input:focus,
  textarea:focus {
    background: #ffffff;
    border: 1.5px solid #23273F;
  }
  
  /* checkbox */
  .form-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0px;
    background: transparent;
    font-size: 1.4rem;
  }
  
  .form-checkbox input {
    width: 18px;
    height: 18px;
  }
  
  /* button */
  .btn-submit {
    padding: 14px 20px;
    background-color: #23273F;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #23273F;
    border-radius: 15px;
    transition: all 0.4s 
ease;
width: 100%;

  }
  


  .btn-submit:not(:disabled):hover {
    background-color: transparent;
    border: 1.5px solid #23273F;
  }
  
  .btn-submit:not(:disabled):hover p {
    color: #23273F;
  }
  
  .btn-submit p {
    color: #fff;
    opacity: 1 !important;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
  }
  
  .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }


.section-faq-100{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.section-faq-100 .container-faq{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.section-faq-100 .container-faq .faq{
    width: 60%;
    
}
  

.try-now-section{
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.try-now-section .left-section{
    width: 50%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    display: flex;
    padding: 60px 60px 120px 60px;
    gap: 30px;
}
.content-left{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
  gap: 50px;
}
.try-now-section .left-section .container{ 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    gap: 15px;
    width: 100%;
}
.try-now-section .left-section .container img{ 
    width: 10%;
    margin-bottom: 15px;
}
.try-now-section .left-section .container h4{ 
    text-align: center;
}
.opacity-06 {
    color: rgba(0, 0, 0, 0.6);
  }
  
  .opacity-1 {
    color: rgba(0, 0, 0, 1);
    text-decoration: underline;
    cursor: pointer;
  }

.button-sign-in{
    background-color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
    width: 70%;  
    transition: all 0.3s ease;
    cursor: pointer;
}
.button-sign-in:hover{
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
}
.button-sign-in img{
    width: 2rem !important; 
    margin-bottom: 0px !important;
}

.container-line{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 70%;
    margin-top: 15px;
    margin-bottom: 15px;
}
.container-line p{
    margin-bottom: 0px;
}
.container-line div{
    width: 100%;
    background: rgba(27, 27, 27, 0.10);
    height: 1.5px;
}


.select-account{
    border: 1.5px solid rgba(27, 27, 27, 0.10);
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    padding: 16px 24px !important;
    transition: border 0.2s;
}

.input-field {
    border: none;
    outline: none;
    width: 100%;
    font-size: 1.8rem !important;
    background: transparent;
}

.select-account i{
    font-size: 1.6rem;
    color: #23273F;
    opacity: .6;
    cursor: pointer;
}
.left-section .btn-submit{
    width: 70%;
}

.right-section{
    width: 50%;
    height: 100%;
    background-image: url(../img/Try-now-img.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1650px){
    .box-app-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        width: 100%;
      } 
      .contact-form {
        width: 80%;
      }
      .how-app-section .container .container-how-app{
        min-height: 30vh;
        max-height: 42vh;
    } 

      .container-features{
        padding: 60px;
        display: flex;
        background-color: #EFF1F8;
        border-radius: 30px;
        gap:60px;
        display: flex;
        width: 100%;
        max-height: fit-content;
    }


      .card-md .container-white .img-keybord{
        width: 60%; 
    }
    .card-md .container-white .img-navbar{
        width: 60%; 
    }
}


@media screen and (max-width: 1400px){
    .padding-container{
         padding: 100px 120px;
     }
     .how-section{
        padding-left: 120px;
        padding-right: 120px;
        padding-top: 100px;
    }
     .text-animate{
        padding: 90px 60px;
    }
    .how-section .container-how-work .voci-how{
        padding-bottom: 100px;
    }
      .section-integrations{
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .text-center{
        padding-left: 120px;
        padding-right: 120px;
        }
        
    .app-integrations {
                padding: 60px 120px;
        }

        .container-plan {
            min-height: 60vh 
          }

          .how-app-section .container .container-how-app{
            padding: 25px;
        } 

        .box-app-section {
            gap: 15px;
        }
        .box-app-section .box-app .logo-app img {
            width: 3rem;
        }
        .box-app-section .box-app .button-dark{
            transform: scale(0.8);
            transform-origin: left center;
        }
        .home-section .text-center{
            padding: 0px 120px;
          }
          .right-section{
            width: 40%;
        }
        .try-now-section .left-section{
            width: 60%;
        }
        
 }

@media screen and (max-width: 1200px){
    .padding-container{
        padding: 100px 60px;
    }
    .hero-section .beezy-simbolo {
        width: 35%;
    }
    header .container-cta {
        width: 15%;
    }
    header .logo {
        width: 15%;
    }
    .features-section .text-x h2{
        width: 55%;
    }
    .card-md {
        height: 50vh;
    }
    .how-section .mockup-how img{
        width: 56%;
    }
    .how-section .mockup-how img{
      position: absolute;
      bottom: -10%;
      width: 56%;
      max-height: 100%;
      transition: all 0.4s ease;
      transform-origin: center;
    }
    .how-section{
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 100px;
    }
    .how-section .mockup-how img {
        bottom: -5%;
    }
    .text-center{
        padding-left: 60px;
        padding-right: 60px;
        }
        
    .app-integrations {
                padding: 30px 60px;
        }

         .container-text {
            width: 80%;
        }

        .footer-section .nav-footer{
            gap: 60px;
          }

          .feature-plan-section .features-plan-type .container h5{
            font-size: 20px !important;
          }
          .feature-plan-section .features-plan-type .check{
            width: 55%;
          }
          .feature-plan-section .features-plan-type .check .container-check {
            transform: scale(0.8);
          }
          .feature-plan-section .features-plan-type .check .container-close {
            transform: scale(0.8);
          }

          .container-features{
            padding: 30px;
            gap:60px;
            display: flex;
            width: 100%;
            max-height: none;
            height: auto !important;
        }

        .how-to-work .how-container{
            gap: 60px;
        }

        .how-app-section .container {
            gap: 15px;
        }
        .how-app-section .container .container-how-app .container-img-how img {
            width: 3rem;
            height: auto;
        }


        .box-app-section .box-app {
            padding: 20px;
        }
        .box-app-section .box-app .logo-app img {
            width: 2.5rem;
        }

        .container-content-app {
            padding: 60px;
            gap:60px;
        }
        .home-section .text-center{
            padding: 0px 60px;
          }

          .home-section .text-center h2{
            color: #fff !important;
            width: 80%;
          }
        .home h6 {
            width: 80%;
        }
        .cursor {
            display: none;
          }
          .home {
            height: auto;
            width: 35vw;

          }

          .home .logo-home {
            width: 25%;
            float: right;
          }
          .contact-form {
            width: 100%;
          }

 }


@media screen and (max-width: 992px){
    header .logo {
        width: 40%;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background-color: red;
      height: auto;
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      z-index: 999;
      padding: 30px 60px 15px 60px;
      transition: all 0.3s ease;

    background: transparent;
  }
  header.scrolled {
    background: rgba(239, 241, 248, 0.9);
}
    .padding-container{
         padding: 100px 60px;
     }
    .cta-header a{
        font-size: 1.8rem;
        color: #6370B4;
    }
    .nav-content .link-nav-1 {
        font-size: 1.8rem;
    }
   .nav-content .link-nav-2 {
        font-size: 1.8rem;
    }

    .hero-section .beezy-simbolo {
        width: 50%;
    }

    .nav{display: none !important;}
    .container-cta{display: none !important;}


    .hamburger-menu {
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
        border: 2px solid #23273F;
        background-color: #EFF1F8;
        border-radius: 100px;
        gap: 8px;
        z-index: 20
    }
    
    .hamburger-menu span {
        display: block;
        height: 4px;          
        width: 60%;            
        background-color: #23273F; 
        border-radius: 2px;     
        transition: all 0.4s ease;
        transform-origin: center;
    }
    

    .hamburger-menu.active span:first-child {
        transform: rotate(45deg) translate(5px, 4px);
    }
    
    .hamburger-menu.active span:last-child {
        transform: rotate(-45deg) translate(4px, -4px);
    }
    
 
    .open-menu {
        display: block;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(180deg, #FFF 0%, #F9F9FC 50%, #CFD3E8 100%);
        position: fixed;
        top: -150%;  
        left: 0;
        z-index: 10;
        padding: 30px;
        transition:all 0.5s ease; 
        z-index: 0;
        opacity: .8;
    }
    
    .open-menu.active {
        top: 0; 
        opacity: 1;
    }

      .open-menu .container{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        padding-top: 140px;
        padding-bottom: 60px;
        height: 100%;
      }
      .open-menu .container .nav-mobile{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 30px;
      }
      .open-menu .container .nav-mobile h4{
        font-weight: 500;
        opacity: .4;
      }
       .active{
        font-weight: 500;
        opacity: 1 !important;
      }
      .cta-header{
        margin-top: 15px;
      }
      
      .social-mobile{
        display: flex;
        gap: 30px;
        align-items: center;
        justify-content: center;
      }
      .social-mobile div{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        background-color: #23273F;
        width: 50px;
        height: 50px;
      }
      .social-mobile div img{
        width: 28px;
        height: auto;
        color: #fff;
      }


    .text-animate{
        padding: 60px 60px;
    }

    .features-section .text-x {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: column;
        gap: 30px;
    }
    .features-section .text-x h2 {
        width: 70%;
    }
    .features-section .text-x div {
        width: 70%;
    }
    .features-section {
        gap: 60px;
    }
    .card-lg {
    gap: 30px;
    height: 55vh;
    flex-direction: column;
}
.slider {
  width: 25%;
  }

  .how-section .text-x{
    padding-left: 60px;
    padding-right: 60px;
    flex-direction: column;
  }
  .text-x div {
    margin-top: 20px;
    width: 70%;
}
  .how-section .container-how-work {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column-reverse;
    align-items: start;
}
  .how-section .mockup-how img {
    position: absolute;
    bottom: 13%;
    width: 32%;
}
.is-main{
    right: 40%;
  }
  
  .is-second{
    right: 20%;
  }
  
  .is-third{
    right: 10%;
  }
  
  .exit-left{
    right: 35%;
    transform: translateX(-80%) scale(0.9);
    opacity: 0;
  }
.how-section .mockup-how {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    flex: none;
    height: 85vh;
    margin-left: 0px;
}
.how-section{
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 90px;
    gap: 30px;
}
.text-x h2 {
    width: 100%;
}
.text-x .description {
    width: 100%;
}
.how-section .container-how-work .voci-how {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 30px;
    -webkit-overflow-scrolling: touch;
  }

  .how-section .container-how-work .voce-how {
    flex: 0 0 40%;         /* larghezza card */
    width: 100%;
  }
  .how-section .container-how-work .voce-how:nth-child(1) {
    margin-left: 60px;
  }
  .slider-track img {
    width: 25vw;
}
.containers-plan {
    padding: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
}
.containers-plan {
    padding: 60px;
    gap: 30px;
}
.row-plan {
    gap: 30px;
}

.section-faq {
    gap: 60px;
    justify-content: space-between;
    flex-direction: column;
}

.container-faq {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    align-items: start;
    gap: 30px;
    justify-content: start;
}
.container-faq .faq {
    width: 47%;
}
.section-get-started .text-center p{
    width: 100%;
  }
  .img-animate {
    height: 50vh;
}
  .img-animate img.active-1 {
    height: 40vh; 
  }
  
  .img-animate img.active-2 {
    height: 50vh;
  }
  
  .img-animate img.active-3 {
    height: 40vh;
  }

  .footer-section{
    position: relative;
    background-image: url(../img/BACKGROUNG-footer.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex-direction: column;
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    padding-bottom: 60px !important;
  }
  .footer-section .logo-footer {
    width: 50%;
}
.footer-section .nav-footer {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;
}
.footer-section .nav-footer p{
    text-align: center;
}
.footer-section .nav-footer h6{
    text-align: center;
}
.footer-section .nav-footer .content-footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
  .footer-section .container {
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 60px;
}
.footer-section .container .social-inner{
    display: block !important;
}
.footer-bar .social-mobile{
    display: none;
}
.footer-section .container .social-inner .social-inner {
    display: flex !important;
    align-items: center;
    gap: 15px !important;
    width: 100% !important;
  }

  .feature-plan-section .name-plan .container {
    gap: 30px;
}
  .feature-plan-section .features-plan-type .check{
    width: 65%;
  }
  .feature-plan-section .features-plan-type .container h5{
    width: 25%;
  }
  .feature-plan-section .name-plan {
    gap: 60px;
}
.element::after {
    bottom: 2rem; 
    height: 3.5rem;
}

.container-features {
    padding: 30px;
    gap: 30px;
}
.container-features .container-text-feature .container-points div {
    min-width: 2.5rem;
    max-width: 2.5rem;
    height: 2.5rem;
}
.container-features img {
    width: 35%;
}
.container-plan {
    min-height: auto;
  }

  .how-to-work .how-container {
    gap: 60px;
    flex-direction: column;
}
.how-to-work .how-container .how-img {
    width: 100%;
    height: auto;
    padding: 60px;
}
.how-to-work .how-container .text-how {

    width: 100%;
}

.reverse{
    flex-direction: column-reverse !important;
}
.how-app-section .container .container-how-app {
    padding: 30px;
}
.how-app-section .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    padding: 60px;
}
.how-app-section .container .container-how-app {
    min-height: 30vh;
    max-height: 40vh;
}
.how-app-section .container .container-how-app .container-img-how img {
    width: 5rem;
}

.box-app-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
  }
  .box-app-section .box-app .logo-app img {
    width: 100%;
}
.box-app-section .box-app {
    padding: 30px;
}
.box-app-section .box-app h5 {
    font-weight: 600;
    font-size: 3.2rem;
}
.box-app-section .box-app .button-dark {
    transform: scale(1);
    transform-origin: left center;
}
.box-app-section .box-app .logo-app {
    width: 25%;
}

.container-content-app .main-feature .row {
    gap: 15px;
}
.container-content-app .main-feature .row div {
    padding: 15px;
    gap: 15px;
}

.home {
    height: auto;
    width: 40vw;
    gap: 15px;
    justify-content: space-between;
    padding: 30px;
  }

  .home .logo-home {
    width: 25%;
    float: right;
  }
  .home h6 {
    width: 100%;
    font-size: 26px;
}
.section-faq-100 .container-faq .faq{
    width: 80%;
    
}

.right-section {
    display: none;
}
.try-now-section .left-section {
    width: 100%;
    padding: 60px 60px 120px 60px;
    gap: 30px;
}
.try-now-section .left-section .container img {
    width: 6%;
}
.home-section .text-center h2 {
    color: #fff !important;
    width: 100%;
}

 }


@media screen and (max-width: 768px){
   .padding-container{
        padding: 60px 30px;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: auto;
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      z-index: 999;
      padding: 30px 30px 15px 30px;
  }
    .hero-section{
        padding-top: 100px;
    }
    .hero-section .beezy-simbolo {
        width: 60%;
    }
    .text-animate{
        padding: 60px 30px;
    }
    .features-section .text-x {
        gap: 20px;
    }
    .features-section .text-x h2 {
        width: 100%;
    }
    .features-section .text-x div {
        width: 100%;
    }

    .container-cards .row {
        flex-direction: column;
    }
    .card-md {
        height: 45vh;
    }
    .how-section .text-x{
        padding-left: 30px;
        padding-right: 30px;
        flex-direction: column;
      }
      .how-section .container-how-work .voce-how:nth-child(1) {
        margin-left: 30px;
      }
      
    .card-md .container-white .img-logos {
        height: 70px;
    }
    .how-section .mockup-how {
        height: 65vh;
    }

    .section-integrations{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .text-center{
        padding-left: 30px;
        padding-right: 30px;
    }
        
    .app-integrations {
                padding: 30px 30px;
        }
        .slider-track img {
            width: 35vw;
        }
        .slider-track {
            height: 50vh;
        }
        .slider-track img {
            offset-path: ellipse(90% 40vh at 50% 120%);
            offset-rotate: 0deg;
            animation: move 30s linear infinite;
          }
          .text-center p {
            width: 100%;
        }

        .containers-plan {
            padding: 0px;
            gap: 30px;
        }
        .container-faq .faq {
            width: 100%;
        }
        .section-faq {
            gap: 30px;
        }
        .section-faq .container-text {
            width: 100%;
        }

        .img-animate {
            height: 40vh;
        }
          .img-animate img.active-1 {
            height: 30vh; 
          }
          
          .img-animate img.active-2 {
            height: 40vh;
          }
          
          .img-animate img.active-3 {
            height: 30vh;
          }
          .section-get-started {
            gap: 50px;
        }
        .slogan-footer {
            margin-top: 7rem;
        }
        .titolo-grande {
            font-size: 150px;
        }
        .circle-slogan {
            width: 7rem;
            height: 7rem;
        }

        .name-plan{
            display: none !important;
        }

        .features-plan-type .container-mobile{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            display: block;
        }
        .feature-plan-mobile{
            display: block !important;
          }
        .feature-plan-section-desktop{
            display: none !important;
          }

          .feature-plan-mobile .container-mobile{
            gap: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-bottom: 30px;
        }
        .feature-plan-mobile .container-mobile div{
            display: flex;
            flex-direction: row;
            gap: 5px;
            justify-content: center;
            align-items: end;
        }
        .feature-plan-mobile .container-mobile div h3{
            line-height: 1;
        }
        .feature-plan-mobile .container-mobile div .description{
            margin-bottom: 0;
        }
        .feature-plan-section .features-plan-type .container {
            padding: 30px;
            border-bottom: 1.5px solid rgba(210, 210, 210, 0.4);
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          
          /* ultimo elemento → niente bordo */
          .feature-plan-section .features-plan-type .container:last-child {
            border-bottom: none;
          }
        .feature-plan-section .features-plan-type .check {
            width: auto;
        }
        .feature-plan-section .features-plan-type {
            gap: 15px;
            margin-top: 30px;
        }
        .feature-plan-section .features-plan-type .container h5 {
            width: auto;
        }
        .section-get-started .text-center{
            padding: 0 !important;
        }
        .element::after {
            bottom: 1.5rem; 
            height: 3rem;
        }

        .container-features {
            padding: 30px;
            gap: 60px;
            height: auto;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .container-features img {
            width: 100%;
        }

        .cta-feature {
            margin-top: 30px;
        }
        .container-features .container-text-feature {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            gap: 30px;
        }

        .how-to-work .how-container {
            gap: 40px;
        }
        .how-to-work .how-container .how-img {
            padding: 30px;
        }

        .how-app-section .container {
            padding: 0px;
        }
        .how-app-section .container .container-how-app .container-img-how img {
            width: 4rem;
        }
        .how-app-section .container .container-how-app {
            min-height: 20vh;
            max-height: fit-content;
        }

        .container-loghi {
            width: 80%;
        }

        .box-app-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            width: 100%;
          }
          .box-app-section .box-app {
            padding: 20px;
        }
        .box-app-section .box-app h5 {
            font-weight: 600;
            font-size: 2.4rem;
        }
        .box-app-section .box-app .button-dark {
            transform: scale(0.8);
            transform-origin: left center;
        }
        .box-app-section .box-app .logo-app {
            width: 25%;
        }

        .container-content-app .main-feature .row {
            display: flex;
            flex-direction: column;
        }
        .container-content-app .main-feature .row div {
            padding: 30px;
            gap: 15px;
        }
        .home-section .text-center{
            padding: 0px 30px;
          }

          .home {
            height: auto;
            width: 45vw;
        }
        

        .try-now-section .left-section {
            width: 100%;
            padding: 60px 30px 60px 30px;
            gap: 0px;
        }
        .try-now-section .left-section .container img {
            width: 15%;
        }
        .button-sign-in {
            width: 100%;
        }
        .container-line {
            width:100%;
        }
        .select-account {
            width: 100%;
        }
        .left-section .btn-submit {
            width: 100%;
        }
        .container-back {
            margin-bottom: 30px;
        }


        .hero-section .hero .h1{
            white-space: nowrap !important;
        }
        .how-section .container-how-work .voci-how {

            gap: 15px;
            padding-right: 30px;
            padding-left: 0px;
            padding-bottom: 30px;
            -webkit-overflow-scrolling: touch;
        }

        .home {
            gap: 5px;
            justify-content: space-between;
            padding: 30px;
          }

          h1 span{
            white-space: nowrap;
          }
          .how-to-work .how-container .how-img img {
            width: 60%;
        }
        .cta-feature {
            transition: none;
          }
        
          .cta-feature:hover i {
            transform: none;
            opacity: 1;
          }
          .faq-header p {
            font-size: 18px;
        }

        .card-lg {
            flex-direction: column-reverse;
        }
        .how-section .text-x{
            width: 100%;
        }
        .nav-content .link-nav-1,
  .nav-content .link-nav-2 {
    transition: none;
    transform: translateY(0);
  }

  .nav-content:hover .link-nav-1,
  .nav-content:hover .link-nav-2 {
    transform: translateY(0);
  }
  
  .content-left {
    display: flex;
    justify-content: start;
    align-items: start;
    height: 100%;
    flex-direction: column;
    gap: 50px;
}
        
        

}

@media screen and (max-width: 576px){
    .mt-hero {
        margin-top: 8rem;
    }
    .text-center{
        padding: 0px;
    }
    .padding-container{
         padding: 60px 30px;
     }
     .hero-section .beezy-simbolo {
        width: 70%;
    }
    .how-section .mockup-how img {

        width: 50%;
    }
    .how-section .mockup-how {
        height: 60vh;
    }
    .slider-track img {
        offset-path: ellipse(120% 30vh at 50% 140%);
        width: 40vw;
      }
      .slider-track {
        height: 30vh;
    }
    .app-integrations .button-dark {
        bottom: -30px;
    }
    .img-animate {
        height: 35vh;
    }
    .img-animate .animate-1 {
        transform: translateX(-50%) rotate(-5deg);
        height: 15vh;
    }
    .img-animate .animate-2 {
        transform: translateX(-50%) rotate(-5deg);
        height:20vh;
    }
    .img-animate .animate-3 {
        transform: translateX(-50%) rotate(-5deg);
        height: 15vh;
    }
    .img-animate img.active-1 {
        height: 25vh;
    }
    .img-animate img.active-2 {
        height: 30vh;
    }
    .img-animate img.active-3 {
        height: 25vh;
    }
    .section-get-started {
        gap: 30px;
    }
    .slogan-footer {
        margin-top: 5rem;
    }
    .text-animate h2 {
        font-size: 3.5rem;
    }
    .text-animate .element::after {
        bottom: 1.25rem;
        height: 2.5rem;
    }
    .element{

        margin: 0px 0px;
}
    .box-app-section {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        width: 100%;
      }
    .box-app-section .box-app {
        padding: 30px;
    }
    .box-app-section .box-app h5 {
        font-weight: 600;
        font-size: 3.2rem;
    }
    .box-app-section .box-app .button-dark {
        transform: scale(1);
        transform-origin: left center;
    }
    .box-app-section .box-app .logo-app {
        width: 25%;
    }
    .hero-section-app .text-center img {
        width: 25vw;
        margin: auto;
    }
    .content-app{
        overflow: hidden;
    }
    .container-content-app {
        padding: 30px;
        gap: 60px;
    }
    .container-content-app .main-feature .row {
        gap: 30px;
    }  
    .contact-form {
        padding: 30px;

    }
    .form-row {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }
    .section-faq-100 .container-faq .faq{
        width: 100%;
        
    }
    .card-md {
        height: 55vh;
        gap: 15px;
    }
    .card-md .container-white .img-task-1 {
        position: absolute;
        bottom: 50%;

    }
    .card-md .container-white .img-task-2 {
        position: absolute;
        bottom: 30%;
    }
    .card-md .container-white .img-task-2 {
        position: absolute;
        bottom: 30%;
    }
    .card-md .container-white .img-task-5 {
        bottom: 20%;
    }
    .card-md .container-white .img-task-4 {
        bottom: 40%;
    }
    .how-section .container-how-work .voci-how {
        gap: 10px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0px;
        -webkit-overflow-scrolling: touch;
    }
    .how-section .container-how-work .voci-how div .description {
        font-size: 13.5px;
    }

    .section-integrations .text-center{
        padding: 0px 30px;
    }
    .container-back {
        margin-bottom: 0px;
    }
    .try-now-section .left-section {
        width: 100%;
        padding:30px;
        gap: 30px;
    }
    .home {
        height: auto;
        width: 70vw;
        gap: 0px;
        justify-content: space-between;
        padding: 20px;
        transform: scale(0.9);
      }

    
      .home .logo-home {
        width: 25%;
        float: right;
      }
      .home h6 {
        width: 100%;
        font-size: 26px;
    }
    .form-checkbox input {
        width: 14px;
        height: 14px;
    }
    .select-account {
        padding: 12px 18px !important;
        transition: border 0.2s;
    }
    .button-sign-in {
        padding: 14px 20px;
        cursor: pointer;
    }
    .container-line {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        width: 70%;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .hero-section-app {
        gap: 60px;
    }
    .hero-section-app .text-center img {
        width: 22vw;
        margin: auto;
    }
    .how-section .container-how-work .voce-how {
        flex: 0 0 50%;
        width: 100%;
    }
    .faq-header p {
        font-size: 18px;
        width: 80%;
    }
    .try-now-section .left-section .container {
        gap: 10px;
    }
    .open-menu .container {

        padding-top: 120px;
    }
    .footer-bar p {
        opacity: .6;
        font-size: 1.4rem;
        width: 35%;
    }
    .titolo-grande {
        font-size: 125px;
    }
    .left-section .btn-submit {
        margin-top: 10px;
    }


 }