:root {
    --banner-pattern-bg: url("/sites/zweb/images/qengine/test-automation-frameworks/patterns.png")
}

.inline-block {
    display: inline-block
}

.page-wrapper .content-wrap {
    max-width: 1170px;
    padding: 50px 0
}

.flex-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

h2,h3 {
    font-family: var(--zf-primary-bold)
}

.act-btn,.cta-btn {
    padding: 12px 30px
}

.block-content img {
    vertical-align: top
}

.block-content .zgreen-anim-txt {
    display: block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left,var(--zqe-text-green),var(--zqe-text-green) 50%,#000 50%);
    background-image: linear-gradient(to right,var(--zqe-text-green),var(--zqe-text-green) 50%,#000 50%);
    background-size: 200% 100%;
    background-position: 0 0
}

.zw-product-header,.banner-section,.bottom-cta-section {
    background: var(--zqe-light-green-bg)
}

.page-wrapper .banner-section .content-wrap {
    padding-top: 70px
}

.banner-section {
    position: relative
}

.banner-section h1 {
    font-family: var(--zf-primary-regular)
}

.banner-section .highlight-txt {
    font-family: var(--zf-primary-bold);
    display: block
}

.banner-section .banner-content {
    background: var(--banner-pattern-bg);
    background-size: 40px auto;
    background-position: top left;
    position: relative;
    border: 3px solid var(--zqe-dark-green-bg);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    max-width: 1060px;
    width: 90%;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden
}

.banner-section .banner-content p:last-child {
    margin-bottom: 0
}

.banner-section .banner-image {
    position: absolute;  
    right: 3%;  
    bottom: 6%;
    max-width: 300px;
    width: 38%;
}

.banner-section .banner-bottom {
    background: var(--zqe-dark-green-bg);
    color: #fff;
    border-radius: 18px;
    padding: 40px 20px
}

.banner-section .banner-bottom p {
    max-width: 870px;
    margin: 0 auto
}

.quick-guide-section .zguide-block {
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    align-items: unset;
    gap: 5%
}

.quick-guide-section .zguide-block .zguide-block-sidebar {
    display: none
}

.quick-guide-section .zguide-block .zguide-block-sidebar,.quick-guide-section .zguide-block .zguide-block-content {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

.quick-guide-section .zguide-menu {
    position: sticky;
    top: 10px;
    left: 0;
    width: fit-content;
    max-width: 300px;
    background: var(--zqe-gray-bg);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 10px;
    padding: 20px 30px
}

.quick-guide-section .zguide-menu ul li,.quick-guide-section .zguide-fea-block ul li,.quick-guide-section .zguide-sub-box ul li {
    position: relative;
    padding-left: 25px;
    margin-top: 18px;
    font-size: 15px;
    letter-spacing: -0.17px
}

.quick-guide-section .zguide-menu ul li {
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 0 0 18px 25px
}

.quick-guide-section .zguide-menu ul li::before,.quick-guide-section .zguide-fea-block ul li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 2px;
    width: 10px;
    height: 10px;
    padding: 3px;
    transform: matrix(0.71,0.71,-0.71,0.71,0,0);
    border: 1px solid #132610
}

.quick-guide-section .fea-image {
    margin-bottom: 20px
}

.quick-guide-section .zguide-menu ul li:last-child {
    border-bottom: 0
}

.quick-guide-section .zguide-menu ul li.active {
    font-family: var(--zf-primary-semibold);
    color: var(--zqe-text-green)
}

.quick-guide-section .zguide-menu ul li.active:before {
    border: 2px solid var(--zqe-green-bg);
    background-color: var(--zqe-green-bg)
}

.quick-guide-section .zguide-block .zguide-box:not(:first-child) {
    margin-top: 50px
}

.quick-guide-section .zguide-sub-box>ul:not(:last-child) {
    margin-left: 10px;
    margin-bottom: 20px
}

.quick-guide-section .zguide-sub-box ul.steps-list li {
    padding-left: 0
}

.quick-guide-section .zguide-sub-box ul.steps-list li::before {
    border: 0
}

.quick-guide-section .zguide-sub-box ul.points-list li {
    padding-left: 28px
}

.quick-guide-section .zguide-sub-box ul.points-list li::before,.quick-guide-section .zguide-sub-box ul.points-list li::after {
    content: '';
    position: absolute;
    top: 12px
}

.quick-guide-section .zguide-sub-box ul.points-list li::before {
    left: 5px;
    width: 8px;
    height: 4px;
    border-left: 1px solid #132610;
    border-bottom: 1px solid #132610;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.quick-guide-section .zguide-sub-box ul.points-list li::after {
    width: 17px;
    height: 17px;
    left: 0;
    top: 6px;
    border-radius: 50%;
    border: 1px solid #132610
}

.quick-guide-section .zguide-sub-box ul.steps-points-list,.quick-guide-section .zguide-sub-box ul.steps-points-list li {
    position: relative
}

.quick-guide-section .zguide-sub-box ul.steps-points-list li {
    padding-left: 35px
}

.quick-guide-section .zguide-sub-box ul.steps-points-list::before {
    content: '';
    background: #e5f1ea;
    width: 1.5px;
    height: 0;
    position: absolute;
    top: 9px;
    left: 8px;
    -webkit-transition: height 2s linear;
    transition: height 2s linear
}

.quick-guide-section .zguide-sub-box ul.steps-points-list.zwe-op::before {
    height: 92%
}

.quick-guide-section .zguide-sub-box ul.steps-points-list li::before {
    content: '';
    background: var(--zqe-green-bg);
    width: 7px;
    height: 7px;
    position: absolute;
    top: 10px;
    left: 5px;
    border-radius: 50%;
    z-index: 1
}

.quick-guide-section .zguide-sub-box ul.steps-points-list li::after {
    content: '';
    background: #fff;
    width: 17px;
    height: 17px;
    position: absolute;
    top: 5px;
    left: 0;
    border-radius: 50%;
    border: 1px solid var(--zqe-green-bg)
}

.quick-guide-section .zguide-sub-box ul+p {
    margin-top: 20px;
    margin-bottom: 0
}

.quick-guide-section .zguide-block .zguide-box:not(:last-child),.quick-guide-section .zguide-block .zguide-sub-box:not(:last-child) {
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid #e2e2e2
}

.quick-guide-section .zguide-block .zguide-sub-box a {
    font-family: var(--zf-primary-semibold);
    color: var(--zqe-link-clr);
    text-decoration: underline
}

.quick-guide-section .zguide-fea-block {
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    -ms-grid-row-align: unset;
    align-items: unset;
    gap: 6%
}

.quick-guide-section .zguide-fea-block .fea-box {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    margin-top: 30px
}

.quick-guide-section .zguide-imp-box {
    background: var(--zqe-gray-bg);
    padding: 15px 20px;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 3px
}

.quick-guide-section .zguide-imp-box p:last-child {
    margin-bottom: 0
}

.bottom-cta-section .block-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto
}

@media only screen and (max-width: 767px) {
    .block-content .zgreen-anim-txt {
        display:inline-block
    }

    .page-wrapper .banner-section .content-wrap {
        padding-top: 30px
    }

    .page-wrapper .banner-section .content-wrap,.page-wrapper .content-wrap {
        max-width: 600px
    }

    .zflex-one-col,.zflex-two-col,.zflex-three-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }

    .banner-section .banner-image {
        display: none
    }

    .banner-section .banner-content,.banner-section .banner-bottom {
        padding: 30px
    }

    .banner-section .banner-content {
        width: 90%;
        border-radius: 10px 10px 0 0
    }

    .banner-section .banner-bottom {
        border-radius: 10px
    }

    .quick-guide-section .zguide-block .zguide-box:not(:first-child) {
        margin-top: 20px
    }

    .quick-guide-section .zguide-block .zguide-box:not(:last-child),.quick-guide-section .zguide-block .zguide-sub-box:not(:last-child) {
        padding-bottom: 50px;
        margin-bottom: 50px
    }

    .quick-guide-section .zguide-fea-block .fea-box:not(:last-child) p:last-child {
        margin-bottom: 10px
    }
}

@media only screen and (min-width: 600px) {
    .quick-guide-section .zguide-fea-block .fea-box {
        -webkit-box-flex:0;
        -ms-flex: 0 0 47%;
        flex: 0 0 47%
    }
}

@media only screen and (min-width: 768px) {
    h1 {
        font-size:38px
    }

    .page-wrapper .content-wrap {
        padding: 70px 0
    }

    .zflex-one-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }

    .zflex-two-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%
    }

    .zflex-three-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33%;
        flex: 0 0 33%
    }

    .zflex-row-reverse-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .banner-section .banner-content p {
        max-width: 58%
    }

    .banner-section .banner-bottom,.quick-summary-section .fea-title {
        text-align: center
    }

    .quick-guide-section .zguide-fea-block ul li,.quick-guide-section .zguide-sub-box ul li {
        line-height: 1.6;
        font-size: 17px
    }

    .quick-summary-section .fea-box:not(:last-child) {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 49%;
        flex: 0 0 49%
    }

    .quick-summary-section .fea-box:last-child {
        text-align: center
    }
}

@media only screen and (min-width: 992px) {
    .quick-guide-section .zguide-block .zguide-block-sidebar {
        display:block;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 28%;
        flex: 0 0 28%
    }

    .quick-guide-section .zguide-block .zguide-block-content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 67%;
        flex: 0 0 67%
    }
}

@media only screen and (min-width: 1200px) {
    .page-wrapper .content-wrap {
        padding:100px 0
    }

    .page-wrapper .mob-only {
        display: none
    }

    .i18n-en h1 {
        font-size: 55px
    }

    .i18n-en h2 {
        font-size: 36px
    }

    .banner-section .banner-content {
        padding: 80px 60px;
    }

    .banner-section .banner-content p {
        max-width: 500px
    }

    .banner-section .banner-image {
        max-width: 380px;
    }
}

@media only screen and (min-width: 1400px) {
    .i18n-en h1 {
        font-size:65px
    }

    .i18n-en h2 {
        font-size: 45px
    }
}