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

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
	font-family: 'Montserrat', sans-serif;
	background-color: #ffffff;
	background: linear-gradient(#f0e7fa 30%,  #d6d6f5 70%) !important;
}

ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}

/* section-a */
.section-a-background {
    background-color: #28223F !important;
	background-color: #0bceaf;
	max-width: 100vw;
	overflow: hidden;
}

.nav-elements {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	color: #a200139a;
	/* color: rgba(240, 248, 255, 0.801); */
}

.nav-elements .social-icons {
	display: flex;
	gap: 1.5rem;
}

.nav-elements .social-icons a > i {
	color: #a2001378;
}

.section-a {
	max-width: 800px;
	min-height: 100vh;
	padding: 20px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

.section-a h1 {
	font-size: 40px;
	text-align: center;
	color: rgba(240, 248, 255, 0.943);
	font-family: 'Montserrat Alternates', sans-serif;
}

.section-a span {
	color: #a20013da;
}

hr {
    width: 70%; 
    margin: 20px auto; 
    border: 1px solid #000;
	border-radius: 40px; 
}

.section-a img {
	width: 300px;
	height: 300px;
	object-fit: cover;
	border-radius: 50%;
    border: 0.2rem solid #03bfcb;
	opacity: 0.5;
}

/* section-b  */

.section-b {
	max-width: 800px;
	margin: 20px auto;
	padding: 20px;
}

.section-b h1 {
	text-align: center;
	margin-bottom: 20px;
	font-size: 40px;
}
.section-b-inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
}

.section-b .statement {
	line-height: 1.7;
	opacity: 0.8;
}

/* section c */
.section-c {
	max-width: 900px;
	padding: 20px;
	gap: 2rem;
	margin: 20px auto;
}

.big-p {
	text-align: center;
	font-size: 40px;
	margin-bottom: 20px;
}

/* .section-c > h1 {
	text-align: center;
	font-size: 40px;
	margin-bottom: 20px;
} */

.section-c p {
	font-size: medium;
	line-height: 1.5;
	font-weight: 300;
	opacity: 0.8;
}

.project {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;
	margin-top: 20px;
	/* border: 1px solid black; */
}

.project img {
	width: 100%;
	border-radius: 10px;
	font-size: 50px;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
	transition: 0.5s;
}
.project img:hover {
	box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
	transform: translateY(-5px);
}

/* section d */
.section-d {
	height: 700px;
	padding: 10px 20px 20px 20px;
	margin: 20px auto;
	margin-bottom: 0;
    background-color: #28223F !important;
	background-color: #0bceaf;
	display: flex;
	justify-content: center;
	align-items: center;
}

.section-d .contact-box {
	box-shadow: 0 0 20px 0 #999;
	padding: 20px;
	border-radius: 14px;
}

.section-d .input-field {
	width: 600px;
	height: 60px;
	margin-top: 20px;
	padding: 0 10px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 14px;
	outline: none;
	background-color: inherit;
	font-size: 18px;
	font-weight: 600;
}
.section-d .contact-form > h1 {
	text-align: center;
	font-size: 40px;
	margin-bottom: 5rem;
}

.textArea-field {
	min-height: 150px;
	padding-top: 30px;
}

/* section e */
.section-e {
	padding: 20px;
	height: 300px;
	background-color: #333333;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	column-gap: 2.5rem;
}

.social-links {
	display: flex;
	gap: 2.5rem;
}
.section-e a {
	text-decoration: none;
	color: rgba(245, 245, 245, 0.546);
	text-align: center;
}

.section-e hr {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	border: 0;
	width: 400px;
	border-top: 2px solid rgba(245, 245, 245, 0.546);
}

.section-e p {
	color: rgba(245, 245, 245, 0.546);
	text-align: center;
}

/* utilities */
.btn-view-resume {
	width: auto;
	margin-top: 20px;
	padding: 5px 20px;
	font-size: 20px;
	border: 2px solid black;
	font-weight: 500;
	outline: none;
	border-radius: 10px;
	display: inline-block;
	color: black;
	transition: all 0.3s ease-in-out;
}

.btn-submit {
	background-color: inherit;
	cursor: pointer;
}

.btn-view-resume:hover {
	background-color: black;
	color: whitesmoke;
}

.btn-project {
	width: auto;
	margin-top: 20px;
	padding: 5px 20px;
	font-size: 16px;
	border: 2px solid black;
	font-weight: 500;
	outline: none;
	border-radius: 10px;
	display: inline-block;
	color: black;
	transition: all 0.3s ease-in-out;
}

.btn-project:hover {
	background-color: black;
	color: whitesmoke;
}

@media screen and (max-width: 900px) {
	/* section-a */
	.section-a-background {
		height: 800px;
	}

	.nav-elements {
		justify-content: center;
	}

	.nav-elements p {
		display: none;
	}

	.section-a {
		grid-template-columns: 1fr;
		align-items: center;
		text-align: center;
		gap: 1rem;
	}

	.section-a h1 {
		font-size: 30px;
		padding-bottom: 10rem;
		text-align: center;
	}

	.section-a img {
		justify-self: center;
		width: 250px;
		height: 250px;
		opacity: 0.4;
	}

	/* section b */
	.section-b-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	/* section c */
	.project {
		grid-template-columns: 1fr;
		/* border: 1px solid rgba(0, 0, 0, 0.63); */
		/* padding: 2.5rem 10px;
		border-radius: 20px; */
	}

	/* section d */
	.section-d .input-field {
		width: 250px;
		height: 40px;
	}

	.section-d .contact-form > h1 {
		text-align: center;
		font-size: 35px;
		margin-bottom: 20px;
	}

	/* section e */
	.social-links {
		gap: 1.2rem;
	}

	.section-e hr {
		width: 300px;
	}
}