:root{
	--html-font-size:17px;

	--body-font-family:                  'Arial', serif;
	--body-heading-font-family:          'Jost', sans-serif;
	--sidepanel-list-font-family:        'Poppins', sans-serif;
	
	--body-heading-font-color:#7D5731;
	
	--body-background-color: whitesmoke;
	--body-font-color: #5A5A5A;
	--body-font-style: normal;
	--body-font-optical-sizing: auto;
	--body-font-weight: 300;
	
	--website-heading1-font-size:  calc(1rem + 3vw);
	--website-heading1-font-weight: 800;
	--website-heading1-font-color: white;
	
	--website-para-font-size: 32px;
	--website-para-font-weight: 800;
	--website-para-font-color: beige;
	
	--ThreeColumnElements-heading3-font-size:1.4rem;
	--ThreeColumnElements-heading3-font-weight:500;
	
	--sidepanel-list-font-size:0.9rem;
	--sidepanel-list-font-weight:600;

	--sidepanel-heading-font-size:1.6rem;
	--sidepanel-heading-font-weight:500;
	
	--homesection-heading2-font-size: 32px;
	--homesection-heading2-font-weight: 600;
	--homesection-heading2-font-color:#757575;
	
	--subsection-heading3-font-size:1.4rem;
	--subsection-heading3-font-weight:500;
		
} 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Include padding and border in width */
	line-height: 1.5;
}
html, body {
	width: 100%;
	max-width: 100%;
	font-size: var(--html-font-size);
}
a {
	text-decoration: none; /* Removes the underline */
	color: inherit; /* Inherits the color from the parent element */
	background: none; /* Ensures no background highlight */
	cursor: pointer; /* Sets the cursor to default */
}
body {
	font-family: var(--body-font-family);
	font-weight: var(--body-font-weight);
	font-style: var(--body-font-style);
	font-optical-sizing: var(--body-font-optical-sizing);
	color: var(--body-font-color);
	background-color: var(--body-background-color);
	text-align: center;
}
body p {
	margin-bottom: 1rem;
	text-align: justify;
}
body h1, body h2,  body h3 {
	font-family: var(--body-heading-font-family);
	color: var(--body-heading-font-color);
}

body h1 {
	
}

body h2 {
	
}

body h3 {
	
}
.PageTopImageBox {
	position: relative;
	width: 100%; /* Full width of the container */
	max-width: 100%;
	min-width: 300px;
	height: auto; /* Maintain aspect ratio */
	object-fit: cover; /* Crops the extra width while keeping the aspect ratio */
	overflow: hidden; /* Ensures no overflow shows */
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}
.PageTopImageBox img {
	display: block;
}
.PageTopImageBox .ShorterImage {
	min-height: 200px; /* Example minimum height */
}
.PageTopImageBox .LongerImage {
	min-height: 350px; /* Example minimum height */
}
.WebsiteHeadingBox {
	position: absolute; /* Enable positioning relative to the parent */
	top: 0;
	z-index: 950;
	width: 100%;
	max-width: 100%;
	height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.WebsiteHeading {
	width: fit-content;
	padding: 1rem;
}
.WebsiteHeading h1 {
	font-size: var(--website-heading1-font-size);
	font-weight: var(--website-heading1-font-weight);
	color: var(--website-heading1-font-color);
	text-shadow: 2px 2px 5px gray;
	padding: 0 0.5rem;
}
.WebsiteHeading p {
	font-size: var(--website-para-font-size);
	font-weight: var(--website-para-font-weight);
	color: var(--website-para-font-color);
	padding: 0 0.5rem;
	text-align: center;
}

.TwoColumn_GridLayout {
	display: flex;
	gap: 2vw;
	grid-template-columns: 1fr 370px;
}
.MainSection {
	min-width: 300px;
	margin: 1rem auto;
	padding: 20px 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	text-align: left;
	gap: 1rem;
}
.MainSection#ReducedWidth {
	width: 60%;
}
.ProjectSection, .HomeSection {
	padding: 2rem 3vw;
	text-align: left;
	min-width: 300px;
}
.HomeSection_HeadingBox, .MainSection_HeadingBox, .ProjectSection_HeadingBox {
	margin: 40px 0 0 0;
	padding: 0;
	width: fit-content;
	display: block;
}
.HomeSection_HeadingBox h2, .MainSection_HeadingBox h2, .ProjectSection_HeadingBox h2 {
	font-size: var(--homesection-heading2-font-size);
	font-weight: var(--homesection-heading2-font-weight);
	color: var(--homesection-heading2-font-color);
	text-align: left;
}

aside {
	padding: 30px 20px;
	display: flex; /* Enable flexbox for alignment */
	justify-content: flex-start; /* Center align items horizontally */
}
.Button_SidePanel {
	position: sticky; /* Use absolute to position inside the container */
	top: 80px;
	width: 300px;
	min-width: 250px;
	height: fit-content;
	max-width: 100%;
	
	display: flex;
	flex-direction: column;
	border-radius: 30px;
	
	background-color: #343a40; /* Dark background color */
	color: white; /* Text color */
	box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}
.Button_SidePanel ul {
	list-style: none;
	font-family: var(--sidepanel-list-font-family);
	font-size: var(--sidepanel-list-font-size);
	font-weight: var(--sidepanel-list-font-weight);
	text-align: left;
	color: whitesmoke;
	border-left: 6px solid transparent;
	margin-left: 25px;
	margin-bottom: 20px;
}
.Button_SidePanel ul#CenteredList {
	text-align: center;
	margin-left: 0;
	color: orange;
}
.Button_SidePanel ul li {
	padding: 8px 10px;
	margin-bottom: 8px;
	transition: background-color 0.3s ease;
	transition: transform 0.3s ease;
	cursor: pointer;
}
.Button_SidePanel ul li:hover {
	transform: scale(1.03);
}
.Button_SidePanel ul li.SelectedItem {
	border-left: 6px solid orange;
	color: orange;
	cursor: auto;
}
.Button_SidePanel h1 {
	font-family: var(--sidepanel-heading-font-family);
	font-weight: var(--sidepanel-heading-font-weight);
	font-size: var(--sidepanel-heading-font-size);
	color: darkgoldenrod;
	text-align: center;
	margin: 10px 0;
	width: fit-content;
	align-self: center;
}
/* Disabled button appearance */
.Button_SidePanel button.disabled {
	background-color: #ccc;
	color: grey;
	cursor: default;
}


.SubSection {
	width: 100%;
	box-sizing: border-box;
	padding: 30px 40px 40px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-bottom: 30px;
	border: 0.5px solid #D2D2D2;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
	border-radius: 0px;
	background-color: white;
}
.hidden {
	display: none;
}
.SubSection_TopHeadingBox {
	display: inline-block;
	position: relative; /* Required for positioning the pseudo-element */
}

.SubSection_TopHeadingBox h3{
	font-weight: var(--subsection-heading3-font-weight);
	font-size: var(--subsection-heading3-font-size);
	text-shadow: unset;
	margin: 0;
	text-align: left;
}

.ThreeColumnContainer {
	width: 100%;
	gap: 30px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
}
.ThreeColumnElements {
	flex: 1;
	box-sizing: border-box;
	/*margin: 0 30px 30px 0;*/
	padding: 20px 30px 30px 20px;
	text-align: justify;
	border: 0.5px solid #D2D2D2;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background-color: white;
	width: 325px;
	min-width: 300px;
	max-width: 325px;
    transition: transform 0.1s ease-in-out;
    }

	.ThreeColumnElements:hover {
		transform: scale(0.98);
	}
.ThreeColumnElements h3 {
	font-size: var(--ThreeColumnElements-heading3-font-size);
	font-weight: var(--ThreeColumnElements-heading3-font-weight);
	text-align: center;
}
.ThreeColumnElements img, .ThreeColumnElements video {
	width: 100%;
	max-width: 100%;
}
.fine-line {
	border: none;
	border-top: 2px solid #919191; /* Adjust thickness and color */
	width: 100%; /* Adjust the width as needed */
	margin: 2px 0 8px 0; /* Adjust spacing above and below */
	opacity: 0.5; /* Slight transparency for a softer look */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}
.thick-colored-line {
	border: none; /* Remove default border */
	height: 3px; /* Set line thickness */
	background-color: orange;
	width: 100%; /* Adjust the width of the line */
	opacity: 0.8; /* Slight transparency for a softer look */
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
	margin: 5px 0 10px 0;
	width: 100%;
}

.LeftAndRightSection {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	max-width: 100%;
	align-items: flex-start;
}
.LeftAndRightSection h1 {
	font-size: 1.5rem;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-weight: 300;
	color: #716508;
	text-shadow: unset;
}
.LeftAndRightSection h2 {
	font-size: 1.5rem;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-weight: 300;
	color: #AC9911;
}
.LeftAndRightSection ul {
	list-style-type: none; /* Remove default bullets */
	margin: 0 30px; /* Space above and below the list */
}
.LeftAndRightSection li {
	position: relative; /* Relative positioning for custom bullet */
	padding-left: 20px; /* Space for custom bullet */
	margin-bottom: 10px; /* Space between list items */
	color: #333; /* Elegant text color */
}
.LeftAndRightSection li::before {
	content: '●'; /* Custom bullet symbol (circle) */
	position: absolute; /* Absolute position to align with text */
	left: 0; /* Position the bullet on the left */
	color: #E9764C; /* Coral-colored bullet for elegance */
}
.LeftSection {
	flex: 2;
	max-width: 100%;
}
.LeftSection img, .LeftSection video {
	width: 100%;
	max-width: 350px;
	margin: 0 10px 10px 0;
	border: 2px solid grey;
}
.RightSection {
	flex: 1;
	text-align: center;
	max-width: 100%;
}
.RightSection img, .RightSection video {
	width: 98%;
	max-width: 350px;
	margin: 0 20px 20px 0;
	flex-basis: auto;
	min-width: 200px;
	object-fit: contain;
}
.tag_button {
	display: inline-block;
	padding: 2px 8px;
	background-color: #868686;
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	font-style: italic;
	border-radius: 12px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.tag-heading {
	font-family: "Arial";
	font-size: 14px;
	font-weight: 100;
	color: gray;
	margin-right: 10px;
	padding-top: 10px;
	text-align: left;
	border-top: 1px dashed rgb(0, 0, 0, 0.3);
}
/*----------------------Button */
.custom-button {
	display: inline-block;
	padding: 6px 12px;
	background-color: #9F9A95; /* Orange */
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	border-radius: 8px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.custom-button:hover {
	background-color: #E07A00; /* Darker orange on hover */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
/* ---------------------Image */
.LeftAlignedImage {
	height: inherit;
	float: left;
	margin: 10px;
}
.RightAlignedImage {
	max-width: 100%;
	height: auto;
	float: right;
	margin:10px;
}
.contact-links {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width:300px;
	max-width: 100%;
}
	
.contact-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #555;
	background-color: #f9f9f9;
	border-radius: 8px;
	transition: background-color 0.3s ease;
}
.contact-link img {
	width: 35px;
	height: auto;
	border: none;
	padding: 5px;
	margin: 5px;
	display: block;
}

.contact-link.linkedin:hover {
	background-color: #0077b5;
	color: #fff;
}
.contact-link.website:hover {
	background-color: #008cba;
	color: #fff;
}
.contact-link.email:hover {
	background-color: #dd4b39;
	color: #fff;
}
.highlight {
	font-size: larger;
	font-weight: bold;
}
@media (max-width: 1024px) {
	:root{	
	--website-heading1-font-size: 52px;
	--website-para-font-size: 30px;
	--ThreeColumnElements-heading3-font-size:1rem;
	--homesection-heading2-font-size: 32px;
	--subsection-heading3-font-size:1.5rem;	
	}
	#HomePage_SidePanel {
		display: none;
	}
}
@media (max-width: 768px) {
	:root{	
		--html-font-size:18px;
		--website-heading1-font-size: 2.5rem;
		--website-para-font-size: 1.1rem;
		--ThreeColumnElements-heading3-font-size:1.4rem;
		--homesection-heading2-font-size: 2rem;
		--subsection-heading3-font-size:1.5rem;	
	}
	.MainSection#ReducedWidth{
		width: 80%;
	}
	.TwoColumn_GridLayout {
		flex-direction: column-reverse;
		gap:0;
	}
	#HomePage_SidePanel {
		display: none;
	}
	.ThreeColumnElements {
		max-width: 450px;
	}
	.LeftAndRightSection {
		flex-direction: column-reverse;
		gap:0;
	}
}
@media (max-width: 480px) {
	:root{	
		--html-font-size:18px;
		--website-heading1-font-size: 2.4rem;
		--website-para-font-size: 1.1rem;
		--ThreeColumnElements-heading3-font-size:1.4rem;
		--homesection-heading2-font-size: 2rem;
		--subsection-heading3-font-size:1.5rem;	
	}
	.HomeSection_HeadingBox, .MainSection_HeadingBox, .ProjectSection_HeadingBox {
		width: 100%;
	}
	.HomeSection_HeadingBox h2, .MainSection_HeadingBox h2, .ProjectSection_HeadingBox h2, .SubSection_TopHeadingBox h3 {
		text-align: center;
	}
	.MainSection#ReducedWidth{
		width: 95%;
	}
	.LeftAndRightSection {
		flex-direction: column-reverse;
		gap:0;
	}
	.SubSection {
		padding: 30px 20px 40px 20px;
	}
}
@media (max-width: 360px) {
	:root{	
		--html-font-size:18px;
		--website-heading1-font-size: 2rem;
		--website-para-font-size: 1rem;
		--ThreeColumnElements-heading3-font-size:1.2rem;
		--homesection-heading2-font-size: 1.5rem;
		--subsection-heading3-font-size:1.2rem;	
	}
	.HomeSection_HeadingBox, .MainSection_HeadingBox, .ProjectSection_HeadingBox {
		width: 100%;
	}
	.HomeSection_HeadingBox h2, .MainSection_HeadingBox h2, .ProjectSection_HeadingBox h2, .SubSection_TopHeadingBox h3 {
		text-align: center;
	}
	.LeftAndRightSection {
		flex-direction: column-reverse;
		gap:0;
	}
	.SubSection {
		padding: 30px 20px 40px 20px;
	}
}



/* Form container styling */
.form-container {
text-align: left;
}

/* Label styling */
.form-container label {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    display: block;
}

/* Input field and textarea styling */
.form-container input[type="text"], .form-container input[type="email"], .form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: border-color 0.3s;
}

.form-container input[type="text"]:focus, .form-container input[type="email"]:focus, .form-container textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Textarea resizing control */
.form-container textarea {
    resize: vertical;
    min-height: 120px;
}

/* Button styling */
.form-container button {
    width: 100%;
    background-color: #007bff;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-container button:hover {
    background-color: #0056b3;
}


        .error {
            border-color: red;
            background-color: #ffe6e6;
        }

        /* Optional: styling for error text */
        .error-message {
            color: red;
            font-size: 14px;
            margin-top: -10px;
            margin-bottom: 15px;
        }
/* --- Homepage revamp additions (2026-10-21) --- */
.Button_SidePanel h2 {
	font-family: var(--sidepanel-heading-font-family);
	font-weight: var(--sidepanel-heading-font-weight);
	font-size: var(--sidepanel-heading-font-size);
	color: darkgoldenrod;
	text-align: center;
	margin: 10px 0;
	width: fit-content;
	align-self: center;
}
.StatStrip {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	width: 100%;
	margin: 30px 0 0 0;
}
.StatItem {
	flex: 1;
	min-width: 140px;
	text-align: center;
	padding: 18px 10px;
	border: 0.5px solid #D2D2D2;
	box-sizing: border-box;
}
.StatNumber {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	color: darkgoldenrod;
}
.StatLabel {
	display: block;
	margin-top: 6px;
	font-size: 0.95rem;
}

/* --- Homepage v3 additions (2026-10-21) --- */
.TimelineItem {
	margin: 0 0 18px 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid darkgoldenrod;
}
.TimelineItem h3 {
	margin: 0 0 6px 0;
	text-align: left;
}
.TimelineItem p {
	margin: 0;
	text-align: justify;
}
.ProofLine {
	font-size: 0.92rem;
}
.InfoStrip {
	margin: 30px 0 0 0;
	padding: 16px 20px;
	border: 0.5px solid #D2D2D2;
	text-align: center;
}
.InfoStrip p {
	margin: 0;
}
.SectionIntro {
	margin: 6px 0 14px 0;
}

/* --- Mobile styling fixes (2026-10-21) --- */
.StatItem {
	background-color: white;
}
.custom-button {
	margin: 4px 6px 4px 0;
}
@media (max-width: 768px) {
	/* Hero: clear the fixed header, give the heading room, stop the spill */
	.PageTopImageBox .LongerImage {
		height: 460px;
		object-fit: cover;
	}
	.WebsiteHeadingBox {
		padding-top: 58px;
	}
	.WebsiteHeading h1 {
		font-size: 2.3rem;
	}
	.WebsiteHeading p {
		font-size: 1.02rem;
		line-height: 1.45;
	}
	.WebsiteHeading p:last-child {
		font-size: 0.92rem;
		font-weight: 600;
		margin-top: 10px;
	}
	/* Left-align text in narrow columns (justified text leaves stretched gaps) */
	body p, .ThreeColumnElements, .TimelineItem p {
		text-align: left;
	}
	.WebsiteHeading p, .InfoStrip p {
		text-align: center;
	}
	.InfoStrip p {
		font-size: 0.95rem;
		line-height: 1.8;
	}
	/* Cards stack full-width, one per row */
	.ThreeColumnElements {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.ThreeColumnContainer {
		justify-content: center;
	}
}
@media (max-width: 480px) {
	.PageTopImageBox .LongerImage {
		height: 470px;
	}
	.WebsiteHeading h1 {
		font-size: 2.1rem;
	}
	.StatStrip {
		gap: 16px;
	}
}

/* --- Background page additions (2026-10-21) --- */
.RoleBlock {
	margin-bottom: 28px;
}
.RoleBlock:last-child {
	margin-bottom: 0;
}
.RoleMeta {
	font-weight: 600;
	color: #757575;
	margin-bottom: 8px;
}
@media (max-width: 768px) {
	.PageTopImageBox .ShorterImage {
		height: 300px;
		object-fit: cover;
	}
}

/* --- Projects page additions (2026-10-21) --- */
.LeftSection h4 {
	font-family: var(--body-heading-font-family);
	color: var(--body-heading-font-color);
	font-size: 1.05rem;
	margin: 16px 0 6px 0;
	text-align: left;
}