/* Keep the original hand, information, consent, folder panorama on the moving
   track. One background preserves the connecting line throughout transitions. */
/* Opaque backdrop so the next section can't show through while this is fixed to the viewport */
.how-it-work #owl-example { width: 100%; background: #fff; }
.how-it-work #owl-example .owl-stage {
    background: url('../images/scroll-slider-img.png') no-repeat
        0 max(40px, calc((var(--how-height, 560px) - 21.8vw) / 2)) / 100% auto;
    padding-bottom: 0;
}
.how-it-work #owl-example .owl-item { height: auto; padding: 0; }
.how-it-work #owl-example .slidewrap {
    position: relative;
    overflow: hidden;
    min-height: var(--how-height, 560px);
    margin: 0;
}
.how-it-work #owl-example .bottomslider { max-width: none; }
.how-it-work #owl-example .slide-item {
    position: relative;
    float: none;
    width: 38%;
    max-width: 450px;
    margin: 0 0 0 56%;
    padding-top: max(40px, calc((var(--how-height, 560px) - 300px) / 2));
}
.how-it-work #owl-example .slide-item h3 { padding-right: 20px; }
.how-it-work #owl-example .slide-item p { padding-right: 20px; }
.how-it-work #owl-example .owl-dots {
    display: block !important;
    bottom: 60px;
    width: 100%;
    text-align: center;
}
.how-it-work #owl-example .owl-dot { width: 13px; height: 13px; margin: 0 3px; border: 1px solid #9e9e9e; }
.how-it-work #owl-example .owl-dot.active { border-color: #ff0606; }
.how-it-work #owl-example .owl-nav { display: none !important; }

@media (min-width: 1025px) {
    .how-it-work #footer-section > .home-section-heading,
    .how-it-work #footer-section > .h2 {
        position: sticky;
        top: var(--how-header, 0px);
        z-index: 5;
        margin: 0;
        padding: 35px 20px 25px;
        background: transparent;
    }
}

@media (max-width: 1024px) {
    .how-it-work #scroll-wrapper { height: auto !important; }
    .how-it-work #owl-example .slidewrap { min-height: 470px; }
    .how-it-work #owl-example .owl-stage { background-position: 0 140px; }
    .how-it-work #owl-example .slide-item { padding-top: 40px; }
    .how-it-work #owl-example .slide-item h3 { font-size: 32px; }
    .how-it-work #owl-example .slide-item p { font-size: 16px; line-height: 24px; }
    .how-it-work #owl-example .owl-dots { display: none !important; }
    .how-it-work #owl-example .owl-nav {
        display: flex !important;
        position: static;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: 15px auto 0;
    }
    .how-it-work #owl-example .owl-nav .pagination-wrap { display: inline-block; margin: 0 5px; line-height: 48px; }
}

@media (max-width: 767px) {
    .how-it-work #owl-example .slidewrap { min-height: 0; padding-bottom: 20px; }
    .how-it-work #owl-example .owl-stage { background-position: 0 20px; }
    .how-it-work #owl-example .slidewrap::before {
        content: '';
        display: block;
        height: calc(21.8vw + 40px);
    }
    .how-it-work #owl-example .slide-item { width: auto; max-width: 540px; margin: 0 auto; padding: 0 24px; }
    .how-it-work #owl-example .slide-item h3,
    .how-it-work #owl-example .slide-item p { padding-right: 0; text-align: center; }
}