html {
    background: #fafafa
}

footer {
    position: relative
}

.zw-product-header,section.top-sec,.mid-sec,.illustration-block {
    background: #fff
}

section.top-sec {
    padding: 90px 0 0;
    text-align: center
}

section.top-sec h1 {
    max-width: 600px;
    margin: 0 auto;
    font: 54px var(--zf-primary-extrabold)
}

section.top-sec p {
    max-width: 780px;
    margin: 20px auto 0
}

.mid-sec {
    padding-bottom: 60px
}

.mid-sec .content-wrap {
    padding: 120px 0 0
}

.sub-cont {
    display: table;
    max-width: unset;
    margin: 0 auto 60px
}

.sub-cont-l {
    display: table-cell;
    width: 35%
}

.sub-cont-l h2 {
    text-align: left;
    max-width: 250px;
    font-size: 42px;
    vertical-align: top;
    padding-left: 50px;
    font-family: var(--zf-primary-bold)
}

.sell-your-course h2 {
    font-size: 36px;
    text-align: center
}

.sell-your-course h2+p {
    max-width: 680px;
    margin: 0 auto;
    text-align: center
}

.sell-your-course {
    margin-bottom: 80px
}

.sub-cont-r {
    display: table-cell;
    width: 65%;
    vertical-align: top
}

.sub-cont-r>p {
    text-align: left;
    max-width: 700px
}

section.bottom-sec {
    padding: 90px 0;
    text-align: center;
    background: #fafafa;
    position: relative;
}

.bottom-head {
    text-align: center;
    margin: 0 auto;
    transition: all .5s ease;
    padding-bottom: 30px;
    !i;!;
}

.bottom-head h1 {
    font-weight: 600;
    padding: 0
}

.bottom-cont {
    background: #fff;
    padding-top: 70px;
    position: relative;
    width: 1000px;
    padding-inline: 30px;
    height: 100%;
    max-width: 100%;
    }

.bottom-cont h4 {
    font-size: 30px
}

.bottom-cont>p:first-child {
    font-family: Roboto slab
}

.bottom-cont p {
    max-width: 900px;
    margin: 0 auto
}

.bottom-cont img {
    padding: 30px 0 60px;
    max-width: 625px;
    margin: 0 auto
}

.head-anim {
    position: relative;
    min-height: 500px;
    margin-top: 120px
}

.head-anim .image {
    position: absolute;
    transform: translate(0,-50%)
}

.image img {
    vertical-align: middle
}

.head-anim .image.image-1 {
    left: 0;
    top: 50%;
    max-width: 180px
}

.head-anim .image.image-2 {
    left: 11%;
    top: 29%;
    max-width: 288px
}

.head-anim .image.image-3 {
    left: 14%;
    top: 79%;
    max-width: 180px
}

.head-anim .image.image-4 {
    left: 28%;
    top: 55%;
    max-width: 222px
}

.head-anim .image.image-5 {
    left: 41.5%;
    top: 88%;
    max-width: 180px
}

.head-anim .image.image-6 {
    left: 52.5%;
    top: 65%;
    max-width: 288px
}

.head-anim .image.image-7 {
    left: 59.8%;
    top: 15%;
    max-width: 180px
}

.head-anim .image.image-8 {
    left: 69.5%;
    top: 58.5%;
    max-width: 222px
}

.head-anim .image.image-9 {
    left: 70.8%;
    top: 10.5%;
    max-width: 222px
}

.head-anim .image.image-10 {
    left: 84%;
    top: 4%;
    max-width: 288px
}

.head-anim .image.image-11 {
    left: 82.8%;
    top: 58.5%;
    max-width: 222px
}

.head-anim .image {
    position: absolute;
    opacity: 1;
    transition: all 2s ease
}

.head-anim>div.zoom-out {
    transform: translate(0,-50%);
    opacity: 0
}

.top-sec .head-anim>div.zoom-out {
    left: 45%
}

.head-anim .image.image-1,.head-anim .image.image-10,.head-anim .image.image-11 {
    transition-delay: .5s
}

.head-anim .image.image-2,.head-anim .image.image-3,.head-anim .image.image-8,.head-anim .image.image-9 {
    transition-delay: 1s
}

.head-anim .image.image-4,.head-anim .image.image-6,.head-anim .image.image-7 {
    transition-delay: 1.5s
}

.head-anim .image.image-5 {
    transition-delay: 2s
}

.top-anim>div>p {
    opacity: 0;
    transition: all 1.5s ease;
    transform: translateY(20px)
}

.top-anim>div>p.my-anim {
    opacity: 1;
    transform: translateY(-5px)
}

.top-anim {
    position: absolute
}

[class^="text-anim"] {
    position: relative;
    width: 200px;
    height: 50px;
    z-index: 1;
    transition: .8s all ease;
    opacity: 1
}

[class^="text-anim"]>p {
    text-align: center;
    font-size: 18px;
    padding-top: 10px;
    color: #fff;
    font-weight: 600
}

.text-anim1 {
    top: 275px;
    left: -2px
}

.text-anim2 {
    top: 150px;
    left: 230px
}

.text-anim3 {
    top: 265px;
    left: 260px
}

.text-anim4 {
    top: 106px;
    left: 486px
}

.text-anim5 {
    top: 185px;
    left: 690px
}

.text-anim6 {
    top: 30px;
    left: 932px
}

.text-anim7 {
    top: -325px;
    left: 995px
}

.text-anim7>p {
    font-size: 16px
}

.text-anim8 {
    top: -172px;
    left: 1176px
}

.text-anim9 {
    top: -464px;
    left: 1208px
}

.text-anim10 {
    top: -534px;
    left: 1448px
}

.text-anim11 {
    top: -380px;
    left: 1400px
}

.bottom-cont>p:first-child {
    position: absolute;
    right: 10px;
    top: 3px
}

.illustration-block {
    display: block;
    position: relative
}

section.illustration-block:before {
    content: '';
    height: 500px;
    width: 100%;
    top: -90px;
    left: 0;
    background: url(/sites/zweb/images/campaigns/onlinecourses-illustration.png) no-repeat;
    background-size: auto 500px;
    position: absolute
}

section.illustration-block:after {
    content: '';
    height: 500px;
    width: auto;
    background: url(/sites/zweb/images/campaigns/onlinecourses-bg-wave.png) no-repeat;
    display: block;
    background-size: auto 500px
}

.bottom-sec .content-wrap.my-anim {
    height: calc(100vh - 100px)
}
.bottom-head.my-anim {
    width: 100%;
    position: fixed;
    top: 7%;
    left: 0;
    max-width: 1280px;
    margin: auto;
    right: 0
}
.bottom-sec > .content-wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: 1fr;
    gap:50px;
    position: relative;
}

.bottom-sec > .content-wrap > div {
    position: sticky;
    top: 100px;
    margin-inline: auto;
}

.bottom-cont.my-anim {
    width: 100%;
    text-align: center;
    position: fixed;
    top: 17%;
    left: 0;
    max-width: 1100px;
    margin: auto;
    right: 0;
    box-shadow: unset
}
.bottom-cont p {
    max-width: 660px;
}

.bottom-cont.one,.bottom-cont.four,.bottom-cont.seven{
    background: #CDEEFF;
}

.bottom-cont.two,.bottom-cont.five,.bottom-cont.eight{
    background: #FFE5E4;
}

.bottom-cont.three,.bottom-cont.six {
    background: #FFF5E5;
}

/* .bottom-cont.four {
    background: #CDEEFF;
}

.bottom-cont.five {
    background: #faf4ca
} */

.bottom-cont.eight {
    margin-bottom: 0
}

.bottom-cta-section {
    margin: 100px auto 80px;
    z-index: 9;
    position: relative;
text-align:center;
display:none;
}

.bottom-sec > .content-wrap {
    position: relative;
}



@media only screen and (max-width: 650px) {
    section.top-sec h1 {
        font-size:30px
    }

    .sub-cont-l h2,.sub-cont-r>p {
        max-width: 100%
    }

    .sub-cont-l h2 {
        font-size: 24px
    }

    .sub-cont-r>p {
        max-width: 100%
    }
}

@media only screen and (max-width: 767px) {
    section.top-sec h1 {
        font-size:32px
    }
    .bottom-cta-section {
        margin-top:40px
    }

    .bottom-cont img {
        max-width: 100%;
        padding: 30px 0 0
    }

    .mid-sec .content-wrap {
        padding: 60px 0 0
    }

    section.bottom-sec {
        padding: 0 0 60px
    }

    section.top-sec {
        padding: 30px 0 0
    }
}

@media only screen and (max-width: 991px) {
    section.top-sec h1 {
        font-size:36px
    }

    .mid-sec .sub-cont,.sub-cont-l,.sub-cont-r {
        display: block;
        width: 100%
    }
    .bottom-cta-section {
        margin-top:80px
    }

    .sub-cont-l h2 {
        padding-left: 0;
        max-width: 80%;
        text-align: center;
        margin: 0 auto 10px;
        font-size: 30px
    }

    .sub-cont-r>p {
        max-width: 80%;
        margin: 0 auto;
        text-align: center
    }
}

@media only screen and (max-width: 1279px) {
    section.top-sec h1 {
        font-size:40px
    }
    .bottom-cta-section {
        margin-top:80px
    }

    .bottom-anim-start {
        height: unset
    }

    .bottom-cont {
        /* background: unset; */
        box-shadow: unset;
        min-height: unset;
        margin-bottom: 0
    }

    section.bottom-sec {
        background: #fff
    }
}

@media only screen and (min-width: 1280px) {
    section.top-sec h1 {
        font-size:46px
    }

    section.bottom-sec .content-wrap {
        width: 100%;
    }

    section.top-sec .content-wrap {
        width: 100%;
        max-width: 1800px
    }

    .footer-wrapper {
        display: block;
        position: relative;
        z-index: 9
    }
}

@media only screen and (max-width: 1679px) {
    .head-anim {
        display:none
    }

    .head-anim-banner {
        display: block;
        margin-top: 30px
    }

    section.top-sec .content-wrap {
        width: 90%
    }

    .illustration-block {
        display: none
    }
}

@media only screen and (min-width: 1680px) and (max-width:1800px) {
    .head-anim .image>img {
        max-width:95%
    }

    .head-anim .image.image-1 {
        left: 5px
    }

    .head-anim .image.image-3 {
        left: 16%;
        top: 76%
    }

    .head-anim .image.image-6 {
        top: 62%
    }

    .head-anim .image.image-7 {
        top: 14.5%
    }

    .head-anim .image.image-8 {
        top: 56%
    }

    .head-anim .image.image-10 {
        top: 5.9%
    }

    .head-anim .image.image-11 {
        top: 56%
    }

    .head-anim-banner {
        display: none
    }
}

@media only screen and (min-width: 1801px) {
    .head-anim .image>img {
        max-width:100%
    }

    .head-anim-banner {
        display: none
    }

    section.illustration-block:after {
        background: url(/sites/zweb/images/campaigns/onlinecourses-bg-wave-extended.png) no-repeat
    }

    .bottom-cont.my-anim {
        top: 14%
    }

    .text-anim1 {
        top: 275px;
        left: -2px
    }

    .text-anim2 {
        top: 150px;
        left: 230px
    }

    .text-anim3 {
        top: 278px;
        left: 242px
    }

    .text-anim4 {
        top: 106px;
        left: 516px
    }

    .text-anim5 {
        top: 185px;
        left: 732px
    }

    .text-anim6 {
        top: 48px;
        left: 990px
    }

    .text-anim7 {
        top: -318px;
        left: 1070px
    }

    .text-anim7>p {
        font-size: 16px
    }

    .text-anim8 {
        top: -158px;
        left: 1255px
    }

    .text-anim9 {
        top: -460px;
        left: 1288px
    }

    .text-anim10 {
        top: -530px;
        left: 1556px
    }

    .text-anim11 {
        top: -366px;
        left: 1500px
    }
}

@media only screen and (min-width: 2560px) {
    .bottom-head.my-anim {
        top:5%
    }

    .bottom-cont.my-anim {
        top: 12%
    }
}

@media only screen and (min-width: 3200px) {
    .bottom-head.my-anim {
        top:3.6%
    }

    .bottom-cont.my-anim {
        top: 9%
    }
}

@media only screen and (min-width: 3000px) {
    section.illustration-block:after {
        background:url(/sites/zweb/images/campaigns/onlinecourses-bg-wave-extended-2x.png) no-repeat
    }
}