
/** video-section **/

.video-section{
  position: relative;
  overflow: hidden;
  padding: 280px 0px;
}

.video-section:before{
  position: absolute;
  content: '';
  background: #141416;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0.3;
  z-index: 1;
}

.video-section .pattern-layer-2{
  position: absolute;
  left: -200px;
  bottom: -542px;
  width: 910px;
  height: 816px;
  border-radius: 50%;
  border: 100px solid rgba(255, 255, 255, 0.10);
}

.video-section .bg-layer{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.video-section .content-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  z-index: 2;
}

.video-section .text-box h2{
  position: relative;
  display: block;
  font-size: 150px;
  line-height: 160px;
}

.video-section .text-box h2 span{
  position: relative;
  display: inline-block;
  margin-left: 105px;
  z-index: 1;
}

.video-section .text-box h2 span:before{
  position: absolute;
  content: '';
  width: 434px;
  height: 90px;
  left: 3px;
  top: 15px;
  z-index: -1;
}

.video-section .text-box h2 i{
  position: relative;
  display: inline-block;
  font-size: 120px;
  bottom: 5px;
  margin-left: 15px;
}

.video-section.style-two .text-box h2 span:before{
  background: #141416;
}

.video-section.style-two:before{
  display: none;
}

.video-section.style-two .text-box h2 strong{
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 1);
}

.video-section.style-two .curve-text{
  background: transparent;
}

.video-section.style-two .curve-text .curved-circle{
  color: #fff;
}

.video-section.style-two .curve-text .curved-circle .char10, 
.video-section.style-two .curve-text .curved-circle .char11, 
.video-section.style-two .curve-text .curved-circle .char12, 
.video-section.style-two .curve-text .curved-circle .char13, 
.video-section.style-two .curve-text .curved-circle .char14, 
.video-section.style-two .curve-text .curved-circle .char15, 
.video-section.style-two .curve-text .curved-circle .char16, 
.video-section.style-two .curve-text .curved-circle .char17{
  color: #fff;
}

.video-section.style-two .curve-text .icon-box{
  border-color: #fff;
}

.video-section.style-two .curve-text .icon-box a{
  color: #fff;
}

.video-section.style-two .big-text{
  position: absolute;
  left: 90px;
  top: 130px;
  font-size: 150px;
  color: rgba(255, 255, 255, 0.20);
}

.video-section.style-two .rating-box{
  position: absolute;
  right: 100px;
  bottom: 130px;
  width: 290px;
  text-align: center;
}

.video-section.style-two .rating-box h3{
  position: relative;
  display: block;
  font-size: 52px;
  line-height: 60px;
  text-transform: capitalize;
  margin-bottom: 13px;
}

.video-section.style-two .rating-box p{
  color: #fff;
  margin-bottom: 12px;
  text-transform: capitalize;
}

.video-section.style-two .rating-box .rating{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-section.style-two .rating-box .rating li{
  font-size: 18px;
  color: #fff;
  margin: 0px 2px;
}

.video-section.style-two .image-layer{
  position: absolute;
  right: 638px;
  bottom: 120px;
  border-radius: 50%;
}

.video-section.style-two .image-layer img{
  width: 100%;
  border-radius: 50%;
}

.video-section .pattern-layer .pattern-1{
  position: absolute;
  left: 89px;
  bottom: 222px;
  width: 116px;
  height: 88px;
  background-repeat: no-repeat;
}

.video-section .pattern-layer .pattern-2{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 712px;
  height: 271px;
  background-repeat: no-repeat;
}

.video-section .pattern-layer .pattern-3{
  position: absolute;
  top: 192px;
  right: 147px;
  width: 200px;
  height: 88px;
  background-repeat: no-repeat;
}

.video-section .pattern-layer .pattern-4{
  position: absolute;
  right: 200px;
  bottom: 220px;
  width: 291px;
  height: 276px;
  background-repeat: no-repeat;
}

.video-section .pattern-layer .pattern-5{
  position: absolute;
  right: 765px;
  bottom: 247px;
  width: 69px;
  height: 69px;
  background-repeat: no-repeat;
  -webkit-animation: zoom-fade 3s infinite linear;
  animation: zoom-fade 3s infinite linear;
}


/** rtl-css **/



/** responsive-css **/

@media only screen and (max-width: 1200px){

}

@media only screen and (max-width: 991px){
  .video-section .content-box{
    position: relative;
    display: block;
  }

  .video-section .text-box{
    margin-bottom: 30px;
  }

  .video-section .text-box h2 span{
    margin-left: 0px;
  }

  .video-section.style-two .big-text{
    display: none;
  }

  .video-section{
    padding-top: 180px;
  }
}

@media only screen and (max-width: 767px){
  .video-section{
    padding: 70px 0px;
  }

  .video-section .text-box h2{
    font-size: 100px;
    line-height: 120px;
  }

  .video-section .text-box h2 span:before{
    display: none;
  }

  .video-section .text-box h2 i{
    font-size: 80px;
  }

  .video-section.style-two .image-layer{
    display: none;
  }

  .video-section .pattern-layer{
    display: none;
  }
}

@media only screen and (max-width: 599px){
  .video-section.style-two .rating-box{
    position: relative;
    right: 0px;
    bottom: 0px;
    padding: 0px 15px;
    width: 100%;
  }
}

@media only screen and (max-width: 499px){
  .video-section .text-box h2{
    font-size: 60px;
    line-height: 70px;
  }

  .video-section .text-box h2 i{
    font-size: 50px;
  }
}









































