h1{
  font-size: 60px;
}
.banner p{
  font-size:19px;
  margin-bottom: 30px;
}
.banner .content-wrap {
  text-align: center;
  max-width: 820px;
  padding: 80px 0px 120px;
}

.high-light .content-wrap {
  text-align: center;
}

.bottom-cta-wrap {
  padding: 100px 0px 130px;
  max-width: 800px;
}
.bottom-cta-wrap span{
  font-size: 14px;
  position: relative;
  top: -6px;
}
.bottom-cta-wrap h2{
  margin-bottom: 30px
}
@media screen and (min-width:991px){
  .act-btn{
    
  padding: 10px 32px;
  font-size: 17px;
  }
  p{
    font-size: 18px;
  }
}
.sticky-features{
  padding:110px 0px;
}
.sticky-features .content-wrap{
  max-width: 1170px;
}
.sticky-features h2,.high-light h2,.bottom-cta-wrap  h2,.faq-section h2{
  font-size: 44px;
  font-family: var(--primaryfont-bold);
}

.high-light {
  text-align: center;
  padding: 100px 0 80px;
  background-color: #fff06f;
}
.high-light .content-wrap{
  max-width:800px;
}
.sticky-features h3{
  font-size: 36px;
  font-family: var(--primaryfont-bold);
  position: relative;
  z-index: 1;
}
.sticky-features-inner-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sticky-features-inner-wrap>div{
  width: 45%;
  box-sizing: border-box;
  position: relative;
}
.zf-sticky{
  position: sticky;
  top: 100px;
  margin-bottom: 20px;
  max-width: 460px;
}
.sticky-right-cont ul li:not(:last-child){
  margin-bottom: 50px;
}
.sticky-right-cont ul li h3::before{
  position: absolute;
  content: "";
  width: 55px;
  height: 55px;
  background-color: #d2f9e6;
  border-radius: 100%;
  z-index: -1;
  left: -26px;
  top: -5px;
}

/*toggle-section*/
     .toggle-section{
       background-color: #0b0b0b;
       color: #fff;
       padding: 120px 0;
     }
     .toggle-section .content-wrap{
       max-width: 1170px;
       overflow: hidden;
     }
     .toggle-inner-wrap{
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       overflow: unset;
     }
     .toggle-section .toggle-inner-wrap>div{
       width: 47%;
       box-sizing: border-box;
       position: relative;
     }
     /*toggle-left*/
     .toggle-inner-wrap .toggle-left h2{
       max-width: 500px;
       font-size: 40px;
       font-family: var(--primaryfont-bold);
     }
     .no-desktop{
       display: none;
     }
     .toggle-inner-wrap ul{
       margin-top:60px;
       position: relative;
     }
     .toggle-inner-wrap .toggle-left li {
       padding: 20px 20px 25px 50px;
       border-bottom: 1px solid #444;
       position: relative;
     }
     .toggle-inner-wrap .toggle-left li p{
       margin:20px 0px 0px;
     }
     .toggle-inner-wrap .toggle-left li h3{
       cursor: pointer;
       z-index: 2;
       margin-bottom: 0px;
       font-size: 28px;
       font-family: var(--primaryfont-bold);
       position: relative;
     }
     .toggle-inner-wrap .toggle-left li::before{
       position: absolute;
       content: "";
       width: 10px;
       height: 10px;
       border-left: 2px solid #fff;
       border-bottom: 2px solid #fff;
       left: 6px;
       top: 30px;
       transform: rotate(-45deg);
     }
     .toggle-inner-wrap .toggle-left li.zactive::before{
       transform: rotate(135deg);
       z-index: 1;
       top:35px;
     }
     .toggle-inner-wrap .toggle-right p {
       font-size: 20px;
     }
     .toggle-inner-wrap .toggle-right li{
       position: absolute;
       opacity: 0;
       transition: opacity 1000ms ease-in-out;
       text-align: center;
       z-index: -1;
       top: 20px;
     }   
     .toggle-inner-wrap .toggle-right li.active{
       opacity: 1;
       z-index: 1;
     }  
     .toggle-right li img{
       width: 90%;
       max-width: 400px;
     }
     .toggle-right li.forums img{
       max-width: 500px;
     }
.toggle-right li.mobile img,.toggle-right li.multi img{
  max-width: 100%
}
.toggle-right li.dashboards img{
  max-width: 600px;
  width: 100%;
}

 .faq-section .content-wrap {
       max-width: 800px;
       width: 90%
     }
     .faq-section h2 {
       text-align: center;
       position: relative;
       padding-bottom: 30px;
       font-size: 34px;
     }
     .faq-section ul {
       margin: 20px auto 150px;
     }
     .faq-section h2:after {
       content: '';
       position: absolute;
       width: 40px;
       height: 1px;
       background: #666;
       bottom: 0;
       left: 50%;
       margin-left: -20px;
       opacity: 0
     }
     .faq-section ul li {
       width: 100%;
       box-sizing: border-box;
       margin: 0 0 30px
     }
     
     .faq-section ul li {
       padding: 20px 0 10px;
       border-bottom: 1px solid #e5e5e5;
       margin-bottom: 0
     }
     
     .faq-section ul li:nth-child(1) {
       border-top: 1px solid #e5e5e5
     }
     
     .faq-section ul li p {
       width: 95%
     }
     
     .faq-section ul li h3 {
       font-size: 25px;
       margin-bottom: 15px;
       cursor: pointer;
       position: relative;
       padding-right: 20px;
       font-family: var(--primaryfont-bold)
     }
     
     h3 .arrow {
       position: absolute;
       right: 0;
       top: 0;
       transition: all 500ms ease;
       width: 30px;
       height: 30px
     }
     
     .i18n-ar h3 .arrow{
       right: unset;
       left: -10px
     }
     
     h3 .arrow::before{
       content: '';
       width: 0;
       height: 0;
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-top: 8px solid #333;
       position: absolute;
       top: 17px;
       right: 0;
       border-top: 8px solid #333
     }
     h3 .arrow::after{
       content: '';
       width: 0;
       height: 0;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-top: 6px solid #fff;
       position: absolute;
       top: 16px;
       right: 2px
     }
     li.zactive h3 .arrow{
       transform: scaleY(-1);
       transform-origin: center;
       top: 10px
     }

@media screen and (max-width: 991px){
  .zf-sticky {
      position: relative;
      top: 0;
      margin: 0px auto 50px;
      text-align: center;
  }
  .sticky-features-inner-wrap>div{
      width:100%;
      max-width: 70%;
      margin:0 auto;
  }
  .sticky-features h2,.high-light h2,.bottom-cta-wrap  h2 {
      font-size: 35px;
  }
  .sticky-features h3{
      font-size: 25px;
  }
  .sticky-right-cont ul li h3::before{
      width: 45px;
      height: 45px;
  }
       .toggle-inner-wrap .toggle-left h2{
           font-size: 35px;
       }
       .toggle-inner-wrap .toggle-left li h3{
           font-size: 26px;
       }
       .toggle-inner-wrap .toggle-right p {
           font-size: 18px;
       }
       .toggle-right li img {
           max-width: 75%;
       }
     }
@media screen and (max-width: 767px){
      .sticky-features-inner-wrap>div{
          max-width: 95%;
      }
  h1 {
  font-size: 40px;
}
  .banner p {
  font-size: 18px;
}
  
  .banner .content-wrap {
  padding: 60px 0px 60px;
}
  .high-light {
    text-align: center;
    padding: 80px 0 60px;
  }
  .sticky-features,.toggle-section {
    padding: 80px 0px;
}
  .bottom-cta-wrap {
    padding: 80px 0px 90px;
  }
  .toggle-inner-wrap .toggle-left li {
    padding-right:0px;
    padding-left:34px

  }
  .toggle-inner-wrap .toggle-left li h3 {
    font-size: 24px;
}
  .faq-section h2{
    margin-bottom:0px;
    padding-bottom: 30px;
  }
       .toggle-inner-wrap .toggle-right{
           display: none;
       }
       .toggle-section .no-desktop{
           display: block;
       }
       .toggle-inner-wrap ul{
         margin-top: 40px;
       }
       .toggle-section .toggle-inner-wrap .toggle-left{
           width: 100%;
           max-width: 90%;
           margin:0 auto;
       }
       .faq-section ul{
         margin-bottom: 90px;
       }
     }