h1,
h2,
.box ul li h3 {
 font-family:var(--primaryfont-bold)
}
h1 {
 font-size:50px
}
h2 {
 font-size:46px
}
.box ul li h3 {
 font-size:34px
}
.banner .content-wrap,
.shield .content-wrap {
 display:flex;
 flex-wrap:wrap
}
.banner .content-wrap {
 text-align:center;
 max-width:1200px;
 padding:160px 0 160px;
 overflow:unset;
 align-items:center
}
.banner {
 position:relative;
 overflow:hidden
}
.banner::before,
.banner::after {
 position:absolute;
 content:"";
 height:100%;
 top:0
}
.banner::before {
 width:55%
}
.banner::before,
.cta-section {
 background-color:#0e4478
}
.banner .content-wrap>div {
 width:50%;
 text-align:left
}
.banner .content-wrap>div h1 {
 max-width:500px;
 color:#fadbda
}
.banner .image-part img {
 transform:scale(1.95) translate(85px,19px)
}
.banner .cont-part p+p {
 margin-top:30px;
}
.banner .cont-part p {
 max-width:480px;
 font-size: 20px;
}
.shield {
 background-color:#fff5f5;
 margin:auto
}
.shield .content-wrap {
 padding:120px 0 90px;
 max-width:920px;
 align-items:center
}
.shield .cont-part {
 width:56%;
 box-sizing:border-box;
 padding-left:50px
}
.shield h2 {
 margin-bottom:30px
}
.shield p {
 max-width:99.2%
}

.shield .image-part {
 width:44%
}
.zshield-img {
  max-width: 364px;
  position: relative;
}

.zshield-img .zusercount {
  font-size: 120px;
  display: block;
  font-family: var(--primaryfont-semibold);
  line-height: 100px;
  text-shadow: 3px 3px 0px #ffffff75;
}

.zshield-txt {
  position: absolute;
  top: 52%;
  font-size: 36px;
  font-family: var(--primaryfont-bold);
  left: 44%;
  right: 0;
  margin: auto;
  transform: translate(-50%, -50%);
  text-align: center;
}
.shield .image-part img {
 max-width:100%;
}

.cta-section,
.banner .content-wrap {
 color:white
}
.box .content-wrap.desc-title {
 max-width:820px;
 text-align:center;
 padding:130px 0 90px
}
.desc-title h2::before {
 width:160px;
 height:100px;
 background-image:url(/sites/zweb/images/vault/why-unmatched-2x.png);
 background-size:cover;
 top:0;
 left:0;
 right:0;
 margin-left:auto;
 margin-right:auto
}
.desc-title h2 {
 max-width:600px;
 margin-left:auto;
 margin-right:auto;
 padding-top:120px;
 position:relative
}
.desc-title h2::before {
 position:absolute;
 content:""
}
.box ul.content-wrap {
 max-width:1050px;
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 gap: 10px;
}
.box ul li {
 max-width:520px;
 border:1px solid #0e4478;
 border-radius:5px;
 padding:70px 45px 50px;
 box-sizing:border-box;
 width: calc(50% - 10px);
}
.box ul li h3 {
 padding-top:80px;
 position:relative
}
.box ul li h3::before {
 position:absolute;
 content:"";
 width:70px;
 height:65px;
 /*! background-color: red; */top:0;
 left:0;
 background-image:url(/sites/zweb/images/vault/why-icons.png);
 background-size:auto 65px;
 background-repeat:no-repeat
}
.box ul li a {
 border-bottom:1px solid
}
.box ul li.zicon-2 h3::before {
 background-position:-73px 0
}
.box ul li.zicon-3 h3::before {
 background-position:-146px 0
}
.box ul li.zicon-4 h3::before {
 background-position:-227px 0
}
.box ul li:nth-child(n+3) {
 margin-top:10px
}
.cta-section {
 text-align:center
}
.cta-section .content-wrap {
 max-width:1000px
}
.cta-section {
 padding:110px 0;
 margin-top:160px;
 background-color:#031b33
}
.cta-section h2 {
 margin-bottom:40px
}
.i18n-id .cta-section .content-wrap,
.i18n-nl .cta-section .content-wrap,
.i18n-nl .shield .content-wrap,
.i18n-pt-br .cta-section .content-wrap {
 max-width:1100px
}
.i18n-fr .shield .content-wrap,
.i18n-id .shield .content-wrap,
.i18n-pt-br .shield .content-wrap {
 max-width:980px
}
.i18n-fr .cta-section .content-wrap {
 max-width:1110px
}
.i18n-de .banner .content-wrap>div h1,
.i18n-id .banner .content-wrap>div h1,
.i18n-fr .banner .content-wrap>div h1,
.i18n-nl .banner .content-wrap>div h1,
.i18n-pt-br .banner .content-wrap>div h1,
.i18n-es-xl .banner .content-wrap>div h1,
.i18n-it .banner .content-wrap>div h1,
.i18n-th .banner .content-wrap>div h1 {
 max-width:600px
}
.i18n-pt-br .desc-title h2 {
 max-width:620px
}
.i18n-ar .banner .content-wrap {
 display:flex;
 flex-direction:row-reverse
}
.i18n-ar .banner .content-wrap .cont-part {
 padding-right:60px;
 box-sizing:border-box
}
.i18n-ar .banner::before {
 left:0
}
@media screen and (min-width:1700px) {
 .banner .image-part img {
  transform:scale(1.95) translate(107px,19px)
 }
}
@media screen and (max-width:1440px) {
 h1 {
  font-size:46px;
  color:#fadbda
 }
 h2 {
  font-size:40px
 }
 .banner .image-part img {
  transform:scale(1.85) translate(75px,15px)
 }
 .banner .image-part img {
  transform:translateY(180deg) scale(1.85) translate(75px,15px)
 }
}
@media screen and (max-width:991px) {
 .banner .image-part {
  display:none
 }
 .banner .content-wrap>div,
 .banner::before {
  width:100%
 }
 .banner .content-wrap {
  max-width:620px;
  padding: 80px 0;
 }
 .box ul li {
  max-width:520px;
  padding:30px 30px 30px
 }
 .i18n-de .box ul li h3 {
  word-break:break-word
 }
 .i18n-ar .banner .content-wrap .cont-part {
  padding:0
 }
}
@media screen and (max-width:767px) {
 .shield .cont-part,
 .shield .image-part {
  width:100%;
  text-align:center;
  padding-left:0
 }
 .shield p {
  width:100%;
  max-width:100%
 }
 .zshield-img
 {
  margin: 0 auto;
 }
 .shield .image-part img {
  max-width:280px
 }
 .zshield-img .zusercount {
  font-size: 95px;
  line-height: 70px;
}
.zshield-txt
{
  font-size: 30px;
}
 .shield .content-wrap {
  max-width:650px;
  width:90%
 }
 .box .content-wrap.desc-title {
  max-width:620px;
  padding:70px 0 20px
 }
 .box ul li {
  width:100%;
  max-width:580px;
  margin:auto
 }
 .box ul li,
 .box ul li:nth-child(n+3) {
  margin-top:10px;
 }
 .cta-section {
  margin-top:100px
 }
}
@media screen and (max-width:480px) {
 h1 {
  font-size:30px
 }
 h2 {
  font-size:24px
 }
 .cta-section h2 {
  margin-bottom:30px
 }
 .banner .cont-part p {
  font-size:17px;
  line-height:inherit
 }
 .shield .image-part img {
  max-width:150px;
  position:relative;
  left:1%;
  margin-bottom:30px
 }
 .zshield-txt
 {
  top: 44%;
  left: 48%;
  font-size: 15px;
 }
 .zshield-img .zusercount {
  font-size: 48px;
  line-height: 40px;
  text-shadow: 2px 2px 0px #ffffff75;
}
 .cta-section {
  padding:80px 0 60px
 }
 .box ul li h3 {
  font-size:28px
 }
 .banner .cont-part p+p {
  margin-top:30px
 }
 .banner .content-wrap,
 .shield .content-wrap {
  padding:60px 0 50px
 }
 .banner .content-wrap>div {
  text-align:center
 }
 .i18n-ar .zshield-img {
    text-align: center;
    }
}
.i18n-ar .desc-title h2,
.i18n-ar .desc-title p,
.i18n-ar .cta-section h2,
.i18n-ar .cta-section p {
 text-align:center
}
.i18n-ar .box ul li h3::before {
 right:0;
 left:auto
}
.i18n-ar .zshield-txt, .i18n-ar .zshield-img .zusercount {
    text-align: center;
}

@media only screen and (max-width:768px) {
 .i18n-ar .shield h2,
 .i18n-ar .shield p {
  text-align:center
 }
 .i18n-ar .zshield-txt{
    left: 57%;
 }
}
@media only screen and (max-width:480px) {
    
    .i18n-ar .banner .content-wrap>div h1, .i18n-ar .banner .cont-part p{
        text-align: center;
    }
    .i18n-ar .zshield-txt {
        left: 49%;
    }

}