@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins/Poppins-Regular.ttf');
}
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	color: #fff;
	font-family: Poppins;
	scroll-behavior: smooth;
}
img {
	object-fit: cover;
}

/* Common */
.container {
	max-width: 900px;
	margin: auto;
	display: flex;
	flex-direction: row;
}
.container:not(#header .container) {
	padding: 10px;
}

.box-shadow {
	box-shadow: 3px 3px 8px black;
}
.section-title {
	text-align: center;
	margin-bottom: 30px;
}
#aboutme, #myskills,
#myworks, #contactme, #footer{
	margin-top: 50px;
}
/* End common*/

.main-container {
	background-color: #EF079D;
	padding-top: 70px;
}
/*Nav CSS*/
#nav {
	/*border: 2px solid green;*/
	position: fixed;
	top: 0;
	width: 100%;
	/*background-color: #022293;*/
	transition: 0.5s ease;
}
#nav.bg {
	background-color: #022293;
}
#nav > .container {
	/*border: 2px solid orange;*/
	justify-content: space-between;
}
#nav .navbar-brand {
	padding: 10px 30px;
	/*border: 2px solid red;*/
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#toggler-btn {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 3px;
	background: #EF079D;
	display: none;
}

#nav .navbar-brand a {
	text-decoration: none;
}
#nav .navbar-menu {
	list-style-type: none;
	display: flex;
	/*border: 2px solid black;*/
}
#nav .navbar-menu li {
	/*border: 1px solid green;*/
	padding: 10px 30px;
}
#nav .navbar-menu a {
	text-decoration: none;
}
/*Header CSS*/
#header {
	/*border: 2px solid red;*/
}
#header .container {
	align-items: center;
	border-radius: 10px;
	background-color: #022293;
	border: 5px solid #fff;
}

#header .container .content {
	flex-basis: 60%;
	text-align: center;
	line-height: 25px;
}
#header .container .content h4 {
	letter-spacing: 5px;
}
#header .container .content h4,
#header .container .content h1,
#header .container .content p {
	margin-bottom: 20px;
}
#header .container .image-div {
	flex-basis: 40%;
}
#header .container .image-div img {
	width: 100%;
}
.social-icons a {
	margin-right: 15px;
	font-size: 30px;
}
.social-icons .fa-youtube {
	color: red;
}
.social-icons .fa-instagram {
	color: pink;
}
.social-icons .fa-facebook {
	color: blue;
}

/* About Me CSS*/
#aboutme {
	margin-top: 50px;
}
#aboutme .container {
	align-items: center;
}
#aboutme .content h2{
	line-height: 40px;
}
#aboutme .container > div {
	/*border: 3px solid orange;*/
	flex-basis: 50%;
}
#aboutme .image-div img {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	margin: auto;
	display: block;
}

/* My Skills CSS*/

#myskills .container {
	align-items: center;
}
#myskills .container > div {
	flex-basis: 50%;
}
#myskills .content .title-2,
#myskills .content .title-3 {
	margin-top: 30px;
}
#myskills .content ul {
	list-style-type: none;
}
#myskills .content ul li {
	/*border: 2px solid green;*/
	display: inline-block;
	background-color: rgba(193, 183, 189, 0.6);
	padding: 10px 15px;
	margin: 5px 5px 5px 0;
	border-radius: 5px;
	font-weight: bold;
}

#myskills .image-div img {
	width: 100%;
	margin: auto;
	display: block;
	border-radius: 5px;
}

/* My Works CSS*/
#myworks .container {
	justify-content: space-between;
}
#myworks .card {
	flex-basis: 30%;
	background-color: #022293;
	padding: 20px 10px;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	transition: transform 1s, background-color 1s;
}
#myworks .card:hover {
	background-color: #EF079D;
	transform: scale(1.1);
}

#myworks .card h3 {
	margin: 20px 0;
}
#myworks .card i {
	font-size: 30px;
}

/* Contact Me CSS */
#contactme .container div {
	/*border: 2px solid red;*/
	flex-basis: 50%;
}
#contactme ul {
	list-style-type: none;
	line-height: 40px;
	font-weight: bold;
}
#contactme .form .form-group {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
#contactme .form input,
#contactme .form textarea ,
#contactme .form button{
	border-radius: 5px;
	border: none;
	padding: 5px 10px;
} 
#contactme .form .form-group input {
	flex-basis: 49%;
	height: 50px;
	color: #000;
}
#contactme .form textarea {
	width: 100%;
	height: 100px;
	margin-bottom: 5px;
	color: #000;
}
#contactme .form button {
	padding: 7px 30px;
	float: right;
	background-color: #022293;
}

/* footer css*/
#footer {
	background-color: #022293;
	padding: 30px 0 100px 0;
}
#footer .container {
	justify-content: space-between;
}
#footer .container .column {
	flex-basis: 32%;
	/*border: 2px solid red;*/
	line-height: 35px;
	text-align: center;
}
#footer .column h3 {
	margin-bottom: 20px;
}
#footer .column ul {
	list-style-type: none;
}
#footer .column ul li a {
	text-decoration: none;
}

#gototop {
	background-color: orange;
	display: block;
	width: 45px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 25px;
	border-radius: 4px;
	position: fixed;
	bottom: 10px;
	right: 10px;
}


@media (max-width: 600px) {
	.main-container {
		/*background-color: orange;*/
	}
	/*Nav Section*/
	#nav {
		background-color: #022293;
	}
	#nav > .container {
		flex-direction: column;
	}
	#toggler-btn {
		display: block;
	}
	#nav .navbar-menu {
		flex-direction: column;
		height: 0px;
		overflow: hidden;
		transition: 0.5s ease;
	}
	#nav .navbar-menu.active {
		height: 250px;
	}
	#nav .navbar-menu li {
		/*border: 1px solid green;*/
		text-align: center;
	}
	/* Header Section */
	#header .container {
		flex-direction: column-reverse;
		border: none;
		border-radius: 0;
		box-shadow: 0px 0px;
	}
	#header .content {
		padding: 20px 0;
	}
	#header h1 {
		line-height: 40px;
	}
	/* About Me Section */
	#aboutme .container {
		flex-direction: column;
		text-align: center;
	}
	#aboutme .content {
		padding: 20px;
	}
	/* My Skills Section */
	#myskills .container {
		flex-direction: column-reverse;
	}
	#myskills .content {
		text-align: center;
		padding: 20px 0;
	}
	/* My Works Section */
	#myworks .container {
		flex-direction: column;
	}
	#myworks .card {
		width: 90%;
		margin: 10px auto;
	}

	/* Contact Me Section */
	#contactme .container {
		flex-direction: column;
	}
	#contactme .form .form-group {

		flex-direction: column;
	}
	
	#contactme .form .form-group input:first-child{
		margin-bottom: 10px;
	}
	#contactme .form input {
		padding: 15px;
	}
	#contactme .form textarea {
		height: 150px;
	}
	/* Footer Section */
	#footer .container {
		flex-direction: column;
	}
	#footer .column {
		margin: 20px 0;
	}
	#footer .column h3 {
		margin-bottom: 10px;
	}
}