@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=sqap');


@media screen and (min-width: 1024px) {
  /* Add desktop styles here */


*{
 	margin:0;
 	padding:0;
 	box-sizing:border-box;
 	font-family:'Poppins',sans-serif;

 }


 .header{
 	position:fixed;
 	top:0;
 	left:0;
 	width:100%;
 	padding:20px 10%;
 	background:transparent;
 	display:flex;
 	justify-content: space-between;
 	align-items:center;
 	z-index:100;
 }


 .logo{
 	font-size:25px;
 	color:#031540;
 	text-decoration:none;
 	font-weight:700;
 }

 .navbar a{

 	font-size:18px;
 	color:#fff;
 	text-decoration:none;
 	font-weight:500;
 	margin-left:35px;
 	transition: .3s;
 }

 .navbar a:hover,
 {
 	color:#00abf0;
 }


 .home{
 	height:100vh;
 	background:linear-gradient(-90deg,#031540 65%,#fff 35%);
 	display: flex;
 	justify-content: space-between;
 	align-items:center;
 	padding:0 10%;
 }


 .home-image{
 	display: flex;
 	justify-content: center;
 	align-items:center;

 	width:500px;
 	height:500px;
 	background: #031540;
 	 	border-radius:50%;
 	 border:25px solid #fff;
 	 outline:25px solid #031540;

 }


.home-image img{
	position:relative;
	max-width:380px;






}
 .home-content{
 	max-width:600px;
 	color:#fff;
 	text-align: left;
 }

 .home-content h1{
 	font-size:27px;
 	line-height:1.2;
 }

 .home-content h3{
 	font-size:15px;
 	color:transparent;
 	-webkit-text-stroke:.5px #fff;
 	background-image: linear-gradient(#00abf0,#00abf0);
 	
 	background-repeat: no-repeat;
 	-webkit-background-clip:text;
 	background-position: -410px 0;
 	animation: animateText 6s linear infinite;

 }

 @keyframes animateText{
 	0%,95%,100%{
 		background-position: -410px 0;

 	}
 	65%,85%{
 		background-position: 0 0;
 	}
 }

 .home-content p{
 	font-size:16px;
 	margin-top:20px;
 }


.home-sci{
	margin:25px 0 40px;

}



 .home-sci a{
 	display:inline-flex;
 	width:40px;
 	height:40px;
 	background: transparent;
 	border:2px solid #fff;
 	border-radius:50%;
 	font-size:20px;
 	color:#00abf0;
 	text-decoration:none;
 	margin-left:12px;
 

 }

 .home-sci a:hover{
 	background: #00abf0;
 	color:#fff;
 	border-color:#00abf0;
 	box-shadow:0 0 10px #00abf0;
 }


 .btn{
 	padding: 12px 35px;
 	background:#00abf0;
 	border-radius:40px;
 	font-size:17px;
 	color:#fff;
 	text-decoration: none;
 	font-weight: 600;
 	letter-spacing:1px;
 	box-shadow:0 0 10px #00abf0;
 }

 .btn:hover{
 	box-shadow: none;
 }

 #services{
 	padding:30px 0;
 }

 .services-list{
 	display:grid;
 	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
 	grid-gap:40px;
 	margin-top:50px;
 }

 .services-list div{
 	background: #262626;
 	padding:40px;
 	font-size:13px;
 	font-weight:300;
 	border-right:10px;
 	transition:background 0.5s, transform 0.5s;
 }

 .services-list div i{
 	font-size:50px;
 	margin-bottom:30px;
 }


 .services-list div h2{
 	font-size:30px;
 	font-weight:500;
 	margin-bottom:15px;
 
 }

 .services-list div a{
 	text-decoration: none;
 	color:#fff;
 	font-size:12px;
 	margin-top:20px;
 	display:inline-block;
 }

 .services-list div:hover{
 	background: #ff004f;
 	transform: translateY(-10px);
 }

}


@media screen and (max-width: 767px) {
  /* Add mobile styles here */

  *{
 	margin:0;
 	padding:0;
 	box-sizing:border-box;
 	font-family:'Poppins',sans-serif;

 }


 .header{
 	position:fixed;
 	top:0;
 	left:0;
 	width:100%;
 	padding:20px 10%;
 	background:transparent;
 	display:flex;
 	justify-content: space-between;
 	align-items:center;
 	z-index:100;
 }


 .logo{
 	font-size:25px;
 	color:#031540;
 	text-decoration:none;
 	font-weight:700;
 }

 .navbar a{

 	font-size:18px;
 	color:#fff;
 	text-decoration:none;
 	font-weight:500;
 	margin-left:35px;
 	transition: .3s;
 }

 .navbar a:hover,
 {
 	color:#00abf0;
 }


 .home{
 	height:100vh;
 	background:linear-gradient(-90deg,#031540 65%,#fff 35%);
 	display: flex;
 	justify-content: space-between;
 	align-items:center;
 	padding:0 10%;
 }


 .home-image{
 	display: flex;
 	justify-content: center;
 	align-items:center;

 	width:500px;
 	height:500px;
 	background: #031540;
 	 	border-radius:50%;
 	 border:25px solid #fff;
 	 outline:25px solid #031540;

 }


.home-image img{
	position:relative;
	max-width:380px;






}
 .home-content{
 	max-width:600px;
 	color:#fff;
 	text-align: left;
 }

 .home-content h1{
 	font-size:27px;
 	line-height:1.2;
 }

 .home-content h3{
 	font-size:15px;
 	color:transparent;
 	-webkit-text-stroke:.5px #fff;
 	background-image: linear-gradient(#00abf0,#00abf0);
 	
 	background-repeat: no-repeat;
 	-webkit-background-clip:text;
 	background-position: -410px 0;
 	animation: animateText 6s linear infinite;

 }

 @keyframes animateText{
 	0%,95%,100%{
 		background-position: -410px 0;

 	}
 	65%,85%{
 		background-position: 0 0;
 	}
 }

 .home-content p{
 	font-size:16px;
 	margin-top:20px;
 }


.home-sci{
	margin:25px 0 40px;

}



 .home-sci a{
 	display:inline-flex;
 	width:40px;
 	height:40px;
 	background: transparent;
 	border:2px solid #fff;
 	border-radius:50%;
 	font-size:20px;
 	color:#00abf0;
 	text-decoration:none;
 	margin-left:12px;
 

 }

 .home-sci a:hover{
 	background: #00abf0;
 	color:#fff;
 	border-color:#00abf0;
 	box-shadow:0 0 10px #00abf0;
 }


 .btn{
 	padding: 12px 35px;
 	background:#00abf0;
 	border-radius:40px;
 	font-size:17px;
 	color:#fff;
 	text-decoration: none;
 	font-weight: 600;
 	letter-spacing:1px;
 	box-shadow:0 0 10px #00abf0;
 }

 .btn:hover{
 	box-shadow: none;
 }

 #services{
 	padding:30px 0;
 }

 .services-list{
 	display:grid;
 	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
 	grid-gap:40px;
 	margin-top:50px;
 }

 .services-list div{
 	background: #262626;
 	padding:40px;
 	font-size:13px;
 	font-weight:300;
 	border-right:10px;
 	transition:background 0.5s, transform 0.5s;
 }

 .services-list div i{
 	font-size:50px;
 	margin-bottom:30px;
 }


 .services-list div h2{
 	font-size:30px;
 	font-weight:500;
 	margin-bottom:15px;
 
 }

 .services-list div a{
 	text-decoration: none;
 	color:#fff;
 	font-size:12px;
 	margin-top:20px;
 	display:inline-block;
 }

 .services-list div:hover{
 	background: #ff004f;
 	transform: translateY(-10px);
 }
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Add tablet styles here */
  
  *{
 	margin:0;
 	padding:0;
 	box-sizing:border-box;
 	font-family:'Poppins',sans-serif;

 }


 .header{
 	position:fixed;
 	top:0;
 	left:0;
 	width:100%;
 	padding:20px 10%;
 	background:transparent;
 	display:flex;
 	justify-content: space-between;
 	align-items:center;
 	z-index:100;
 }


 .logo{
 	font-size:25px;
 	color:#031540;
 	text-decoration:none;
 	font-weight:700;
 }

 .navbar a{

 	font-size:18px;
 	color:#fff;
 	text-decoration:none;
 	font-weight:500;
 	margin-left:35px;
 	transition: .3s;
 }

 .navbar a:hover,
 {
 	color:#00abf0;
 }


 .home{
 	height:100vh;
 	background:linear-gradient(-90deg,#031540 65%,#fff 35%);
 	display: flex;
 	justify-content: space-between;
 	align-items:center;
 	padding:0 10%;
 }


 .home-image{
 	display: flex;
 	justify-content: center;
 	align-items:center;

 	width:500px;
 	height:500px;
 	background: #031540;
 	 	border-radius:50%;
 	 border:25px solid #fff;
 	 outline:25px solid #031540;

 }


.home-image img{
	position:relative;
	max-width:380px;






}
 .home-content{
 	max-width:600px;
 	color:#fff;
 	text-align: left;
 }

 .home-content h1{
 	font-size:27px;
 	line-height:1.2;
 }

 .home-content h3{
 	font-size:15px;
 	color:transparent;
 	-webkit-text-stroke:.5px #fff;
 	background-image: linear-gradient(#00abf0,#00abf0);
 	
 	background-repeat: no-repeat;
 	-webkit-background-clip:text;
 	background-position: -410px 0;
 	animation: animateText 6s linear infinite;

 }

 @keyframes animateText{
 	0%,95%,100%{
 		background-position: -410px 0;

 	}
 	65%,85%{
 		background-position: 0 0;
 	}
 }

 .home-content p{
 	font-size:16px;
 	margin-top:20px;
 }


.home-sci{
	margin:25px 0 40px;

}



 .home-sci a{
 	display:inline-flex;
 	width:40px;
 	height:40px;
 	background: transparent;
 	border:2px solid #fff;
 	border-radius:50%;
 	font-size:20px;
 	color:#00abf0;
 	text-decoration:none;
 	margin-left:12px;
 

 }

 .home-sci a:hover{
 	background: #00abf0;
 	color:#fff;
 	border-color:#00abf0;
 	box-shadow:0 0 10px #00abf0;
 }


 .btn{
 	padding: 12px 35px;
 	background:#00abf0;
 	border-radius:40px;
 	font-size:17px;
 	color:#fff;
 	text-decoration: none;
 	font-weight: 600;
 	letter-spacing:1px;
 	box-shadow:0 0 10px #00abf0;
 }

 .btn:hover{
 	box-shadow: none;
 }

 #services{
 	padding:30px 0;
 }

 .services-list{
 	display:grid;
 	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
 	grid-gap:40px;
 	margin-top:50px;
 }

 .services-list div{
 	background: #262626;
 	padding:40px;
 	font-size:13px;
 	font-weight:300;
 	border-right:10px;
 	transition:background 0.5s, transform 0.5s;
 }

 .services-list div i{
 	font-size:50px;
 	margin-bottom:30px;
 }


 .services-list div h2{
 	font-size:30px;
 	font-weight:500;
 	margin-bottom:15px;
 
 }

 .services-list div a{
 	text-decoration: none;
 	color:#fff;
 	font-size:12px;
 	margin-top:20px;
 	display:inline-block;
 }

 .services-list div:hover{
 	background: #ff004f;
 	transform: translateY(-10px);
 }
}