html, body {
    height: 100%; /* serve per ancorare il 100% */
    margin: 0;
    overflow: hidden; /* disabilita lo scroll del body */
}

/*PAGE*/
.page {
    height: 100vh; /* occupa tutto il viewport */
    overflow-y: auto; /* abilita lo scroll verticale */
    scroll-snap-type: y mandatory; /* oppure: y mandatory */
    scroll-behavior: smooth; /* scorrimento fluido (opzionale) */
    scroll-padding-top: var(--header-height);
}
.snap-section {
    height: 100vh; /* ogni sezione una “pagina” */
    scroll-snap-align: start; /* snap all'inizio della sezione */
    /* opzionale, utile per forzare lo stop: */
    /* scroll-snap-stop: always; */
}

/*HERO========================*/
.hero-container{width:90vw;margin:auto;height:600px}
body{background-color:white;}
#hero{background-color:white;height:100vh;position:relative;padding-top:var(--header-height);overflow:hidden}
.hero-row{display:flex;padding:80px 0px 0px 20px;}
.left-hero {
    width: 10%;
    margin-right: 10vw;
    position: relative;
    z-index: 5;
}
.left-hero-header{
    margin-bottom:20px;
    display:flex;
    width:100%; 
    justify-content:space-between;
}
.left-hero-header > :nth-child(1),.left-hero-header > :nth-child(3){
    width: 30%;
}
.module-nav{
    list-style:none;
    color:var(--ink);
    font-size:0.87rem;    
}
.module-nav li {margin-bottom:5px;cursor:pointer;}
.module-nav li:hover{color:var(--rosaScuro)}
.module-nav li.active {
    font-weight: 700;
    position: relative;
    color: var(--rosaScuro)
}
.module-nav li.active:before {
    content: "";
    position: absolute;
    left: -20px;
    width: 2.2px;
    height:70%;
    background: linear-gradient(var(--rosaScuro), var(--rosaScuro));
    transform: skewX(-20deg);
    opacity: .8;
}

.module-nav li > a{text-decoration:none; color:inherit;}

.right-hero{
    position:relative;
    width:50%;
    display:flex;
    justify-content:end;

}
.hero-line {
    position: absolute;
    right: -80%;
    z-index: 1;
    height: 1630px;
    top: -104%;
}
.hero-line img{height:100%;object-fit:contain}
.center-hero {
    width: 170px;
    /*width:10%;*/
    height: 100%;
    position: relative;
    margin-right: 20vw;
}
.hero-bar {
    height: 100%;
    position: relative;
    z-index: 1;
}
.hero-bar img{height:100%;object-fit:cover;position:relative;z-index:1}
.hero-text {
    font-size: clamp(1rem, 2vw, 1rem);
    color: #004F70;
    width:100%;
    padding:60px 0px;
}
.hero-text p{font-size:1.125rem;margin-bottom:20px;line-height:1.4375rem;width:85%;}
.hero-eyebrow {
    display: block;
    color: var(--ink);
    font-weight: 700;
    font-size: 4.25rem;
    letter-spacing: -.01em;
    margin-bottom:-20px;
}
.hero-title {
    font-size: 4.25rem;
    color: var(--nav-color);
    font-weight: 400;
    line-height: 4.2rem;
    margin-bottom: 65px;
}
.cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.4rem
}

/*================WHY===========================*/
#why {
    height: calc(100vh - var(--header-height));
    /*background-color: #E3EFF4;*/
    background: linear-gradient(145deg, #E3EFF4 0%, #EBF3F6 55%, #FFFFFF 100%);
    position: relative;
    padding: 120px 0px;
}
.why-container-row {
    display: flex;
    align-items: center;
    height:100%;
}
.why-container{
    width:100%;
    display:flex;
    height:max-content;
    justify-content:space-between;
}
.why-text{
    width:350px;
    flex-grow:1;
}
.why-text h3{font-size:2.3rem;margin-bottom:40px;}
.why-text p{font-size: 1.25rem;font-weight:700;margin-bottom:30px;line-height:1.5rem;width: 90%;}
.why-boxes {
    width: max-content;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 15px;
    margin-right:15px;
}
.why-box {
    background-color: var(--ink);
    border-radius: 40px;
    border-bottom-right-radius: 100px;
    width: 280px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    color: white;
    padding: 20px 10px 30px 20px;
    overflow: hidden;
    position: relative;
}
.why-box:nth-child(2) {
    border-radius: 30px;
    border-top-left-radius: 100px;
}
.why-box:nth-child(3){
    border-radius:30px;
    border-top-right-radius:100px;
}
.why-box:nth-child(1) .why-box-img {
    position: absolute;
    left: -65px;
    top: 9px;
}
.why-box:nth-child(3) .why-box-img {
    position: absolute;
    top: -123px;
    right: 55px;
}
.why-box h3{font-size:1.5rem;margin-bottom:20px;line-height:1.75rem;}
.why-box p{font-size:1rem;}
.why-box-text{height:70%}
.last-box {
    width: 280px;
    position:relative
}
#last-b {
    display: flex;
    flex-direction: column;
    justify-content: end;
    color: white;
    border-top-left-radius:100px;
    border-bottom-right-radius:30px;
}
#last-b h3{font-size:1.5rem;line-height:1.75rem;font-weight:700}
.last-box .why-box {
    background-color: var(--workflow);
    position:absolute;
    transform: translate(0, 0);
    opacity:0;
    transition: transform 0.8s ease;
}
.last-box .why-box.move{
    opacity:1;
    transform: translate(0, 105%);
    transition: transform 1s ease,opacity 1.3s  ease-in-out;
}

/*=============HOW===================*/
#how{height: calc(100vh - var(--header-height));position:relative}
.how-logo {
    position: absolute;
    height: 28vh;
    top: calc(100vh / 2 - 8vh - var(--header-height));
    left: -70px;
    transform: translateX(-200px);
    transition: transform 1s ease;
}
.how-logo.animate {
    transform: translateX(20px);
    transition: transform 1s ease,opacity 1s ease-in-out;
    opacity: 1;
}
.how-logo img{height:100%;}
.how-container{height:100%;display:flex}
.left-how{height:100%;width:40%;display:flex;align-items:center;justify-content:end;padding:0px 50px;}
.left-how h3{font-size:2.8rem;}
.right-how{height:100%;width:60%;display:flex; justify-content:space-between;padding:0px 50px 0px 50px}
.right-how-first-column{width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:10px}
.right-how-second-column{width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:10px}
.how-card {
    width: 100%;
    height: 160px;
    margin: 10px 0px 10px 0px;
    border-radius: 30px;
    border: 4px solid var(--workflow);
    border-top: 30px solid var(--workflow);
    position: relative;
    cursor: pointer;
    transition: height 0.3s ease, border-color 0.3s ease;
    display: flex;
    padding: 60px 10px 10px 30px;
    overflow: hidden;
}
.left-how-card{width:70%;flex-grow:1;}
.right-how-card {display: flex;align-items: start;}
.left-how-card h3 {
    font-size: 1.4rem;
    line-height: 1.5rem;
    margin-bottom:20px;
}
.left-how-card p {
    opacity:0;
    transition: opacity 0.4s ease;
    margin-bottom:30px;
}
.how-card.expand {
    height: 370px;
    padding: 25px 10px 10px 30px;
    border-color:var(--ink)
}
.how-card.expand .left-how-card p{
    opacity:1;
}
.circle {
    transition: all .45s cubic-bezier(0.65,0,.076,1);
    width: 2rem;
    height: 2rem;
    background: var(--rosaScuro);
    border-radius: 1rem;
    z-index: 2;
    pointer-events: none;
    position:relative
}
.circle .icon.arrow {
    left: .625rem;
    width: 1.125rem;
    height: .125rem;
    background: none
}

.circle .icon.arrow::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 11px;
    width: .5rem;
    height: .5rem;
    border-top: .125rem solid #fff;
    border-right: .125rem solid #fff;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
}
.how-card.expand .circle .icon.arrow::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 11px;
    width: .5rem;
    height: .5rem;
    border-top: .125rem solid #fff;
    border-right: .125rem solid #fff;
    transform: rotate(-45deg)
}

/*=====PRIMA DOPO==============*/
#prima {
    height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    background:
    linear-gradient(90deg, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%),
    linear-gradient(180deg, #FBFBFB 50%, #E2EEF3 50%);
    background-blend-mode: screen; 
}
.prima-container {
    height: 65vh;
    background: linear-gradient(90deg, #635AE0 0%, #736BE2 60%, #837CE5 90%);
    background-size: 300% 300%;
    border-radius: 130px;
    display: flex;
    padding: 200px 50px 90px 50px;
    justify-content: center;
    animation: gradientMove 6s ease infinite;
    align-items: center;
}
.prima-text{height:80%;}
/*====PINK ROW=========*/
.man-pink-row{
    justify-content:center;
}
.man-pink-row .btn-secondary{
    background-color:transparent;
}

@keyframes gradientMove {
    0% {background-position: 0% 50%;}

    50% {background-position: 100% 50%;}

    100% {background-position: 0% 50%;}
}
.left-prima {
    height: 100%;
    width: 315px;
    height: 315px;
    color:white;
    padding:50px 50px 50px 50px;
    display:flex;
    flex-direction:column;
    justify-content:end;
    
}
.left-prima h3{font-size:2.8rem;}
.left-prima p{font-size:1.25rem;}

.right-prima {
    width: 315px;
    height: 315px;
    border-radius: 30px;
    position:relative;
}

.right-prima-box {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #E3EFF4 0%, #F6F8F9 90%);
    border-radius: 30px;
    position: absolute;
    padding: 50px 50px 50px 50px;
    z-index: 2;
    display:flex;
    flex-direction: column;
    justify-content: end;
}
.right-prima-box h3{font-size:2.8rem;}
.right-prima-box p {font-size: 1.25rem;}
.under-prima {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--ink);
    border-radius: 30px;
    z-index: 0;
    transition: transform 0.8s ease;
}
.under-prima.translate {
    transform: translate(105px,-100px);
    transition: transform 0.8s ease;
}
/*==============PERCHE DIVERSO=================*/
#diverso {
    height: calc(100vh - var(--header-height));
    background:linear-gradient(90deg, #E2EEF3 50%, #FBFBFB 100%);
    position:relative;
}
.diverso-container{height:100%;padding:50px 80px;}
.diverso-text{height:30%;text-align:center;}
.diverso-text h3{font-size:2.625rem; margin-bottom:30px;}
.diverso-text p{font-size:1.25rem;line-height:1.5rem;margin-bottom:20px;}
.diverso-boxes{height:80%;display:flex;justify-content:space-between ; align-items:center}
.diverso-box {
    height: 230px;
    width: 230px;
    background-color: var(--ink);
    border-radius:30px;
    border-bottom-right-radius:100px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px 20px 40px 20px;
    color:white;
    position:relative;
    overflow:hidden;
}
.diverso-img{height:143px}
.diverso-img img{height: 100%}
.why-box:nth-child(1) .why-box-img {
    height: 128px;
    position: absolute;
    left: 51px;
    top: -58px;
}
.why-box:nth-child(1) .why-box-img img{height:100%}
.diverso-box:nth-child(1) .diverso-img {
    position: absolute;
    top: -35px;
    left: -36px;
}
.diverso-box:nth-child(2) .diverso-img {
    position: absolute;
    top: -35px;
    left: -36px;
}
.diverso-box:nth-child(3) .diverso-img {
    position: absolute;
    top: -35px;
    left: -36px;
}
.diverso-box p{
    font-size:1.25rem;line-height:1.4rem
}
.diverso-boxes.offset > div {
    transition: transform 0.8s ease;
}
.diverso-boxes.offset > :nth-child(1) {
    transform: translate(0px,100px);
    transition: transform 1s ease;
}
.diverso-boxes.offset > :nth-child(3) {
    transform: translate(0px,-100px);
    transition: transform 1s ease;
}
.diverso-box-text{height:60%;}

/*================FAQ===============*/
#faq {
    padding: 200px 0px;
    height: max-content;
    background-color: #FBFBFB;
    position: relative;
}
.faq-container {
    height: 100%;
    padding:50px 140px;
    display:flex;
    flex-direction:column;
}
.faq-text{text-align:center;margin-bottom:40px;}
.faq-text h3{font-size: 2.625rem}
.faq-drops{
    display:flex;
    flex-direction:column;
    flex-grow:1
}
.faq-drop {
    height: 81px;
    width: 100%;
    background-color: #EFF3F4;
    margin: 10px 0px;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    overflow: hidden;
    display: flex;
    padding: 23px 40px 23px 40px;
    cursor: pointer;
    transition: height 0.3s ease;
}

.faq-drop.expand {
    height: 173px;
    width: 100%;
    transition: height 0.3s ease;
}
.faq-drop-text{
    flex-grow:1;
}
.faq-drop-text h4 {
    font-size: 1.5rem;
    margin-bottom:30px;
}
.faq-drop-text p {
    opacity: 0;
    font-size: 1.125rem;
    transition: opacity 0.8s ease;
}
.faq-drop.expand p {
    opacity: 1;
    transition: opacity 0.8s ease;
}

.drop-circle > .circle {
    transition: all .45s cubic-bezier(0.65,0,.076,1);
    width: 2rem;
    height: 2rem;
    background: var(--ink);
    border-radius: 1rem;
    z-index: 2;
    pointer-events: none;
    position: relative
}
.drop-circle.expand > .circle{
    background-color:var(--rosaScuro)
}

.drop-circle > .circle .icon.arrow {
    left: .625rem;
    width: 1.125rem;
    height: .125rem;
    background: none
}

.drop-circle >.circle .icon.arrow::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 11px;
    width: .5rem;
    height: .5rem;
    border-top: .125rem solid #fff;
    border-right: .125rem solid #fff;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
}

.drop-circle.expand >.circle .icon.arrow::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 11px;
    width: .5rem;
    height: .5rem;
    border-top: .125rem solid #fff;
    border-right: .125rem solid #fff;
    transform: rotate(-45deg)
}

@media (max-width: 1700px) {
    .hero-container{width:95vw;height:525px;}
    /*==========HERO================*/
    .hero-text{padding:40px 0px;}
    .left-hero{width:12%}
    .hero-eyebrow {font-size:3.5rem;}
    .hero-title {font-size: 3.5rem;margin-bottom:40px;}
    .hero-text p{font-size:1.1rem;margin-bottom:20px;line-height:1.25rem}
    .hero-row{padding:50px 0px 0px 20px;}
    /*==================WWHY===============*/
    .why-box{height:230px;width:230px;border-radius: 30px;border-bottom-right-radius: 80px;}
    .why-text h3 {font-size: 2.1rem;line-height: 2.1rem;margin-bottom: 10px;}
    .why-text p{font-size:1rem;}
    .why-box h3{font-size:1.3rem;margin-bottom:10px;line-height:1.5rem}
    .why-box p{font-size:0.9rem;line-height: 1.2rem;}
    .why-box-img{height:140px;}
    .why-box-img img{height:100%;}
    .why-box:nth-child(1) .why-box-img {position: absolute;top: -60px;right: -102px;}
    .why-box:nth-child(3) .why-box-img {position: absolute;top: -60px;right: -102px;}
    #last-b{padding:15px;border-top-left-radius:80px;padding-bottom:45px;}
    #last-b h3{font-size:1.2rem;margin-bottom:0px;line-height:1.5rem}
    .why-box:nth-child(2){border-top-left-radius: 80px;}
    .why-box:nth-child(3){border-top-right-radius:80px;}

    /*==============HOW================*/
    .left-how h3{font-size:2.6rem;}
    .how-card{height:120px;padding: 20px 10px 10px 30px;}
    .how-card.expand {padding: 25px 10px 10px 30px;}
    .left-how-card h3{font-size:1.3rem;margin-bottom:10px;}
    .left-how-card p{font-size:0.9rem;margin-bottom:10px;}

    /*===========PRIMA DOPO============*/
    .prima-container {border-radius: 90px;}
    .left-prima{width:260px;height:260px;padding: 50px 50px 25px 28px;}
    .left-prima h3{font-size:2.6rem}
    .left-prima p{font-size:1rem}
    .right-prima{width:260px;height:260px;}
    .right-prima-box{padding: 50px 50px 25px 28px;}
    .right-prima-box h3{font-size:2.6rem}
    .right-prima-box p{font-size:1rem}

    /*==========PERCHE DIVERSO=========*/
    .diverso-box {
        width: 190px;
        height: 190px;
        border-radius: 30px;
        border-bottom-right-radius: 60px;
        justify-content: flex-end;
        padding: 20px 10px 20px 10px;
    }
    .diverso-box-text{height:65%;}
    .diverso-box p {font-size: 1.05rem;line-height:1.3rem}
    .diverso-text h3{font-size:2.4rem;margin-bottom:15px;}
    .diverso-text p{font-size:1.1rem;margin-bottom:10px;}
    .diverso-boxes.offset > :nth-child(1) {transform: translate(0px,40px);}
    .diverso-boxes.offset > :nth-child(3) {transform: translate(0px,-40px);}
    .diverso-img {height: 120px;}
    .diverso-box:nth-child(1) .diverso-img {top: -35px;left: -40px;}
    .diverso-box:nth-child(2) .diverso-img {top: -30px;left: -30px;}
    .diverso-box:nth-child(3) .diverso-img {top: -35px;left: -40px;}
    
    /*=============FAQ==================*/
    .faq-container {padding: 30px 140px;}
    .faq-drop.expand {height: 140px;}
    .faq-text {margin-bottom: 20px;}
    .faq-drop {height: 70px;margin: 8px 0px;padding: 23px 40px 23px 40px;;border-radius:20px;}
    .faq-drop-text h4{font-size:1.2rem;margin-bottom:15px;line-height: 1.3rem;}
    .faq-drop-text p{font-size:1rem;}
    #forma-pink-row {right: 5%;top: -17%; height: 160px;}
    #forma-pink-row img{height:100%}
}

@media (max-width: 1400px) {
    /*==========HERO================*/
    .hero-text{padding:40px 0px;}
    .hero-eyebrow {font-size:2.85rem;margin-bottom:-5px}
    .hero-title {font-size: 2.85rem;margin-bottom:40px;line-height:2.8rem;}
    .hero-text p{font-size:1rem;margin-bottom:20px;line-height:1.25rem}
    .hero-row{padding:50px 0px 0px 20px;}
    .right-hero{padding-right:100px;}
    .btn-primary{font-size:1rem}
    .btn-secondary{font-size:1rem}
    /*==================WHY===============*/
    .why-box{height:210px;width:210px;border-radius: 30px;border-bottom-right-radius: 80px;}
    .why-box h3{font-size:1.2rem;margin-bottom:10px;}
    .why-box p{font-size:0.8rem;}
    #last-b{padding:15px;border-top-left-radius:60px;}
    #last-b h3{font-size:1.2rem;margin-bottom:0px;}
    .why-box:nth-child(2){border-top-left-radius: 60px;}
    .why-box:nth-child(3){border-top-right-radius:60px;}
    /*==============HOW================*/
    .left-how{width:37%;padding:0px 20px}
    .right-how{width:63%;padding:0px;}
    .left-how h3{font-size:2.2rem;}
    .how-card {
        height: 100px;
        padding: 10px 10px 10px 30px;
        border-radius: 20px;
        border: 4px solid var(--workflow);
        border-top: 20px solid var(--workflow);
    }
    .how-card.expand {padding: 25px 10px 10px 30px;}
    .left-how-card h3{font-size:1.1rem;margin-bottom:10px;}
    .left-how-card p{font-size:0.9rem;margin-bottom:10px;}

    /*==========PERCHE DIVERSO=========*/
    .diverso-container {padding: 50px 20px;}
    
    /*=============FAQ==================*/
    .faq-container {padding: 30px 0px;}
    #forma-pink-row {height: 120px;}
    #forma-pink-row img{height:100%}
}

@media(max-width:1300px){
    /*=========LEFT HERO===============*/
    .left-hero{opacity:0;width:1%;margin-right:78px;}
    .center-hero{margin-right:18vw;}
    .right-hero{padding-right:0px;}
}

@media(max-width:1100px) {
    /*=========LEFT HERO===============*/
    .left-hero {display: none;}
    .right-hero {width: 90%}
    .center-hero {margin-right: 10vw;}
    .hero-row {padding: 50px 0px 0px 50px;justify-content: end;height: 470px;}
    .hero-line {height: 1550px;}
    /*======HOW========================*/
    .how-container {display: flex;flex-direction: column;padding: 20px 0px 20px 30px;justify-content: center;}
    .how-logo {height: 16vw;top: calc(100vh / 2 - 3vw - var(--header-height));}
    .left-how {width: 100%;justify-content: start;height: 10%;}
    .right-how {width: 100%;height: max-content;}
    .how-card.expand {height: 245px;padding: 10px 10px 10px 15px;border-color: var(--ink);}
    .right-how-card {display: block}
    .how-card {padding: 20px 10px 10px 15px;}
}

@media(max-width:870px){
    /*=====HERO========*/
    .hero-eyebrow{font-size:2.6rem;line-height:2.8rem;}
    .hero-title {font-size: 2.5rem;line-height:2.8rem;;margin-bottom:15px;}
    .hero-row{height:380px;}
    .hero-line {right: -95%;}
    .hero-row {padding: 50px 0px 0px 00px;}
    .hero-text {padding: 0px 0px;max-width: 80%;}
    .hero-text p{font-size:1rem;}
    .center-hero {margin-right: -7vw;}
    /*============WHY BOX==============*/
    .why-text{width:100%}
    .why-container{flex-wrap:wrap;justify-content:start;}
    .last-box{width:max-content;}
    .why-box {
        width: 180px;
        height: 180px;
        border-bottom-right-radius: 60px;
        padding: 20px 10px 30px 10px;
    }
    .why-box:nth-child(2) {border-radius: 30px;border-top-left-radius: 60px;}
    .why-box:nth-child(3){border-radius:30px;border-top-right-radius:60px;}
    /*============HOW==================*/
    .how-container {padding: 20px 0px 20px 0px;}
    .right-how-first-column,.right-how-second-column {padding: 5px;}
    .how-card.expand {overflow:scroll;}
    /*===========WHY===================*/
    .why-box:nth-child(1) .why-box-img {
        position: absolute;left: -80px;top: -125px;}
    .why-box:nth-child(3) .why-box-img {
        position: absolute;top: -90px;right: -160px;}
    .why-box-text {height: 85%;}
    .why-box-text h3{font-size:1.1rem;}
    #last-b h3{font-size:1.1rem;line-height:1.3rem;}

    /*=========PRIMA DOPO==============*/
    .left-prima{width:240px;height:240px}
    .right-prima{width:240px;height:240px}
    .under-prima.translate {
        transform: translate(50px, -48px);
        transition: transform 0.8s ease;
    }
    .prima-text {height: 90%;}

    /*===========DIVERSO===============*/
    #diverso{height:max-content;}
    .diverso-text{text-align:start;margin-bottom:40px;}
    .diverso-text h3{font-size:1.5rem}
    .diverso-text p{font-size:1.15rem;margin-bottom:20px}
    .diverso-boxes{flex-direction:column;align-items:center;}
    .diverso-box {
        width: 269px;
        height: 120px;
        border-radius: 20px;
        margin-bottom: 15px;
        justify-content: center;
        padding: 20px 20px 20px 20px;
    }
    .diverso-box-text {height: 100%;}
    
    .diverso-img{display:none}
    .diverso-box p{font-size:1.25rem}
    .diverso-boxes.offset > :nth-child(1) {
        transform: translate(-100px,0px);
        transition: transform 1s ease;
    }

    .diverso-boxes.offset > :nth-child(3) {
        transform: translate(100px,0px);
        transition: transform 1s ease;
    }
}

@media(max-width:576px){
    .page{scroll-snap-type:none !important}
    .snap-section{height:max-content;}
    /*=========HERO===============*/
    #hero{height:max-content;padding-bottom:115px;}
    .hero-container{width:90%;}
    .hero-row {display:block;padding:0px 0px 0px 0px;position:relative;height:max-content;}
    .right-hero {display: block;padding: 0px;width: 100%;background-color: #ffffff38;position: relative;z-index: 5;}
    .hero-line {height: 1135px;}
    .hero-text{max-width:100%;}
    .hero-eyebrow{font-size:2.4rem}
    .hero-title {font-size: 2.2rem;line-height: 2.3rem;margin-bottom: 15px;}
    .hero-text p {font-size: 1.125rem;line-height: 1.5rem;margin-bottom: 15px;width:100%;}
    .btn-primary,.btn-secondary{width:240px;text-align:center}
    .center-hero{height:200px;width:100%;display:flex;justify-content:end;}
    /*========WHY=================*/
    #why {height: max-content;background: linear-gradient(145deg, #E3EFF4 0%, #EBF3F6 100%);padding: 130px 0px;}
    .why-container{display:block}
    .why-container-row{display:block}
    .why-text{width:100%;}
    .why-text p {font-size: 1.25rem;line-height: 1.5rem;margin-bottom:15px;}
    .why-text h3 {font-size: 1.5rem;line-height: 1.75;}
    .why-boxes{display:block;width:75%;margin:auto;margin-top: 75px;}
    .why-box-img{display:none}
    /*.why-box:nth-child(1) .why-box-img {left: -25px;top: -50px;}
    .why-box:nth-child(3) .why-box-img {top: -64px;left: -13px;}*/
    .why-box {width: 100%;height:auto;aspect-ratio: 1 / 1;margin-bottom: 15px;padding: 30px;}
    .last-box {width: 75%;margin: auto;}
    #last-b{opacity:1;position:relative;width:100%;padding:30px;padding-bottom: 40px;}
    #last-b h3 {font-size: 1.5rem;line-height: 1.75rem;}
    .why-box-text {height: 80%;}
    .why-box-text h3 {font-size: 1.5rem;margin-bottom: 4vw;line-height: 1.75rem;}
    .why-box-text p {font-size: 1.125rem;line-height: 1.5rem;}
    /*=======HOW==================*/
    #how{height:max-content;padding:150px 0px;}
    .how-container{display:block;padding:0px;}
    .left-how{width:100%}
    .left-how-card h3{font-size:1.3rem;margin-bottom:15px;}
    .left-how-card p{font-size:1rem;margin-bottom:15px}
    .right-how{display:block;width:100%}
    .right-how-first-column,.right-how-second-column{width:100%;padding:0px;}
    .left-how{justify-content:center}
    .how-logo {height: 20vh;top: -10vh;left: calc(100vw / 2 - 14.5vh);}
    .how-card.expand {height: 300px;}
    /*=========PRIMA==============*/
    #prima{height:max-content;}
    .prima-container {
        width: 100%;
        height: 100%;
        border-radius: 0px;
        flex-direction:column;
        align-items:center;
        padding: 80px 50px 145px 50px;
    }
    .left-prima{margin-bottom:50px;padding: 50px 0px 25px 28px;}
    .left-prima p {font-size: 1.25rem;line-height: 1.56rem;}
    .right-prima-box p {font-size: 1.25rem;line-height: 1.56rem;}
    .under-prima.translate {transform: translate(45px, -40px);transition: transform 0.8s ease;}
    .prima-text {height: 100%;}
    .right-prima-box {padding: 30px 20px 25px 28px;}

    /*==========DIVERSO===========*/
    .diverso-container {padding: 105px 20px;}
    .diverso-box {width: 90vw;}
    /*==========FAQ===============*/
    #faq{height:max-content}
    .faq-container {padding: 90px 0px;}
    .faq-drop-text h4{font-size:1rem;}
    .faq-drop-text p{font-size:0.9rem;}
    .faq-drop {
        height: 70px;
        margin: 8px 0px;
        padding: 18px 10px 23px 15px;
        border-radius: 10px;
    }
    #forma-pink-row {
        right: 5%;
        top: -15%;
        height: 85px;
    }
    #faq {padding: 100px 0px;}
}