:root {
	--text-color: #e6eef8;
	--alt-text-color: #94a3b8;
	--background-color: #0f172a;
	--color-bg-alt: #24314d; /*more darker bg*/
	--color-accent: #279cb1; /*links, main buttons*/
	--color-accent2: #7c3aed; /*hoover*/
	--color-btn-bg: var(var(--color-accent));
	--color-btn-text: #02122a;
	--color-btn-hover-text: #ffffff;
	--turkus: #38bdf8;
}

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: poppins, sans-serif;
	background-color: var(--background-color);
	max-width: 1200px;
	margin: 0 auto;
}

a {
	color: var(--text-color);
	text-decoration: none;
}

/*Navbar*/

nav {
	height: 90px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 50px;
	margin-bottom: 50px;
}

nav .left-side a {
	font-size: 20px;
	font-weight: 600;
}

nav .right-side a {
	margin: 0px 5px;
	font-size: 15px;
	font-weight: 400;
}

nav .right-side span {
	margin: 0px 4px;
}

nav .e-mail {
	padding: 10px;
	background-color: #212b4d;
	border-radius: 10px;
}

/*hero-Section*/

.hero-section {
	padding: 20px 50px;
	display: flex;
	justify-content: space-between;
	gap: 50px;
}

.about-me h1 {
	font-size: 70px;
	color: var(--text-color);
}

.about-me h3 {
	margin-bottom: 40px;
	font-size: 20px;
	font-weight: 400;
	color: var(--text-color);
}

.about-me p {
	margin-bottom: 40px;
	font-size: 15px;
	color: #94a3b8;
}

hr {
	margin: 20px 50px;
	border-bottom: 1px solid #252525;
}

.hero-section .about-me-btns {
	margin: 15px 0;
}

.about-me-btns a {
	display: inline-block;
	padding: 13px 20px;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 17px;
	border-radius: 10px;
	font-weight: 600;
	background-color: var(--color-accent);
	border-color: var(--background-color);
	color: var(--text-color);
	transition: 0.2s;
}

.about-me-btns .btn-contact {
	background-color: var(--color-bg-alt);
}

.about-me-btns .btn-project:hover {
	background-color: var(--color-btn-hover-text);
	color: var(--color-accent);
}

.about-me-btns .btn-contact:hover {
	background-color: var(--color-btn-hover-text);
	color: var(--color-bg-alt);
}

.my-photo img {
	height: 300px;
	width: 250px;
	border-radius: 50%;
}

/*Skills-Section*/

.skills-section {
	padding: 20px 50px;
}

h2 {
	margin-bottom: 20px;
	font-size: 35px;
	font-weight: 600;
	color: var(--text-color);
}

.skills-section .skills-text {
	margin-bottom: 40px;
	font-size: 15px;
	color: var(--alt-text-color);
}

.skills-icons {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	color: var(--text-color);
}

.skills-icons .skill-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.skills-icons .skill-icon i {
	font-size: 60px;
}

.skills-icons .skill-icon p {
	font-size: 20px;
}

/*projects-section*/

.projects-section {
	padding: 20px 50px;
}

.card-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.card {
	width: 325px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	margin: 20px;
}

.card .card-text {
	padding: 15px;
	background-color: var(--text-color);
}

.card .card-text h3 {
	margin: 15px 0;
	font-size: 20px;
	font-weight: 600;
}

.card .card-text p {
	line-height: 1.3;
}

.card .card-button {
	display: flex;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 6px;
	margin-top: 15px;
	background-color: var(--background-color);
	transition: 0.2s;
}

.card .card-button:hover {
	background-color: var(--color-accent);
	color: var(--background-color);
}

.card-container .card img {
	width: 100%;
	height: 220px;
}

/*Certificates-section*/

.certificates-section {
	padding: 20px 50px;
}

.certificate-box {
	padding: 30px;
	margin-bottom: 50px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background-color: var(--text-color);
	border-radius: 8px;
}

.certificate-box img {
	margin-right: 30px;
	padding: 10px;
	height: 170px;
	width: 170px;
	font-size: 90px;
	background-color: var(--background-color);
	color: var(--text-color);
	border-radius: 8px;
}

.certificate-box-right {
	display: flex;
	flex-direction: column;
}

.certificate-box-right h3 {
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: 600;
}

.certificate-box-right span {
	text-decoration: underline;
	color: var(--background-color);
}

/*timeline-section*/

.timeline-section {
	padding: 20px 50px;
}

.timeline-section-container {
	padding: 20px 50px;
	position: relative;
	margin: 60px 0;
}

.container-timeline {
	padding: 10px 50px;
	position: relative;
	width: 50%;
	
}

.text-box {
	position: relative;
	padding: 20px 30px;
	background-color: #1e293b;
	color: var(--alt-text-color);
	border-radius: 8px;
}

.left-container {
	left: 0;
}

.right-container {
	left: 50%;
}
.container-timeline img {
	position: absolute;
	width: 50px;

	border-radius: 8px;
	right: -75px;
	top: 32px;
	z-index: 10;
}

.right-container img {
	position: absolute;
	width: 50px;
	border-radius: 8px;
	left: -75px;
	top: 32px;
	z-index: 10;
}

.timeline-section-container::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 100%;
	background-color: #415a77;
	top: 0;
	left: 50%;
	margin-left: -3px;
	z-index: -1;
}

.text-box .company-name{
	font-size: 33px;
	color: var(--text-color);
}

.text-box h3{
	font-weight: 400;
	color: var(--text-color);
}

.text-box .date{
	margin-bottom: 15px;
}

/*Contact-section*/

.contact-section {
	padding: 20px 50px;
	margin-bottom: 90px;
}

.contact-section .contact-box {
	display: flex;
	gap: 50px;
}

.contact-section .contact-box .text {
	flex: 3;
	color: var(--alt-text-color);
}
.contact-section .contact-box form {
	flex: 3;
	display: flex;
	flex-direction: column;
}

.contact-section .contact-box input,
.contact-section .contact-box textarea {
	border: 1px solid var(--text-color);
	padding: 5px;
	margin-bottom: 15px;
	border-radius: 8px;
	font-family: 'poppis', sans-serif;
	outline: none;
	resize: none;
}

.contact-section .contact-box label {
	color: var(--alt-text-color);
	margin-bottom: 5px;
}

.contact-section .contact-box button {
	padding: 5px;
	font-size: 18px;
	height: 50px;
	font-family: 'poppins';
	cursor: pointer;
	background-color: var(--turkus);
	color: var(--text-color);
	border: none;
	border-radius: 8px;
	transition: 0.2s;
}

.contact-section .contact-box button:hover {
	background-color: var(--text-color);
	color: var(--turkus);
}



@media (max-width: 850px) {
	.hero-section .about-me h1 {
		font-size: 35px;
	}

	.hero-section .my-photo img {
		height: 190px;
		width: 200px;
	}

	/*Timeline-section*/ 

	.container-timeline .text-box .company-name{
		font-size: 25px;
	}
}
@media (max-width: 750px) {
	.hero-section {
		flex-direction: column-reverse;
		align-items: center;
	}

	.hero-section .about-me h1 {
		font-size: 30px;
		margin-bottom: 15px;
	}

	.hero-section .about-me-btns button {
		width: 100%;
	}

	/*skills-section*/

	.skills-section .skills-icons {
		gap: 30px;
	}

	/*contact-section*/

	.contact-section .contact-box {
		flex-direction: column;
	}

	/*Timeline-section*/ 

	.container-timeline .text-box .company-name{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.container-timeline .text-box h3{
		font-size: 15px;
	}
	.container-timeline .text-box p{
		font-size: 13px;
	}
}

@media (max-width: 600px) {
	nav {
		padding: 0px 20px;
	}
	nav .right-side a {
		margin: 0 2px;
	}
	nav .right-side a span {
		display: none;
	}

	nav .right-side i {
		font-size: 20px;
	}

	nav .left-side a {
		font-size: 18px;
	}

	nav .e-mail {
		padding: 0 0;
		background-color: var(--background-color);
	}

	hr {
		margin: 20px;
	}

	h2 {
		font-size: 30px;
	}

	/*hero-section*/
	.hero-section {
		padding: 0 20px;
	}

	/*skills-section*/

	.skills-section {
		padding: 0 20px;
	}

	/*projects-section*/

	.projects-section {
		padding: 0 20px;
	}

	/*certificates-section*/

	.certificates-section {
		padding: 0 20px;
	}

	.certificate-box {
		flex-direction: column;
		padding: 20px 15px;
	}

	.certificate-box-left img {
		margin: 0;
	}

	.certificate-box-right h3 {
		font-size: 20px;
	}
	.certificate-box-right span {
		font-size: 13px;
	}

	.certificate-box-left {
		margin-bottom: 15px;
	}

	/*Timeline-section*/

	.timeline-section{
		padding: 0 20px;
	}
	
	.timeline-section-container {
		margin: 50px auto;
	}

	.timeline-section-container::after {
		left: 31px;
	}

	.container-timeline {
		width: 100%;
		padding: 10px;
		
	}

	.text-box  {
		
		font-size: 14px;
	}
	
	.text-box .company-name {
		font-size: 25px;
		margin-bottom: 15px;
	}

	.text-box .date {
		margin-bottom: 10px;
	}

	.right-container {
		left: 0;
	}

	.left-container img , .right-container img{
		left: -55px;
	}

	/*contact-section*/

	.contact-section {
		padding: 0 20px;
	}
}