:root{
  /*--primary-color: #ff336a;*/
  /*--primary-color: #bb1b47;*/
  --primary-color: #e6174d;
  --anti-primary: #19e8b2;
  /*--anti-primary: #11e7b0;*/
  --text-color-1: #111111;
  --text-color-2: #cccccc;
  --text-color-3: #707070;
  --text-color-4: #333333;
  --text-color-5: #ffffff;
  --bg-white: #fff;
}
h1, h2, h3, h4, h5, h6, p, span, ul, li, a, .btn-default, label, textarea {
	margin: 0;
	padding: 0;
}
* {
	margin: 0;
	padding: 0;
}
a:hover,a:focus{
	text-decoration: none;
}


body {
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif
}
/*body.lock-scroll {*/
/*  overflow: hidden;*/
/*}*/

/*.container{
	max-width: 1175px;
}*/
.lock-scroll .owl-carousel,
.lock-scroll footer{
    z-index: -2;
}
/******GENERAL/ COMMON STYLES******/
.px-0{
  padding-left: 0;
  padding-right: 0;
}
.py-10{
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-30{
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.py-40{
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.py-50{
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.pb-20{
  padding-bottom: 20px !important;
}
.pb-30{
  padding-bottom: 30px !important;
}
.pt-20{
  padding-top: 20px!important
}
.pt-30{
  padding-top: 30px!important
}
.anti-primary-btn{
  padding: 14px 20px;
  color: #fff;
  background: var(--anti-primary);
  font-size: 14px;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
}
.anti-primary-btn:hover{
  color: #fff;
}
.white-stroke{
  -webkit-text-stroke: 1.4px #fff;
  color: #000;
}
.black-stroke{
  -webkit-text-stroke: 1.4px #111;
  color: #fff;
}
.theme-sec-title{
  color: var(--primary-color);
  font-size: 16px;
  letter-spacing: 14px;
  font-weight: 600;
  padding-bottom: 30px;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.theme-badge{
  background: var(--primary-color);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  letter-spacing: normal;
  font-weight: 600;
  text-transform: uppercase;
  padding: 10px;
}
.read-more-btn{
  font-size: 14px;
  letter-spacing: 3px;
  position: relative;
  color: #707070;
  padding: 20px;
}
.read-more-btn:before{
  content: '';
  position: absolute;
  background: #e8e8e8;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 50%;
  left: 0%;
  transform: translate(0, -50%);
  z-index: -1;
  transition: all 0.5s ease-in-out;
}
.read-more-btn:hover:before{
  background: var(--primary-color);
  left: 50%;
  transform: translate(-50%, -50%);
}
.read-more-btn:hover{
  color: #111;
}
.dark-bg-sec .read-more-btn{
  color: #707070;
}
.dark-bg-sec .read-more-btn:before{
  background: #282828;
}
.dark-bg-sec .read-more-btn:hover:before{
  background: var(--primary-color);
}
.dark-bg-sec .read-more-btn:hover{
  color: #fff;
}
.over-hide{
  overflow: hidden;
}
p{
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}
p a{
  color: var(--primary-color);
}
.slide-in-left{
  position: relative;
  left: calc(-100% + 1px);
  animation: slide-in-nav 0.7s ease-in-out;
  animation-fill-mode: both;
}
.hire-developer{
  display: block;
}
.hire-developer span{
  display: block;
  font-size: 10.6vw;
  line-height: 8.8vw;
  letter-spacing: -.6vw;
  margin-left: -.7vw;
  font-weight: 600;
}
.hire-developer span:nth-of-type(1){
  color: var(--text-color-1);
  font-size: 5vw;
  line-height: 5vw;
  margin-left: -.3vw;
  letter-spacing: 0;
}
.text-cap{
  text-transform: uppercase;
}
.left-circle{
  position: relative;
  padding-left: 25px !important;
}
.left-circle:before{
  content: "";
  border: 1px solid var(--primary-color);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 17px;
  width: 17px;
  height: 17px;
}
.dark-bg-sec{
  position: relative;
}
.dark-bg-sec:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 80px);
  height: 100%;
  background: #111111;
  z-index: -3;
}
.bg-circle{
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 100%;
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: all 1.3s;
}
.bg-circle.flash{
  animation: flash 1.3s ease-in-out;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.bg-circle-small{
  width: 5.55556%;
  padding-top: 5.55556%;
}
.bg-circle-big{
  width: 33.33333%;
  padding-top: 33.33333%;
}
.dark-bg-sec .bg-circle{
  border-color: rgba(255, 255, 255, 0.11) !important;
}
/*CUSTOM CURSOR*/
.cursor{
  mix-blend-mode: difference;
}
.cursor-dot, .cursor-dot-outline {
 pointer-events: none;
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 opacity: 0;
 transform: translate(-50%, -50%);
 transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.cursor-dot {
 width: 6px;
 height: 6px;
 background-color: #fff;
 transition: width 0.25s, height 0.25s;
 display: flex;
 justify-content: center;
 align-items: center;
}
.cursor-dot span{
  transform: scale(0);
  opacity: 0;
  transition: all 0.2s;
  transition-delay: 0.1s; 
  font-size: 12px;
  font-weight: 800;
  color: #000;
  padding: 0 2px;
  text-align: center;
}
.cursor-dot-outline {
 width: 32px;
 height: 32px;
 background-color: transparent;
 border: 1px solid #fff;
 transition: width 0.25s, height 0.25s;
}
.circle-list{
  list-style-type: none;
}
.circle-list li{
  position: relative;
  padding: 7px 0 7px 25px;
}  
.circle-list li:before{
  content: "";
  border: 1px solid var(--primary-color);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  height: 16px;
}
.circle-list li,
.circle-list li a,
.circle-list li p{
  color: #111;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
/*CUSTOM CURSOR*/ 
/******GENERAL/ COMMON STYLES******/
/****MAIN WRAPPER****/
body{
  min-height: 100vh;
}
header.abs-header{
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
header.abs-header .logo-wrap img {
  /*filter: invert(1);*/
  max-width: 230px;
}
header .logo-wrap img.white-text-logo{
  display: none;
}
header..logo-wrap img.black-text-logo{
  display: inline-block;
}
header.abs-header .logo-wrap img.black-text-logo{
  display: none;
}
header.abs-header .logo-wrap img.white-text-logo{
  display: inline-block;
}
.main-wrapper{
  min-height: 100%;
  min-height: 100vh;
  background: #fff;
  background: var(--white);
  -webkit-transition: all .6s;
  transition: all .6s;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  overflow: hidden;
}
/****MAIN WRAPPER ENDS****/
/****SIDEBAR WRAPPER****/
.sidebar-wrapper{
  mix-blend-mode: difference;
  position: fixed;
  width: 8.33333%;
  height: 100%;
  z-index: 1;
  right: 0;
  top: 0;
}
.side-bar-inner{
  position: relative;
  mix-blend-mode: difference;
  width: 100%;
  height: 100%;
}
#nav-toggle-btn{
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #cccccc;
  border: none;
  outline: none;
}
#nav-toggle-btn i{
  color: #333333;
}
#nav-toggle-btn.active i:before{
  content: '\f00d'
}
.sidebar-wrapper .side-nav{
  width: 100%;
  height: 100%;
  border-left: 1px solid #2c2c2c;
}
.sidebar-wrapper .side-nav ul{
  list-style-type: none;
  width: 100%;
  transform: rotate(90deg) translate(30px, 0px);
  display: flex;
}
.sidebar-wrapper .side-nav ul li{
  padding: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar-wrapper .side-nav ul li a{
  color: #ccc;
  font-size: 15px;
  white-space: nowrap;
  transition: all 0.25s;
}
.sidebar-wrapper .side-nav ul li a:hover{
  color: var(--anti-primary);
}
.sidebar-wrapper .side-nav ul li .anti-primary-btn{
  color: #000;
}
.sidebar-wrapper .side-nav ul li .anti-primary-btn:hover{
  color: #fff;
  font-weight: 500;
}
/****SIDEBAR WRAPPER ENDS****/
/******MAIN MENU STARTS******/
.main-nav-wrap{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: calc(100% - 80px);
  height: 0%;
  display: none;
  z-index: 100;
}
.main-nav-wrap.active{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
/*header .logo-wrap.active-nav{
  position: absolute;
  z-index: 1;
}
header .logo-wrap.active-nav img{
  filter: invert(1);
}*/
.main-nav-wrap .drop-col-wrap{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.main-nav-wrap .drop-col-wrap .row{
  height: 100%;
  margin: 0;
}
.main-nav-wrap .drop-col-wrap .drop-col{
  border-right: 1px solid rgba(97, 60, 60, 0.11);
  border-right-color: #242424; 
  height: 0;
}
.main-nav-wrap.active .drop-col-wrap .drop-col{
  animation: bar-drop 1s ease-in-out;
  animation-fill-mode: both;
}
.main-nav-wrap.active .drop-col-wrap .drop-col:nth-of-type(1){
  animation-delay: 0s;
  background-color: #090909;
}
.main-nav-wrap.active .drop-col-wrap .drop-col:nth-of-type(2){
  animation-delay: 0.1s;
  background-color: #090909;
}
.main-nav-wrap.active .drop-col-wrap .drop-col:nth-of-type(3){
  animation-delay: 0.2s;
  background-color: #111;
}
.main-nav-wrap.active .drop-col-wrap .drop-col:nth-of-type(4){
  animation-delay: 0.3s;
  background-color: #111;
}
.main-nav-wrap.active .drop-col-wrap .drop-col:nth-of-type(5){
  animation-delay: 0.4s;
  background-color: #111;
}
.main-nav-wrap.active .drop-col-wrap .drop-col:nth-of-type(6){
  animation-delay: 0.5s;
  background-color: #111;
}
@keyframes bar-drop {
  0% {
    height: 0;
  }
  100% {
    height: 100vh;
  }
}
.main-nav-wrap .main-navigation{
  width: 100%;
  display: none;
  opacity: 0;
  position: relative;
  z-index: 3;
  top: 0px;
}
.main-nav-wrap.active .main-navigation{
  display: block;
  animation: fade-in 0.75s ease-in-out;
  animation-delay: 1s;
  animation-fill-mode: both;
  /*height: calc(100vh - 100px);*/
  height: 75%;
  overflow: auto;
}
.main-nav-wrap.active .main-navigation::-webkit-scrollbar {
  width: 10px;
}
.main-nav-wrap.active .main-navigation::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.main-nav-wrap.active .main-navigation::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.main-nav-wrap .nav-tabs-btns a{
  font-size: 34px;
  font-weight: 600;
  transition: all 0.25s;
  padding: 12px 0;
  line-height: 1;
  text-transform: uppercase;
}
.main-nav-wrap .nav-tabs-btns a.active,
.main-nav-wrap .nav-tabs-btns a:hover{
  color: #fff;
  background: transparent;
}
.main-nav-wrap .nav-group{
  padding-bottom: 20px;
  position: relative;
}
.main-nav-wrap .nav-tabs-content .tab-pane .main-nav-col{
  overflow: hidden;
}
.main-nav-wrap .nav-tabs-content .tab-pane .nav-group{
  left: calc(-100% + 1px);
  padding-right: 5px;
}
.main-nav-wrap .nav-tabs-content .tab-pane.active .nav-group{
  animation: slide-in-nav 0.7s ease-in-out;
  animation-fill-mode: both;
}
.main-nav-wrap .nav-tabs-content .tab-pane:nth-of-type(1).active .nav-group{
  animation-delay: 1s;
}
@keyframes slide-in-nav {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
.main-nav-wrap .nav-group .group-title a{
  font-weight: 600;
  color: #fff;
  font-size: 15px;
  line-height: 1.1;
  display: block;
}
.main-nav-wrap .nav-group ul{
  list-style-type: none;
}
.main-nav-wrap .nav-group li a{
  font-size: 14px;
  color: #fff;
  position: relative;
  padding: 8px 0 8px 24px;
  display: inline-block;
}
.main-nav-wrap .nav-group li a:before{
  content: "";
  border: 1px solid #ff336a;
  border: 1px solid var(--primary-color);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 10px;
  width: 16px;
  height: 16px;
}
.main-nav-wrap .logo-wrap{
  padding: 20px;
  position: relative;
  z-index: 1;
}
.nav-video-wrap{
  overflow: hidden;
  max-height: 520px;
}
.nav-video-wrap .video-wrap{
  display: block;
  height: 100%;
  max-height: 520px;
}
.nav-video-wrap .video-wrap video{
  height: 100%;
  max-height: 520px;
}
.main-nav-wrap .logo-wrap img{
  
}
.main-nav-wrap.active .logo-wrap img{
  /*filter: invert(1);*/
}
/******MAIN MENU ENDS******/
.content-wrapper {
  position: relative;
  min-height: 100%;
  z-index: 0;
}
header .logo-wrap{
  padding: 20px 0;
  width: 200px;
}
.bg-lines-wrap, .dark-bg-lines{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.dark-bg-lines{
  z-index: -2;
}
.bg-lines-wrap .row,
.dark-bg-lines .row{
  height: 100%;
  margin: 0;
}
.bg-lines-wrap .bg-line-col:nth-of-type(even){
  border-right: 1px solid #e5e5e5;
}
.dark-bg-lines .bg-line-col{
  height: 100%;
}
.dark-bg-lines .bg-line-col:nth-of-type(even){
  border-right: 1px solid #272727;
}
/*-*-*-*INDEX PAGE START*-*-*-*/
/*INDEX SEC 1*/
.index-sec-1{
  padding: 60px 0;
  position: relative;
}
.index-1-text .heading span{
  display: block;
  font-size: 14vw;
  line-height: 10.8vw;
  letter-spacing: -.5vw;
  text-indent: -0.9vw;
  font-weight: 600;
  text-transform: uppercase;
}
.index-1-text .heading span.small{
  color: #111;
  font-size: 5vw;
  line-height: 5vw;
  text-indent: -0.2vw;
  text-transform: capitalize;
}
.index-sec-1 .bg-circle:nth-of-type(1){
  top: 10vw;
}
.index-sec-1 .bg-circle:nth-of-type(2){
  top: 2vw;
}
.index-sec-1 .bg-circle:nth-of-type(3){
  top: 2vw;
}
.index-sec-1 .bg-circle:nth-of-type(4){
  top: 40vw;
}
/*INDEX SEC 2*/
.index-sec-2{
  padding: 60px 0;
  position: relative;
}
.index-2-text .heading{
  font-size: 3.1vw;
  line-height: 3.7vw;
  letter-spacing: -0.03vw;
  color: var(--text-color-1);
  font-weight: 700;
}
.index-2-text p{
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}
.index-2-text p a{
  color: var(--primary-color);
}
p.b-text{
  color: var(--text-color-1);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
.number-wrap p{
  color: var(--text-color-1);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
.number-wrap .number{
  color: var(--primary-color) !important;
  font-size: 70px;
  line-height: 1;
}
.index-sec-2 .bg-circle:nth-of-type(1){
  top: 5vw;
}
/*INDEX SEC 3*/
.index-sec-3{
  padding: 60px 0;
  position: relative;
}
.index-3-text .heading{
  font-size: 3.1vw;
  line-height: 3.7vw;
  letter-spacing: -0.03vw;
  color: var(--text-color-1);
  font-weight: 700;
}
.service-item .service-icon{
  margin-bottom: 20px;
}
.service-item .service-name{
  color: var(--text-color-1);
  font-size: 3.6vw;
  line-height: 3.6vw;
  font-weight: 700;
  padding-bottom: 15px;
  display: block;
  position: relative;
  left: -2px;
}
.service-item .service-desc ul{
  list-style-type: none
}
.service-item .service-desc ul li{
  position: relative;
  padding: 8px 0 8px 25px;
}
.service-item .service-desc ul li:before{
  content: "";
  border: 1px solid var(--primary-color);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 18px;
  width: 16px;
  height: 16px;
}
.service-item .service-desc ul li a{
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color-1);
}
.index-services-slider .owl-dots{
  display: flex;
  justify-content: flex-start;
}
.index-services-slider .owl-dots .owl-dot{
  outline: none;
}
.index-services-slider .owl-dots .owl-dot span{
  margin: 5px 10px 5px 0;
  border: 1px solid #707070 !important;
  background: transparent;
  transition: all 0.25s;
}
.index-services-slider .owl-dots .owl-dot.active span,
.index-services-slider .owl-dots .owl-dot:hover span{
  border-color: var(--primary-color) !important;
  background: var(--primary-color) !important;
}
.index-sec-3 .bg-circle:nth-of-type(1){
  top: 2vw;
}
.index-sec-3 .bg-circle:nth-of-type(2){
  top: 4vw;
}
/*INDEX SEC 4*/
.index-sec-4{
  padding: 60px 0;
  position: relative;
}
.index-sec-4-col{
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
.index-sec-4-col .numbers-outer{
  width: 100%;
}
.index-sec-4-col .number-wrap:nth-of-type(1){
  padding-bottom: 30px;
}
.index-sec-4-col .number-wrap p{
  color: #fff;
}
.index-sec-4-col .more-work-wrap{
  width: 100%;
}
.index-sec-4-col .more-work-wrap p{
  color: #fff;
  font-size: 16px;
}
.index-sec-4-col .more-work-wrap .effect{
  font-size: 3vw;
  line-height: 3vw;
  font-weight: 700;
  transition: all 0.3s;
  display: block;
  padding: 5px 0;
  color: transparent;
}
.index-sec-4 .video-wrap video{
  max-height: 480px; 
}
/*.index-sec-4-col .more-work-wrap a:hover{*/
/*  color: #fff;*/
/*}*/
.index-sec-4 .bg-circle:nth-of-type(1){
  top: 0vw;
}
.index-sec-4 .bg-circle:nth-of-type(2){
  top: 0vw;
}
/*INDEX SEC 5*/
.index-sec-5{
  padding: 60px 0;
  position: relative;
}
.index-sec-5 .index-5-text p{
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-color-1);
  padding: 8px 0;
}
.index-sec-5 .index-5-text p:before{
  top: 12px;
}
.index-sec-5 .bg-circle:nth-of-type(1){
  top: 2vw;
}
.index-sec-5 .bg-circle:nth-of-type(2){
  top: 10vw;
}
/*CLIENT SECTIN*/
.clients-section{
  padding: 60px 0;
  position: relative;
}
.clients-section .client-images{
  padding-bottom: 30px;
}
.clients-section .client-images ul{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.clients-section .client-images ul li{
  width: 33.33%;
  padding-right: 5px;
}
.clients-section .client-images .client-img-item {
  height: 60px;
  margin-bottom: 10px;
}
.clients-review-wrap .client-review{
  position: relative;
  padding: 20px 50px;
}
.clients-review-wrap .client-review:before{
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900; 
  position: absolute;
  top: -12px;
  left: 1px;
  font-size: 40px;
  color: var(--primary-color);
}
.clients-review-wrap .client-review:after{
  content: "\f10e";
  font-family: "Font Awesome 5 Free";
  font-weight: 900; 
  position: absolute;
  bottom: -12px;
  right: 1px;
  font-size: 40px;
  color: var(--primary-color);
}
.clients-review-wrap .client-review .info{
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
}
/*.clients-review-wrap .client-review .info .img{
  width: 70px;
  max-width: 100%;
  height: auto;
}*/
.clients-review-wrap .client-review .info .name{
  width: calc(100%);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0;
}
.clients-review-wrap .client-review .img img{
  width: 60px;
  height: 60px;
  border-radius: 100%;
}
.clients-review-wrap .client-review .name p:nth-of-type(1){
  color: var(--text-color-1);  
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  width: 100%;
  padding-bottom: 10px;
}
.clients-review-wrap .client-review .name p:nth-of-type(2){
  color: var(--text-color-1);
  font-size: 16px;
  line-height: 1;
  width: 100%;
}
.clients-review-wrap .client-review .review p{
  font-size: 18px;
  color: #333;
  line-height: 1.5;
}
.clients-review-slider .owl-dots{
  display: flex;
  justify-content: center;
  margin-top: 0px !important;
}
.clients-review-slider .owl-dots .owl-dot{
  outline: none;
}
.clients-review-slider .owl-dots .owl-dot span{
  margin: 5px 20px 5px 0;
  border: 1px solid #707070 !important;
  background: transparent;
  transition: all 0.25s;
}
.clients-review-slider .owl-dots .owl-dot.active span,
.clients-review-slider .owl-dots .owl-dot:hover span{
  border-color: var(--primary-color) !important;
  background: var(--primary-color) !important;
}
.clients-section .bg-circle:nth-of-type(1){
  top: 20vw;
}
/*CLIENT SECTIN*/
.blogs-section{
  padding: 60px 0;
}
.blogs-section .blog-item .blog-title{
  color: var(--text-color-1);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  display: -webkit-box!important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 73px;
  word-break: break-word;
}
/*FOOTER*/
footer{
  padding: 60px 0;
  position: relative;
}
/*FOOTER TOP*/
.footer-top{
  position: relative;
}
.footer-top .footer-group{
  padding-bottom: 15px;
}
.footer-top .footer-group p,
.footer-top .footer-group p a{
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}
.footer-top .footer-group .title{
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 8px;
}
.footer-top .footer-group ul{
  list-style-type: none;
}
.footer-top .footer-group .footer-social{
  display: flex;
  flex-wrap: wrap;
}
.footer-top .footer-group .footer-social li{
  padding: 0 15px 8px 0;
}
.footer-top .footer-group .footer-social li a i{
  font-size: 22px;
  color: #333;
}
.footer-top .bg-circle:nth-of-type(1){
  top: 15vw;
}
/*FOOTER BOTTOM*/
.footer-bottom p{
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}
.footer-bottom .footer-nav{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.footer-bottom .footer-nav li{
  position: relative;
  padding: 0 10px 0px 10px;
}
.footer-bottom .footer-nav li:first-of-type{
  padding-left: 0px
}
.footer-bottom .footer-nav li:not(:last-of-type):before{
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -0.5px;
  width: 1px;
  height: 15px;
  background: #333;
}
.footer-bottom .footer-nav li a{
  color: #333;
  font-size: 14px;
  line-height: 1.3;  
}
.award-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.award-list li{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 10px 25px 10px 0;
}

/*****SERVICE MAIN PAGE******/
.service-sec-1{
  padding: 50px 0;
}
.service-sec-2 .service-desc ul li a{
  font-size: 20px;
  line-height: 1.2;
}
.service-sec-2 .service-desc ul li {
  padding: 5px 0 5px 25px;
}
.service-sec-2 .service-desc ul li:before{
  top: 9px;
}
.service-sec-2 .service-icon {
  margin-bottom: 5px;
}
.service-sec-3{
  padding: 50px 0;
}
.services-industries-wrap{
  position: relative;
}
.services-industries-wrap ul.nav-tabs{
  display: flex;
  flex-wrap: wrap;
  border: none;
}
.services-industries-wrap ul.nav-tabs li{
  width: 100%;
  padding: 10px 0;
}
.services-industries-wrap ul.nav-tabs li:first-of-type{
  padding-top: 0;
}
.services-industries-wrap ul.nav-tabs li:last-of-type{
  padding-bottom: 0;
}
.services-industries-wrap ul.nav-tabs li a{
  display: inline-block;
  font-size: 3.2vw;
  line-height: 3.2vw;
  font-weight: 600;
  transition: all 0.25s;
  color: transparent;
}
.services-industries-wrap ul.nav-tabs li a.active,
.services-industries-wrap ul.nav-tabs li a:hover{
  color: #fff;
}
.services-industries-wrap .industry-img-top{
  position: absolute;
  top: 0;
  left: 5%;
  z-index: -1;
}
.services-industries-wrap .industry-img-bottom{
  position: absolute;
  bottom: -3rem;
  right: 8.3333%;
  z-index: -1;
}
.services-industries-wrap .industry-img-top img,
.services-industries-wrap .industry-img-bottom img{
  filter: brightness(.8) contrast(.8) saturate(1.1);
}
.services-industries-wrap .industry-imgs{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.service-sec-4{
  position: relative;
  padding: 50px 0;
}
.service-sec-4 .hire-developer span {
  font-size: 11.6vw;
  line-height: 9.8vw;
  letter-spacing: -.5vw;
}
.service-sec-4 .hire-developer span:nth-of-type(1) {
  font-size: 4vw;
  line-height: 4vw;
  letter-spacing: -2px;
}
.service-sec-5{
  padding: 50px 0;
}
.service-sec-5 .platform-row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.service-sec-5 .platform-row .platform-item{
  padding-bottom: 20px;
  padding-right: 20px;
}
.service-sec-5 .platform-row .platform-item p{
  padding-top: 10px;
}
.service-sec-6{
  padding: 50px 0;
}
.service-sec-6 .technology-group{
  padding-bottom: 30px;
}
.service-sec-6 .technology-group ~ p{
  font-size: 16px;
  color: #333;
}
.service-sec-7{
  padding: 50px 0;
}
.c-value-box p{
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}
.c-value-box .heading{
  font-weight: 700;
  color: #111;
  font-size: 34px;
  line-height: 1.2;
  padding-bottom: 8px;
}
.service-sec-8{
  padding: 50px 0;
}
.service-sec-9{
  padding-bottom: 0px;
}
.service-sec-9 .method-img svg{
  width: 100%;
}
/*****CONTACT PAGE*****/
.f-abs-header{
  padding-top: 120px !important;
}
.contact-sec-1{
  padding: 80px 0 150px 0;
}
.contact-1-text p{
  color: #ccc;
}
.contact-1-text .heading{
  font-size: 4.6vw;
  line-height: 4.6vw;
  font-weight: 600;
  color: transparent;
}
.contact-sec-2{
  padding: 50px 0;
}
.contact-form{
  padding: 40px;
  background: #fff;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
  margin-left: -1px;
  margin-top: -150px;
}
.contact-form p{
  font-size: 18px;
  color: #111;
  font-weight: 600;
}
.contact-form input{
  font-size: 14px;
  height: 48px;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
  outline: none;
  padding: 0px;
}
.contact-form textarea{
  font-size: 14px;
  height: 90px;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
  resize: none;
  outline: none;
  padding: 0px;
}
.contact-form [type=submit]{
  border: 1px solid var(--primary-color);
  padding: 10px 30px;
  color: var(--primary-color);
  background: #fff;
  transition: all 0.25s;
  outline: none;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
}
.contact-form [type=submit]:hover{
  color: #fff;
  background: var(--primary-color);
}
.contact-group .title{
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 8px;
  color: #333;
  line-height: 1.7;
}
.contact-group ul{
  list-style-type: none;
}
.contact-group ul li,
.contact-group ul li a{
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}
.socials-list{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.socials-list li{
  padding: 0 15px 8px 0;
}
.socials-list li a i{
  font-size: 22px;
  color: #333;
}
.contact-sec-3{
  padding: 20px 0 0px 0;
}
.contact-sec-3 + .bg-lines-wrap + footer .footer-top{
  display: none;
}
/*****PORTFOLIO PAGE*****/
.portfolio-sec-1{
  padding: 50px 0;
}
.portfolio-sec-1 .index-1-text .heading span {
    display: block;
    font-size: 9.2vw;
    line-height: 7.4vw;
    text-indent: -0.2vw;
}
.portfolio-tab-wrap .nav{
  border: none;
}
.portfolio-tab-wrap .nav li{
  margin: 0;
}
.portfolio-tab-wrap .nav li a{
  border-radius: 25px;
  border: none;
  background: #111;
  color: #fff;
  transition: all 0.25s;
  padding: 10px 20px;
  font-size: 16px;
  margin: 0 14px 10px 0; 
}
.portfolio-tab-wrap .nav li a.active,
.portfolio-tab-wrap .nav li a:hover{
  background: var(--primary-color);
  color: #fff;
  border: none;
}
.portfolio-tab-wrap .tab-content{
  padding-top: 15px;
}
.portfolio-tab-wrap .portfolio-item a{
  display: block;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.portfolio-tab-wrap .portfolio-item a img{
  transition: all 0.5s ease-in;
}
.portfolio-tab-wrap .portfolio-item a:hover img{
  transform: scale(2);
  
}
.portfolio-tab-wrap .portfolio-item a:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: all 0.5s;
  z-index: 1;
}
.portfolio-tab-wrap .portfolio-item a:hover:before{
  opacity: 1;
}
.portfolio-tab-wrap .portfolio-item .desc{
  position: absolute;
  z-index: 2;
  text-align: center;
  transition: all 0.4s ease;
  transition-delay: 0.2s;
  transform: scale(0);
  top: 30%;
}
.portfolio-tab-wrap .portfolio-item a:hover .desc{
  transform: scale(1);
}
.portfolio-tab-wrap .portfolio-item .desc p:nth-of-type(1){
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}
.portfolio-tab-wrap .portfolio-item .desc p:nth-of-type(2) {
    color: #fff;
    font-size: 16px;
    width: 100%;
    max-width: 300px;
}

.image-wrap{
    position: relative;
}
.image-wrap .showBtnHover {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-around;
    bottom: 34%;
    left: 0%;
    right: 0%;
    margin: 0 auto;
    z-index: 2;
    transition: all 0.4s ease;
    transition-delay: 0.2s;
    transform: scale(0);
}
.portfolio-tab-wrap .portfolio-item:hover .showBtnHover{
    transform: scale(1);
}

.image-wrap .showBtnHover a{
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    width: 100px;
    height: 40px;
    text-align: center;
}



/*****INNER PAGES*****/
.inner-pg-sec-1{
  padding: 30px 0 50px;
}
.inner-pg-sec-1 .index-1-text .heading span {
  letter-spacing: -.4vw;
  text-indent: -0.6vw;
  font-size: 11vw;
  line-height: 10vw;
  font-weight: 700;
}
.inner-pg-sec-1 .index-1-text .heading span.small{
  font-size: 4.4vw;
  line-height: 3vw;
  text-indent: -0.2vw;
  font-weight: 600;
  letter-spacing: -0.2vw;
}
.index-1-text .heading span.size-2{
  font-size: 9.2vw;
  line-height: 7.4vw;
  letter-spacing: -.3vw;
}
.index-1-text ul{
  list-style-type: none;
}
.index-1-text p.left-circle{
  font-size: 18px;
  color: #111;
  font-weight: 600;
}
.index-1-text p.left-circle:before{
  top: 5px;
}
.inner-pg-sec-3{
  padding: 50px 0;
}
.inner-pg-sec-3 .platform-group{
  color: #111;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
}
.platform-item .img{
  padding-bottom: 10px;
  padding-right: 20px;
}
.platform-item .img svg,
.platform-item .img img{
  height: auto;
}
.platform-item p{
  text-align: center;
  padding-right: 20px;
}
.platform-item .img img{
  height: auto;
}
.mobile-app-pg-wrap .platform-item p{
  text-align: left;
}
.mobile-app-pg-wrap .platform-item .img{
  padding-bottom: 10px;
}
.mobile-app-pg-wrap .platform-item .img img,
.mobile-app-pg-wrap .platform-item .img svg{
  max-width: 100%;
  width: auto;
  height: 60px !important;
}
.inner-pg-sec-6{
  padding: 50px 0;
}
.open-s-lib a p:nth-of-type(1){
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}
.open-s-lib a p:nth-of-type(2){
  color: #ccc;
  font-size: 14px;
  line-height: 1.3;
}
.faq-sec{
  padding: 50px 0;
}
.q-badge{
  background: #111;
  color: #fff;
  transition: all 0.2s;
  border-radius: 25px;
  padding: 2px 8px;
  font-size: 11px;
  margin-bottom: 10px;
  display: inline-block;
}
.faq-group{
  margin-bottom: 25px;
}
.faq-group p,
.faq-group ul li{
  color: #333;
  font-size: 13px;
  font-weight: 400;
}
.faq-group ul li{
  padding-left: 20px;
}
.faq-group ul li:before{
  width: 12px;
  height: 12px;
  top: 10px;
}
.faq-group ul{
  margin-top: 8px;
}
.faq-group .question{
  font-weight: 600;
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.3;
  color: #111;
}
.ui-sec-3 .platform-item img{
  max-width: 180px;
  margin: 0 auto;
}
.ui-sec-3 .platform-item:not(:first-of-type) img{
  max-width: 149px;
}

/******INDEX BANNER SECTION*****/
.index-banner-section{
  min-height: 100vh;
  position: relative;
}
.index-banner-section:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 80px);
  height: 100%;
  background: rgba(0,0,0,0.65);
  z-index: -2;
}
.index-banner-section .index-banner-video-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 80px);
  height: 100%;
  z-index: -4;
}
.index-banner-section .index-banner-video-wrap .video-wrapper{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090909;
}
.index-banner-section .index-1-text .heading span{
  color: #fff;
  --webkit-text-stroke: 1.4px #fff;
}
.index-banner-section .index-banner-video-wrap iframe{
  width: 100%;
}
.our-clients-sec{
  position: relative;
  padding: 50px 0 20px 0;
  /*background: #f3f3f3;*/
}
.our-clients-sec .sec-title{
  font-size: 10vw;
  line-height: 7vw;
  letter-spacing: -.2vw;
  text-indent: -0.2vw;
  font-weight: 600;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: 40px;/*
  text-shadow: 0 20px 35px rgba(44, 49, 56, 0.13);
  color: #f5f6f7;*/
}
.our-clients-sec .sec-title span{
  font-size: 6vw;
  color: #111;
  font-weight: 600;
  display: block;
}
.our-clients-sec .clients-img-list{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0 -15px;
}
.our-clients-sec .clients-img-list li{
  width: 16.666%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 15px 30px 15px;
}
.testimonial-sec .sec-title{
  font-size: 6vw;
  line-height: 4vw;
  letter-spacing: -.2vw;
  text-indent: -0.2vw;
  font-weight: 600;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: 40px;/*
  text-shadow: 0 20px 35px rgba(44, 49, 56, 0.13);
  color: #f5f6f7;*/
}
.testimonial-sec .sec-title span{
  font-size: 3vw;
  color: #111;
  font-weight: 600;
  display: block;
  letter-spacing: -.01vw;
}

/*****POP UP MODAL*****/
.custom-checkbox{
  position: relative;
  width: 30px;
  height: 30px;
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.custom-checkbox input:checked ~ .checkmark {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}
.custom-checkbox .checkmark:after {
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.popup-section .modal {
  background: rgba(23, 22, 26, 0.88);
}
.popup-section .modal-content {
  border-radius: 15px;
}
.popup-section .popup-close {
  position: absolute;
  height: 50px;
  width: 50px;
  background: rgba(12, 12, 12, 0.95);
  right: -20px;
  top: -20px;
  color: #fff;
  font-weight: 800;
  line-height: 50px;
  font-size: 22px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}
.popup-left-col {
  padding: 0;
}
.modal-logo-col{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #1e1e1e;
  border: 1px solid;
  border-color: var(--primary-color);
  border-right: 0;
  border-radius: 15px 0 0 15px;
}
.popup-left-col .popup-img {
  border-radius: 15px 0px 0px 15px;
}
.popup-right-col {
  padding: 0;
}
.popup-form-wrapper {
  width: calc(100% - 15px);
  padding: 20px;
  text-align: center;
  height: 100%;
  background: #eaeaea;
  border-radius: 0 15px 15px 0;
  max-height: 500px;
  position: relative;
  overflow-x: hidden;
}
.popup-form-wrapper h4 {
  font-size: 34px;
  font-weight: 700;
  color: #211321;
  line-height: 1.1;
  margin: 5px 0;
  padding-bottom: 5px;
}
.popup-form-wrapper input,
.popup-form-wrapper textarea {
  width: 100%;
  margin-bottom: 20px;
  border: none;
  border-bottom: 1px solid #bbbbbb;
  font-size: 14px;
  min-height: 30px;
  padding: 10px 0px;
  background: transparent;
  outline:none;
}
.popup-form-wrapper textarea {
  height: 90px !important;
  resize:none;
}
.popup-form-wrapper button {
  border: none;
  height: 40px;
  color: #fff;
  font-size: 13px;
  line-height: 40px;
  font-weight: 600;
  max-width: 160px;
  width: 100%;
  border-radius: 25px;
  margin-right: 5px;
  text-transform: uppercase;
  background: var(--primary-color);
}
.popup-form-wrapper input.int-tel{
  padding-left: 85px !important;
}
.modal-left-inner ul{
  list-style-type: none;
  display: flex;
  justify-content: center;
}
.modal-left-inner ul li{
  padding: 0 15px;
  position: relative;
}
.modal-left-inner ul li:last-of-type:before{
  content: '';
  position: absolute;
  top: 4px;
  left: 0px;
  width: 2px;
  height: 100%;
  background: var(--primary-color);
}
.modal-left-inner ul a{
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
.modal-left-inner ul a i{
  color: var(--primary-color);
  padding-right: 15px;
  font-size: 24px;
  display: none;
}
.popup-form-wrapper .more-info{
  font-size: 20px;
  font-weight: 700;
  color: #211321;
  text-align: left;
}
.popup-form-wrapper .s-text{
  font-size: 16px;
  font-weight: 500;
  color: #211321;
  text-align: left;
}
.popup-form-opts ul li p {
  font-size: 14px;
  line-height: 1;
}    
.popup-form-opts .custom-checkbox{
  height: 20px;
}
.popup-form-opts ul li {
  align-items: center;
}
.popup-form-opts ul li input{
  margin: auto;
  width: auto;
  min-height: 20px;
  padding: 0px 0;
}
.popup-form-wrapper select{
  width: 100%;
  margin-bottom: 20px;
  border: none;
  border-bottom: 1px solid #bbbbbb;
  font-size: 14px;
  min-height: 30px;
  padding: 10px 0px;
  background: transparent;
  outline: none;
}
.iti {
  /*width: 100%;*/
  display: block;
}
.contact-form .iti{
  z-index: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.popup-form-wrapper input.int-tel{
    padding-left: 85px !important;
}
.dev-list-wrap ul {
    list-style-type: none;
}
.popup-form-opts ul li {
    align-items: center;
}
.dev-list-wrap ul li {
    display: flex;
    padding: 5px 0;
}
.popup-form-opts .custom-checkbox {
    height: 20px;
}
@media only screen and (max-width:1200px) {
  .popup-form-wrapper h4 {
    font-size:20px;
  }
  .popup-form-wrapper {
    padding: 10px 15px;
  }
  .popup-form-wrapper input, .popup-form-wrapper textarea {
    margin-bottom: 10px;
    font-size: 13px;
    min-height: 25px;
    padding: 8px 0px;
  }
  .popup-form-wrapper h4 {
    font-size: 20px;
    margin: 0px 0 15px;
  }
  .popup-form-wrapper button {
    height: 33px;
    font-size: 13px;
    line-height: 31px;
    max-width: 120px;
    border-radius: 25px;
    margin-right: 5px;
  }
}
@media only screen and (max-width:991px) {
  .popup-left-col {
    display: none;
  }
  .popup-form-wrapper {
    border-radius: 0px;
  }
  .popup-form-wrapper {
    padding: 25px 30px;
  }
  .modal-content {
    width: 90%;
    display: block;
    margin: 0 auto;
  }
  .popup-form-wrapper h4 {
    font-size: 23px;
  }
}
@media only screen and (max-width:575px) {
  .modal-content {
    width: 75%;
    display: block;
    margin: 0 auto;
  }
  .popup-form-wrapper {
    padding: 25px 20px;
  }
}
@media only screen and (max-width:425px) {
  .popup-left-col {
    display: none;
  }
  .popup-form-wrapper {
    width:100%;
  }
  .modal-content {
    width: 90%;
    display: block;
    margin: 0 auto;
  }
  .popup-form-wrapper {
    border-radius: 0;
    max-height: 520px; 
  }
  .popup-form-wrapper input, .popup-form-wrapper textarea {
    font-size:13px;
    margin-bottom: 15px;    
  }
  .popup-form-wrapper h4 {
    font-size: 20px;
    margin: 5px 0 20px;
  }
  .popup-section .popup-close {
    position: absolute;
    height: 30px;
    width: 30px;
    background: rgba(12, 12, 12, 0.95);
    right: -25px;
    top: -15px;
    color: #fff;
    font-weight: 800;
    line-height: 34px;
    font-size: 15px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    z-index: 1;
  }
}
/*****POP UP MODAL*****/

/******CASE STUDY PAGE STARTS******/
.case-study-item{
  position: relative;
  max-width: 490px;
  margin: 0 auto;
  margin-bottom: 60px;
  height: 560px;
  overflow: hidden;
}
.case-study-item .case-study-item-inner{
  position: absolute;
  padding: 20px 0px;
  transform: translateY(0px);
  transition: transform 0.5s linear;
}
.case-study-item .case-study-item-inner .app-img{
  position: relative;
  transform: translateY(0);
  transition: all 10s linear;
}
.case-study-item:hover .case-study-item-inner .app-img{
  transform: translateY(-300px);
}
.case-study-item:hover .case-study-item-inner{
  opacity: 0;
  transform: translateY(-580px);  
}
.case-study-item .case-study-item-inner.csi-1{
  background: #2e3144;
}
.case-study-item .case-study-item-inner.csi-2{
  background: #8cd6e6;
}
.case-study-item .case-study-item-inner.csi-3{
  background: #2f90d3;
}
.case-study-item .case-study-item-inner.csi-4{
  background: #2c2f42;
}
.case-study-item .case-study-item-inner.csi-5{
  background: #e1f0f2;
}
.case-study-item .case-study-item-inner.csi-6{
  background: #0b235e;
}
.case-study-item .case-study-item-inner.csi-7{
  background: #8edaea;
}
.case-study-item .case-study-item-inner.csi-8{
  background: #489e96;
}
.case-study-item .case-study-item-inner.csi-9{
  background: #7044fd;
}
.case-study-item .case-study-item-inner.csi-10{
  background: #4d49ff;
}
.case-study-item .case-study-item-inner.csi-11{
  background: #e1f0f2;
}
.case-study-item .case-study-item-inner.csi-12{
  background: #8edaea;
}
.case-study-item .case-study-item-inner.csi-13{
  background: #332e44;
}
.case-study-item .case-study-item-inner.csi-14{
  background: #0b2562;
}
.case-study-item .case-study-item-inner.csi-15{
  background: #e1f0f2;
}
.case-study-item .case-study-item-inner.csi-16{
  background: #e1f0f2;
}
.case-study-item .case-study-item-inner .title{
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 30px;
  padding: 0 60px;
}
.case-study-item .case-study-item-inner .title.dark{
  color: #3a3a3a;
}
.case-study-item .circle {
  position: absolute;
  top: 190px;
  left: 60px;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: #07C2BE;
  z-index: -1;
  transform: translateY(50px);
}
.case-study-item:hover .circle{

}
@keyframes caseStudyAnim {
  100% {
      -webkit-transform: translateY(0);
      transform: translateY(50px);
      opacity: 1;
  }
}
.case-study-item .dots {
  position: absolute;
  width: 55px;
  height: 56px;
  top: 30px;
  left: -35px;
}
.case-study-item .case-study-text{
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  padding: 60px 30px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  margin: 7.5px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.case-study-item .case-study-text p{
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  padding: 10px 0;
}
.case-study-item .case-study-text p span{
  color: var(--primary-color);
  font-weight: 700;
}
.case-study-item .case-study-text .title{
  color: var(--primary-color);
  font-size: 30px;
  font-weight: bold;
  line-height: 30px;
}
.case-study-item .case-study-text .read-more-btn{
  opacity: 0;
  margin-top: 10px;
  display: inline-block;
  z-index: 1;
}
.case-study-item:hover .case-study-text .read-more-btn{
  opacity: 1;
}
/******CASE STUDY PAGE ENDS******/

/******CASE STUDY DETAILS PAGE STARTS******/
.py-40{
  padding-top: 40px;
  padding-bottom: 40px;
}
.cs-inner-sec-1{
  position: relative;
  padding: 70px 0 0 0;
  clip-path: circle(1420px at 50% calc(100% - 1430px));
}
.cs-inner-sec-1:after{
  content: '';
  position: absolute;
}
.w-700{
  max-width: 700px;
  margin: 0 auto;
}
.cs-inner-sec-1 .index-1-text p{
  color: #ccc;
}
.cs-inner-sec-1 .index-1-text .heading span{
  font-size: 4.6vw;
  line-height: 4.6vw;
  font-weight: 600;
  letter-spacing: 0px;
  color: transparent;
}
.cs-inner-sec-1 .cs-banner-img{
  text-align: center;
  padding: 0 80px;
  position: relative;
}
.cs-inner-sec-1 .cs-banner-img img {
  max-width: 1160px;
}
.cs-inner-sec-1 .cs-banner-img.top-50{
  top: 50px;
}
.cs-inner-sec-2{
  padding: 70px 0;
}
.appstore-icons-wrap a{
  display: inline-block;
  margin: 5px 10px 5px 0
}
.cs-inner-sec-2 .circle-list li, .circle-list li a,
.cs-inner-sec-2 .circle-list li p {
  color: #111;
  font-weight: 400;
  font-size: 14px;
}
.cs-inner-sec-2 .circle-list li:before{
  width: 12px;
  height: 12px;
  top: 10px;
}    
/******CASE STUDY DETAILS PAGE ENDS******/

/******COST CALCULATOR STARTS******/
.calculator-wrap {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.calculator-wrap .left-side{
  width: calc(100% - 300px);
  padding-right: 60px;
}
.calculator-wrap .right-side{
  width: 300px;
  background: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 15px;
  border-radius: 25px 0 0 25px;
}
.calculator-wrap .get-quote-box .top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 15px;
}
.calculator-wrap .get-quote-box .top .icon{
  width: 35px;
}
.calculator-wrap .get-quote-box .top .icon img.white{
  filter: brightness(0) invert(1);
}
.calculator-wrap .get-quote-box .top .price{
  width: calc(100% - 35px);
  padding-left: 15px;
}
.calculator-wrap .get-quote-box .top .price p{
  color: #fff;
  font-size: 26px;
  font-weight: 600;
}
.calculator-wrap .get-quote-box .bottom p{
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3; 
}
.calculator-wrap .get-quote-box .bottom button{
  padding: 14px 20px;
  color: #fff;
  background: var(--primary-color);
  font-size: 17px;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  margin-top: 25px;
}
.calculator-wrap .indicator{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.calculator-wrap .indicator:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background: #111;
}
.calculator-wrap .indicator:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0%;
  height: 2px;
  background: var(--primary-color);
}
.calculator-wrap .indicator.per-20:after{
  width: 20%;
}
.calculator-wrap .indicator.per-40:after{
  width: 40%;
}
.calculator-wrap .indicator.per-60:after{
  width: 60%;
}
.calculator-wrap .indicator.per-80:after{
  width: 80%;
}
.calculator-wrap .indicator.per-100:after{
  width: 100%;
}
.calculator-wrap .indicator li{
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111111;
  z-index: 1;
}
.calculator-wrap .indicator li.active{
  background: var(--primary-color);
}
.calculator-wrap .indicator li.active p{
  color: var(--primary-color);
  font-weight: 600;
}
.calculator-wrap .indicator li span{
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
}
.calculator-wrap .indicator li p{
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: #111111;
  white-space: nowrap;
}
.calculator-wrap .questions-wrap{
  padding: 20px 0;
}
.calculator-wrap .question-number-wrap p{
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}
.calculator-wrap .question-number-wrap p span{
  color: var(--primary-color);
  font-weight: 600;
}
.calculator-wrap .question-box{
  padding-top: 30px;
}
.calculator-wrap .question-item{
  display: none;
}
.calculator-wrap .question-item.active-question{
  display: block;
}
.calculator-wrap .question-item .question{
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #111111;
}
.calculator-wrap .question-item .answers-wrap{
  padding-top: 20px;
}
.calculator-wrap .answers-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.calculator-wrap .answer-option{
  width: calc(25% - 10px);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5px 5px;
  border: 1px solid #111111;
  background: #fff;
  border-radius: 5px;
  position: relative;
  padding: 35px 0;
  cursor: pointer;
}
.calculator-wrap .answer-option.active-answer{
  border-color: var(--primary-color);
  box-shadow: 0px 0px 0px 1px var(--primary-color);
}
.calculator-wrap .answer-option img{
  margin: 0 auto 15px auto;
  max-width: 70px;
}
.calculator-wrap .answer-option p{
  font-size: 20px;
  color: #111111;
  text-align: center;
  line-height: 1;
}
.calculator-wrap .answer-option.active-answer p{
  color: var(--primary-color);
}
.calculator-wrap .answer-option input{
  position: absolute;
  opacity: 0;
}
.calculator-wrap .btn-wrap{
  margin-top: 20px;
}
.calculator-wrap .btn-wrap .next-question,
.calculator-wrap .btn-wrap .prev-question{
  padding: 14px 10px;
  width: 140px;
  color: #fff;
  background: var(--primary-color);
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  border: none;
  outline: none;
  opacity: 1;
  cursor: pointer;
  margin: 5px 7px;
}
.calculator-wrap .btn-wrap .next-question:disabled{
  opacity: 0.6;
}
.cost-quote-form-wrap{
  display: none;
}
.cost-quote-form{
  background: #fff;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin-right: 16.667%;
}
.cost-quote-form .title{
  font-size: 30px;
  color: var(--text-color-1);
  font-weight: 600;
  line-height: 1.2;
}
.cost-quote-form .left-side{
  width: 50%;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #111;
}
.cost-quote-form .left-side .title{
  color: #fff;
}
.cost-quote-form .right-side{
  width: 50%;
  padding: 60px 40px;
}
.cost-quote-form .estimate-card{
  margin: 20px 0;
  background: #111111;
  border-radius: 5px;
  padding: 25px 20px;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.cost-quote-form .estimate-card .icon{
  width: 50px;
}
.cost-quote-form .estimate-card .icon img.white{
  filter: brightness(0) invert(1);
}
.cost-quote-form .estimate-card .text{
  width: calc(100% - 50px);
  padding-left: 30px;
}
.cost-quote-form .estimate-card .text .label{
  font-size: 18px;
  line-height: 1.1;
  color: #fff;
  padding-bottom: 5px;
}
.cost-quote-form .estimate-card .text .price{
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
  font-weight: 600;
}
.cost-quote-form .estimate-card .text .hours{
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
  font-weight: 600;
}
.cost-quote-form .estimate-card .text .hours span{
  font-size: 16px;
  font-weight: 400;
}
.cost-quote-form form{
  padding-top: 40px;
}
.cost-quote-form form input,
.cost-quote-form form select,
.cost-quote-form .right-side input,
.cost-quote-form .right-side select{
  font-size: 14px;
  height: 48px;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
  outline: none;
  padding: 0px;
}
.cost-quote-form form .submit,
.cost-quote-form .right-side .submit{
  padding: 14px 20px;
  color: #fff;
  background: var(--primary-color);
  font-size: 17px;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  border: none;
  width: 100%;
  margin-top: 35px;
}
/*HIDING RIGHT SIDE OF COST CALCULATOR*/
.calculator-wrap .right-side{
    display: none;
}
.calculator-wrap .left-side {
    width: calc(100% - 150px);
}
/******COST CALCULATOR ENDS******/
/****Tearms Page CSS Start****/
.contact-us-section {
    padding: 70px 0px;
}
.contact-us-section .index-first-wrapper {
    padding: 0px;
}
.index-first-wrapper p {
    max-width: 100%;
    text-align: left;
    font-size: 16px;
    padding-bottom: 15px;
}
.about-text-wrapper h2 {
    text-align: left;
    font-size: 26px;
    margin-bottom: 10px;
    margin-top: 20px;
    color:#212121;
    font-weight: 900;
}
.about-text-wrapper ol {
    padding-left: 15px;
}
.about-text-wrapper li {
    list-style: decimal;
}
span.d-block.black-stroke.head-size {
    font-size: 7vw;
}
.index-2-text.Beyond p {
    font-size: 2.6vw;
    line-height: 3.1vw;
}
/***End***/