*{
		box-sizing: border-box; -webkit-box-sizing: border-box;
		margin: 0; padding: 0;
	}
	ul{list-style: none;}
	a{text-decoration: none;}
	body{line-height: normal; overflow-x: hidden; }
	:root{
		--default:'Inter';
		--blue:#1891ff;
		--dark:#333;
		--black:#000;
		--white:#fff;
	}
	body{
		background: #fff;
	}
	body.disablescroll{
		overflow-y:hidden;
	}
	.container{
		width: 1024px;
		margin: 0 auto 0 auto;
	}
	/* DEFAULT */






	header{
		position: fixed;
		width: 100%;
		left: 0; top: 0;
		z-index: 2;
		padding: 40px 0;
		transition: 0.3s;
	}
	header.fixed{
		background: linear-gradient(to right, #2e4ae1, #4e5970);
		padding: 20px 0;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
		border-bottom: 1px solid #1e2964;
	}
	a.logo{
		float: left;
	}
	a.logo img{
		float: left;
		width: 180px; height: auto;
	}



	a.showmenu, a.hidemenu{
		display: none;
	}
	.menublock{
		float: right;
		margin: 0 0 0 0;
	}
	nav, nav ul, nav ul li{
		float: left;
	}
	nav ul li{
		font-family: var(--default);
		font-size: 13px;
		color: #fff;
		margin-right: 25px;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	nav ul li:last-of-type{
		margin-right: 0;
	}
	nav ul li a{
		float: left;
		color: #fff;
		text-decoration: none;
		padding: 8px 15px;
	}
	nav ul li.active a{
		background:#1891ff;
	}
	/* HEADER AND MENU */





	.banner{
		float: left;
		width: 100%;
		background: linear-gradient(to right, #2e4ae1, #4e5970);
		padding: 200px 0 100px 0;
		position: relative;
		z-index: 1;
	}
	.banner:before{
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(images/herobg.png) no-repeat center;
		background-size: cover;
		z-index: -1;
		content: '';
		left: 0; top: 0;
		opacity: 0.2;
	}
	.banner .text{
		float: left;
		width: 30%;
		font-family: var(--default);
	}
	.banner .text h1{
		font-size: 60px;
		color: #fff;
		margin-bottom: 30px;
		border-bottom: 1px solid #fff;
		padding-bottom: 30px;
	}
	.banner .text p{
		font-size: 15px;
		color: #fff;
		margin-bottom: 50px;
	}
	.banner .text a{
		font-size: 21px;
		color: var(--blue);
		text-decoration: none;
		font-style: italic;
	}
	.banner .visual{
		float: right;
		width: 52%;
		position: relative;
		animation: mymove 4s ease-out infinite;
		margin: 30px 0 0 0;
	}
	@keyframes mymove{
		0%{margin:30px 0 0 0;}
		50%{margin:0px 0 0 0;}
		100%{margin:30px 0 0 0;}
	}
	@-webkit-keyframes mymove{
		0%{margin:30px 0 0 0;}
		50%{margin:0px 0 0 0;}
		100%{margin:30px 0 0 0;}
	}

	.banner .visual img.devicepic{
		float: left;
		width: 100%;
		margin: 0 0 0 0;
		position: relative;
		z-index: 5;
	}
	.banner .visual img.image1{
		position:absolute;
		width: 80%; height: auto;
		left: 10%;  top: 2%;
		z-index: 4;
		aspect-ratio: 16/10;
		object-fit: cover;
		object-position: center;
	}
	.banner .visual img.image2{
		position:absolute;
		width: 13%; height: auto;
		right: 0.6%;  bottom: 7.5%;
		z-index: 6;
		aspect-ratio:2/3.3;
		object-fit: cover;
		object-position: center;
	}
	/* BANNER */



	.about{
		float: left;
		width: 100%;
		padding: 100px 0 50px 0;
	}
	.about .text{
		float: left;
		width: 100%;
		font-family: var(--default);
	}
	.about .text h2{
		float: left;
		width: 30%;
		font-size: 60px;
		color: #000;
		margin-bottom: 50px;
	}
	.about .text .para{
		float: right;
		width: 58%;
	}
	.about .text p{
		font-size: 15px;
		color: #000;
		margin-bottom: 20px;
	}
	.about .visual{
		float: left;
		width: 100%;
		margin-top: 60px;
	}
	.about .visual img{
		float: left;
		width: 100%;
		height: auto;
		aspect-ratio: 16/8;
		object-fit: cover;
		object-position: center;
	}
	/* ABOUT */






	.services{
		float: left;
		width: 100%;
		padding: 50px 0 50px 0;
		font-family: var(--default);
	}
	.services h2{
		font-size: 60px;
		color: #000;
		margin-bottom: 50px;
	}
	.services-items{
		float: left;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.services-items .item{
		float: left;
		width: 30%;
		margin-bottom: 60px;
		padding: 30px;
		text-align: center;
		background: #eee;
		color: #000;
		transition: 0.3s;
	}
	.services-items .item.type2{
		background: linear-gradient(to right, #2e4ae1, #4e5970);
		color: #fff;
	}
	.services-items .item .image{
		float: left;
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-bottom: 30px;
	}
	.services-items .item img{
		float: left;
		width: 100%;
		height: auto;
		aspect-ratio:16/9;
		object-fit: cover;
		object-position: center;
		transition:0.6s; -webkit-transition:0.6s;
	}
	.services-items .item:hover img{
		transform: scale(1.3);
	}
	.services-items .item i{
		width: 60px; height: 60px;
		font-size: 48px;
		margin-bottom: 30px;
		text-transform: uppercase;
	}
	.services-items .item h3{
		text-align: left;
		font-size: 24px;
		margin-bottom: 20px;
	}
	.services-items .item p{
		text-align: left;
		font-size: 15px;
	}
	/* SERVICES ITEMS */





	.projects{
		float: left;
		width: 100%;
		margin:0 0 0 0;
		padding: 50px 0 100px 0;
		background: #f7f7f7;
		font-family: var(--default);
		border-top: 1px solid #ccc;
		padding-top: 80px;
	}
	.projects h2{
		font-size: 60px;
		color: #000;
		margin-bottom: 50px;
	}
	.project-item{
		float: left;
		width: 100%;
		margin-bottom: 100px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.project-item:last-of-type{
		margin-bottom: 0;
	}
	.project-item .text{
		width: 45%;
		font-family: var(--default);
		color: #000;
	}
	.project-item .text h3{
		font-size: 24px;
		margin-bottom: 30px;
	}
	.project-item .text p{
		font-size: 15px;
		margin-bottom: 20px;
	}
	.project-item .visual{
		width: 45%;
	}
	.project-item .visual img{
		float: left;
		width: 100%;
		height: auto;
		object-fit: cover;
		object-position: center;
		aspect-ratio: 16/9;
	}
	/* PROJECTS */





	.contact{
		float: left;
		width: 100%;
		background: linear-gradient(to right, #2e4ae1, #4e5970);
		padding: 100px 0;
		font-family: var(--default);
		position: relative;
		z-index: 1;
	}
	.contact:before{
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(images/contactbg.png) no-repeat center;
		background-size: cover;
		z-index: -1;
		content: '';
		left: 0; top: 0;
		opacity: 0.2;
	}

	.contact-info{
		float: left;
		width: 100%;
	}
	.contact .headings{
		float: left;
		width: 45%;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 20px 0 20px 0;
	}
	.contact .headings h2{
		text-align: left;
		font-size: 60px; line-height: 110%;
		color: #fff;
		margin-bottom: 10px;
	}
	.contact .headings h4{
		text-align: left;
		font-size: 24px;
		color: #fff;
		font-weight: 600;
	}
	.contact-info ul{
		float: right;
		width: 45%;
		background: rgba(0,0,0,0.1);
		padding: 40px;
	}
	.contact-info ul li{
		font-size: 18px;
		color: #fff;
		margin-bottom: 25px;
	}
	.contact-info ul li a{
		color: #fff;
	}
	.contact-info ul li:last-of-type{
		margin-bottom: 0;
	}
	/* CONTACT */






	footer{
		float: left;
		width: 100%;
		background:#3e4982;
		padding: 40px 0;
	}
	footer .copyright{
		float: left;
		color: #fff;
		font-size: 15px;
		font-family: var(--default);
	}
	footer .copyright a{
		color: #fff;
		text-decoration: none;
	}
	footer .social{
		float: right;
	}
	footer .social a{
		float: left;
		color: #fff;
		font-size: 16px;
		margin-left: 10px;
		transition: 0.8s;
	}
	footer .social a:hover{
		color: var(--blue);
		transform: rotateY(360deg);
	}
	/* FOOTER */




	.topbutton{
		position:fixed;
		right:20px;
		bottom:20px;
		width:50px;
		z-index: 15;
		text-align:center;
		color:var(--black);
		font-size:15px;
		font-family:'Inter';
		font-weight: bold;
		text-transform: uppercase;
		cursor: pointer;
	}
	.topbutton span{
		float: left;
		width:50px;
		height:50px;
		background: linear-gradient(to right, #2e4ae1, #4e5970);
		border-radius:50%;
		-webkit-border-radius:50%;
		text-align:center;
		line-height:50px;
		font-size:21px;
		color:#fff;
		text-decoration:none;
		cursor:pointer;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.5); overflow:hidden;
		border: 3px solid #1e2964; 
		transition:1s; -webkit-transition:1s;
		z-index: 999;
		margin-bottom: 10px;
	}
	.topbutton:hover span{
		line-height:20px;
	}
	/* BREAK */