.zcol-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.zcol {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 49.4%;
}

.head-title {
    font-family: var(--zf-primary-bold);
}

.zsection {
    padding: 60px 0;
}

a.act-btn.cta-btn.style-btn {
    background: #3182FF;
    border-radius: 30px;
    visibility: visible;
    opacity: 1;
    padding: 10px 30px;
    text-transform: capitalize;
    font-family: var(--zf-primary-bold);
    font-size: 20px;
    text-transform: uppercase;
}

.hero-wrap {
    background: #F1F0EA;
    position: relative;
    text-align: center; 
}

.hero-content {
    padding: 50px 0;
}

.hero-content h1 {
    max-width: 976px;
    margin: 0 auto 50px;
    font-family: var(--zf-primary-extrabold);
    text-transform: uppercase;
}

.hero-wrap h1.head-title span {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right,#3182FF,#3182FF 50%,#000 50%);
    background-size: 200% 100%;
    background-position: 100%;
    transition: 1.3s ease;
}

 .hero-wrap .animated h1.head-title span {
    transition: all 1.3s cubic-bezier(0,0,.23,1);
    background-position: 0 0;
}


.hero-wrap p {
    max-width: 780px;
    margin: 0 auto 50px;
    font-size: 20px;
}


ul.hero-creative {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 725px;
    top: 0;
    left: 0;
}

ul.hero-creative li {
    position: absolute;
    will-change:transform;
}

ul.hero-creative li:nth-child(1) {
    left: -5%;
    bottom: 13%;
}

ul.hero-creative li:nth-child(2) {
    right: 0;
    bottom: 0;
}

ul.hero-creative li:nth-child(3) {
    top: -7%;
    right: 2%;
}

ul.hero-creative li:nth-child(4) {
    top: 0%;
    left: 8%;
}

.creative-block{
    position: relative;
    width: 100%;
    height: 100%;
}

.content-block {
    max-width: 464px;
}
.insert-wrap {
    background: #13161C;
    color: #fff;
}

.advantage-wrap {
    background: #F7F6F3;
}

.advantage-heading {
    max-width: 574px;
}

.advantage-heading p {
    max-width: 385px;
}

.block-list {
    width: 100%;
    min-height: 745px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.first-block,
.second-block,
.third-block {
    width: 100%;
    max-width: 840px;
    display: flex;
    flex-direction: column;
    margin-right: 25px;
}

.first-block {
    margin-bottom: 50px;
    justify-content: center;
}

.first-block .adv-content {
    background: url(/sites/zweb/images/writer/citation/sec-5-1.svg) no-repeat center center;
    background-size: cover;
    color: #fff;
}
.second-block .adv-content:nth-of-type(1) {
    background: url(/sites/zweb/images/writer/citation/sec-5-2.svg) no-repeat center center;
    background-size: cover;
    margin-bottom: 48px;
}
.second-block .secondsub.adv-content:nth-of-type(2) {
    background: url(/sites/zweb/images/writer/citation/sec-5-4.svg) no-repeat center center;
    background-size: cover;
}
.third-block .adv-content:nth-of-type(1) {
    background: url(/sites/zweb/images/writer/citation/sec-5-3.svg) no-repeat center center;
    background-size: cover;
}
/* .second-block {
    margin: 0 0 0 auto;
} */
.third-block {
    margin-right: 0px;
    justify-content: center;
}
.third-block .adv-content h4{
    max-width: 225px;
}
.secondsub.adv-content h4{
    max-width: 210px; 
}
.adv-content {
    width: 100%;
    max-width: 396px;
    height: 330px;
    color: #000;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
}
.adv-content p{
    margin-bottom: 0;
}
.insert-wrap .creative-block{
    text-align: center;
}

.zcol-wrap.zcol-inverse {
    margin-top: 60px;
}


.zbottom{
    text-align: center;
}
.zbottom .act-btn .cta-btn{
    border-radius: 3px;
    font-family: var(--zf-primary-bold);
    text-transform: uppercase;
}
@media(min-width:992px) {
    
    h1.head-title {
        font-size: 68px;
    }

    .zsection {
        padding: 120px 0;
    }
    section.zsection.insert-wrap{
        padding-top: 200px;
    }
    .zcol-wrap.zcol-inverse {
        padding-top: 120px;
    }
    .content-block p {
        font-size: 22px;
    }
    img.generator-img{
        max-width: 361px;
    }
    .hero-creative li{
        transform: scale(.60);
        opacity: 0;
    }
    .hero-creative li:nth-child(1){
        transition-delay: 350ms;
        transition: ease-in-out .6s;
    }
    .hero-creative li:nth-child(2){
        transition-delay: 550ms;
        transition: ease-in-out .7s;
    }
    .hero-creative li:nth-child(3){
        transition-delay: 350ms;
        transition: ease-in-out .6s;
    }
    .hero-creative li:nth-child(4){
        transition-delay: 550ms;
        transition: ease-in-out .6s;
    }
    .animated .hero-creative li:nth-child(1), .animated .hero-creative li:nth-child(2), .animated .hero-creative li:nth-child(3), .animated .hero-creative li:nth-child(4){
        opacity: 1;
        transform: scale(1);
    }
    .anim-imgs{
        position: absolute;
        width: 100%;
    }
    .anim-imgs.anim-generator{
        max-width: 378px;
        height: 100%;
        top: 18%;
        left: 53%;
    }
    .anim-imgs li{
        position: absolute;
    }
    .anim-imgs.anim-generator li:nth-child(1){
        left: 0;
        bottom: 0;
        z-index: 1;
        transform: translate(-34%, -20%);
        transition: ease-in-out .5s;
        opacity: 0;
    }
    .animated .anim-imgs.anim-generator li:nth-child(1){
        opacity: 1;
        transform: translate(-34%, -17%);
    }
    .anim-imgs.anim-generator li:last-child{
        opacity: 0;
        bottom: 0;
        transform: translate(-33%, -14%);
        transition-delay: 550ms;
        transition: ease-in .6s;
    }
    .middle-animated .anim-imgs.anim-generator li:last-child{
        transform: translate(-28%, -9%);
        opacity: 1;
    }
    .content-block h2{
        font-size: 42px;
    }
    .insert-wrap img.insert-img, .manage-wrap img.manage-img, .bibliography-wrap img.bibliography-img{
        position: relative;
        z-index: 1;
    }
    .anim-imgs.anim-insert{
        top: 0;
        left: 0;
    }
    ul.anim-imgs.anim-insert li:nth-child(1){
        left: 0;
        top: 0;
        z-index: 0;
        transform: translate(32%, -32%);
        opacity: 0;
        transition: ease-in-out .6s;
    }
    .animated ul.anim-imgs.anim-insert li:nth-child(1){
        opacity:1;
        transform: translate(-13%, -32%);
    }
    ul.anim-imgs.anim-insert li:nth-child(2){
        left: 12%;
        top: 0;
        z-index: 0;
        opacity: 0;
        transition-delay: 550ms;
        transition: ease-in .6s;
    }
    .middle-animated ul.anim-imgs.anim-insert li:nth-child(2){
        opacity: 1;
        transform: translate(5%, 5%);
    }
    .anim-imgs.anim-manage{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .anim-imgs.anim-manage li:nth-child(1){
        top: 10%;
        right: 0;
        z-index: 2;
        transform: translate(5%, 10%);
        transition: ease-out .6s;
        opacity: 0;
    }
    .animated .anim-imgs.anim-manage li:nth-child(1){
        opacity: 1;
        transform: translate(5%, 20%);
    }
    .anim-imgs.anim-manage li:nth-child(2){
        top: 0;
        right: 0;
        z-index: 0;
        transform: translate(-65%, 0%);
        transition-delay: 350ms;
        opacity: 0;
        transition: ease-in-out .6s;
    }
    .middle-animated .anim-imgs.anim-manage li:nth-child(2){
        opacity: 1;
        transform: translate(-48%, -20%);
    }
    .anim-imgs.anim-manage li:nth-child(3){
        
        left: 0;
        top:0;
        z-index: 0;
        opacity: 0;
        transform: translate(0%, 13%);
        transition-delay: 550ms;
        transition: ease-out .5s;
    }
    .middle-animated .anim-imgs.anim-manage li:nth-child(3){
        opacity: 1;
        transform: translate(-6%, 18%);
    }
    ul.anim-imgs.anim-bibliography{
        left: 0;
        top: 0;
    }
    .anim-imgs.anim-bibliography li:nth-child(1){
        left: 0;
        top: 0;
        z-index: 1;
        transform: translate(-10%, -10%);
        opacity: 0;
        transition: ease-in-out .6s;
    }
    .animated .anim-imgs.anim-bibliography li:nth-child(1){
        opacity: 1; 
        transform: translate(0%, -10%);
    }
    .anim-imgs.anim-bibliography li:nth-child(2){
        right: 0;
        top: 0;
        opacity: 0;
        transform: translate(-5%, 1%);
        transition-delay: 550ms;
        transition: ease-in .6s;
    }
    .middle-animated .anim-imgs.anim-bibliography li:nth-child(2){
        opacity: 1;
        transform: translate(5%, 7%);
    }
    .bibliography-wrap .creative-block{
        text-align: right;
    }
    .bibliography-wrap .content-block {
        max-width: 500px;
        padding-left: 20%;
    }
    section.zsection.manage-wrap{
        padding-bottom: 200px;
    }
    .block-list{
        margin-top: -7%;
    }
    section.zsection.advantage-wrap{
        padding-bottom: 50px;
    }
    .adv-content h4{
        font-size: 26px;
    }
    .adv-content p{
        font-size: 18px;
    }
    .adv-content {
        transform: scale(.85);
        transition-delay: 400ms;
        transition: ease-in-out .5s;
    }
    .animated .adv-content{
        transform: scale(1);
    }
    .advantage-heading p {
     font-size: 22px;
    }
}

@media(max-width:1199px) {
    .creative-block{
        width: 100%;
        max-width: 400px;
    }
}
@media(max-width:991px) {
    
    .zcol-inverse {
        flex-direction: column-reverse;
    }

    .zcol {
        flex: 0 100%;
        align-items: center;
    }

    .content-block p,
    .hero-wrap p, .advantage-heading p, .adv-content p {
        font-size: 18px;
    }
    .hero-content h1 {
        max-width: 585px;
    }
    ul.hero-creative{
        min-height: 490px;
    }
    ul.hero-creative li:nth-child(1) img{
        width: 30%;
    }
    ul.hero-creative li img{
        width: 50%;
    }
    .content-block {
        max-width: 700px;
        margin-bottom: 25px;
    }
    .creative-block{
        text-align: center;
    }
    .creative-block img{
        width: 100%;
        max-width: 500px;
    }
    .anim-imgs{
        display: none;
    }
}
@media (max-width:767px) {
    .hero-content{
        padding: 0;
    }
    ul.hero-creative{
        display: none;
    }
    .block-list {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .first-block, .second-block, .third-block{
        align-items: center;
        margin-right: 0;
        margin-bottom: 30px;
    }
    .advantage-heading {
        max-width: 674px;
        margin: 0 auto;
        text-align: center;
    }
    .advantage-heading p {
        max-width: 525px;
        margin: 0 auto 30px;
    }
    .third-block{
        margin-bottom: 0;
    }
}