/************
///// CSS Index \\\\\\

1. venobox video element css
2. header banner css
3. video section css
4. feature section css
5. try button section css 
6. screenshot section css
7. slider section css
8. priceplan section css
9. help section css
10. testimonial section css
11. let's try section css
12. subscribe section css
13. header with particle js page css
14. header banner css start
15. index page with video background header css
16. header bg parallax css start
***************/

/*=============== venobox video element css ===============*/
.venobox-video {
  position: relative; }
  .venobox-video .venobox {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px solid rgba(218, 208, 208, 0.63);
    background: #fff;
    color: #5e56d2;
    line-height: 70px;
    text-align: center;
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 35px); }
    .venobox-video .venobox:hover {
      background: rgba(218, 208, 208, 0.63);
      color: #fff;
      border: 6px solid #f5f5f5; }
    @media only screen and (max-width: 767px) {
      .venobox-video .venobox {
        width: 50px;
        height: 50px;
        line-height: 40px;
        top: calc(50% - 35px);
        left: calc(50% - 25px); } }
  .venobox-video img {
    width: 100%; }
  .venobox-video figcaption {
    position: absolute;
    bottom: 4%;
    left: 4%; }
    .venobox-video figcaption p {
      margin-bottom: 0;
      line-height: 1.2;
      font-size: 18px;
      text-transform: uppercase; }
      @media only screen and (max-width: 767px) {
        .venobox-video figcaption p {
          font-size: 12px;
          line-height: 1; } }
    .venobox-video figcaption a {
      display: inline-block;
      font-size: 12px;
      text-transform: uppercase;
      text-decoration: underline;
      color: #ffffff; }
      @media only screen and (max-width: 767px) {
        .venobox-video figcaption a {
          font-size: 10px; } }
/*================== header banner css ======================== */
.heading-banner {
  background-image: -moz-linear-gradient( 90deg, rgb(94,85,210) 0%, rgb(87,190,202) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(94,85,210) 0%, rgb(87,190,202) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(94,85,210) 0%, rgb(87,190,202) 100%);
  padding-top: 100px;
 }
 a.download-img-btn {
    display: inline-block;
    margin-right: 15px;
    margin-top: 40px;
}

  .heading-banner .banner-text {
    margin-top: 165px; }
    @media (max-width: 1399px) {
      .heading-banner .banner-text {
        margin-top: 50px; } }
    @media only screen and (max-width: 991px) {
      .heading-banner .banner-text {
        margin-top: 0px; } }
    @media only screen and (max-width: 767px) {
      .heading-banner .banner-text {
        margin-top: 0; } }
    .heading-banner .banner-text h1 {
      font-weight: 400; }
    .heading-banner .banner-text h3 {
      margin-top: 0;
      font-weight: 400;
      letter-spacing: 1px; }
      @media only screen and (max-width: 991px) {
        .heading-banner .banner-text h3 {
          letter-spacing: 0; } }
    .heading-banner .banner-text p {
      font-weight: 300; 
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .heading-banner .banner-text .banner-btn .watch-film {
      color: #ffffff;
      display: inline-block;
      margin-left: 25px;
      line-height: 60px; }
      .heading-banner .banner-text .banner-btn .watch-film i {
        height: 30px;
        width: 30px;
        border: 1px solid #ffffff;
        text-align: center;
        font-size: 15px;
        line-height: 30px;
        border-radius: 50%; }
    @media only screen and (max-width: 767px) {
       a.download-img-btn {
        margin-top: 10px;
       }
       .heading-banner .banner-text p{
        margin-bottom: 20px;
       }
        .heading-banner .banner-text{
          margin-bottom: 50px;
        }
      .heading-banner .banner-text .banner-btn {
        margin-bottom: 50px; } }
     @media (min-width: 768px) and (max-width: 991px){
         .banner-text h1{
          margin-top: 0;
          font-size: 44px;
         }
         .heading-banner .banner-text p{
          font-size: 16px;
         }
         a.download-img-btn {
          margin-right: 10px;
          margin-top: 0;
         }
         a.download-img-btn img{
          width: 190px;
         }
      }

/*=================== video section css ========================*/
.video-section {
  padding: 90px 0 70px; }
  .video-section .video-box {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: 670px;
    margin: auto;
    padding: 0px 0px 50px; }
    @media (max-width: 1199px) {
      .video-section .video-box {
        padding: 50px 0; } 
        .video-section .video-text {
          margin-top: 30px;
        }
    }
    @media only screen and (max-width: 767px) {
      .video-section .video-box {
        padding: 20px 0; } 
      .video-section {
        padding: 50px 0 20px;
      }
      .video-section .video-text {
        margin: 30px 0;
     }
    }
    .video-section .video-box .venobox-video{
      margin: 0;
      box-shadow: 0 20px 75px 0 rgba(59, 59, 117, 0.41); }
  .video-section .video-text {
    text-align: center;
  }
  .video-section .video-text h3{
    margin-top: 0;
  }
/*=================== feature section css ========================*/
.feature {
  padding: 90px 0 70px; }
  @media only screen and (max-width: 991px) {
    .feature {
      background: #e2eaff;
      padding: 50px 0; } }
  @media only screen and (max-width: 991px) {
    .feature .feature-header h2 {
      margin-bottom: 20px; } }
  .feature-header h2{
    margin-top: 0;
    color: #5868d2;
    font-weight: 400;
  }
  .feature-header h2 small{
    color: #969ba9;
    text-transform: capitalize;
  }
  .feature .box-col {
    margin-top: 80px; }
    @media only screen and (max-width: 991px) {
      .feature .box-col,
      .feature-box {
        margin-top: 40px; } }

    .feature .box-col .box,
    .feature-box .box {
      background: #ffffff;
      padding: 30px;
      border-radius: 25px;
      text-align: center;
      max-width: 370px;
      margin: 0 auto 45px;
      box-shadow: 0 10px 38px 0 rgba(59, 59, 117, 0.15); }
      .feature .box-col .box i,
      .feature-box .box i {
        background: url(../img/star_border.png) center center no-repeat;
        background-size: contain;
        width: 94px;
        height: 55px;
        color: #5868d2;
        line-height: 55px;
        text-align: center;
        font-size: 45px;
        padding: 0 0 0 13px; }
  @media (max-width: 1199px) {
    .feature .feature-phn {
      padding-top: 100px; } }
  @media only screen and (max-width: 991px) {
    .feature .feature-phn {
      padding-top: 0; } }
  @media only screen and (max-width: 767px) {
    .feature{
      padding-top: 80px;
    }
    .feature .feature-header h2{
      margin-bottom: 0;
    }
  }
/*=================== try button section css ========================*/
.try {
  text-align: center;
  background: #5e55d2;
  padding: 5px 0;
  transition: all .4s ease-in; }
  .try:hover {
    background: #8a84d7; }
/*=================== screenshot section css ========================*/
.screenshots {
  margin: 0; }
  @media only screen and (max-width: 767px) {
    .screenshots {
      margin: 50px 0 30px; } }
  .screenshots .screenshots-row {
    padding: 90px 0 0; }
    @media only screen and (max-width: 991px) {
      .screenshots .screenshots-row {
        padding: 25px 0; } }
    .screenshots .screenshots-row .screenshot-bg {
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat; }
    .screenshots .screenshots-row .screenshot-text {
      font-size: 15px;
      margin-top: 60px; }
      .screenshot-text h6{
        color: #969ba9;
        margin-bottom: 0;
        margin-top: 0;
        font-weight: 400;
      }
      .screenshots .screenshots-row .screenshot-text h2{
        color: #5868d2;
        font-weight: 400;
        margin-top: 0;
      }
      .screenshots .screenshots-row .screenshot-text p {
        line-height: 25px;
        margin-bottom: 30px; }
      .screenshots .screenshots-row .screenshot-text .sub-text {
        margin-bottom: 40px; }
      .screenshots .screenshots-row .screenshot-text h4 {
        margin-top: 0;
        font-size: 17px;
        color: #777;
        font-weight: 400;
        text-transform: uppercase;
        margin-bottom: 5px; }
      .screenshot-text-list{
        margin-bottom: 30px;
        overflow: hidden;
      }
       .screenshot-text-left{
        width: 12%;
        float: left;
       }
       .screenshot-text-left h4 span{
            font-family: "Open Sans", sans-serif;
            height: 50px;
            width: 50px;
            line-height: 50px;
            color: #fff;
            border-radius: 50%;
            display: inline-block;
            text-align: center;
            font-style: italic;
            font-size: 22px;
       }
       .screenshot-text-left.color-1 h4 span{
          background-color: #f28955;
       }
       .screenshot-text-left.color-2 h4 span{
         background-color: #4ee7a1;
       }
       .screenshot-text-left.color-3 h4 span{
         background-color: #50ace7;
       }
       .screenshot-text-left.color-4 h4 span{
         background-color: #f28955;
       }
       .screenshot-text-left.color-5 h4 span{
         background-color: #4ee7a1;
       }

       .screenshot-text-right{
        float: right;
        width: 88%;
       }
       .screenshots .screenshots-row .screenshot-text-right p{
        margin-bottom: 0;
       }
.screenshot-bg-img {
  margin: auto;
  -webkit-animation: 2s infinite alternate bouncing;
  animation: 2s infinite alternate bouncing; }

@keyframes bouncing {
  0% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    box-shadow: 0 14px 50px 20px rgba(46, 40, 78, 0.13); }
  100% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    box-shadow: 0 2px 8px 0 rgba(46, 40, 78, 0.33); } }
@media only screen and (max-width: 1399px) {
  .screenshot-text-left{
    width: 15%;
  }
  .screenshot-text-right{
    width: 85%;
  }
}
 @media only screen and (max-width: 767px) {
  .screenshot-text-left{
    width: 20%;
  }
  .screenshot-text-right{
    width: 80%;
  }
  .screenshots{
    margin-top: 50px;
  }
 }
/*=================== slider section css ========================*/
.slider {
  background: #5e55d2;
  position: relative; 
  padding: 90px 0;
}
  @media only screen and (max-width: 767px) {
    .slider {
      padding: 70px 0; } }
  .slider #carousel {
    height: 705px;
    position: relative;
    clear: both;
    overflow: hidden; }
    .slider #carousel img {
      display: none;
      /* hide images until carousel prepares them */
      cursor: pointer;
      /* not needed if you wrap carousel items in links */ }
    .slider #carousel:before {
      content: "";
      background: #5e55d2;
      background: -webkit-linear-gradient(left, #5e55d2 37%, transparent);
      background: -o-linear-gradient(right, #5e55d2 37%, transparent);
      background: -moz-linear-gradient(right, #5e55d2 37%, transparent);
      background: linear-gradient(to right, #5e55d2 37%, transparent);
      position: absolute;
      left: 20px;
      top: 0;
      z-index: 8;
      width: 190px;
      height: 100%;
      overflow: hidden; }
    .slider #carousel:after {
      content: "";
      background: #5e55d2;
      background: -webkit-linear-gradient(right, #5e55d2 37%, transparent);
      background: -o-linear-gradient(left, #5e55d2 37%, transparent);
      background: -moz-linear-gradient(left, #5e55d2 37%, transparent);
      background: linear-gradient(to left, #5e55d2 37%, transparent);
      position: absolute;
      right: 20px;
      top: 0;
      z-index: 8;
      width: 190px;
      height: 100%;
      overflow: hidden; }
    @media (max-width: 1199px) {
      .slider #carousel:before {
        left: 0; }
      .slider #carousel:after {
        right: 0; } }
    @media only screen and (max-width: 991px) {
      .slider #carousel:before, .slider #carousel:after {
        display: none; } }
  .slider .controller a {
    display: inline-block;
    position: absolute;
    top: calc(50% - 30px);
    z-index: 10; }
    .slider .controller a i {
      font-size: 90px;
      line-height: 90px;
      color: #e2eaff; }
  .slider .controller #prev {
    left: 0; }
  .slider .controller #next {
    right: 0; }
  .slider .frame img {
    height: 703px;
    bottom: -85px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    position: absolute; }
    @media only screen and (max-width: 767px) {
      .slider .frame img {
        display: none; } }
/*=================== priceplan section css ========================*/

.priceplan {
  padding: 90px 0 100px; }
  @media only screen and (max-width: 991px) {
    .priceplan {
      background: #e2eaff;
      padding: 100px 0 70px; } }
  @media only screen and (max-width: 767px) {
    .priceplan {
      padding: 50px 0; } }
   .priceplan-header h2{
    margin-top: 0;
    color: #5868d2;
    font-weight: 400;
  }
  .priceplan-header h2 small{
    color: #969ba9;
    text-transform: capitalize;
  }
  .priceplan .price-single {
    text-align: center;
    background: #ffffff;
    padding: 60px 40px 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    max-width: 370px;
    margin: 0 auto 0px; }
    .priceplan .price-single i {
      color: #5868d2;
      font-size: 80px; }
    .priceplan .price-single h4 {
      font-weight: 500;
      color: #5868d2;
      margin: 25px 0 15px;
      font-size: 31px;
      line-height: 1; }
    .priceplan .price-single p {
      font-size: 17px; }
  .priceplan .learn {
    display: inline-block; }
@media only screen and (max-width: 768px) {
  .priceplan .price-single {
    margin-bottom: 40px;
  }
}
.learn-box {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1200;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex; }
  .learn-box .learn-box-text {
    background: #ffffff;
    width: 550px;
    padding: 40px;
    margin: auto;
    border-radius: 25px;
    text-align: center;
    position: relative; }
    .learn-box .learn-box-text h2 {
      font-size: 31px;
      margin-top: 0; }
    .learn-box .learn-box-text p {
      font-size: 15px;
      height: 250px;
      overflow-y: scroll; }
    .learn-box .learn-box-text .learn-box-close {
      font-size: 21px;
      height: 25px;
      width: 25px;
      background: #ffffff;
      line-height: 25px;
      border-radius: 50%;
      position: absolute;
      top: -20px;
      right: -20px;
      cursor: pointer;}
    @media only screen and (max-width: 767px) {
      .learn-box .learn-box-text {
        width: 250px;
        padding: 20px; }
        .learn-box .learn-box-text h2 {
          font-size: 18px; }
        .learn-box .learn-box-text p {
          font-size: 14px;
          height: 220px; } }
/*=================== help section css ========================*/
.help {
  padding: 90px 0; }
  @media only screen and (max-width: 991px) {
    .help {
      padding: 50px 0 50px; } }
 .help-header h2{
    margin-top: 0;
    color: #5868d2;
    font-weight: 400;
  }
  .help-header h2 small{
    color: #969ba9;
    text-transform: capitalize;
  }

.bottomTab-in {
  box-shadow: 0 10px 38px 0 rgba(59, 59, 117, 0.15);
  border-radius: 25px;
  transition: all .4s ease; }

.code_block .single-block {
  padding: 10px 55px 40PX 25PX; 
  display: none;
}
   .code_block .single-block.in_activeted {
          display: block;
      }
  @media only screen and (max-width: 767px) {
    .code_block .single-block {
      padding: 20px 10px; } }
  .code_block .single-block h3 {
    font-size: 17px;
    border-bottom: 1px solid #e2eaff;
    line-height: 45px;
    margin-bottom: 20px; }
  .code_block .single-block p {
    color: #444444; }
  .code_block .single-block .block-height {
    height: 295px;
    overflow-y: scroll; }
  .code_block .single-block .help-list {
    padding: 0;
    list-style-type: none; }
    .code_block .single-block .help-list li {
      position: relative;
      margin-left: 40px;
      font-size: 17px;
      margin-bottom: 17px; }
      .code_block .single-block .help-list li span {
        margin-left: -40px;
        position: absolute;
        height: 25px;
        width: 25px; }
      .code_block .single-block .help-list li ol {
        padding-left: 0; }
        .code_block .single-block .help-list li ol li {
          margin-bottom: 0; }

.training, .activities, .member, .award {
  display: none; }

.developer_section_nav ul {
  margin: 0;
  padding-top: 75px;
  padding-bottom: 95px;
  padding-left: 0;
  border-right: 1px solid #e2eaff; }
  @media only screen and (max-width: 767px) {
    .developer_section_nav ul {
      padding-bottom: 0; } }
  .developer_section_nav ul a {
    color: #000;
    font-weight: 600;
    display: block;
    padding: 10px 40px; }
    @media only screen and (max-width: 767px) {
      .developer_section_nav ul a {
        padding: 5px 40px; } }
  .developer_section_nav ul li {
    text-align: left;
    list-style-type: none;
    border-bottom: 1px solid;
    border-bottom-color: #e2eaff; }
    @media only screen and (max-width: 767px) {
      .developer_section_nav ul li {
        text-align: center; } }
  .developer_section_nav ul li:first-child {
    border-top: 1px solid;
    border-top-color: #e2eaff; }
    @media only screen and (max-width: 767px) {
      .developer_section_nav ul li:first-child a {
        padding-top: 5px; } }
  @media only screen and (max-width: 767px) {
    .developer_section_nav ul li:last-child a {
      padding-bottom: 5px; } }
  .developer_section_nav ul .activeted {
    box-shadow: 0 3px 10px 0 rgba(59, 59, 117, 0.1); }

/*=================== testimonial section css ========================*/
.testimonial {
  padding: 40px 0 75px;
  background: #e2eaff; }
  @media only screen and (max-width: 991px) {
    .testimonial {
      padding: 40px 0 65px; } }
  .testimonial .owl-testimonial:before {
    content: "";
    background: #e2eaff;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #e2eaff, transparent);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #e2eaff, transparent);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #e2eaff, transparent);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #e2eaff, transparent);
    /* Standard syntax */
    position: absolute;
    left: -5px;
    top: 0;
    z-index: 1;
    width: 100px;
    height: 100%;
    overflow: hidden; }
  .testimonial .owl-testimonial:after {
    content: "";
    background: #e2eaff;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, transparent, #e2eaff);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, transparent, #e2eaff);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, transparent, #e2eaff);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, transparent, #e2eaff);
    /* Standard syntax */
    position: absolute;
    right: -5px;
    top: 0;
    z-index: 1;
    width: 100px;
    height: 100%;
    overflow: hidden; }
  @media only screen and (max-width: 991px) {
    .testimonial .owl-testimonial:before, .testimonial .owl-testimonial:after {
      width: 60px; } }
  @media only screen and (max-width: 767px) {
    .testimonial .owl-testimonial:before, .testimonial .owl-testimonial:after {
      width: 40px; } }
  .testimonial .owl-testimonial .item-single {
    margin-right: 15px;
    margin-left: 15px; }
    .testimonial .owl-testimonial .item-single blockquote {
      box-shadow: 0 10px 38px 0 rgba(59, 59, 117, 0.15);
      margin: 50px auto 60px;
      background: #ffffff;
      color: #000000;
      padding: 50px;
      min-height: initial;
      border: none;
      border-radius: 25px;
      font-size: 15px; }
      @media only screen and (max-width: 375px) {
        .testimonial .owl-testimonial .item-single blockquote {
          padding: 20px; } }
      .testimonial .owl-testimonial .item-single blockquote:before {
        display: none; }
      .testimonial .owl-testimonial .item-single blockquote p {
        font-style: normal;
        color: #000000; }
      .testimonial .owl-testimonial .item-single blockquote footer .testimoial-name {
        margin-left: 25px;
        float: right;
        display: inline-block;
        font-style: normal; }
        @media only screen and (max-width: 991px) {
          .testimonial .owl-testimonial .item-single blockquote footer .testimoial-name {
            float: none; } }
  .testimonial .owl-testimonial .owl-controls .owl-dots .owl-dot span {
    width: 25px;
    height: 7px;
    min-width: 1px;
    margin: 5px 7px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 1px solid #5e55d2; }
  .testimonial .owl-testimonial .owl-controls .owl-dots .active span {
    background: #3366cc; }
/*=================== let's try section css ========================*/
.lets {
  padding: 80px 0 25px;
  position: relative; }
  .help-header {
    margin-bottom: 40px;
  }
  @media only screen and (max-width: 991px) {
    .lets {
      padding: 50px 0 80px; } }
  @media only screen and (max-width: 767px) {
    .lets {
      padding: 50px 0; } }
/*=================== subscribe section css ========================*/
.download-image .kc_single_image{
  width: auto;
  margin-left: 20px;
  margin-top: 10px;
}
@media only screen and (max-width: 1024px) {
  .download-image .kc_single_image{
    margin-left: 65px;
  }
}
.subscribeSec {
  padding: 90px 0 60px; }
.subscribeSec h4{
  margin-top: 0;
}
.subscribe-top-image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: -162%;
    height: 100%;
    width: 100%;
    left:0;
    right: 0;
}
  @media only screen and (max-width: 767px) {
    .subscribeSec {
      padding: 50px 0; } 
      .subscribe-top-image{
        display: none;
      }
    }

.subscribe-form {
  max-width: 570px;
  margin: auto; }
  .subscribe-form label {
    font-size: 17px; }
  .subscribe-form .form-control {
    border-radius: 25px 0 0 25px;
    min-height: 50px;
    padding-left: 25px; }
  .subscribe-form .btn {
    border-radius: 0 25px 25px 0;
    min-height: 50px;
    padding-right: 25px;
    color: #ffffff;
    background: #5e55d2;
    font-weight: 700; }
  .subscribe-form button:active, .subscribe-form button:hover, .subscribe-form button:focus {
    outline: none; }
  span.input-group-btn input.btn.btn-secondary{
    border-color: #5e55d2;
  }
  .subscribe-form .input-group > .form-control{
    border-color: #ccc;
  }
  span.input-group-btn input.btn.btn-secondary:hover{
    color: #fff;
  }
/*================= Contact with us css =========================*/
.form-future_memb{
  margin-top: 10px;
}
.form-future_memb input[type="text"],
.form-future_memb input[type="email"]{
  height: 60px;
  border-radius: 40px;
  padding: 20px;
  margin-bottom: 30px;
}
.form-future_memb textarea.form-control{
  border-radius: 40px;
  padding: 20px;
  border: none;
}
.form-future_memb input[type="submit"]{
  width: 100%;
  margin-top: 20px;
  border-radius: 40px;
  padding: 20px 0;
}
.form-future_memb input[type="submit"]:hover{
  color: #fff;
  padding: 20px 0;
}

/*================= header with particle js page css =========================*/
.particle-header {
  position: relative;
  min-height: 800px; }
  @media (max-width: 1399px) {
    .particle-header {
      min-height: 670px; } }
#particles-js {
  position: absolute;
  width: 100%;
  height: 90%; 
  left: 0;
  top: 0;
  z-index: 1;
}

.bg-transparent {
  background: transparent !important;
  transition: .4s; }

.bg-primary {
  background: #5e55d2;
  transition: .4s; }

/*================== header banner css start ======================== */
.heading-banner-particle {
  padding-top: 200px; }
  @media (max-width: 1399px) {
    .heading-banner-particle {
      padding-top: 160px; } }
  @media only screen and (max-width: 767px) {
    .heading-banner-particle {
      padding-top: 90px; } }
  .heading-banner-particle .banner-text {
    position: relative;
    z-index: 2;
    margin-top: 80px; }
    @media (max-width: 1399px) {
      .heading-banner-particle .banner-text {
        margin-top: 80px; } }
    @media only screen and (max-width: 991px) {
      .heading-banner-particle .banner-text {
        margin-top: 0; } }
    .heading-banner-particle .banner-text h1 {
      font-weight: 400; }
    .heading-banner-particle .banner-text h3 {
      font-weight: 500;
      letter-spacing: 1px; }
      @media only screen and (max-width: 991px) {
        .heading-banner-particle .banner-text h3 {
          letter-spacing: 0; } }
    .heading-banner-particle .banner-text p {
      font-weight: 300; }
    .heading-banner-particle .banner-text .banner-btn .watch-film {
      color: #ffffff;
      display: inline-block;
      margin-left: 25px;
      line-height: 60px; }
      .heading-banner-particle .banner-text .banner-btn .watch-film i {
        height: 30px;
        width: 30px;
        border: 1px solid #ffffff;
        text-align: center;
        font-size: 15px;
        line-height: 30px;
        border-radius: 50%; }
    @media only screen and (max-width: 767px) {
      .heading-banner-particle .banner-text .banner-btn {
        margin-bottom: 50px; } }
  .heading-banner-particle .banner-form {
    position: relative;
    z-index: 2;
    max-width: 400px;
    background: #ffffff;
    margin-left: auto;
    padding: 50px 30px 10px 30px;
    border-radius: 25px;
    margin-bottom: 30px; 
  }
    @media only screen and (max-width: 767px) {
    .heading-banner-particle .banner-form {
        margin-bottom: 80px;
        margin-right: auto; } }
    .heading-banner-particle .banner-form form input {
      height: 50px;
      border-radius: 25px;
      padding-left: 20px;
      font-size: 16px; }
    .banner-form .select2-container--default .select2-selection--single {
        height: 50px;
        border-radius: 25px;
        margin-bottom: 20px;
        font-size: 16px;
        padding: 10px 12px;
    }
    .banner-form span.select2-selection.select2-selection--single:focus,
    input[type="submit"]:focus{
      outline: none;
    }
    .banner-form .select2-container--default .select2-selection--single .select2-selection__rendered{
      color: #555;
      font-size: 16px;
    }
    .banner-form .select2-search--dropdown{
      padding-top: 0;
      display: none;
    }
    .banner-form .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
      margin-bottom: 0;
    }
    .banner-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
    }
    input.wpcf7-form-control.wpcf7-submit.btn.btn-primary.form-control {
    background-color: #5e55d2;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    }
    .heading-banner-particle .banner-form form button {
      height: 50px;
      border-radius: 25px;
      text-transform: uppercase;
      font-weight: 700;
      background: #5e55d2;
      font-size: 16px; }

/*============= index page with video background header css ==============*/
.video-heading {
  background: none; }

.heading-banner-video .video_bg {
  width: 100%;
  background: rgba(21, 24, 57, 0.5); }
.heading-banner-video .banner-inner {
  max-width: 760px;
  min-height: 100vh;
  margin: auto;
  text-align: center;
  padding: calc(50vh - 160px) 10px 50px; }
  .heading-banner-video .banner-inner h1, .heading-banner-video .banner-inner h4, .heading-banner-video .banner-inner p {
    color: #ffffff; }
  .heading-banner-video .banner-inner h1 {
    font-size: 62px; }
  .heading-banner-video .banner-inner h4 {
    font-size: 23px;
    font-weight: 700;
    margin: 15px 0; }
  .heading-banner-video .banner-inner p {
    font-size: 20px;
    margin-bottom: 50px; }
  .heading-banner-video .banner-inner .subscribe-form .btn {
    padding-left: 30px;
    padding-right: 30px; }
  @media only screen and (max-width: 767px) {
    .heading-banner-video .banner-inner {
      padding: 150px 15px 70px;
      min-height: 90vh; }
      .heading-banner-video .banner-inner h1 {
        font-size: 42px; }
      .heading-banner-video .banner-inner h4 {
        font-size: 19px; }
      .heading-banner-video .banner-inner p {
        font-size: 15px; } }
  @media only screen and (max-width: 375px) {
    .heading-banner-video .banner-inner {
      padding: 80px 15px 70px; }
      .heading-banner-video .banner-inner p {
        margin-bottom: 20px; } }
.heading-banner-video .down-scroll {
  display: inline-block;
  color: #ffffff;
  font-size: 41px;
  bottom: 50px;
  left: 0;
  right: 0;
  position: absolute; }
  @media only screen and (max-width: 767px) {
    .heading-banner-video .down-scroll {
      bottom: 20px; } }

/*============= header bg parallax css start  ==================*/
.heading-banner-parallax {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; }
  .heading-banner-parallax .parallax-banner-in {
    position: relative;
    padding-top: 200px; }
    @media (max-width: 1399px) {
      .heading-banner-parallax .parallax-banner-in {
        padding-top: 130px; } }
    .heading-banner-parallax .parallax-banner-in #effect_box {
      position: relative;
      width: 470px;
      height: 600px; }
    .heading-banner-parallax .parallax-banner-in #parallax_one {
      position: absolute;
      transform: scale(0.91) translateX(115px) translateY(-100px); }
      @media (max-width: 1399px) {
        .heading-banner-parallax .parallax-banner-in #parallax_one {
          transform: scale(0.8) translateX(140px) translateY(-100px); } }
    .heading-banner-parallax .parallax-banner-in #parallax_two {
      position: absolute;
      transform: scale(0.9) translateX(-40px) translateY(80px); }
      @media (max-width: 1399px) {
        .heading-banner-parallax .parallax-banner-in #parallax_two {
          transform: scale(0.7) translateX(0px) translateY(0px); } }
  .heading-banner-parallax .banner-text {
    margin-top: 300px;
    margin-bottom: 130px;
    text-align: right; }
    @media (max-width: 1399px) {
      .heading-banner-parallax .banner-text {
        margin-top: 200px;
        margin-bottom: 110px; } }
    @media only screen and (max-width: 991px) {
      .heading-banner-parallax .banner-text {
        margin-top: 80px; } }
    @media only screen and (max-width: 767px) {
      .heading-banner-parallax .banner-text {
        margin-top: 0; } }
    .heading-banner-parallax .banner-text h1 {
      font-weight: 400; }
    .heading-banner-parallax .banner-text h3 {
      font-weight: 500;
      letter-spacing: 1px; }
      @media only screen and (max-width: 991px) {
        .heading-banner-parallax .banner-text h3 {
          letter-spacing: 0; } }
    .heading-banner-parallax .banner-text p {
      font-weight: 300; }
    .heading-banner-parallax .banner-text .banner-btn .watch-film {
      color: #5e55d2;
      display: inline-block;
      margin-left: 25px;
      line-height: 60px; }
      .heading-banner-parallax .banner-text .banner-btn .watch-film i {
        height: 30px;
        width: 30px;
        border: 1px solid #5e55d2;
        text-align: center;
        font-size: 15px;
        line-height: 30px;
        border-radius: 50%; }
    @media only screen and (max-width: 767px) {
      .heading-banner-parallax .banner-text .banner-btn {
        margin-bottom: 50px; } }