.container-title-illust{
            margin-bottom:3rem;
            padding:2rem 3rem 1rem 3rem;
            margin-top: -2rem;
        }

        .boxbianchi{
            padding:2rem 3rem 1rem 3rem;
        }

        .onscroll{
            opacity:0;
            translate:0 30%;
            transform:scale(0.97);
            transition: 800ms ease;
        }

        .onscroll.show{
            opacity:1;
            translate:0;
            transform:scale(1);
        }

        .euro{
            font-size: 3rem;
            font-weight:400;
            margin-top: -10px;
        }
        
        .scrolloffset200px{
                    position: relative;
                    padding-top: 200px;
                    margin-top: -200px;
                    z-index:-2;
                }

                .scrolloffset200px:hover{
                    background:none;
                    cursor: default !important;
                }

        .scrolloffset150px{
            position: relative;
            padding-top: 150px;
            margin-top: -150px;
            z-index:-2;
        }

                .scrolloffset150px:hover{
                    background:none;
                    cursor: default !important;
                }

                .bg-hero-section {
                        background-image: url(/images/sfondo-Email-Access-Manager.webp);
                        background-color: #fff;
                        background-size: cover;
                        background-position: center bottom;
                        background-repeat: no-repeat;
                        display: flex;
                        flex-direction:column;
                        gap: 1rem;
                        align-items:start;
                        justify-content: center;
                        height:calc(100vh - 100px);
                        text-align:left;
                        padding: 0rem 10rem;
                        color:#fff;
                    }

                .container-button-hero-section{
                        display:flex;
                        flex-direction:row;
                        gap:1rem;
                    }

                .container-button-hero-section #attiva-access-manager-button{
                        padding: 1rem 4rem;
                    }

                .container-come-funziona{
                    display: flex;
                    flex-direction:column;
                    gap: 6rem;
                    align-items:center;
                    justify-content: center;
                    max-width:74.625rem;
                    margin-top:3rem;
                }

                .subcontainer-come-funziona{
                    display: flex;
                    flex-direction:row;
                    align-items:center;
                    justify-content: center;
                    padding: 0 2.5rem;
                    gap:1.5rem;
                    height: 350px;
                    width:100%;
                }
                
                .img-come-funziona{
                    display: flex;
                    flex-direction:column;
                    align-items:center;
                    justify-content: center;
                    width: 70%;
                    background: #fff388;
                    height:100%;
                    border-radius:40px;
                    overflow: hidden;
                    object-fit: contain;
                }


                .box-come-funziona{
                    display: flex;
                    flex-direction:column;
                    gap: 1rem;
                    align-items:start;
                    justify-content: center;
                    max-height: 400px;
                    padding:3rem;
                    width: 30%;
                    text-align:left;
                }

                .box-come-funziona p, .box-come-funziona h3{
                    margin-top:0;
                }

                .box-come-funziona p{
                    font-size: 1.2rem;
                }

                .box-come-funziona h3{
                    font-size: 1.4rem;
                }


                .box-come-funziona p.per-chi, .box-come-funziona h3.per-chi{
                    font-size: 1.2rem;
                }

                .icon-come-funziona{
                    width:auto;
                    height: 40px;
                }

                .hero-title{
                    margin:0;
                    font-size: 4rem;
                    margin-top: -5rem;
                }

                .cta-container{
                    display:flex;
                    flex-direction:column;
                    gap: 1rem;
                    align-items:center;
                    justify-content: center;
                }

                .cta-container h2{
                    max-width:74.625rem;
                    margin:0;
                }

                ul{
                    display: inline-block;
                    text-align: left;
                    font-size: 1.2rem;
                }

                .title-cosa-facciamo{
                    margin-bottom:6rem;
                    font-size: 3rem;
                }

                .per-chi-servizio .subcontainer-come-funziona{
                    max-width:74.625rem;
                    margin: 4rem 0rem;
                }

                .bg-hero-section p{
                    font-size:1.15rem;
                    max-width: 900px;
                }

                .grid-container {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    width: 100%;
                    margin: auto;
                    gap: 40px 80px;
                    margin-top: 6rem;
                }

                .grid-item div {
                    width: 100%;
                    height: 200px;
                    border-radius: 20px;
                    overflow: hidden;
                }

                .grid-item div img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover; /* keeps ratio and fills div */
                    object-position: center;
                }
                
                .grid-item {
                    text-align: center;
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                }

                .grid-item p {
                    margin-top: 12px;
                    max-width: 80%;
                }

                @media screen and (max-width: 1400px){
                    .hero-title{
                        font-size:3rem;
                    }
                    
                    .bg-hero-section p{
                        max-width: 770px;
                    }
                }
                            
                @media screen and (max-width: 1023px){
                    .grid-container {
                        grid-template-columns: repeat(2, 1fr);
                    }

                    .grid-container.passaggi-numeri {
                        grid-template-columns: repeat(1, 1fr);
                    }

                    .subcontainer-come-funziona .box-come-funziona{
                        flex-direction:column;
                        height: auto;
                    }

                    .subcontainer-come-funziona .box-come-funziona h3{
                        width: 100%;
                    }

                    .box-come-funziona{
                        padding:auto;
                        width:auto;
                    }

                    .img-come-funziona img{
                        width: auto;
                        height: 100%;
                    }
                }

                @media screen and (max-width: 970px){

                    .bg-hero-section{
                        padding: 0rem 4rem;
                    }

                    .bg-hero-section p{
                        max-width: 450px;
                    }

                    .hero-title{
                        font-size: 2.3rem;
                        line-height: 2.3rem;
                    }

                    .bg-hero-section h2{
                        font-size: 1.5rem;
                    }

                    .subcontainer-come-funziona{
                        text-align:left;
                    }
                }

                @media screen and (max-width: 768px){
                    
                    .subcontainer-come-funziona h3, .subcontainer-come-funziona p{
                        text-align:center;
                    }

                    .container-button-hero-section{
                        flex-direction:column;
                        gap:0.5rem;
                    }

                    .container-button-hero-section #attiva-access-manager-button{
                        padding: 1rem 2rem;
                    }

                    .grid-container {
                        grid-template-columns: repeat(1, 1fr);
                    }
                    
                    .bg-hero-section{
                        justify-content: start;
                        padding: 0rem 3rem;
                        padding-top: calc(100px + 2rem);
                        gap:1rem;
                    }

                    .button-blu{
                        padding: 1rem;
                    }

                    .subcontainer-come-funziona{
                        flex-direction:column;
                        height: auto;
                    }

                    .box-come-funziona{
                        width:auto;
                        padding:1rem;
                        padding-bottom: 0;
                    }

                    .img-come-funziona{
                        width:auto;
                    }

                    .title-cosa-facciamo{
                        margin-bottom: -2rem;
                        font-size: 2rem;
                        max-width: 90%;
                    }

                    .container-come-funziona{
                        gap:3rem;
                    }

                    .cta-container h2{
                        max-width: 85%;
                        font-size: 1.2rem;
                    }

                    .cta-container h1{
                        max-width: 85%;
                        font-size: 1.4rem;
                    }

                    .per-chi-servizio .subcontainer-come-funziona{
                        margin-top: -2rem;
                        margin-bottom: 2rem;
                    }

                    .per-chi-servizio h1{
                        max-width:85%;
                        font-size: 1.8rem;
                    }

                    .per-chi-servizio .box-come-funziona{
                        text-align:center;
                    }

                    .img-come-funziona img{
                        width: 100%;
                        height: auto;
                    }
                }

        @media only screen and (max-width: 600px) {
            .container-title-illust {
                padding: 0rem 1rem 0rem 1rem;
                margin-top: -3rem;
            }

            .boxbianchi{
                padding:2rem 1.5rem 1rem 1.5rem;
            }

            h1{
                text-align: center;
            }
        }