@import url('bootstrap.min.css');

@import url('owl.carousel.min.css');

@import url('owl.theme.default.css');

@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');

@font-face {

	font-family: airbnb;

	src: url(../fonts/AirbnbCerealLight.ttf);

}



@font-face {

	font-family: airbnb_bold;

	src: url(../fonts/AirbnbCerealBlack.ttf);

}



body {

	font-family: airbnb;

}



* {

	scroll-behavior: smooth;

}



.fontbold {

	font-family: airbnb_bold;

}



.text-blue {

	color: #0086d5;

}



.sidebar::-webkit-scrollbar {

	opacity: 0;

}



* {

	scrollbar-color: #0086D5 #f1f1f1;

	scrollbar-width: thin;

}





/* width */



::-webkit-scrollbar {

	width: 5px;

}


iframe {
    border-radius: 0px 0px 34px 30px;
}


/* Track */



 ::-webkit-scrollbar-track {

	background: #f1f1f1;

}





/* Handle */



 ::-webkit-scrollbar-thumb {

	background: #0086D5;

}





/* Handle on hover */



 ::-webkit-scrollbar-thumb:hover {

	background: #0086D5;

}





/*---------Navbar--------*/



.emailid i,

.phone_icon i {

	color: #fff;

	background-color: #0086D5;

}



.whatsapp i {

	color: #fff;

	background-color: #48A91F;

}



.skype i {

	color: #fff;

	background-color: #009BD1;

}



ul.top-menu i {

	display: inline-block;

	height: 20px;

	width: 20px;

	line-height: 18px;

	text-align: center;

	border-radius: 20px;

}



ul.top-menu {

	position: absolute;

	z-index: 2000;

	background: rgba(0, 0, 0, 0.3);

	width: 100%;

	font-size: .9rem;

	text-align: right;

}



ul.top-menu a {

	color: #fff;

	text-decoration: none;

}



a.navbarToggle {

	display: inline-block;

}



a.navbarToggle {

	display: block;

}



span.navtoggleBaar {

	display: block;

	height: 2px;

	width: 30px;

	margin-bottom: 5px;

	background: #fff;

}



span.navtoggleBaar:last-child {

	margin-bottom: 0px;

}



nav.navbar {

	transition: all .5s;

	padding: 50px 20px 10px;

}



body.scrolled nav.navbar {

	background: #fff;

	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .3);

	z-index: 1000000;

	padding: 5px 10px;

}



body.scrolled span.navtoggleBaar {

	background-color: #000;

}





/*---------Navbar--------*/



.sec1 {

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008bdb+0,013775+100 */

	background: rgb(0, 139, 219);

	/* Old browsers */

	background: -moz-linear-gradient(45deg, rgba(0, 139, 219, 1) 0%, rgba(1, 55, 117, 1) 100%);

	/* FF3.6-15 */

	background: -webkit-linear-gradient(45deg, rgba(0, 139, 219, 1) 0%, rgba(1, 55, 117, 1) 100%);

	/* Chrome10-25,Safari5.1-6 */

	background: linear-gradient(45deg, rgba(0, 139, 219, 1) 0%, rgba(1, 55, 117, 1) 100%);

	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bdb', endColorstr='#013775', GradientType=1);

	/* IE6-9 fallback on horizontal gradient */

}



.mainslider .item {

	height: 100vh;

}



.mainslider .item img {

	height: 26vw;

	width: auto;

	margin: 0 auto;

}



.animateLayer1 {

	background-image: url(../images/whiteLayer_1.png);

	height: 36vw;

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	z-index: 10;

	background-size: cover;

	/* animation: bganimation 20s infinite linear; */

}





/* @keyframes bganimation {

  from {background-position: 0px 0px;}

  to {background-position: 100vw 0px;}

} */



span.leftTopshape {

	position: absolute;

	top: 0;

	left: 0;

}



span.leftTopshape>img {

	height: 22vw;

}



section#particles-js>canvas {

	position: absolute;

	top: 0;

	left: 0;

	pointer-events: none;

	height: 100%!important;

	width: 100%!important;

}



span.roundShape {

	position: absolute;

	left: 50%;

	top: 10%;

	animation: roundshape 30s infinite linear;

}



@keyframes roundshape {

	from {

		transform: rotate(0deg);

	}

	to {

		transform: rotate(360deg);

	}

}



span.roundShape>img {

	height: 20vw;

}



section.sec1 {

	padding-bottom: 150px;

	position: relative;

}



.mainslider {

	animation-name: heading;

	animation-duration: 2s;

}



@keyframes heading {

	from {

		transform: translate(0px, -100px);

		opacity: 0;

	}

	to {

		transform: translate(0px, 0px);

		opacity: 1;

	}

}





/*------sidebar--------*/



.sidebar {

	position: fixed;

	z-index: 10000000;

	background: #fff;

	width: 250px;

	height: 100%;

	right: -250px;

	box-shadow: 10px 10px 30px 20px rgba(0, 0, 0, 0.2);

	transition: all .5s;

	padding-bottom: 50px;

	overflow: auto;

}



.sidebar.openSidemenu {

	right: 0px;

}



.sidebar>ul {

	list-style: none;

	padding-left: 0px;

	margin-top: 40px;

}



.sidebar>ul a {

	display: block;

	padding: 10px 20px;

	color: #828282;

	font-weight: 700;

}



.sidebar>a {

	position: absolute;

	font-size: 25px;

	right: 10px;

	color: #000;

}





/*------technologies sec--------*/



.headingSec {

	margin-top: 30px;

}



section.animate .headingSec {

	transform: translate(0px, 0px);

	opacity: 1;

}



section .headingSec {

	margin-top: 70px;

	transform: translate(0px, 100px);

	opacity: 0;

	transition: all .5s;

}



section#services {

	position: relative;

}



section#services .row {

	align-items: center;

	justify-content: center;

	text-align: center;

}



.floatingShapes {

	height: 100%;

	width: 100%;

	top: 0;

	left: 0;

	position: absolute;

	z-index: -1;

	background: url(../images/bg2.png);

	background-size: 800px;

	background-attachment: fixed;

}



.programmingLang {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	border: 3px solid #cce7f7;

	min-height: 130px;

	border-radius: 10px;

	margin-bottom: 1rem;

	transition: all .3s;

	width: 130px;

	margin: 5px;

	padding: 5px;

	background: #fff;

}



.programmingLang:hover {

	box-shadow: 0px 0px 20px 0px rgba(128, 155, 171, .3);

	transform: scale(1.02);

}



.programmingLang>img {

	width: 60px;

	margin-bottom: 10px;

	height: 60px;

	object-fit: contain;

}



.programmingLang>h5 {

	font-weight: 600;

	margin-top: 10px;

	font-size: 14px;

}



.technologiesTitle {

	font-size: 20px;

	margin-bottom: 0px;

}



.programmingLang>img {

	transition: 1s all;

}



.programmingLang:hover img {

	transform: rotateY(360deg);

}





/*------about sec--------*/



.sec3 {

	background-image: url(../images/buildingBg.jpg);

	background-attachment: fixed;

}



.sec3 .imgLogo {

	transform: scale(0);

	opacity: 0;

	transition: all .5s;

	position: absolute;

	top: 10%;

	left: 0;

	height: 60%;

	width: auto;

}



.sec3.animate .imgLogo {

	transform: scale(1);

	opacity: 1;

}



.pentahedron {

	position: absolute;

	width: 100%;

	height: 100%;

	fill: #3E82F7;

}



.point {

	fill: #8491A3;

}



.rhombus {

	fill: #2DA94F;

	stroke: #2DA94F;

}



.x {

	fill: #FDBD00;

}



.circle {

	fill: #ED412D;

}



svg {

	display: block;

	width: 30px;

	height: 30px;

	position: absolute;

	transform: translateZ(0px);

}



.appscreens .item {

    border: 1px solid #e8e8e8;

}

/*-----------portfolio----------*/





/* .sec2 .programmingLang {

    transform: scale(0);

    opacity: 0; 

    transition: all .5s;

}

.sec2.animate .programmingLang {

    transform: scale(1);

    opacity: 1;

} */



.galleryInfo {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%!important;

	position: absolute;

	bottom: 0;

	background: rgba(0, 0, 0, 0.7);

	color: #fff;

	padding: 10px;

	height: 100%;

	flex-direction: column;

	transform: scale(0);

	opacity: 0;

	transition: all .5s;

}



.galleryHolder span {

	transition: all .5s .3s;

	width: calc(100% - 30px);

	height: calc(100% - 30px);

	top: 15px;

	left: 15px;

	transform: scale(.5);

	opacity: 0;

	display: block;

	position: absolute;

	z-index: 1;

	border: 2px solid #fff;

}



.galleryInfo a {

	font-size: 3rem;

	color: #fff;

	text-decoration: none;

	position: relative;

	z-index: 2;

}



.galleryHolder:hover span {

	transform: scale(1);

	opacity: 1;

}



.galleryHolder:hover .galleryInfo {

	transform: scale(1);

	opacity: 1;

}



section.animate .galleryHolder {

	opacity: 1;

	transform: scale(1);

}



.galleryHolder {

	position: relative;

	height: 250px;

	transform: scale(0);

	transition: all .5s;

}



.galleryHolder>img {

	height: 100%;

	width: 100%;

	object-fit: cover;

}



.galleryInfo>h5 {

	margin-bottom: 0px;

	font-size: 1rem;

}



.spanTags>span.active,

.spanTags>span:hover {

	background: #0086d5;

}



.spanTags>span {

	display: inline-block;

	padding: 5px 10px;

	background: #bdbdbd;

	color: #fff;

	border-radius: 30px;

	margin-bottom: 10px;

	cursor: pointer;

	transition: all .3s;

}



.customTabs {

	height: 0px!important;

}



.customTabs.active {

	height: auto !important;

}



.customTabs.active>div {

	transform: scale(1);

	opacity: 1;

}



.customTabs>div {

	transition: all 1s;

	transform: scale(0);

	opacity: 0;

}



.sec6 {

	background-image: url(../images/workwithus_img.jpg);

	background-attachment: fixed;

}



.form-control.transInput::-webkit-input-placeholder {

	/* Chrome/Opera/Safari */

	color: #525252;

	opacity: 1;

}



.form-control.transInput::-moz-placeholder {

	/* Firefox 19+ */

	color: #525252;

	opacity: 1;

}



.form-control.transInput:-ms-input-placeholder {

	/* IE 10+ */

	color: #525252;

	opacity: 1;

}



.form-control.transInput:-moz-placeholder {

	/* Firefox 18- */

	color: #525252;

	opacity: 1;

}



.form-control.transInput {

	border: 2px solid #eaeaea;

	box-shadow: 0px 0px 0px;

	background: #eaeaea;

	min-height: 50px;

	color: #525252;

	border-radius: 10px;

	transition: all .5s;

}



.form-control.transInput:focus {

	border: 2px solid #0086D5;

}





/*  */



.btn.btn-blue {

	background: #0086d5;

	color: #fff;

	font-weight: 800;

	height: 50px;

	border-radius: 10px;

}





/*--------footer----------*/



.footerbg {

	background: #198ED4 url(../images/footer_img.jpg);

	background-size: cover;

}



.footerlinks a {

	color: #fff;

	text-decoration: none;

	display: block;

	padding: 5px;

}



.footerlinks {

	list-style: none;

	padding-left: 15px;

}



.footerToplayer {

	margin-bottom: -50px;

}





.footerlogo {

    margin-top: 50px;

    margin-bottom: 20px;

}



.footerBtm {

	background-color: rgba(255, 255, 255, .2);

	color: #fff;

	margin-top: 40px;

}



.btm-menu a {

	font-size: 30px;

	font-weight: 100!important;

	padding: 5px!important;

	display: block!important;

}



.btm-menu {

	display: flex;

	align-items: center;

	justify-content: space-around;

	position: fixed;

	width: 250px;

	bottom: 0;

	background: #fff;

	border-top: 1px solid #ddd;

}



.businessHolder {

	background: #fff;

	padding: 40px;

	border-radius: 20px 20px 270px 70px;

	border-right: 12px solid #0086d5;

	width: calc(100% - 150px);

	/* border-bottom: 10px solid #0086d5; */

	margin-bottom: -170px;

	box-shadow: 20px 20px 10px 0px rgba(0, 0, 0, .2);

}



.joinBusiness {

	max-width: 620px;

	position: absolute;

}



.technologiesTitle {

	font-size: 20px;

}



.page-progress {

	width: 100%;

	height: 3px;

	background: #fff;

	position: fixed;

	z-index: 10000000;

	top: 0;

	left: 0;

}

#appbg {

	background-image: url(../images/app-1.jpg);

	padding-top: 50px;

}

.appicon_holder > img {

    height: 100%;

}

.appicon_holder {

    border-radius: 100%;

    height: 150px;

    width: 150px;

    border: 1px solid #ccc;

    padding: 10px;

    overflow: hidden;

}

.apptitle {

    font-size: 2rem;

}

.whitebox {

    background: #fff;

    margin-top: -60px;

    box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.5);

    border-radius: 40px;

}
.form-control {
    height: 50px;
    /* border: 0px solid #ddd !important; */
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
}
.btn {
    border-radius: 30px;
    height: 50px;
    min-width: 40%;
}
@media only screen and (max-width: 993px) {

	.businessHolder {

		width: 100%;

	}

	.joinBusiness {

		position: static;

		max-width: 100%;

	}

	.footerlogo {

		margin-top: 30px !important;

		margin-top: 70px!important;

	}

	.sec3 .imgLogo {

		height: 45%;

	}

	section .headingSec {

		margin-top: 30px;

	}

	/* .footerlogo {

        margin-top: 0px !important;

    } */

	ul.top-menu {

		display: none;

	}

	nav.navbar {

		padding: 10px 20px 10px;

	}

	.mainslider .item img {

		height: 70vw;

	}

	.mainslider .item {

		min-height: 100vh !important;

		height: auto;

		padding-top: 110px;

	}

	section.sec1 {

		padding-bottom: 40px;

	}

	section .headingSec h1 {

		font-size: 24px;

	}

	.footerbg {

		background-repeat: no-repeat;

		background-position: bottom;

	}

}



@media only screen and (max-width: 767px) {

	.footerToplayer {

		margin-bottom: -80px;

	}

	.sec3 .imgLogo {

		display: none;

	}

}