@media screen and (max-width: 1400px) {
	.about-containers {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1200px) {
	#desktop-nav {
		display: none;
	}

	#hamburger-nav {
		display: flex;
	}

	nav {
		padding: 0 1.5rem;
	}

	#profile {
		flex-direction: column;
		gap: 2.5rem;
		text-align: center;
		min-height: auto;
		padding: 4rem 1.5rem 3rem;
	}

	#profile .section__text {
		text-align: center;
	}

	#profile .section__text p,
	#profile .section__text__p2 {
		text-align: center;
	}

	.section__text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#profile .btn-container,
	#profile .tech-stack,
	#socials-container {
		justify-content: center;
	}

	section {
		padding: 5rem 1.5rem;
	}

	.section__pic-container {
		width: 240px;
		height: 240px;
	}

	.about-containers {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 768px) {
	.section__text__p2 {
		font-size: 0.98rem;
	}

	.text-container {
		padding: 1.75rem 1.25rem;
	}

	.text-container p {
		font-size: 0.92rem;
	}

	.details-container {
		padding: 1.5rem;
	}

	.timeline-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin-bottom: 1.5rem;
		padding-left: 2rem;
		position: relative;
	}

	.timeline-content {
		width: 100%;
		text-align: left;
		padding: 0;
	}

	.timeline-content.left,
	.timeline-content.right {
		text-align: left;
	}

	.timeline-content.left .role-tags,
	.timeline-content.right .role-tags {
		justify-content: flex-start;
	}

	.timeline-content:empty {
		display: none;
	}

	.timeline-marker {
		position: absolute;
		left: 0;
		top: 8px;
		bottom: -1.5rem;
		width: auto;
		height: auto;
		flex-direction: column;
	}

	.line {
		height: 100%;
		min-height: 60px;
		flex-grow: 1;
	}

	.contact-info-upper-container {
		flex-direction: column;
		gap: 0.25rem;
		padding: 1rem;
	}

	.group-note {
		margin-left: 0;
		flex-basis: 100%;
	}

	.service-card {
		padding: 1.75rem 1.5rem;
	}

	.contact-info-container {
		justify-content: center;
	}

	footer nav {
		margin-bottom: 1rem;
	}

	footer .nav-links {
		gap: 1.25rem;
		font-size: 0.8rem;
	}
}

@media screen and (max-width: 600px) {
	nav {
		padding: 0 1rem;
	}

	section {
		padding: 4rem 1rem;
	}

	.section__pic-container {
		width: 200px;
		height: 200px;
	}

	.btn {
		padding: 0.75rem 1.25rem;
		font-size: 0.8rem;
	}

	.about-containers {
		flex-wrap: wrap;
	}

	.logo {
		font-size: 0.95rem;
	}

	.title {
		font-size: 2.5rem;
	}

	.subtitle {
		font-size: 1.35rem;
	}

	.tech-stack {
		justify-content: center;
	}

	#projects .color-container {
		flex: 1 1 100%;
	}

	.service-card {
		flex: 1 1 100%;
	}

	.contact-cta .btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}