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

body {
	font-family: 'Lato', sans-serif;
	line-height: 1.6;
	color: #333;
	background: #f9f9fb;
}

/* Color theme */
:root {
	--blue-gray: #2e3a49;
	--blue-gray-light: #44576b;
	--accent: #6ca0dc; /* soft blue */
	--accent-dark: #4e8ac8;
	--text-light: #f5faff;
}

/* Sidebar */
#sidebar {
	position: fixed;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 18em;
	background: var(--blue-gray);
	padding: 1.5em;
	border-radius: 12px;
	color: var(--text-light);
	box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

.sidebar-inner {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	max-height: 70vh;
	overflow-y: auto; /* scroll inside if needed */
}

#sidebar header {
	text-align: center;
}

#sidebar .avatar {
	width: 6em;
	border-radius: 50%;
	margin-bottom: 0.5em;
	border: 3px solid var(--accent);
}

/* Nav links */
#sidebar nav ul {
	list-style: none;
}

#sidebar nav li {
	margin: 0.5em 0;
}

#sidebar nav a {
	display: block;
	padding: 0.6em 0.9em;
	background: var(--blue-gray-light);
	border-radius: 6px;
	color: var(--text-light);
	font-weight: 600;
	transition: 0.2s;
}

	#sidebar nav a.active,
	#sidebar nav a:hover {
		background: var(--accent);
		color: white;
	}

/* Social links */
#sidebar footer ul.social {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1em;
}

#sidebar footer a {
	color: var(--text-light);
}

	#sidebar footer a:hover {
		color: var(--accent);
	}

/* Main content */
#main-content {
	margin-right: 22em;
	padding: 2em;
}

/* Hero Image */
.hero {
	position: relative;
	text-align: center;
	overflow: hidden;
}

.hero-img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
}

/* Hero text */
.hero-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-shadow: 0 0 8px rgba(0,0,0,0.7);
}

/* Sections */
.container.section {
	padding: 3em 1em;
	max-width: 900px;
	margin: 0 auto;
}

/* Project Cards */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2em;
}

.project-card {
	background: white;
	border-radius: 10px;
	padding: 1.2em;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	text-align: center;
}

/* Uniform image sizing */
	.project-card img {
		width: 100%;
		height: 180px; /* consistent height */
		object-fit: cover; /* crop but fill */
		border-radius: 6px;
	}

/* Skills list */
.skills-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
}

	.skills-list li {
		background: var(--accent);
		color: white;
		padding: 0.4em 0.9em;
		border-radius: 4px;
	}

/* Buttons */
.button {
	display: inline-block;
	margin-top: 1em;
	padding: 0.6em 1.4em;
	background: var(--accent);
	color: white;
	border-radius: 6px;
	transition: 0.2s;
	font-weight: 600;
}

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

/* Footer */
#footer {
	background: #f1f1f4;
	text-align: center;
	padding: 2em 1em;
	font-size: 0.85em;
	color: #666;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
	#sidebar {
		position: relative;
		transform: none;
		right: 0;
		top: 0;
		width: 100%;
		margin-bottom: 2em;
		border-radius: 0;
	}

	#main-content {
		margin-right: 0;
	}

	.hero-img {
		max-height: 200px;
	}
}

/* ---------- centered page container ---------- */
.page-container {
	max-width: 1100px; /* center width */
	margin: 0 auto; /* center horizontally */
	padding: 2rem 1rem;
	box-sizing: border-box;
}

/* ---------- two-column grid aligned inside centered container ---------- */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 320px; /* main content | sidebar width */
	gap: 2.25rem;
	align-items: start;
}

/* Make sure global right-margin for main-content is removed or overridden */
#main-content {
	margin: 0; /* override previous margin-right:22em or similar */
	padding: 0; /* page container handles padding */
}

/* ---------- inline sidebar (not fixed) ---------- */
.inline-sidebar {
	background: #2e3a49; /* matches your blue-gray theme */
	color: #fff;
	border-radius: 10px;
	padding: 1.25rem;
	position: sticky; /* sticks within viewport as user scrolls */
	top: 96px; /* offset from top (adjust if you have a header) */
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

	/* avatar inside inline sidebar */
	.inline-sidebar .avatar {
		width: 96px;
		height: 96px;
		border-radius: 50%;
		display: block;
		margin: 0 auto 0.9rem auto;
		object-fit: cover;
	}

	/* nav inside inline sidebar */
	.inline-sidebar nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.inline-sidebar nav li {
		margin: 0.6rem 0;
	}

	.inline-sidebar nav a {
		color: #e6eef6;
		text-decoration: none;
		font-weight: 600;
	}

		.inline-sidebar nav a:hover {
			color: #fff;
		}

	/* social icons */
	.inline-sidebar .social {
		display: flex;
		gap: 0.75rem;
		justify-content: center;
		margin-top: 1rem;
		list-style: none;
		padding: 0;
	}

		.inline-sidebar .social a {
			color: #dbe9f9;
			font-size: 1.05rem;
		}

/* ---------- ensure hero and other sections keep original width ---------- */
.hero, .projects-grid, .container.section {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ---------- responsive: stack columns on small screens ---------- */
@media (max-width: 900px) {
	.about-grid {
		grid-template-columns: 1fr;
	}

	.inline-sidebar {
		position: relative;
		top: 0;
		max-height: none;
		margin-top: 1.25rem;
	}

	/* ensure main-content spacing ok on small screens */
	#main-content {
		padding: 1rem 0;
	}
}

.inline-sidebar nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center; /* center links */
}

.inline-sidebar nav li {
	margin: 0.75rem 0;
}

.inline-sidebar nav a {
	color: #e6eef6;
	text-decoration: none;
	font-weight: 600;
	display: inline-block; /* ensures proper centering */
}

.inline-sidebar .social {
	display: flex;
	gap: 1rem;
	justify-content: center; /* center icons */
	padding: 0;
	margin-top: 1rem;
	list-style: none;
}

	.inline-sidebar .social a {
		font-size: 1.4rem; /* bigger, visible icons */
		color: #dbe9f9;
	}

		.inline-sidebar .social a:hover {
			color: #ffffff;
		}

/* Sidebar container */
.profile-sidebar {
	width: 380px;
	background: #1a2735;
	padding: 2rem;
	border-radius: 24px;
	color: #e6eef6;
	margin: 2rem auto;
	box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

	/* Avatar */
	.profile-sidebar .avatar {
		width: 140px;
		height: 140px;
		border-radius: 50%;
		display: block;
		margin: 0 auto 1.5rem;
	}

/* About section */
.about-block {
	text-align: center;
}

	.about-block h2 {
		margin-bottom: 0.75rem;
	}

	.about-block p {
		line-height: 1.6;
		opacity: 0.9;
	}

/* Resume button */
.resume-button {
	display: block;
	text-align: center;
	background: #3b82f6;
	color: white;
	padding: 0.75rem 1rem;
	margin: 1.5rem auto;
	width: 70%;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
}

	.resume-button:hover {
		background: #528ffc;
	}

/* Social icons */
.sidebar-footer .social {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1.2rem;
	margin-top: 1.5rem;
	padding: 0;
}

	.sidebar-footer .social a {
		font-size: 1.6rem;
		color: #dce7f7;
	}

	.sidebar-footer .social a:hover {
		color: white;
	}

/* ---------- About Me Card ---------- */
.about-card {
	width: 100%;
	display: flex;
	justify-content: center; /* center the inner card */
	padding: 3em 0; /* vertical spacing like other sections */
}

.about-card-inner {
	max-width: 1100px; /* match top banner & portfolio width */
	width: 100%;
	margin: 0 auto; /* center horizontally */
	background: #f5f5f5; /* card color */
	border-radius: 12px;
	padding: 2em;
	text-align: center;
	box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

	/* Avatar / Profile Picture */
	.about-card-inner .avatar {
		width: 140px;
		height: 140px;
		border-radius: 50%;
		display: block;
		margin: 0 auto 1.5rem auto;
		object-fit: cover;
	}

	/* Resume Button */
	.about-card-inner nav a.resume-button {
		display: inline-block;
		padding: 0.75em 1.5em;
		background: #4acaa8;
		color: white;
		border-radius: 5px;
		margin-top: 1.5rem;
		text-decoration: none;
		font-weight: 600;
		transition: background 0.2s;
	}

		.about-card-inner nav a.resume-button:hover {
			background: #2a9d80;
		}

	/* Social Icons */
	.about-card-inner footer ul.social {
		display: flex;
		justify-content: center;
		gap: 1.2rem;
		margin-top: 1.5rem;
		padding: 0;
		list-style: none;
	}

		.about-card-inner footer ul.social li a {
			font-size: 2.6rem;
			color: #444;
			transition: color 0.2s;
		}

			.about-card-inner footer ul.social li a:hover {
				color: #4acaa8;
			}