/* fz try */
.road-map-main {
	margin: 50px 0 51px;
  }
  
  .road-map-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 175px;
  }
  

  .road-map-wrapper::before,
  .road-map-wrapper::after {
	content: "";
	width: 100%;
	clear: both;
	display: block;
  }
  
  .road-map-circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 25px solid transparent;
	border-top-color: #323949;
	border-right-color: #323949;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform: rotate(45deg);
  }

  
  .road-map-circle-text {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	text-transform: capitalize;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform: rotate(-45deg);
  }
  
  .road-map-card {
	width: 35%;
	background: #323949;
	padding: 20px 20px;
	z-index: 1;
	position: absolute;
	border-radius: 5px;
  }

  .road-map-card::after{
    content: " ";
	position: absolute;
	right: -20px;
	top: 25px;
	border-top: none;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid #323949;
    transform: rotate(90deg);
  }
  
 
  .card-head {
	font-size:15px;
	font-weight: 600;
	text-transform: capitalize;
	margin: 0 0 15px;
	color: #fff;
  }
  
  .card-text {
	color: #fff;
    font-size: 12px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
  
	@media (max-width: 1199px) {
	  -webkit-line-clamp: 4;
	}
  }
  
  .road-map-wrapper:nth-of-type(even) .road-map-circle {
	border-bottom-color: #323949;
	border-left-color: #323949;
	border-top-color: transparent;
	border-right-color: transparent;
  
	
  }
  
  .road-map-wrapper:nth-of-type(even) .road-map-card {
	right: 0;
  }
  
  .road-map-wrapper:nth-of-type(even) .road-map-card::after {
	left:-20px;
	right: unset;
    transform: rotate(-90deg);

  }
  

  /* customized by Faizan Ansari */
.road-map-circle1 {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 25px solid transparent;

	border-left-color: #9c9ca0;
	border-top-color: #9c9ca0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform: rotate(45deg);
  }
  
  .road-map-wrapper:nth-of-type(even) .road-map-circle1 {
	border-top-color: transparent;
	border-bottom-color: #9c9ca0;
	border-right-color: #9c9ca0;
	border-left-color: transparent;
  }

  /* another */

.circleForBorder{
	width: 187px;
    height: 187px;
	border-radius: 50%;
	border: 20px solid transparent;

	border-left-color: #323949;
	border-top-color: #323949;
	 transform: rotate(45deg);
     cursor: pointer;
}

.circleForBorder:hover + .processBox{
    display: block;
}


.mainContainer{
	width:90%;
    height:500px;
    display: flex;
    align-items: center;
    position: relative;
	justify-content: center;
    
}


.mainContainer .col-4:nth-of-type(even)  .circleForBorder{
	border-top-color: transparent;
	border-bottom-color: #323949;
	border-right-color: #323949;
	border-left-color: transparent;
  }

  .subContainerOfapproach{
	position: relative;
  }


.processBox{
	width: 250px;
    /* display: none; */
	background-color: #323949;
	color: #fff;
	padding:8px;
	position: absolute;
	margin-top: 20px;
	border-radius: 12px;
    /* z-index: 111; */

}

.processBoxEven{
 top: -150px;
 left: -10px;
 width: 250px;
 /* display: none; */
 background-color: #323949;
 color: #fff;
 padding:8px;
 position: absolute;
 margin-top: 20px;
 border-radius: 12px;
 /* z-index: 111; */
}

  .processBox:after {
	content: " ";
	position: absolute;
	left: 68px;
	top: -14px;
	border-top: none;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid #323949;
  }

  .processBoxEven:after {
	content: " ";
	position: absolute;
	left: 95px;
	bottom: -14px;
	border-top: none;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-top: 15px solid #323949;
  }

 

.imgCircle > img{
	transform: rotate(-45deg);
}

.mobileview-approch{
    display: none;
}

/* making responsive */

@media (max-width:767px) {
   .dekstopview-approch{
    display: none;
   }

   .mobileview-approch{
    display: block;
   }
    
}


@media (max-width:1199px) {
    .circleForBorder {
		width: 157px;
		height: 157px;
        border-radius: 50%;
        border: 17px solid transparent;
        border-left-color: #323949;
        border-top-color: #323949;
        transform: rotate(45deg);
        cursor: pointer;
    }
    
}

@media (max-width:991px) {
    .circleForBorder {
        width: 119px;
        height: 119px;
        border-radius: 50%;
        border: 15px solid transparent;
        border-left-color: #323949;
        border-top-color: #323949;
        transform: rotate(45deg);
        cursor: pointer;
    }
}

@media (min-width:1400px) {
	.circleForBorder {
		width: 214px;
		height: 214px;
	}

}

@media (max-width:1142px) {
	.processBoxEven {
	  left: -49px;
	}

	.processBoxEven:after {
		left: 137px;
	}
	
}



/* sidebar form start */
.sidebar-contact{
	position:fixed;
	top:50%;
	right:-350px;
	transform:translateY(-50%);
	width:350px;
	height:auto;
	padding:20px;
	background:#fff;
	box-shadow: 0 20px 50px rgba(0,0,0,.5);
	box-sizing:border-box;
	transition:0.5s;
	z-index: 1114;
	border-radius: 20px 0px 0px 20px;
  }
  .sidebar-contact.active{
	right:0;
  }
  .sidebar-contact input,
  .sidebar-contact textarea{
	width:100%;
	height:36px;
	padding:5px;
	margin-bottom:10px;
	box-sizing:border-box;
	border:1px solid rgba(0,0,0,.5);
	outline:none;
	border-radius: 5px;
  }
  .sidebar-contact h2{
	margin:0 0 20px;
	padding:0;
  }
  .sidebar-contact textarea{
	height:60px;
	resize:none;
  }
  
  .sidebar-contact .contact-btn-container,.contactForm .contact-btn-container{
   background-color: #000;
  }
  
  .sidebar-contact i,.contactForm i{
	color: #FFF;
  }
  .sidebar-contact input[type="submit"], .contactForm input[type="submit"]{
	color:#ffffff;
	cursor:pointer;
	font-size:18px;
	width: unset;
	height:unset;
	padding:0px 5px;
	margin-bottom: 0px;
	box-sizing: border-box;
	border: none;
	outline: none;
	border-radius: 5px;
	background-color: transparent;
  }
  
  
  
  .toggle{
	position:absolute;
	text-align:center;
	cursor:pointer;
	background:rgb(254 59 0);
	color: #fff;
	top:48%;
	left:-70px;
	transform: rotate(90deg);
	padding: 8px 15px;
	border-radius:0px  0px 10px 10px;
  }
  
  .toggle h6{
	margin-bottom: .5px;
	font-size: 12px;
  }
  .toggle h6 i{
	padding-right: 8px;
  }
  
  @media(max-width:768px)
  {
	.sidebar-contact{
	  width:100%;
	  height:100%;
	  right:-100%;
	}
	.sidebar-contact .toggle{
	  top:50%;
	  transform:translateY(-50%) rotate(90deg);
	  transition:0.5s;
  
	}
	.sidebar-contact.active .toggle
	{
	  top: 24px;
	  left: 34px;
	  transform:translateY(0);
	border-radius:10px;
  
	}
  
	.sidebar-contact.active .toggle h6{
	  display: none;
	}
   .toggle.active::before{
	  content:'\f00d';
	  font-family:fontAwesome;
	font-size:18px;
	color:#ffffff;
	}
	.scroll{
	  width:100%;
	  height:100%;
	  overflow-y:auto;
	}
	.content{
	  padding:50px 50px;
	}
  }
  

  @media (max-width:850px){
	.contact-info{
	  display: none;
	}
  
	.contact-form {
	  background-color: #ffffff;
  }
  
  .title {
	color: #000;
	font-weight: 800;
   text-align: center;
   font-size:23px;
  }
  
  .input {
	border: 2px solid #000000;
	color: #000000;
  }
  
  .input-container label {
	color: #1d1c1c;
	background-color: #fff;
  }
  
  .btn {
	background-color: #000;
	border: 2px solid #000000;
	color: #ffffff;
  }
  .contact-btn-container input {
	color: #fff;
  }
  
  
  .form_container {
	margin: 10px auto;
	min-height:unset;
	padding: .02rem 0rem;
  
  }
  
  .contact-form form {
	padding: 2.3rem 2rem;
	border: 1px solid;
	margin: 20px 10px;
	border-radius: 12px;
  }
  
  .circle.one,.circle.two {
	display: none;
  }
  
  }

  
 

  /* our top services owl */
  .owl-item .item {
  transform: translate3d(0, 0, 0);
  /* DO NOT REMEMBER WHERE TU PUT THIS, SEARCH FOR 3D ACCELERATION */
  margin: 50px 0;
  /* OVERWRITE PLUGIN MARGIN */
}



.screenshot_slider .owl-item.center .item .serviceBox , .screenshot_slider .owl-item.center .item .product_card{
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
   transform: scale(1.15);
   box-shadow: 5px 5px 12px black;
   
}


/* our product */

  
  .product_card,.product_card2 {
	width: 80%;
	height: 100%;
	padding: 2em 1.5em;
	background: linear-gradient(#ffffff 50%, #5F8670 50%);
	background-size: 100% 200%;
	background-position: 0 2.5%;
	border-radius: 5px;
	box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: 0.5s;
	margin: auto;
	/* margin: 20px 10px; */
  }

  .product_card2{
	background: linear-gradient(#ffffff 50%, #0F1035 50%);
	background-position: 0 2.5%;
	background-size: 100% 200%;
  }

  .product_card3{
	background: linear-gradient(#ffffff 50%, #E36414 50%);
	background-position: 0 2.5%;
	background-size: 100% 200%;
  }

  .product_card4{
	background: linear-gradient(#ffffff 50%, #AF2655 50%);
	background-position: 0 2.5%;
	background-size: 100% 200%;
  }
 .product_card h3 {
	font-size: 20px;
	font-weight: 600;
	color: #000000;
	margin: 1em 0;
  }
  .product_card p {
	color: #000000;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0.03em;
  }
  .icon-wrapper {
	background-color: #5F8670;
	position: relative;
	margin: auto;
	font-size: 30px;
	height: 2.5em;
	width: 2.5em;
	color: #ffffff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: 0.5s;
  }
  .product_card2 > .icon-wrapper{
	background-color: #0F1035;
  }

  .product_card3 > .icon-wrapper{
	background-color:#E36414 ;
  }

  .product_card4 > .icon-wrapper{
	background-color:#AF2655 ;
  }
  .product_card:hover,.product_card2:hover {
	background-position: 0 100%;
  }
  
  .product_card:hover .icon-wrapper {
	background-color: #ffffff;
	color: #000000;
  }
  .product_card:hover h3 {
	color: #ffffff;
  }
  .product_card:hover p {
	color: #f0f0f0;
  }
  @media screen and (min-width: 768px) {
	section {
	  padding: 0 2em;
	}
	.column {
	  flex: 0 50%;
	  max-width: 50%;
	}
  }
  @media screen and (min-width: 992px) {
	section {
	  padding: 1em 3em;
	}
	.column {
	  flex: 0 0 33.33%;
	  max-width: 33.33%;
	}

	
  }

  @media (max-width:992px) {
	.processBoxEven{
		width: 200px;
		top: -180px;
	}
	.processBoxEven:after {
		left: 116px;
	}
	.processBox{
		width: 200px;
	}
	.processBox:after {
		left: 50px;
	}
  }

  /* trying */
  .vdoContainer{
	width: 80vw;
	height: 80vh;
	background: #000;
	margin:30px auto;
	position: relative;
  }

  .vdoContainer video{
	position: absolute;
	top: -230px;
	left: 10%;
  }
  .top-service-list li{
	margin: 8px auto;
  }

  .top-service-list li span{
	font-weight: 700;
  }
  
  .top-service-list li img{
	width: 30px;
  }

  /* button vieww more */
  .button1,.button2 {
	color: white;
	background-color: #6EC3AE;
	border: 5px solid transparent;
	transition: 0.2s ease;
	border-radius: 50px;
	width: 200px;
	text-align: center;
	margin: 10px auto;
	margin-top: 30px;
	padding: 3px 20px;
  }

  .button2{
	background-color: #151644;
  }
  
  .button1:hover {
	color: #6EC3AE;
	background-color: white;
	transform: scale(1.1);
	border: 5px solid #6EC3AE;
  }

  .button2:hover{
	color: #151644;
	background-color: white;
	transform: scale(1.1);
	border: 5px solid #151644;
  }

  /* navigation of slider */
  /* .slick-dots{
	margin-bottom: 20px;
  } */
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 15px;
    height: 15px;
    padding: 5px;
    cursor: pointer;
    color: #000000;
    border: 2px solid black;
    outline: none;
    border-radius: 100%;
    background: transparent;
	margin-bottom: 20px;
}

.slick-active button{
background-color: #000;
}

/* modal close btn */
.close{
	background-color: transparent;

}
.close > span{
	position: absolute;
    right: 20px;
    font-size: 30px;
    top: 20px;
}

.contactForm input{
}