.ab-scrolly-container {

    position:relative;

    height:500vh;

    background:#F3EDE2;

    overflow:clip;

}





.ab-scrolly-sticky {

    position:sticky;

    top:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}





.ab-scrolly-content {

    width:100%;

    max-width:1200px;

    height:100%;


    display:flex;

    flex-direction:column;

    align-items:center;


    padding:130px 20px 40px;

    box-sizing:border-box;

}






/* =====================
   TEXT
===================== */


.ab-scrolly-top-text-wrapper,
.ab-scrolly-bottom-text-wrapper {


    position:relative;

    width:100%;

    max-width:900px;


    display:flex;

    align-items:center;

    justify-content:center;

}



.ab-scrolly-top-text-wrapper {

    height:90px;

}



.ab-scrolly-bottom-text-wrapper {

    height:90px;

    margin-top:25px;

}




.ab-scrolly-text {


    position:absolute;


    width:100%;


    left:50%;

    top:50%;



    transform:

        translate(-50%,-50%)

        translateY(20px);



    opacity:0;


    color:#2B2926 !important;


    text-align:center;


    transition:

        opacity .45s ease,

        transform .45s ease;


}



.ab-scrolly-text.active {


    opacity:1;


    transform:

        translate(-50%,-50%)

        translateY(0);


}





.ab-scrolly-top-text,

.ab-scrolly-bottom-text {


    font-size:22px;

    font-weight:500;

    line-height:1.8;


}








/* =====================
   TRACK
===================== */


.ab-scrolly-visual-area {


    width:100%;


    height:420px;


    display:flex;


    align-items:center;


    justify-content:center;


    overflow:hidden;


}




.ab-scrolly-track {


    display:flex;


    width:max-content;


    flex-shrink:0;


    direction:rtl;


    flex-direction:row;


    align-items:center;


    gap:100px;


    will-change:transform;


    transition:transform .35s ease;


}







/* =====================
   BOX
===================== */


.ab-scrolly-box-wrapper {


    flex-shrink:0;


    opacity:.45;


    transform:scale(.92);


    transition:


        opacity .45s ease,

        transform .45s ease;


}




.ab-scrolly-box-wrapper.active {


    opacity:1;


    transform:scale(1);


}





.ab-scrolly-box {


    position:relative;


    overflow:hidden;


    border-radius:14px;



    background:


    linear-gradient(

        145deg,

        rgba(255,255,255,.25),

        rgba(255,255,255,.05)

    ),

    var(--box-color);



    box-shadow:


    0 20px 40px rgba(0,0,0,.12);


}






.box-small {


    --box-color:#126758;


    width:150px;

    height:150px;


}





.box-medium {


    --box-color:#3456A6;


    width:250px;

    height:250px;


}





.box-tall {


    --box-color:#F3C464;


    width:200px;

    height:340px;


}





.box-wide {


    --box-color:#71CABF;


    width:390px;

    height:200px;


}








/* =====================
   RIBBONS
===================== */


.ab-scrolly-box-band {


    position:absolute;


    z-index:2;


    background:rgba(255,255,255,.45);


    pointer-events:none;


}




.ab-scrolly-box-band.vertical {


    width:12%;


    height:100%;


    left:50%;


    top:0;


    transform:translateX(-50%);


}






.ab-scrolly-box-band.horizontal {


    width:100%;


    height:12%;


    left:0;


    top:50%;


    transform:translateY(-50%);


}







/* =====================
   PROGRESS
===================== */


.ab-scrolly-progress {


    display:flex;


    align-items:center;


    gap:20px;


    margin-top:25px;


}





.ab-scrolly-progress-num {


    color:#2B2926;


}





.ab-scrolly-progress-line {


    width:200px;


    height:2px;


    background:#B1CCC4;


}





.ab-scrolly-progress-fill {


    height:100%;


    width:0;


    background:#21A894;


}








/* =====================
   MOBILE
===================== */


@media(max-width:767px){


    .ab-scrolly-content {

        padding:110px 18px 30px;

    }



    .ab-scrolly-track {

        gap:45px;

    }



    .ab-scrolly-top-text,

    .ab-scrolly-bottom-text {

        font-size:18px;

    }



    .ab-scrolly-visual-area {

        height:360px;

    }


}