@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
/* DO NOT EDIT THESE IMPORTS
In order to keep our CSS as manageable as possible, we're starting with multiple separate stylesheets. They are all imported into style.css.

    Do not edit reset.css at all.
    You can minimally edit layout.css to match your specific column/row grid rules. Try to keep all basic structural rules here.
    Optionally, you can set colour variables in variables.css.
    Use typography.css stylesheet to set your general text styles.
    Use style.css for all general UI styles, or anything that you want to overwrite from other stylesheets, because it's loaded last. */

/* Use this stylesheet to add your UI details, and to overwrite layout details for specific instances. */

body {
	margin: 0;
}

/* ------------------ Style the header ---------------- */
.site-header {
	background: linear-gradient(to bottom, #ebedeb 30%, #ebedeb 90%);
	padding: 20px 40px;
	width: 100%;
	position: fixed; /* Fixes header to the top */
	top: 0;
	left: 0;
	z-index: 1000; /* Ensure it stays above all content */
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */
}

/* Ensure content starts below the fixed header */
body {
	padding-top: 100px; /* Adjust based on actual header height */
}

/* Logo Styling */
.logo {
	margin-right: auto;
	display: flex;
	align-items: center; /* Ensures vertical alignment */
}

.logo img {
	height: 60px; /* Default size */
	width: auto;
	transition: all 0.3s ease-in-out;
}

/* Navigation Links */
.nav-links {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.nav-links ul {
	list-style: none;
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
}

.nav-links li {
	display: inline-block;
}

.nav-links a {
	position: relative; /* Needed for the sliding effect */
	text-decoration: none;
	color: black;
	font-size: 24px; /* Larger size for desktop */
	font-weight: normal;
	transition: color 0.3s ease-in-out;
}

/* Hover color change */
.nav-links a:hover {
	color: #ff7818;
}

/* Active link - Stays blue only when it's the active section */
.nav-links a:focus {
	color: #ff7818;
}

/* Remove underline effect for active links */
.nav-links a:focus::after {
	display: none;
}

/* Sliding underline effect */
.nav-links a::after {
	content: "";
	position: absolute;
	left: 50%; /* Start from the center */
	bottom: -5px;
	width: 0%;
	height: 2px;
	background-color: #ff7818;
	transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

/* Expand the underline outward on hover */
.nav-links a:hover::after {
	width: 100%;
	left: 0%;
}

/* Ensure main content starts below the header */
main {
	padding-top: 120px;
}

/* ------------------ Mobile  ------------------ */
@media (max-width: 768px) {
	body {
		padding-top: 80px;
	}

	main {
		padding-top: 100px;
	}

	/* Reduce logo size but keep it visible */
	.logo img {
		height: 40px; /* Adjusted for mobile */
		width: auto; /* Maintain aspect ratio */
		display: flex; /* Ensures visibility */
	}

	/* Fix header layout for mobile */
	.inner-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 10px 20px; /* Adjusted padding */
	}

	/* Reduce navigation size on mobile */
	.nav-links ul {
		gap: 20px;
	}

	.nav-links a {
		font-size: 20px; /* Keep current size on mobile */
	}
}

/* ------------------Sections and pages------------------ */
/* Style any specific sections or pages here */

/* --------banner section-------- */
/* Reset default spacing */
html,
body {
	margin: 0;
	padding: 0;
}

.hero {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 60px 80px;
	font-family: "Inter", sans-serif;
	color: black;
}

.hero-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.hero-title {
	font-size: 11vw;
	font-weight: 500;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
	text-align: left;
}

.hero-sub {
	font-size: 1.2rem;
	font-weight: 300;
	margin-top: 30px;
}

.highlight {
	font-weight: 600;
	color: #333;
}

.alt-highlight {
	font-weight: 600;
	font-style: italic;
	color: #333;
}

/* Thick black bar */
.bottom-bar {
	position: absolute;
	bottom: 40px; /* ⬅️ moves it UP */
	left: 40px; /* ⬅️ inset from the left */
	right: 40px; /* ⬅️ inset from the right */
	height: 10px;
	background-color: black;
	z-index: 3;
}

.hero-button {
	display: inline-block;
	padding: 12px 28px;
	font-size: 1rem;
	font-weight: 500;
	color: black;
	border: 1px solid black;
	border-radius: 999px;
	background-color: transparent;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-top: 30px;
}

.hero-button:hover {
	background-color: #ebedeb;
	border: none;
	color: black;
	transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out,
		border 0.4s ease-in-out;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
	.hero {
		padding: 60px 20px;
		height: auto;
	}

	.hero-title {
		font-size: 10vw;
	}

	.hero-blurb {
		width: 100%;
		font-size: 0.9rem;
	}

	.hero-headshot {
		width: 100px;
		height: 130px;
		margin-bottom: 10px;
	}
	.hero-button {
		padding: 10px 22px;
		font-size: 0.95rem;
		margin-top: 24px;
	}
}

/* --------Process Steps---------*/
.process-section {
	text-align: left;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px; /* Aligns with other sections like 'Hello' */
	display: flex;
	flex-direction: column;
}

.process-title {
	font-family: "Inter", sans-serif;
	font-size: 5em;
	font-weight: 300;
	margin-bottom: 40px;
	padding-left: -20px;
}

/* Two-column layout: flower + steps */
.process-layout {
	display: flex;
	align-items: flex-start;
	gap: 60px;
}

/* Flower image container */
.transform-bubbles {
	width: 150px;
	height: auto;
	flex-shrink: 0;
	margin-top: 10px;
}

.rotating-bubbles {
	width: 100%;
	height: auto;
	display: block;
}

/* Step list */
.process-list {
	list-style: none;
	padding: 0;
	counter-reset: step-counter;
	max-width: 900px;
	margin: 0;
}

.process-step {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 20px;
}

.process-step::before {
	content: counter(step-counter, decimal-leading-zero);
	counter-increment: step-counter;
	font-size: 1.5em;
	font-weight: regular;
	min-width: 40px;
	text-align: right;
}

.process-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	max-width: 800px;
}

.process-content h3 {
	text-transform: uppercase;
	border-bottom: 2px solid black;
	padding-bottom: 3px;
	margin: 0;
	display: inline-block;
	width: 100%;
	font-family: "Inter", sans-serif;
	font-size: 1.5em;
	font-weight: 400;
}

.process-content p {
	margin-top: 5px;
	max-width: 680px;
	text-align: left;
	font-family: "Inter", sans-serif;
	font-size: 1em;
	font-weight: 400;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
	.process-layout {
		flex-direction: column;
		gap: 40px;
	}

	.transform-bubbles {
		width: 90px;
		margin: 0 auto;
	}

	.process-title {
		font-size: 2.5em;
	}
}

/* --------Projects Section---------*/
.projects {
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
}

/* Each Project Row */
.project-row {
	display: flex;
	gap: 40px;
	width: 100%;
}

/* Each Project Item */
.project-item {
	flex: 1 1 calc(50% - 20px);
	position: relative;
	text-align: left;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Image Container (ONLY the box height shrinks on hover) */
.image-container {
	width: 100%;
	height: 350px; /* Default image size */
	overflow: hidden;
	position: relative;
	transition: height 0.3s ease-in-out;
}

/* Image (STAYS FIXED, NO SCALING) */
.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0; /* Keeps image pinned to the top */
	left: 0;
}

/* Project Info - Positioned Below Image */
.project-info {
	position: relative;
	opacity: 0;
	transform: translateY(-20px); /* Starts higher */
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
	margin-top: -30px; /* Ensures alignment */
	padding-bottom: 20px;
}

/* Remove underline from title */
.project-info .title-link {
	text-decoration: none;
	color: black;
	font-weight: 600;
	font-size: 1.25rem;
}

/* Ensure only "View Project" is underlined */
.view-project {
	font-size: 1rem;
	color: black;
	text-decoration: underline;
	transition: color 0.3s ease-in-out;
}

/* Hover Effect: Shrinks the Box from the Bottom, No Zoom */
.project-item:hover .image-container {
	height: 320px;
}

/* Text smoothly slides down and fades in on hover */
.project-item:hover .project-info {
	opacity: 1;
	transform: translateY(0); /* Slides down to normal position */
}

/* Responsive: Keep Two Columns on Mobile */
@media (max-width: 768px) {
	.project-row {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.project-item {
		flex: 1 1 calc(50% - 10px); /* Keeps two columns on mobile */
	}

	.image-container {
		height: 250px; /* Smaller default height for mobile */
	}

	.project-info {
		margin-top: -20px;
		padding-bottom: 15px;
		transform: translateY(-15px); /* Starts higher on mobile */
	}

	.project-item:hover .image-container {
		height: 220px; /* Shrinks slightly less for mobile */
	}

	.project-item:hover .project-info {
		transform: translateY(0); /* Slides down on hover */
	}

	.project-info h3 {
		font-size: 1.1rem;
	}

	.view-project {
		font-size: 0.85rem;
	}
}

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

/* Full Width & Height */
html,
body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	background: #ebedeb;
	scroll-behavior: smooth;
}

/* Footer Section */
.footer {
	background: #ebedeb;
	width: 100vw;
	padding: 60px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	min-height: 60vh;
}

/* Footer Content */
.footer-content {
	max-width: 50%;
}

/* Contact Title */
.footer h2 {
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 20px;
}

/* CTA Link */
.cta-link {
	font-size: 1rem;
	text-decoration: underline;
	color: black;
	display: block;
	margin-bottom: 40px;
	transition: color 0.3s ease-in-out;
}

.cta-link:hover {
	color: #ff7818;
}

/* Contact Info */
.contact-info {
	font-size: 1rem;
	margin-bottom: 60px;
}

/* Contact Info Links (Email + Phone) */
.contact-info a {
	color: black;
	text-decoration: underline;
	transition: color 0.3s ease-in-out;
}

.contact-info a:hover {
	color: #ff7818;
}

/* Social Links */
.social-links {
	display: flex;
	gap: 40px;
	justify-content: center;
	margin-top: 40px;
}

.social-links a {
	font-size: 1rem;
	text-decoration: underline;
	color: black;
	transition: color 0.3s ease-in-out;
}

.social-links a:hover {
	color: #ff7818;
}

/* Back to Top Section */
.back-to-top {
	position: absolute;
	right: 40px;
	bottom: 40px;
	text-align: center;
	z-index: 999;
}

.back-to-top a {
	text-decoration: none;
	color: black;
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 500;
	transition: color 0.3s ease-in-out;
}

.back-to-top a:hover {
	color: #ff7818;
}

/* Back to Top Arrow */
.back-to-top .arrow {
	display: block;
	width: 2px;
	height: 30px;
	background: black;
	margin: 0 auto 5px;
	position: relative;
}

/* Arrow Head */
.back-to-top .arrow::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-left: 2px solid black;
	border-top: 2px solid black;
	transform: translateX(-50%) rotate(45deg);
}

/* Footer Copyright */
.inner-wrapper {
	width: 100%;
	text-align: center;
	padding-top: 40px;
	font-size: 0.9rem;
	color: #333;
}

/* Remove weird purple/blue visited link color */
a:visited {
	color: black;
}

/*---------about me----------*/

.gradient-background {
	background: url("images/gradient_hero_Image.png") center/cover no-repeat;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 60px 40px;
	min-height: 90vh;
}

/* About content wrapper */
.about-content {
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 100px;
}

/* Optional subheading (not being used) */
.about-content h1 {
	font-size: 2rem;
	text-align: right;
	margin-bottom: 60px;
	font-weight: 200;
	margin-left: 250px;
}

/* Text + image container */
.about-container {
	display: flex;
	flex-direction: row;
	gap: 60px;
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-bottom: 60px;
	padding-bottom: 40px;
}

/* Left column text */
.about-text {
	flex: 1;
	min-width: 0;
	max-width: 600px;
}

/* Main intro heading */
.about-text h2 {
	font-size: 4rem;
	margin-bottom: 20px;
	font-weight: 300;
	position: relative;
}

/* Thin black line under heading */
.about-text h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background-color: black;
	margin-top: 10px;
}

/* Paragraphs */
.about-text p {
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 10px;
}

/* Blockquote styling */
.about-text blockquote {
	font-size: 1.5rem;
	font-style: regular;
	margin-top: 40px;
	margin-bottom: 20px;
	padding-left: 2em;
	border-left: 2px solid black;
	color: #000000;
	font-weight: 300;
	line-height: 1.3;
	max-width: 800px;

	text-indent: -0.4em;
	padding-left: 1.4em;
}

/* Back to home link */
.back-to-home {
	text-align: center;
	margin: 60px 0 40px;
}
.about-image {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: -60px;
}

.about-image img {
	width: 100%;
	max-width: 900px;
	height: auto;
	object-fit: cover;
}

.back-to-home a {
	text-decoration: none;
	color: black;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	border-bottom: 1px solid black; /* ← Add a clean underline */
	padding-bottom: 2px; /* ← Give a little space under text */
	transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; /* ← Smooth hover */
}

/* Hover effect */
.back-to-home a:hover {
	color: #ff7818; /* Orange text on hover */
	border-bottom: 1px solid #ff7818; /* Orange underline on hover */
}

/* Responsive layout */
@media (max-width: 900px) {
	.about-container {
		flex-direction: column;
		text-align: left;
	}

	.about-content h1 {
		text-align: left;
	}

	.about-image {
		order: -1;
		margin-top: 0px;
		margin-bottom: 30px;
		max-width: 100%;
	}

	.about-text blockquote {
		text-align: center;
		padding-left: 0;
		border-left: none;
		margin-left: auto;
		margin-right: auto;
	}
}
/* -----------Project Page---------- */
/* ---------------- PROJECT PAGE STYLING ---------------- */
.project-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 120px 40px 80px;
	background: radial-gradient(circle at center, #ebedeb 100%);
}

/* Project Header (Title + Description) */
.project-page .project-header {
	text-align: center;
	margin-bottom: 60px;
}

.project-page .project-header h1 {
	font-size: 3rem;
	font-weight: 400;
	margin-bottom: 20px;
	padding-top: 100px;
}

.project-page .project-number {
	font-family: "inter", monospace;
	font-size: 3.5rem;
	font-weight: 400;
	margin-right: 10px;
}

.project-page .project-description {
	max-width: 700px;
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 1.7;
	font-weight: 300;
	text-align: left;
}

/* Hero Image */
.project-page .project-hero img {
	width: 100%;
	height: auto;
	object-fit: cover;
	margin-bottom: 80px;
}

/* Thumbnails */
.project-page .project-thumbnails {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.project-page .thumbnail {
	flex: 1;
	overflow: hidden;
	transition: all 0.4s ease;
	min-width: 0;
}

.project-page .thumbnail img {
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.4s ease;
	border-radius: 8px;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.project-page .next-project {
	margin-top: 100px;
	width: 100vw; /* Full viewport width */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.project-page .next-project-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100px;
	background: url("images/gradient_hero_Image.png") center/cover no-repeat;
	text-decoration: none;
	text-align: center;
}

.project-page .next-project-bar p {
	font-size: 32px;
	font-weight: regular;
	color: #ebedeb;
	margin: 0;
}

/* Back to Home */
.project-page .back-to-home {
	text-align: center;
	margin-top: 80px;
}

.project-page .back-to-home a {
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
	border-bottom: 1px solid #000;
	padding-bottom: 2px;
}

/* Hover effect for "Next Project →" text */
.project-page .next-project-bar p:hover {
	color: black;
	transition: color 0.3s ease-in-out;
}

/* Base styling for Back to Home link */
.project-page .back-to-home a {
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none; /* Remove default underline */
	color: black;
	border-bottom: 1px solid black; /* Fake underline using border */
	padding-bottom: 2px;
	transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.project-page .back-to-home a:hover {
	color: #ff7818; /* Orange text on hover */
	border-bottom: 1px solid #ff7818; /* Orange underline on hover */
}

/* Responsive for Project Page */
@media (max-width: 768px) {
	.project-page .project-thumbnails {
		flex-direction: column;
		gap: 20px;
	}

	.project-page .project-hero img {
		margin-bottom: 40px;
	}

	.project-page .project-header h1 {
		font-size: 2rem;
	}

	.project-page .project-description {
		font-size: 1rem;
		padding: 0 20px;
	}

	.project-page .thumbnail img {
		max-width: 90%;
		margin: 0 auto;
	}
}