*
{
	margin:0;
	padding:0;
	box-sizing:border-box;
	scroll-behavior:smooth;
	font-family:'open sans', sans-serif;
}
header
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:20px 100px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	z-index:10000;
	backdrop-filter:blur(20px);
}
header .logo
{
	position:relative;
	color:#3AF80C;
	text-decoration:none;
	font-weight:700;
	font-size:2em;
}
header ul
{
	position:relative;
	display:flex;
	gap:40px;
}
header ul li
{
	list-style:none;
}
header ul li a
{
	text-decoration:none;
	color:#fff;
	font-weight:500;
	font-size:1.25em;
}
header ul li.active a,
header ul li:hover a
{
	color:#0CF6F8;
}
#home
{
	position:relative;
	width:100%;
	min-height:100vh;
	background:#222;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:100px;
}
#home::before
{
	content:'';
	position:absolute;
	bottom:0;
	right:0;
	width:40vw;
	height:10vw;
	background:#0CF6F8;
	border-top-right-radius: 25vw;
	border-top-left-radius: 25vw;
}
#home .content
{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:10px;
	max-width:650px;
	z-index:10;
}
#home .content h2
{
	position:relative;
	font-size:5em;
	color:#0CF6F8;
}
#home .content p
{
	position:relative;
	font-size:1.2em;
	color:#fff;
	line-height:1.6em;
}
.btn
{
	position:relative;
	display:inline-block;
	font-size:1.25em;
	max-width:200px;
	background:#0CF6F8;
	color:#222;
	text-align:center;
	padding: 18px 30px;
	font-weight:500;
	letter-spacing:0.05em;
	text-decoration:none;
	margin-top:10px;
}
#home .portfoliopic
{
	position:absolute;
	bottom:0;
	right:100px;
	max-height:70vh;
}
#services,
#portfolio,
#contact
{
	position:relative;
	min-height:100vh;
	background:#34353a;
	padding:120px 100px;
	display:flex;
	justify-content:center;
	flex-direction:column;
}
.secText
{
	position:relative;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.secText h2
{
	font-size:3em;
	color:#fff;
}
.secText p
{
	max-width:700px;
	text-align:center;
	font-size:1.1em;
	color:#aaa;
	line-height:1.5em;
}
#services .content
{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-gap:20px;
	margin:40px 0;
}
#services .content .servicesBox
{
	background:#2e2f34;
	padding: 50px 20px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	gap:20px;
	border:2px solid #2e2f34;
}
#services .content .servicesBox:hover
{
	border:2px solid #0CF6F8;
}
#services .content .servicesBox img
{
	max-width:100px;
/*	filter:invert(1); */
	opacity:0.5;
	transition:0.5s;
}
#services .content .servicesBox:hover img
{
	opacity:1;
}
#services .content .servicesBox h3
{
	color:#fff;
	font-weight:500;
	color:#0CF6F8;
}
.center
{
	width:100%;
	text-align:center;
}
#portfolio
{
	background:#2e2f34;
	text-align:center;
}
#portfolio .content
{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-gap:20px;
	margin:40px 0;
}
#portfolio .content .imgBox
{
	position:relative;
}
#portfolio .content .imgBox img
{
	max-width:100%;
	width:50vw;
}
#contact .content
{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-gap:20px;
	margin:40px 0;
}
#contact .content a
{
	background:#2e2f34;
	height:120px;
	display:flex;
	justify-content:center;
	align-items:center;
	text-decoration:none;
	font-size:1.2em;
	color:#fff;
	transition:0.5s;
}
#contact .content a:hover
{
	background:#AEC3C9;
}
#contact .content a img
{
	max-width:100%;
	width:18%;
	height:35%;
	filter:invert(1);
	opacity:0.5;
	transition:0.5s;
	margin-right:5px;
}
#contact .content a ion-icon
{
	color:#0CF6F8;
	font-size:1.5em;
	margin-right:10px;
	transition:0.5s;
}
#contact .content a:hover,
#contact .content a:hover ion-icon,
{
	color:#222;
}
.copyrights
{
	margin-top:150px;
	position:relative;
	color:#aaa;
	font-size:1.1em;
}
.copyrights a
{
	color:#3AF80C;
}


/*responsive code */

@media (max-width:900px)
{
	header
	{
		padding:20px 50px;
	}
	#home
	{
		padding:150px 50px;
		flex-direction:column;
		padding-bottom:0;
	}
	#home .content h2
	{
		font-size:4em;
	}
	.btn
	{
		max-width:160px;
		padding:10px 20px;
	}
	#home .portfoliopic
	{
		position:absolute;
		height:50vh;
		right:0;
	}
	.secText h2
	{
		font-size:2em;
		text-align:center;
	}
	#services, 
	#portfolio, 
	#contact
	{
		padding:100px 50px 50px;
	}
	#services .content,
	#portfolio .content,
	#contact .content
	{
		grid-template-columns: repeat(2,1fr);
	}
	.menuToggle
	{
		position:relative;
		width:30px;
		height:20px;
		display:flex;
		justify-content:center;
		align-items:center;
		cursor:pointer;
	}
	.menuToggle::before
	{
		content:'';
		position:absolute;
		width:100%;
		height:2px;
		background:#fff;
		transform:translateY(-10px);
		transition:0.5s;
		box-shadow:0 10px #fff;
	}
	.menuToggle::after
	{
		content:'';
		position:absolute;
		width:100%;
		height:2px;
		background:#fff;
		transform:translateY(10px);
		transition:0.5s;
	}
	header.active .menuToggle::before
	{
		transform: translateY(0px) rotate(45deg);
		box-shadow: 0 0 #fff;
	}	
	header.active .menuToggle::after
	{
		transform: translateY(0px) rotate(315deg);
	}
	header ul
	{
		display:none;
	}	
	header.active ul
	{
		position:fixed;
		left:0;
		top:84px;
		width:100%;
		height:calc(100vh -84px);
		background:rgba(50,50,50,0.95);
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
		z-index:10000;
		gap:20px;
	}
	header.active ul li a
	{
	font-size:2em;	
	}
}
@media (max-width:700px)
{
	#home .content h2
	{
		font-size:3em;
	}
	#home::before
	{
		width:62.5vw; /* Default value 80 */
		height:40vw;  /* Default value 40 */
		border-top-right-radius:20vw; /* Default value 80 */
		border-top-left-radius:20vw; /* Default value 80 */
	}
	#home .portfoliopic
	{
		height:40vh;
	}
	#services .content,
	#portfolio .content,
	#contact .content
	{
		grid-template-columns: repeat(1,1fr);
	}
	#contact .content a
	{
		height:80px;
	}
}	#contact .content a img
	{
		width:12%;
		height:34%;
	}
}