.zw-product-header {
    background: #010101;
}

.zwc-section {
    padding-block: 100px 120px;
}

.zwc-inner-wrap {
    overflow: hidden;
}

.zwc-inner-wrap p {
    margin-bottom: 0;
}

.zwc-inner-wrap img {
    vertical-align: bottom;
}

.zwc-link-element {
    margin-inline: auto;
    max-width: fit-content;
}

.zwc-feature-link {
    position: relative;
    display: inline-block;
    color: #6691ff;
    font-size: 15px;
    font-family: var(--zf-primary-semibold);
    padding: 16px 44px 16px 16px;
    border: 2px solid #6691ff;
    border-radius: 4px;
}

.zwc-feature-link::before,
.zwc-feature-link::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.zwc-feature-link::before {
    width: 13px;
    height: 2px;
    background: #6691ff;
    border-radius: 4px;
}

.zwc-feature-link::after {
    width: 10px;
    height: 10px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #6691ff;
    border-radius: 1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.zb-firefox .zwc-include-inner::before {
    opacity: 0.7;
}

.zb-firefox .zwc-banner-section::after {
    opacity: 0.5;
}

/* font styles */

.zwc-inner-wrap h1 {
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -1.28px;
}

.zwc-inner-wrap h2 {
    font-size: 52px;
    line-height: 1.2;
    letter-spacing: -0.96px;
}

.zwc-inner-wrap h3 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.64px;
}

/* banner section */
.zwc-section.zwc-banner-section {
    padding-top: 60px;
    position: relative;
    background: #010101;
    color: #fff;
}

.zwc-banner-section::after {
    content: '';
    position: absolute;
    width: 592px;
    height: 592px;
    border-radius: 592px;
    background: #0E185A;
    right: -340px;
    filter: blur(172px);
    top: 130px;
    z-index: 10;
    transform: translateZ(0);
}

.zwc-banner-cnt {
    max-width: 940px;
    text-align: center;
    margin-inline: auto;
}

.zwc-ban-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(210deg, #212224 0, #00070f 100%) transparent;
    border: 1px solid #707070;
    border-radius: 25px;
    margin-inline: auto;
    margin-bottom: 20px;
    display: grid;
    place-content: center;
}

.zwc-ban-icon::before {
    content: " ";
    display: grid;
    background: url("/sites/zweb/images/eprotect/feature-offering/feature-offering-sprite-icons.svg") no-repeat;
    width: 52px;
    height: 53px;
    background-size: 779px auto;
    background-position: -727px -56px;
}

.zwc-banner-cnt h1 {
    margin-bottom: 25px;
}

.zwc-banner-cnt h1 span:first-child {
    color: #f7db60;
}

.zwc-banner-cnt h1 span:nth-child(2) {
    color: #2b75ff;
}

.zwc-banner-cnt p {
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: 35px;
}

/* feature section */

.zwc-include-section {
    position: relative;
    background: #010101;
    color: #fff;
}

.zwc-section.zwc-include-section {
    padding: 0;
}

.zwc-include-inner {
    width: 90%;
    max-width: 1504px;
    margin-inline: auto;
    border-radius: 24px 24px 0px 0px;
    background: linear-gradient(0deg, rgba(26, 26, 26, 0.71) 0%, rgba(26, 26, 26, 0.71) 100%);
    padding-block: 100px 120px;
}

.zwc-include-inner::before {
    content: '';
    position: absolute;
    width: 437px;
    height: 437px;
    border-radius: 437px;
    background: #0E185A;
    left: -320px;
    filter: blur(182px);
    bottom: 400px;
    z-index: 10;
    transform: translateZ(0);
}

.zwc-feature-slider {
    display: grid;
    gap: 70px;
    margin-top: 140px;
}

.zwc-feature-slider:first-child {
    margin-top: 30px;
}

.zwc-include-header {
    text-align: center;
}

.zwc-include-header h2 {
    margin-bottom: 30px;
}

.zwc-slider-header {
    position: relative;
    display: flex;
    width: fit-content;
    border-radius: 10px;
    background: #212121;
    margin-inline: auto;
}

.zwc-title-slider {
    height: 107px;
}

.zwc-title-slider>div {
    padding: 20px 0px;
}

.zwc-title-slider.is-fixed>div {
    position: fixed;
    top: 65px;
    background: #131313;
    z-index: 3;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1280px;
}

.zwc-title-slider.isHide {
    opacity: 0;
    pointer-events: none;
}

.zwc-slider-title {
    padding: 20px 25px;
    color: #919191;
    font-family: var(--zf-primary-semibold);
    cursor: pointer;
    font-size: 18px;
    z-index: 1;
}

.zwc-slider-title.tab-active {
    color: #fff;
}

.zwc-slider-bg {
    width: 154px;
    position: absolute;
    border-radius: 8px;
    background: #000;
    height: calc(100% - 14px);
    margin: auto 0;
    top: 0px;
    bottom: 0px;
    left: 7px;
    transition: width .5s linear, left .5s linear;
}

.zwc-slider-bg.hideTransiiton {
    transition: none;
}

.zwc-feature-heading {
    max-width: 610px;
    text-align: center;
    margin-inline: auto;
}

.zwc-feature-heading h3 {
    margin-bottom: 30px;
}

.zwc-feature-layout ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 24px;
    max-width: 1168px;
    margin-inline: auto;
    text-align: center;
}

.zwc-feature-layout li {
    border-radius: 10px;
    background: rgba(217, 217, 217, 0.02);
    padding: 50px 25px;
    text-align: center;
    font-size: 17px;
    position: relative;
    font-family: var(--zf-primary-semibold);
}

.zwc-feature-layout li::before {
    content: '';
    width: 50px;
    height: 50px;
    display: block;
    position: relative;
    margin-bottom: 25px;
    margin-inline: auto;
    background: url("/sites/zweb/images/eprotect/feature-offering/feature-offering-sprite-icons.svg") no-repeat;
    background-size: 779px auto;
}

.zwc-feature-layout .spam-filter::before {
    background-position: 0 0px;
}

.zwc-feature-layout .virus-protect::before {
    background-position: -52px -1px;
}

.zwc-feature-layout .spoof-protect::before {
    background-position: -103px -1px;
}

.zwc-feature-layout .attachment-protect::before {
    background-position: -156px -1px;
}

.zwc-feature-layout .url-protect::before {
    background-position: -209px 0px;
}

.zwc-feature-layout .threat-protect::before {
    background-position: -260px -1px;
}

.zwc-feature-layout .account-protect::before {
    background-position: -312px 0px;
}

.zwc-feature-layout .pre-sandbox::before {
    background-position: -364px -1px;
}

.zwc-feature-layout .quishing-prevent::before {
    background-position: -415px -1px;
}

.zwc-feature-layout .email-spool::before {
    background-position: -468px 0px;
}

.zwc-feature-layout .ransomware-protect::before {
    background-position: -520px 1px;
}

.zwc-feature-layout .warning-tag::before {
    background-position: -571px 1px;
}

.zwc-feature-layout .inbound-filter::before {
    background-position: -625px 1px;
}

.zwc-feature-layout .outbound-filter::before {
    background-position: -677px 1px;
}

.zwc-feature-layout .zero-attact-prevent::before {
    background-position: -728px -1px;
}

.zwc-feature-layout .engineering-protect::before {
    background-position: 0 -52px;
}

.zwc-feature-layout .business-email-protect::before {
    background-position: -51px -52px;
}

.zwc-feature-layout .user-access::before {
    background-position: -103px -52px;
}

.zwc-feature-layout .secure-email::before {
    background-position: -156px -52px;
}

.zwc-feature-layout .retention-policy::before {
    background-position: -207px -53px;
}

.zwc-feature-layout .investigations-manage::before {
    background-position: -259px -50px;
}

.zwc-feature-layout .eDiscovery-search::before {
    background-position: -312px -54px;
}

.zwc-feature-layout .legal-hold::before {
    background-position: -363px -51px;
}

.zwc-feature-layout .smtp-discovery::before {
    background-position: -415px -52px;
}

.zwc-feature-layout .data-management::before {
    background-position: -467px -52px;
}

.zwc-feature-layout .user-archive-access::before {
    background-position: -520px -52px;
}

/* additional feature */
.zwc-additional-wrap {
    padding-inline: 100px;
}

.zwc-additional-wrap h2 {
    margin-bottom: 60px;
}

.zwc-additional-wrap .zwc-feature-link {
    max-width: 190px;
    border-color: #0047ff;
    color: #0047ff;
    margin-top: 70px;
}

.zwc-additional-wrap .zwc-feature-link::after {
    border-color: #0047ff;
}

.zwc-additional-wrap .zwc-feature-link::before {
    background: #0047ff;
}

.zwc-add-feature-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zwc-add-feature-wrap>li::before {
    content: '';
    width: 45px;
    height: 39px;
    display: block;
    background: url("/sites/zweb/images/eprotect/feature-offering/feature-offering-sprite-icons.svg") no-repeat;
    background-size: 779px auto;
    flex-shrink: 0;
}

.zwc-add-feature-wrap>li {
    font-size: 20px;
    font-family: var(--zf-primary-semibold);
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 320px;
}

.zwc-add-feature-wrap>li.custom-dashboard::before {
    background-position: -574px -57px;
}

.zwc-add-feature-wrap>li.audit-log::before {
    background-position: -627px -57px;
}

.zwc-add-feature-wrap>li.delivery-log::before {
    background-position: -678px -56px;
}

/* bottom section */
.zwc-section.zwc-bottom-section {
    padding-top: 0;
}

.zwc-bottom-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
    border-radius: 30px;
    color: #fff;
    background: #010101;
    padding-block: 100px 120px;
}

.zwc-bottom-cnt {
    max-width: 670px;
}

.zwc-bottom-img {
    max-width: 310px;
}

.zwc-bottom-cnt h2 {
    margin-bottom: 35px;
}

@media screen and (max-width:1440px) {
    .zwc-additional-wrap {
        padding-inline: 70px;
    }

    .zwc-banner-section::after,
    .zwc-include-inner::before {
        display: none;
    }
}

@media screen and (max-width:1280px) {
    .zwc-additional-wrap {
        padding-inline: 0;
    }
}

@media screen and (max-width:1199px) {

    .zwc-include-inner,
    .zwc-title-slider.is-fixed>div {
        width: 95%;
    }

    .zwc-section,
    .zwc-include-inner {
        padding-block: 75px 95px;
    }

    .zwc-inner-wrap h1 {
        font-size: 52px;
    }

    .zwc-inner-wrap h2 {
        font-size: 42px;
    }

    .zwc-inner-wrap h3 {
        font-size: 30px;
    }

    .zwc-banner-cnt {
        max-width: 760px;
    }

    .zwc-feature-layout ul {
        max-width: 870px;
        grid-template-columns: repeat(3, 1fr);
    }

    .zwc-title-slider.is-fixed>div {
        top: 0;
    }

    .zwc-bottom-wrap {
        padding-block: 95px;
    }

    .zwc-bottom-cnt {
        max-width: 530px;
    }
}

@media screen and (max-width:991px) {

    .zwc-section,
    .zwc-include-inner {
        padding-block: 65px 75px;
    }

    .zwc-section.zwc-banner-section {
        padding-top: 70px;
    }

    .zwc-inner-wrap h1 {
        font-size: 45px;
    }

    .zwc-inner-wrap h2 {
        font-size: 34px;
    }

    .zwc-inner-wrap h3 {
        font-size: 28px;
    }

    .zwc-banner-cnt {
        max-width: 650px;
    }

    .zwc-include-header h2 {
        margin-bottom: 25px;
    }

    .zwc-title-slider {
        height: 87px;
    }

    .zwc-title-slider>div {
        padding: 10px 0;
    }

    .zwc-feature-slider {
        gap: 50px;
    }

    .zwc-feature-heading h3 {
        margin-bottom: 20px;
    }

    .zwc-additional-wrap h2 {
        text-align: center;
        margin-bottom: 40px;
    }

    .zwc-add-feature-wrap {
        flex-direction: column;
        align-items: center;
    }

    .zwc-add-feature-wrap>li {
        max-width: 200px;
        text-align: center;
    }

    .zwc-add-feature-wrap>li {
        display: block;
        font-size: 17px;
        line-height: 1.4;
    }

    .zwc-add-feature-wrap>li::before {
        margin-bottom: 10px;
        margin-inline: auto;
    }

    .zwc-add-feature-wrap>li:not(:first-child) {
        margin-top: 40px;
        border: none;
    }

    .zwc-additional-wrap .zwc-feature-link {
        margin-top: 50px;
    }

    .zwc-bottom-wrap {
        flex-direction: column;
        gap: 50px;
        padding-block: 70px 75px;
    }

    .zwc-bottom-cnt {
        text-align: center;
    }

    .zwc-bottom-cnt h2 {
        margin-bottom: 25px;
    }

    .zwc-bottom-img {
        max-width: 280px;
    }
}

@media screen and (max-width:767px) {

    .zwc-include-inner {
        width: 90%;
    }

    .zwc-section,
    .zwc-include-inner {
        padding-block: 60px 70px;
    }

    .zwc-section.zwc-banner-section {
        padding-top: 50px;
    }

    .zwc-inner-wrap h1 {
        font-size: 35px;
        line-height: 1.2;
    }

    .zwc-inner-wrap h2 {
        font-size: 30px;
    }

    .zwc-inner-wrap h3 {
        font-size: 24px;
    }

    .zwc-banner-cnt {
        max-width: 495px;
    }

    .zwc-ban-icon {
        width: 75px;
        height: 75px;
        margin-bottom: 15px;
        border-radius: 20px;
    }

    .zwc-ban-icon::before {
        transform: scale(.9) translate(1px, -1px);
    }

    .zwc-banner-cnt h1 {
        margin-bottom: 15px;
    }

    .zwc-banner-cnt p {
        margin-bottom: 25px;
    }

    .zwc-include-inner {
        border-radius: 10px 10px 0px 0px;
    }

    .zwc-title-slider.is-fixed>div {
        width: 90%;
    }

    .zwc-include-header h2 {
        margin-bottom: 40px;
    }

    .zwc-feature-slider {
        margin-top: 90px;
    }

    .zwc-feature-layout ul {
        max-width: 572px;
        grid-template-columns: repeat(2, 1fr);
    }

    .zwc-title-slider {
        display: none;
    }

    .zwc-bottom-wrap {
        border-radius: 10px;
        padding: 60px 30px 70px 30px;
    }

    .zwc-feature-layout li {
        font-size: 15px;
        padding: 30px 25px;
    }
}

@media screen and (max-width:480px) {
    .zwc-inner-wrap h1 {
        font-size: 32px;
    }

    .zwc-inner-wrap h2 {
        font-size: 28px;
    }

    .zwc-inner-wrap h3 {
        font-size: 22px;
    }

    .zwc-banner-cnt {
        max-width: 335px;
    }

    .zwc-include-section .content-wrap {
        width: 100%;
    }

    .zwc-include-inner {
        width: 100%;
        border-radius: 0px;
        padding-inline: 20px;
    }

    .zwc-include-header h2 {
        width: 90%;
        margin-inline: auto;
    }

    .zwc-feature-layout ul {
        max-width: 564px;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .zwc-feature-layout li {
        padding: 20px 15px;
        line-height: 1.4;
        font-size: 13px
    }

    .zwc-feature-layout li::before {
        margin-bottom: 10px;
    }

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

    .zwc-section.zwc-bottom-section {
        padding: 0;
    }

    .zwc-bottom-wrap {
        border-radius: 0;
        padding: 60px 20px 70px 20px;
    }

    .zwc-bottom-img {
        max-width: 240px;
    }
}