:root {
    --sprite-icon: url("/sites/zweb/images/qengine/test-automation/sprite.svg");
    --banner-pattern-bg: url("/sites/zweb/images/qengine/handbooks-patterns.png");
}

.inline-block {
    display: inline-block;
}

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

.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
}

[class|="zsprite"] {
    display: inline-block;
    background: var(--sprite-icon) no-repeat;
    background-size: 270px auto;
    background-position: 0 0;
    letter-spacing: -40px;
}

.zsprite-fea-icon1 {
    background-position: 0 0;
    width: 38px;
    height: 40px;
}

.zsprite-fea-icon2 {
    background-position: -40px -2px;
    width: 36px;
    height: 35px;
}

.zsprite-fea-icon3 {
    background-position: -78px -2px;
    width: 41px;
    height: 34px;
}

.zsprite-fea-icon4 {
    background-position: -122px -3px;
    width: 38px;
    height: 33px;
}

.zsprite-web-icon {
    background-position: -162px -3px;
    width: 35px;
    height: 30px;
}

.zsprite-api-icon {
    background-position: -199px -5px;
    width: 44px;
    height: 26px;
}

.zsprite-mobile-icon {
    background-position: -246px 0;
    width: 24px;
    height: 33px;
}

/* banner-Section */
.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 .bnr-img {
    position: absolute;
    right: 3%;
    bottom: 7%;
    max-width: 295px;
    width: 28%
}

.banner-section .banner-image .bnr-icon {
    position: absolute;
    right: 26%;
    bottom: 7%;
    max-width: 180px;
    width: 15%;
    box-shadow: 0 3px 40px 0 rgba(0,0,0,0.2);
    border-radius: 10px
}

.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
}


/* banner-Section */
/* quick-guide-section */
/* .page-wrapper .quick-guide-section .content-wrap {
    padding-top: 30px;
} */

.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-summary-section .fea-content 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: 0px 0px 18px 25px;
}

.quick-guide-section .zguide-menu ul li::before,
.quick-guide-section .zguide-fea-block ul li::before,
.quick-summary-section .fea-content 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-summary-section .fea-content ul li::before {
    border-color: #ffffff;
}

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

.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-fea-block ul+p {
    margin-top: 20px;
    margin-bottom: 0px;
}

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

.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 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-fea-block .fea-box.end-fea-box{
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid #E2E2E2;
}

.quick-guide-section .zguide-fea-block .fea-box .fea-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #B4D4FF;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.quick-guide-section .zguide-fea-block .fea-box:nth-child(2) .fea-icon {
    background: #FFA989;
}

.quick-guide-section .zguide-fea-block .fea-box:nth-child(3) .fea-icon {
    background: #B9FFD4;
}

.quick-guide-section .zguide-fea-block .fea-box:nth-child(4) .fea-icon {
    background: #F1D5E5;
}

.quick-guide-section .zguide-fea-block .texting-types {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box a {
    font-family: var(--zf-primary-regular);
    color: #000000;
    text-decoration: none;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box {
    width: 190px;
    padding: 20px;
    border: 1px solid #C6D6B7;
    border-radius: 7px;
    text-align: center;
}

.quick-guide-section .zguide-fea-block .texting-types .fea-icon-txt {
    line-height: 1.3;
}

.quick-guide-section .zguide-fea-block .texting-types .fea-icon-txt span {
    display: block;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box:nth-child(1) {
    background: #F7FFEF;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box:nth-child(2) {
    background: #FFF2F2;
    border-color: #FED0D1;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box:nth-child(3) {
    background: #FFFDF2;
    border-color: #E6E0BD;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box .fea-icon {
    margin: 0px auto 20px;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box:nth-child(1) .fea-icon {
    background: #BBFED5;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box:nth-child(2) .fea-icon {
    background: #FED0D1;
}

.quick-guide-section .zguide-fea-block .texting-types .types-box:nth-child(3) .fea-icon {
    background: #FEE3AB;
}

.quick-guide-section .zfea-special-box .fea-box p:last-child {
    margin-bottom: 0px;
}

.quick-guide-section .zfea-special-box .fea-box:not(:last-child) {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #E2E2E2;
}

/* quick-guide-section */
/* quick-summary-Section */
.quick-summary-section {
    background: #0A1910;
    color: #ffffff;
}

.quick-summary-section p:last-child {
    margin-bottom: 0;
}

.quick-summary-section .flex-content {
    max-width: 900px;
    margin: 0px auto;
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    -ms-grid-row-align: unset;
    align-items: unset;
    gap: 30px 2%;
}

.quick-summary-section .fea-title {
    max-width: 800px;
    margin: 0px auto 50px;
}

.quick-summary-section .fea-box {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 30px 40px;
}

/* quick-summary-Section */
/* bottom-cta-Section */
.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 {
        border-radius: 10px 10px 0px 0px;
    }

    .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-box p:not(:first-child) {
        margin-bottom: 0px;
    }

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

    .quick-summary-section .fea-box {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    .quick-summary-section .fea-box {
        padding: 30px;
    }
}

@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 0px;
    }

    .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-summary-section .fea-content 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 0px;
    }

    .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;
    }

    .animated .banner-image .bnr-icon {
        animation: slideDown 1s ease-out .6s forwards;
    }
}

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

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

@keyframes slideDown {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(30px)
    }

    100% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0)
    }
}