@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
} 
.container{
	max-width: 1244px;
}
a,a:hover{
	text-decoration: none;
	    outline: none!important;
}
a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}
h1,h2,h3,h4,h5,h6,p,pre,img{
padding: 0;
margin: 0;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Roboto', sans-serif; 
}
h1{
	font-size:55px;
}
h2{
	font-size: 54px;
}
h3 {
    font-size: 32px;
}
h4 {
    font-size: 24px;
}
h6{
	color: #2A3767;
	font-size: 18px;
}
.hero-group-button-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-right: auto;
    display: flex;
    margin-top: 15px;
}

.btn1{
	 height: 65px;
    min-width: 174px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    justify-content: center;
    padding-top: 18px;
    padding-bottom: 18px; 
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    transition: color .3s, border-color .3s, background-color .3s;
    background-color: #2b3767;
    border: 1px solid #2b3767;
}
.btn1:hover {
    background-color: #0c1523;
    border: 1px solid #0c1523;
    text-decoration: none;
    color: #fff;
}
.btn2 {
    height: 65px;
    min-width: 174px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    justify-content: center;
    padding-top: 18px;
    padding-bottom: 18px; 
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    transition: color .3s, border-color .3s, background-color .3s;
    color: #0c1523;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid #0c1523;
}
.btn2:hover {
    background-color: #2b3767;
    border: 2px solid #2b3767;
    text-decoration: none;
    color: #fff;
}





.solutions-button-block{
	    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-right: auto;
    display: flex;
    margin-top: 15px;
    justify-content: center;
}


.home-hero{
background: #d5e8ee; 
padding-top: 50px;
padding-bottom: 50px;
}
.home-hero .row{
align-content: center;
align-items: center;
}
.home-hero-left > div{
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-right: 50px; 
}
.home-hero-right > div{
	border-top-left-radius:100px ;
	overflow: hidden;
}
.marquee-sec{
	padding-top: 100px;
	padding-bottom: 100px;
	text-align: center;
}

.home-features{ 
	padding-top: 100px;
	padding-bottom: 100px;
}
.home-features .top{
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 1000px;
	margin: auto; 
    margin-bottom: 50px;
}
.home-features-block{
	margin-bottom:30px;
}
.home-features-block > div{
	display: flex;
	    grid-column-gap: 30px;
    grid-row-gap: 30px; 
    background-color: #fff;
    border: 2px solid #ebeaea;
    border-radius: 10px;
    padding: 50px 15px;
    transition: transform .3s, border-color .3s, box-shadow .3s;
    display: flex;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.home-features-block > div:hover {
    box-shadow: 0 9px 40px rgba(0, 0, 0, .05);
    border: 2px solid #fff;
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
}
.feature-icon{
	width: 30%;
}
.feature-content {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.technical-section{
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #f5f5f5;
}
.technical-section .left > div	 {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-right: 50px;
}

.technical-section .right .right-child{
	text-align: center;
	margin-bottom: 50px;
}
.technical-section .right .right-child img{
	max-width: 70px;
	margin-bottom: 20px;
}
.technical-section .right .row{

}



.marquee-main{
width: 90vw;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
background: transparent;
margin: auto;   
 margin-top: 30px;
}

.marqueesnew{
overflow-x: hidden;
}
.marqueenews{
display: flex;
align-items: center;
justify-content: center;
width: 200vw;
height: 13vh;
}
.marqueenew{
display: flex;
align-items: center;
justify-content: center;
background: transparent;
height: 11vh;
width: 12.5vw;
/*line 43 is very important. since we have 16 items, width of the marqueenew which is 200vw must be devided between them. which turns out to be 12.5vw*/
margin: 10px;
border-radius: 15px;
}
.marqueenew:hover{
background: transparent;
}
.icon {
color: #cccccc;
transform: scale( 1.5 );
} 
.SecondRow{
animation: Scroll 20s linear infinite;
animation-direction: reverse;
}
@keyframes Scroll {
0% {transform: translateX(-50vw);
-webkit-transform: translateX(-50vw);}
100% {transform: translateX(50vw);
-webkit-transform: translateX(50vw);}

}



.numscroller-sec{
	padding-top: 100px;
	padding-bottom: 100px;
background: #000;
color: #fff;
}
.numscroller-sec .top{
	text-align: center;
	margin-bottom: 50px;
}
.numscroller-main {
	text-align: center;
}
.numscroller-main h3{
	font-size: 80px;
}
.solution-sec{
	padding-top: 100px;
	padding-bottom: 100px;
}
.solution-sec .top{
	display: flex;
	flex-direction: column;
	gap: 30px;
	text-align: center;
	margin-bottom: 50px;
}
.solution-block{
	padding-left: 15px;
	padding-right: 15px;
}
.solution-img{
		padding-left: 25px;
	padding-right: 25px;
	position: relative;
	z-index: 1;
}
.solution-image-shape{
position: absolute;
content: " ";
left: 0;
height: 50%;
width: 100%;
background: rgb(241, 241, 241);
bottom: 0;
z-index: -1;
transition: all 0.6s;
}
.solution-img:hover .solution-image-shape{
	background-color: red;
}
.solution-content{
			padding-left: 25px;
	padding-right: 25px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding-top: 35px;
	margin-bottom: 50px;
}
.client-feedback-wrapper{
	padding-top: 100px;
	padding-bottom: 100px;
}
.client-feedback-wrapper .row{
	    align-content: center;
    align-items: center;
}
.client-feedback-wrapper .top{
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 50px;
}
.client-feedback-image{
	  padding-left: 15px;
}

.client-feedback-image > div{
    height: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden; 

}
 
 .client-feedback-quote {
    color: #422cf1;
}

.client-feedback-slider .item img{
width: 60px!important;
transform: rotate(180deg);
}
.client-feedback-slider .owl-dots{
	display: none;
}
.client-feedback-slider .item {
	display: flex;
	flex-direction: column;
	gap:10px;
}
.client-feedback-slider .item h5{
	margin-top: 20px;
}
.client-feedback-slider .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
        bottom: -130px;
}

.client-feedback-slider .owl-carousel .owl-nav button  {    
    color: inherit;
    border: none;
    padding: 0!important; 
    width: 40px;
    height: 40px; 
}

.client-feedback-slider .owl-carousel .owl-nav button span{
	display: none;
}



.team-contribution-section {
	padding-top: 100px;
	padding-bottom: 100px;
	background: #f5f5f5;
	display: none;
}
.team-contribution-section .row{
    align-items: center;
}
.team-contribution-section .left > div{
display: flex;
flex-direction: column;
gap: 30px;
}
.team-contribution-section .right > div{
border-radius: 20px;
overflow: hidden;
}
.blog-section{
	padding-top: 100px;
	padding-bottom: 100px;
}
.blog-section .top > div{
	display: flex;
	flex-direction: row;
	margin-bottom: 50px;
} 
.blog-section .top .left{
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.blog-section .top .right { 
    margin-left: auto;
    display: flex; 
    justify-content: flex-end;
    flex-direction: column;
    align-content: flex-end;
}
.blog-item{
	margin-bottom: 50px;
}
.blog-item > div{
	box-shadow: 0 4px 50px rgba(0, 0, 0, .1);
border-radius: 5px;
}
.blog-item-content {
    padding: 50px 40px 45px;
}
.blog-item-content-top{
	display: flex;
	grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-items: center;
    margin-bottom: 25px; 
}
.blog-item-content h2{
	font-size: 40px;
}
.blog-category-link {
    color: #0c1523;
    background-color: #edebfd;
    border-radius: 5px;
    padding: 10px 20px 12px; 
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color .3s, background-color .3s;
    text-decoration: none;
}
.blog-category-link:hover{
	background-color: #2b3767;
	color: #fff;
	text-decoration: none;
}
.search-form > div {
    max-width: 500px;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}
.blog-button-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-right: auto;
    display: flex;
    margin-top: 15px;
    justify-content: left;
}
.single-post{ 
	margin-bottom: 50px;
}
.single-post .row{
	background-color: #2A3767;
	width: 100%;
	margin: auto;
	border-radius: 10px;
	overflow: hidden;
}
.form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: flex-start;
    align-content: center;
}
.single-post-left,.single-post-right{
	padding: 0;
	color: #fff;
}
.single-post-right h6{
color: #fff;
}
.inner-button-block{
	    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-right: auto;
    display: flex;
    margin-top: 15px;
    justify-content: center;
    width: 100%;
}




.benefits{ 
	padding-bottom: 100px;
	padding-top: 100px;
	display: none;
}
.benefits .top{
	display: flex;
	flex-direction: column;
	gap: 30px;
}

footer{
	background-color: #0a0f16;
 
	padding-top:50px;
	color: #fff;
}
footer a{
	color: #fff;
	text-decoration: none;
}
footer a:hover{
	color: #f6f6f6;
}
.flex-icon{
	display: flex;
	padding-top: 2px;
}
.newsletter-form {
    width: 100%;
    margin-left: auto;
    position: relative;
}
.newsletter-wrapper {
	    background-color: #2b3767;
    position: relative;
    transform: rotate(-1.5deg);
    margin-top: -350px;
    display: none;
}
.newsletter-wrapper-inner{
	z-index: 3;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    background-color: #f9f9f9;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px; 
    display: flex;
    overflow: hidden;
    transform: rotate(1.5deg);
}
.newsletter-wrapper-inner > div{
	display: flex;
	 grid-column-gap: 30px;
    grid-row-gap: 30px;
    background-color: #f9f9f9;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px;
    padding: 110px 80px ;
        justify-content: space-between;
    width: 100%;
}
.newsletter-wrapper-inner   h2{
	color: #000;
}
.newsletter-input {
    height: 65px;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #b0a6a6;
    border-radius: 6px;
    margin-bottom: 0;
    padding: 19px 130px 19px 20px;
}
.newsletter-button {
    height: 48px;
    min-width: 121px;
    color: #fff;
    background-color: #2b3767;
    border-radius: 10px;
    margin-top: 8px;
    margin-right: 8px;
    font-family: Plusjakartasans Semi Bold, sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: background-color .3s;
    position: absolute;
    top: 0;
    right: 0;
}

.footer-bottom-wrapper {
    background-color: #151c25;
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.footer-bottom-block {
    justify-content: center;
    align-items: center;
    padding-top: 35px;
    padding-bottom: 35px;
    display: flex;
}
.footer-left{
	margin-bottom: 50px;
}
.footer-left > div{
	    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-left .footer-social-link a{
	border: 1px solid #fff;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	display: flex;
	justify-content: center;
    align-items: center;
    background-color: #fff;
}
.footer-left .footer-social-link a img{
	width: 100%;
}
.footer-logo{
	max-width: 150px;
}
.footer-right ul{
	margin-top: 15px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-right table{
	color: #fff;
	margin-top: 15px;
}
.footer-right table img{
	padding-right: 10px;
	max-width: 30px;
}
.footer-right table tr td{
	padding-bottom: 15px;
}
.footer-social-link{
	display: flex;
	gap: 15px; 
}

.process-section{
	padding-top: 100px;
	padding-bottom: 100px;
}
.process-section .left > div{
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 30px;
padding-right: 50px;
}
.process-section img{
	max-width: 150px;
}
.process-section .right > div{
	display: flex;
	flex-direction: column;
	gap: 80px;
}
.process-section .right > div > div{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.process-section-btn{ 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-right: auto;
    display: flex;
    margin-top: 15px; 
}
 .process-section .right img{
 	max-width:100px;
 }




/* contact page */

.inner-hero{
background: #d5e8ee; 
padding-top: 100px;
padding-bottom: 100px;
background-image: url('../images/hero/Mobile application development.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
color: #fff;
}

.web-design{
	background-image: url('../images/hero/web.jpg');
}
.ui-design{
	background-image: url('../images/hero/ui.jpg');
}
.about-banner{
    background-image: url('../images/hero/about.jpg');
}
.contact-banner{
    background-image: url('../images/hero/contact.jpg');
}
.inner-hero::after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
z-index: 1;
}
.inner-hero .row{
align-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 2; 
}
.inner-hero-main > div{
	display: flex;
	flex-direction: column;
	gap: 30px; 
}
.inner-hero h1{
    color: #fff;
}


.myform{
background: #fff;
border-radius: 15px;
padding: 35px 50px;
-webkit-box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
-moz-box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
margin-bottom: 50px;
}
input[type="text"],     input[type="email"]   {
position: relative;
display: block;
width: 100%;
color: #a5a5a5;
line-height: 26px;
padding: 10px 20px;
height: 60px;
font-size: 14px;
border-radius:15px;
background: #f4f4f4;
border: 1px solid transparent;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px; 
margin-bottom: 25px;
-webkit-box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
-moz-box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
}

textarea {
position: relative;
display: block;
width: 100%;
line-height: 26px;
padding: 10px 20px;
color: #a5a5a5;
height: 200px;
font-size: 14px;
resize: none;
border-radius: 15px;
background: #f4f4f4;
border: 1px solid transparent;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px; 
margin-bottom: 25px;
-webkit-box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
-moz-box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
box-shadow: 1px -3px 14px -1px rgba(0,0,0,0.21);
}
/* input[type="submit"] {
background: #134127;
color: #fff;
line-height: 26px;
padding: 10px 50px;
height: 60px;
font-size: 14px;
border-radius:15px;
border:3px solid  #134127;
text-transform: uppercase;
transition: all 0.6s;
}
input[type="submit"]:hover{
background: transparent;
color: #134127;
} */
*:focus {
outline: none;
}

textarea:focus, input:focus{
outline: none!important;
}
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}

.contact-main{
	padding-top: 100px;
	padding-bottom: 100px;
   
}
.contact-main .row{
	    align-items: center;
    justify-content: center;
}
.contact-top{
	    text-align: center;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    }
    .contact-details a,.contact-details{
        color: #000;
    }
.contact-details-top .block > div{
	text-align: center;
	max-width: 350px;
	margin: auto;
	padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-details-top img{
    width: 120px;
    margin: auto;
}


.faq-sec{
	padding-top: 100px;
	padding-bottom: 100px; 
}
.faq-sec .top{
	text-align: center;
}
#faqs {
  max-width: 1000px;
  margin: auto;
  margin-top: 50px;
}

#faqs #faq .card {
  margin-bottom: 30px;
  border: 2px solid #ebeaea;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

#faqs #faq .card .card-header {
 border: none;
  padding: 0;
}

#faqs #faq .card .card-header .btn-header-link {
  display: block;
  text-align: left;
  background: transparent;
  color: #2b3767;
  padding: 20px; 
  font-size: 20px;
  position: relative;
  padding-right: 50px;
  font-family: 'Roboto';
  font-weight: 700;
}

#faqs #faq .card .card-header .btn-header-link:after {
  content: "\f068";
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  float: right;
  font-size: 15px;
  top: 0;
  position: absolute;
  right: 15px;
  bottom: 0;
  margin: auto;
  height: 100%; 
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

#faqs #faq .card .card-header .btn-header-link.collapsed {
  background: transparent;
  color: #000; 
}
#faqs .card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

#faqs #faq .card .card-header .btn-header-link.collapsed:after {
  content: "\f067";
}

#faqs #faq .card .collapsing {
  background: transparent;
  line-height: 30px;
}

#faqs #faq .card .collapse {
  border: none;  
}
#faqs .card-body { 
    color: #000;
    background: transparent;
}
#faqs #faq .card .collapse.show {
  background: transparent;
  line-height: 30px;
  color: #000; 
}

.technical-sec{
	padding-top: 100px;
	padding-bottom: 100px; 
	    background-color: #f5f5f5;
}
.technical-sec .top > div{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin: auto;
    margin-bottom: 50px;
}
.tec-card{
    align-items: center; 
    margin-bottom: 50px;
    justify-content: center;
}
.tec-card.flex{
    flex-direction: row-reverse;
}
.tec-card .right > div{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.tec-card .left > div{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
}

.s-process-section{
    padding-top: 100px;
	padding-bottom: 100px; 
}
.s-process-section .top{
    text-align: center;
}
.s-process-section .top > div {  
    display: flex;
    flex-direction: column;
    gap: 30px; 
    margin-bottom: 50px;
}

.s-process-section .bottom  > div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px; 
}
.s-process-section .bottom  > div > div{
    width: 31.32%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #f4f4f4;
    padding: 25px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.s-process-section .bottom img{
    max-width: 100px;
}






.progress-bars{ 
	padding-bottom: 100px;
	position: relative;
}
.progress-bars .left > div{
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 30px;
padding-right: 50px;
}
.progress-bars img{
	max-width: 150px;
}
.progress-bars .right {
    display: flex;
    flex-direction: row;
}

.progress-bars .right .right-r{
	display: flex;
	flex-direction: column;
	gap: 80px;
    width: 85%;
}
.progress-bars .right .right-r > div{
    display: flex;
	flex-direction: row;
    align-items: top;
}
.progress-bars .right-r-content{
	display: flex;
	flex-direction: column;
	gap: 20px; 
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 25px;
    background-color: #fff;
    border: 2px solid #ebeaea;
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.progress-bars .right-r-content:hover{
    box-shadow: 0 9px 40px rgba(0, 0, 0, .05);
    border: 2px solid #fff;
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
}
.progress-bars-btn{ 
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-right: auto;
    display: flex;
    margin-top: 15px; 
}
 .progress-bars .right img{
 	max-width:100px;
 }
 .progress-bars  .right-l{ 
    width:15%; 
    height: 100%;
    position: relative;
}
 .timeline_progress {
    z-index: -2;
    width: 2px;
    height: 100%;
    background-color: rgba(65, 65, 65, 0.3);
    margin-top: -100px;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0;
    right: auto;
}
.timeline_progress-bar {
    z-index: -1;
    width: 2px;
    height: 50vh;
    margin-top: -150px;
    background-color: #2b3767;
    background-image: linear-gradient(to bottom, #9399b8, rgb(123, 202, 33) 33%, var(--7f92ef));
    /* margin-top: -50vh; */
    position: -webkit-sticky;
    position: sticky;
    top: 0%;
    bottom: 0%;
    left: auto;
    right: 50%;
}

.right-r-num > div{
    background-color: #2b3767;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: #fff;
    font-weight: 600;
    margin-top: 50px;
} 
.right-r-num{
    position: absolute;
    left: -10px;
}
.overlay-fade-top {
    height: 90px;
/*    background-image: linear-gradient(#fff, #fff 83%, rgba(255, 10, 10, 0));*/
    position: absolute;
    top: 0;
    left: -50px;
    right: 12%;
    background-color: #fff;
}
.overlay-fade-bottom {
    height: 310px;
    background: #fff;
    /* background-image: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); */
    position: absolute;
    top: auto;
    bottom: 0%;
    left: -50px;
    right: 0%;
}
.overlay-fade-bottom2 {
    height: 205px;
    background: #fff;
    /* background-image: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); */
    position: absolute;
    top: auto;
    bottom: 0%;
    left: -50px;
    right: 0%;
}
.extra-height{
	height: 100px;
	background-color: #fff;
}







.projects-section{
	padding-top: 100px; 
}
.projects-section .top > div{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    justify-content: center;
    text-align: center;
    gap: 30px;
} 
.projects-section .top .left{
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.projects-section .top .right { 
    margin-left: auto;
    display: flex; 
    justify-content: flex-end;
    flex-direction: column;
    align-content: flex-end;
}
.projects-item{
	margin-bottom: 50px;
}
.projects-item > div{
	box-shadow: 0 4px 50px rgba(0, 0, 0, .1);
border-radius: 5px;
}
.projects-item-content {
    padding: 25px;
}
.projects-item-content-top{
	display: flex;
	grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-items: center;
    margin-bottom: 25px; 
}
.projects-item-content h2{
	font-size: 40px;
}
.projects-category-link {
    color: #0c1523;
    background-color: #edebfd;
    border-radius: 5px;
    padding: 10px 20px 12px; 
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color .3s, background-color .3s;
    text-decoration: none;
}
.projects-category-link:hover{
	background-color: #2b3767;
	color: #fff;
	text-decoration: none;
}


.technical-cap{
padding-top: 100px;
padding-bottom: 100px;
    background-color: #f5f5f5;
}
.technical-cap .top {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin: auto;
    margin-bottom: 50px;
}
.technical-cap  .bottom > div{
	    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
        justify-content: center;
    align-items: flex-start;
}
.technical-cap  .bottom > div > div{
	width: 11%;
}
.technical-cap  .bottom > div > div img{
	width: 100%;
	padding: 30px;
/*    background: #2b37671c;*/
    border: 2px solid #ebeaea;
        transition: transform .3s, border-color .3s, box-shadow .3s;
        border-radius: 10px;
}
.web-hide-btn{
	display: none;
}

.privacy-policy{
	padding-top: 100px;
	padding-bottom: 100px;
}
.privacy-policy .row{
	justify-content: center;
}
.privacy-policy-content h4,.privacy-policy-content p{ 
 margin-bottom: 10px;
}

.about-content{
    padding-top: 100px;
    padding-bottom: 100px;
}
.about-content .top{
	margin-bottom: 100px;
}
.about-content .left div,.about-content .right div{
	display: flex;
	flex-direction: column;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    background-color: #fff;
    border: 2px solid #ebeaea;
    border-radius: 10px;
    padding: 50px 15px;
    padding-top: 25px;
    transition: transform .3s, border-color .3s, box-shadow .3s;
 
    position: relative;
    overflow: hidden;
    height: 100%;
}
.about-content .left div:hover,.about-content .right div:hover  {
    box-shadow: 0 9px 40px rgba(0, 0, 0, .05);
    border: 2px solid #fff;
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
}
.about-content .left{
	padding-left: 100px;
}
.about-content .right{
	padding-right: 100px;
}
.about-content img{
	max-width: 100px; 
}
.our-approach,.our-team{
	  padding-top: 100px;
    padding-bottom: 100px;
}
.our-approach .acard  img{
	max-width: 150px;
}
.our-team .right > div{
	border-radius: 10px;
 overflow: hidden;
}
.our-team .right img{
width: 100%;
}
.our-approach .top{
	text-align: center;
	margin-bottom: 50px;
}
.our-team .left{
	display: flex;
}
.our-team .left>div{
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: center;
}
.our-team .row{
	justify-content: center;
}

.our-approach .acard > div{
	display: flex;
	flex-direction: column;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    background-color: #fff;
    border: 2px solid #ebeaea;
    border-radius: 10px;
    padding: 50px 15px;
    padding-top: 0;
    transition: transform .3s, border-color .3s, box-shadow .3s;
 
    position: relative;
    overflow: hidden;
    height: 100%;
}

.our-approach .acard > div:hover {
    box-shadow: 0 9px 40px rgba(0, 0, 0, .05);
    border: 2px solid #fff;
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
}