body {
	background-color: #F7F7F7;
}

/* Desktop-only lockout */
body.unsupported-display {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	box-sizing: border-box;
	background-color: #F7F7F7;
}

body.unsupported-display > * {
	display: none !important;
}

body.unsupported-display::before {
	content: "Phone and tablet screen sizes not currently supported. For best experience, please view on desktop.";
	max-width: 32rem;
	color: #1E1E1E;
	font-family: "Open Sans", sans-serif;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

/* Header layout */
#Main_Container {
	display: flex;
	height: calc(100vh - 17px);
	overflow: hidden;
}

/* Title block */
#Title_Container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: -4vh;
	width: 40vw;
	overflow: hidden;
}

#Inside_Title_Container {
	display: flex;
	flex-direction: row;
	margin-left: clamp(70px, 5.5vw, 140px);
}

#Learning_Title {
	color: #1E1E1E;
	font-size: clamp(96px, 7vw, 180px);
	padding-left: clamp(24px, 2vw, 42px);
	margin-bottom: -0.08em;
	font-family: Open Sans;
	font-weight: 600;
	letter-spacing: 0.5px;
}

#Experience_Title {
	color: #1E1E1E;
	font-size: clamp(96px, 7vw, 180px);
	transform: rotate(90deg) translateX(-0.8em);
	width: 0;
	font-family: Open Sans;
	font-weight: 600;
	display: inline-block;
	opacity: 0.9;
}

#Two_Letters {
	color: #476C62;
}

#Design_Container {
	display: flex;
	flex-direction: column;
	width: min(20vw, 420px);
	transform: translateX(clamp(40px, 4vw, 110px));
}

#Design_Title {
	color: #1E1E1E;
	font-size: clamp(72px, 5.2vw, 130px);
	font-family: Open Sans;
	font-weight: 300;
	text-transform: uppercase;
	margin-top: -0.35em;
	letter-spacing: 1px;
}

#Tag_Line {
	font-family: Open Sans;
	font-weight: 300;
	font-size: clamp(20px, 1.5vw, 32px);
	opacity: 0.9;
}

/* Navigation */
#Navigation {
	display: flex;
	width: 55vw;
	height: 6vh;
	align-items: center;
	justify-content: space-between;
}

.nav-title {
	font-size: 1.25vw;
	font-family: "Open Sans";
	font-weight: 400;
	border-radius: 20px;
	background: linear-gradient(135deg, #F4F8F7 0%, #E9F2EF 40%, #DDEAE6 100%);
	background-size: 200% 200%;
	background-position: left top;
	transition: background-position 0.6s ease, transform 0.25s ease;
	padding: 10px 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #3F5F69;
	text-decoration: none;
}

.nav-title:hover {
	background-position: right bottom;
	transform: scale(1.05);
}

/* Hero container */
#Background_Box_Container {
	position: relative;
	flex: 1;
	height: 100%;
	margin-left: auto;
	padding: 0;
}

/* Background layers */
#Background_Box {
	bottom: -9px;
	right: 0;
	position: absolute;
	width: 80%;
	height: 57vh;
	background-color: #D9D9D9;
	border-radius: 3px;
}

#Bottom_Background_Box {
	bottom: 3vh;
	right: 2vw;
	position: absolute;
	width: 80%;
	height: 57vh;
	background: linear-gradient(135deg, #476C62, #3F5F69);
	z-index: -1;
	border-radius: 3px;
	opacity: 0.92;
}

/* Hero text */
#Hero_Description {
	position: absolute;
	left: 27.5vw;
	bottom: 30vh;
	width: 35%;
}

#Hero_Description p {
	font-family: Open Sans;
	font-size: 1.5vw;
	color: #1E1E1E;
	line-height: 1.35;
	letter-spacing: 0.3px;
}

/* CTA button */
#Hero_Description a {
	position: absolute;
	text-decoration: none;
	background-color: #476C62;
	color: #F7F7F7;
	padding: 15px 22px;
	margin-top: 50px;
	top: 15vh;
	border-radius: 3px;
	font-family: Open Sans;
	font-size: 1.3vw;
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

#CTA_Button:hover {
	background-color: #3F5F69;
	transform: translateY(-2px);
	box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
}

/* Photo */
#Myself {
	position: absolute;
	bottom: -9px;
	right: 13vw;
	height: 85vh;
	width: auto;
	filter: drop-shadow(0px 8px 8px rgba(0,0,0,0.25));
}

/* Contact Page */

/* Navigation alignment for secondary pages */
.Second_Nav {
	margin-left: 40vw;
}

/* Contact form container */
#contact-form {
	margin-left: 10vw;
	margin-top: 8vh;
}

/* Headline styling */
#contact-form h2 {
	color: #1E1E1E;
	font-family: Open Sans;
	font-size: 2vw;
	font-weight: 400;
	line-height: 1.3;
}

#contact-first-line {
	font-size: 3vw;
	color: #476C62;
	font-weight: 600;
}

/* Subject field */
#subject-form {
	margin-top: 5vh;
}

#subject-form p,
#message-form p {
	font-size: 1.5vw;
	margin: 0;
	font-family: Open Sans;
	color: #1E1E1E;
}

#subject {
	width: 15vw;
	height: 2.5vh;
	font-family: Open Sans;
	font-size: 1vw;
	padding: 4px 6px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

/* Message field */
#message-form {
	margin-top: 2.5vh;
}

#message {
	width: 40vw;
	height: 20vh;
	resize: none;
	font-family: Open Sans;
	font-size: 1vw;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

/* Submit button */
#submit-form {
	margin-top: 5vh;
	height: 5vh;
	width: 7.5vw;
	background-color: #476C62;
	color: #F7F7F7;
	border-radius: 3px;
	border: none;
	font-size: 1.25vw;
	font-family: Open Sans;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

#submit-form:hover {
	background-color: #3F5F69;
	transform: translateY(-2px);
	cursor: pointer;
}

/* LinkedIn icon */
#linkedin {
	margin-top: 4vh;
	margin-left: 10vw;
	width: 35px;
	height: 35px;
	opacity: 0.8;
	transition: opacity 0.25s ease;
}

#linkedin:hover {
	opacity: 1;
	cursor: pointer;
}

/* About Me Page*/

body {
	font-family: Open Sans;
}

#About_Container {
  display: flex;
  align-items: stretch;
  margin-top: 10vh;
  color: #1E1E1E;
  font-size: clamp(0.7rem, 1.1vw, 1.2rem);
  line-height: 1.4;
  overflow: hidden;
}

#About_Me {
  flex: 2;
  margin-left: 2vw;
  margin-right: 2vw;
  column-gap: 2rem;
  column-count: 2;
  border-right: 2px solid #476C62;
  padding-right: 2vw;
  
}

#About_Container p {
  margin-bottom: 0.8rem;
}

#About_Container h3 {
  margin: 0.5rem 0 0.3rem 0;
}

#Second_Column {
  flex: 1;
  margin-right: 4vw;
  margin-top: -3vh;
	display: flex;
	flex-direction: column;
}

#Skills_Nav {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2.9vh;
}

#Skills_Nav p {
	font-size: 1.2vw;
	font-weight: 400;
}

#skills-abilities {
	color:  #1E1E1E;
}


.Sub_Nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3vh;
}

.plus {
	height: 1.7vw;
	width: 1.7vw;
	display: block;
	flex-shrink: 0;
	transition: transform 0.2s ease, color 0.2s ease;
}

.plus:hover {
	color: #476C62;
}

.plus.rotated {
	transform: rotate(45deg);
}

.Skill_List {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin: 0;
	padding-left: 1.1rem;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}

.Skill_List.visible {
	max-height: 240px;
	opacity: 1;
	margin-top: 0.6rem;
}

.test {
	display: flex;
	flex-direction: column;
}

.Sub_Nav h3 {
	margin: 0;
	line-height: 1.2;
	font-weight: 500;
	color: #3F5F69;
}

/*Porftolio Page */

/* Portfolio Layout */
#portfolio_container {
	display: flex;
	justify-content: space-between;
	margin: 15vh 8vw 0 8vw; /* softer top spacing to match blog */
}

/* Project Card Container */
.project_container {
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease; /* smoother, like blog cards */
}

.project_container:hover {
	transform: scale(1.015); /* subtle, premium */
}

/* Portrait Link Reset */
.portrait_link,
.portrait_link:link,
.portrait_link:visited,
.portrait_link:hover,
.portrait_link:active,
.portrait_link:focus {
	display: block;
	text-decoration: none !important;
	color: inherit;
	outline: none;
}

/* Project Image */
.project_portrait {
	width: 20vw;
	height: 25vh;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	box-shadow: 0px 6px 18px rgba(0,0,0,0.15); /* softer, more editorial */
	overflow: hidden;
}

.project_portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

/* Tab Container */
.tab_container {
	width: 20vw;
	background-color: white;
	height: 5vh;
	overflow: hidden;
	transition: height 0.8s ease;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	box-shadow: 0px 6px 18px rgba(0,0,0,0.15); /* matches portrait shadow */
	box-sizing: border-box;
}

/* Chevron Row */
.chevron_container {
	height: 5vh;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.8rem;
	box-sizing: border-box;
}

.chevron_container p {
	font-family: Open Sans;
	font-weight: 600;
	color: #1E1E1E;
	font-size: 1.1vw;
	margin: 0;
	padding-right: 0.6rem;
}

/* Chevron Icon */
.tab {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.tab svg {
	width: 4vw;
	height: 5vh;
	color: #1E1E1E;
	transition: transform 0.35s ease, color 0.25s ease; /* smoother */
}

.tab svg:hover {
	transform: scale(1.15);
	color: #476C62;
}

.tab svg.rotated180 {
	transform: rotate(180deg);
}

.tab svg.rotated180:hover {
	transform: rotate(180deg) scale(1.15);
}

/* Expanded State */
.tab_extend {
	height: auto;
	transition: height 0.8s ease;
}

/* Bullet Points */
.point_1 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: 3%;
	margin-top: 6%; /* slightly calmer spacing */
}

.point_1 svg {
	width: 25px;
	height: 25px;
	min-width: 30px;
	min-height: 30px;
	flex-shrink: 0;
	color: #476C62;
}

/* Fade-in Animation */
.point_1 svg,
.point_1 p {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease; /* smoother */
	pointer-events: none;
}

/* When expanded */
.tab_container.tab_extend .point_1 svg,
.tab_container.tab_extend .point_1 p {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Bullet Text */
.point_1 p {
	margin: 0;
	line-height: 1.5; /* matches blog readability */
	font-size: 1vw;   /* consistent with blog body text */
	font-family: Open Sans;
	color: #1E1E1E;
	padding-right: 0.8rem;
	box-sizing: border-box;
}

/* Last bullet spacing fix */
.last_p {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Extra space when expanded */
.tab_container::after {
	content: "";
	display: block;
	height: 0;
	transition: height 0.3s ease;
}

.tab_container.tab_extend::after {
	height: 3vh; /* calmer than 4vh */
}
/*Blog*/

#blog_container {
	margin: 15vh 10vh;
	display: flex;
	gap: 2.5vw;
}

.blog_header {
	font-size: 1.5vw;
}

#blog_container .blog_link,
#blog_container .blog_link:link,
#blog_container .blog_link:visited,
#blog_container .blog_link:hover,
#blog_container .blog_link:active,
#blog_container .blog_link:focus {
	display: block;
	width: 43vw;
	text-decoration: none !important;
	text-decoration-line: none !important;
	color: inherit;
	outline: none;
}

#blog_container .blog_link * {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

.blog {
	display: flex;
	gap: 0;
	height: 25vh;
	width: 100%;
	border-radius: 3px;
	overflow: hidden;
	transform: translateZ(0);
	transition: transform 0.35s ease;

}

.blog:hover {
	transform: scale(1.05);
	cursor: pointer;
	box-shadow: 0px 6px 12px rgba(0,0,0,0.15);

}

.blog_section_1 {
	flex: .6;
	height: 100%;
	background-color: black;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}


.blog_section_2 {
	flex: 1;
	height: 100%;
	background-color: white;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	padding-left: 1vw;
}

.blog_section_2 p {
	color: #1E1E1E;
	font-family: Open sans;
	font-size: 1.1vw;
}

.blog_section_2 h2 {
	color: #3F5F69;
}

.blog_section_1 img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/*Blog Content*/

/* Blog Page Layout */

body {
	color: #1E1E1E;
}

/* Main content container */
.blog_content {
	margin: 15vh 20vw;
	border-left: solid 2px #3F5F69;
	border-right: solid 2px #3F5F69;
	padding: 0 2vw;
	box-sizing: border-box;
}

/* Title section */
.blog_title_section h1 {
	color: #476C62;
	font-size: 3vw;
	font-family: Open Sans;
	font-weight: 600;
}

/* Body content */
.blog_body {
	margin-top: 10vh;
}

/* Typography */
.blog_body h3,
.blog_body h4,
.blog_body p {
	font-family: Open Sans;
	font-weight: 400;
}

/* Section spacing */
.blog_body h3,
.blog_body h4 {
	margin-top: 6vh;
}

/* Headings */
.blog_body h3 {
	font-size: 1.5vw;
	color: #1E1E1E;
}

.blog_body h4 {
	font-size: 1.2vw;
	color: #1E1E1E;
}

/* Paragraphs */
.blog_body p {
	margin-bottom: 1.5vh;
	font-size: 1.2vw;
	line-height: 1.6;
	color: #1E1E1E;
}

/* References section */
.references {
	margin-top: 10vh;
}

.references h3 {
	font-size: 1.5vw;
	font-family: Open Sans;
	font-weight: 600;
	color: #1E1E1E;
}

/*Loss Mitigation*/

body  {
	color: #1E1E1E;
	font-family: Open Sans;
	font-size: 1.2vw;
}

h2 {
	font-size: 2vw;
}

h4 {
	margin: 0;
}

#lossmit_container {
	margin: 15vh 5vw;
	display: flex;
	gap: 10vw;
}

#design_steps_container {
	display: flex;
	flex-direction: column;
}

.design_steps {
	padding: 4px .8vh;
	border-radius: 3px;
	font-size: 1.4vw;
}

.design_steps:hover {
	cursor: pointer;
}

.design_steps.active {
	background-color: #F2F2F2;
}

#design_steps_content_container {
	width: 70vw;
	height: 70vh;
	background-color: #F2F2F2;
	border-radius: 3px;
	position: relative;
}

.design_steps_content {
	opacity: 0;
	position: absolute;
}

.design_steps_content.visible {
	opacity: 1;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 5vw;
	margin-top: 5vh;
	height: 85%;
	width: 85%;
}

#design_steps_container_colored {
	width: 70vw;
	height: 70vh;
	position: relative;
	top: -3vh;
	left: -2vw;
	background: linear-gradient(135deg, #476C62, #3F5F69);
	z-index: -1;
	border-radius: 3px;
}

#overview_container {
	display: flex;
	width: 60vw;
	height: 50vh;
}

#overview_content {
	width: 30vw;
}

#overview_content h2 {
	font-size: 2vw;
}

#overview_content p {
	font-size: 1.2vw;
}

#overview_pic img {
	width: 90%;
	height: 90%;
	margin-left: 4vw;
	margin-top: 4vh;
}

#overview_content a {
	color: #476C62;
}

.front-back_chevron_container {
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 1vw;
	right: 1vw;
	bottom: 0;
}

.front-back_chevron_container2 {
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 1vw;
	right: 1vw;
	bottom: 0;
}

.front-back_chevron_container3 {
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 1vw;
	right: 1vw;
	bottom: 0;
}

.front-back_chevron_container svg {
	width: 30px;
	height: 30px;
	color: #DDEAE6;
	transition: color 0.25s ease;
}

.front-back_chevron_container2 svg {
	width: 30px;
	height: 30px;
	color: #DDEAE6;
	transition: color 0.25s ease;
}

.front-back_chevron_container3 svg {
	width: 30px;
	height: 30px;
	color: #DDEAE6;
	transition: color 0.25s ease;
}


.chevron_circle {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 200px;
	width: 50px;
	height: 50px;
	position: relative;
	background-color: #476C62;;
}

.chevron_circle2 {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 200px;
	width: 50px;
	height: 50px;
	position: relative;
	background-color: #476C62;
	transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.chevron_circle3 {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 200px;
	width: 50px;
	height: 50px;
	position: relative;
	background-color: #476C62;
	transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.chevron_circle:hover {
	background-color: #3F5F69;
	transform: scale(1.05);
	cursor: pointer;
}

.chevron_circle2:hover {
	background-color: #3F5F69;
	transform: scale(1.05);
	cursor: pointer;
}

.chevron_circle3:hover {
	background-color: #3F5F69;
	transform: scale(1.05);
	cursor: pointer;
}

.chevron_circle.is-disabled,
.chevron_circle2.is-disabled,
.chevron_circle3.is-disabled {
	opacity: 0.45;
	background-color: #8BA39C;
	cursor: default;
	transform: none;
}

.chevron_circle.is-disabled:hover,
.chevron_circle2.is-disabled:hover,
.chevron_circle3.is-disabled:hover {
	background-color: #8BA39C;
	transform: none;
}

.empathize_container {
	display: flex;
	width: 60vw;
	height: 50vh;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.empathize_container.visible {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.stacked_list_section {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 3vh;
	
}

.stacked_list_section h2 {
	margin: 0;
}

.stacked_list_section ul {
	margin: 0;
	padding-left: 1.2rem;
}

.prototype_container {
	display: flex;
	width: 60vw;
	height: 50vh;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.prototype_container.visible {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.test_container {
	display: flex;
	flex-direction: column;
	width: 60vw;
	height: 50vh;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.test_container.visible {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

#prototype_overview {
	width: 30vw;
	flex: 0 0 30vw;
}

#empathize_overview {
	width: 50vw;
}

#empathize_pic img {
	width: 90%;
	height: 80%;
	margin-left: 4vw;
	margin-top: 10vh;
}

.empathize_icon_container {
	display: flext;
}

.main_chart_container {
	display: flex;
	width: 100%;
	height: 100%;
	gap: 2vw;
	align-items: stretch;
}

.survey_results_container {
	flex-direction: column;
	justify-content: flex-start;
}

.survey_results_container h2 {
	margin: 0 0 1rem;
}

.chart_container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 48%;
	background-color: #FFFFFF;
	border-radius: 3px;
	padding: 1rem;
	box-sizing: border-box;
	box-shadow: 0px 4px 20px rgba(0,0,0,0.08);
}

.chart_container h4 {
	margin: 0 0 1.3rem;
	font-size: 1rem;
	text-align: center;
}

.chart_container img {
	width: 100%;
	height: auto;
	max-height: 32vh;
	object-fit: contain;
}

.define_container {
	display: flex;
	width: 60vw;
	height: 50vh;
	position: absolute;
	top: 0;
	left: 0;
	align-items: center;
}

#define_content {
	margin-top: 15vh;
	width: 50%;
	padding-right: 2vw;
}

#define_content h2 {
	margin-top: 0;
}

#define_content h4 {
	margin-bottom: -2vh;
}

#Taylor {
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#Taylor img {
	width: 90%;
	height: 90%;
	object-fit: contain;
	margin-top: 10vh;
}

.expandable_image {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.expandable_image:hover {
	opacity: 0.8;
}

.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	align-items: center;
	justify-content: center;
	overflow: auto;
}

.modal.show {
	display: flex;
}

.modal_content {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
}

.modal_close {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.2s ease;
}

.modal_close:hover {
	color: #bbb;
}

#ideate_container {
	display: flex;
	width: 70vw;
	height: 50vh;
}

#ideate_content {
	width: 30vw;
}

#ideate_content h2 {
	font-size: 2vw;
}

#ideate_content p {
	font-size: 1.2vw;
}

#ideatepic img {
	width: 80%;
	height: 80%;
	margin-left: 4vw;
	margin-top: 10vh;
	object-fit: contain;
}

#LMS_pic img{
	width: 90%;
	height: 60%;
	margin-left: 4vw;
	margin-top: 12vh;
}

.Storyline_Container {
	display: flex;
	align-items: flex-start;
	gap: 2vw;
}

.Storyline_Container > div {
	width: 34vw;
}

.Storyline_Container img {
	width: 22vw;
	height: auto;
	object-fit: contain;
	margin-top: 2vh;
}

#storyline_pics {
	margin-top: 0vh;
	display: flex;
	flex-direction: column;
	gap: 1.2vh;
	align-self: flex-start;
}

#storyline_pics img {
	display: block;
}

.partial_claim_container {
	align-items: flex-start;
}

.partial_claim_content {
	width: 100%;
	max-width: 56vw;
}

.partial_claim_content h2 {
	margin-top: 0;
	margin-bottom: 1rem;
}

.partial_claim_content video {
	width: 100%;
	height: auto;
	max-height: 42vh;
	border-radius: 3px;
	background-color: #000;
}

/*Bureau*/

.bureau_container {
	display: flex;
	margin: 10vh 5vw;
	gap: 4vw;
	box-sizing: border-box;
	width: 90vw;
}

.bureau_content {
	flex: 1;
	min-width: 0;
	border-right: solid 2px #3F5F69;
	padding-right: 3vw;
}

.bureau_pics {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2vh;
	min-width: 0;
}

.bureau_pics img {
	width: 90%;
	height: auto;
	border-radius: 3px;
	object-fit: contain;
	margin-top: 10vh;
}

/*KOE*/

/* ------------------------------
   COMMERCIAL CLEANING PROJECT
--------------------------------*/

#KOE_Container {
    display: flex;
    align-items: flex-start;
    gap: 4vw;
    margin: 15vh 15vw;
}

/* Text Column */
#KOE_Text {
    flex: 1;
    min-width: 0;
    max-width: 28rem;
}

#KOE_Text h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 2.4vw;
    line-height: 1.2;
    color: #1E1E1E;
}

#KOE_Text p {
    font-size: 1.2vw;
    line-height: 1.5;
    margin-top: 0;
    color: #333;
}

/* Video Column */
#KOE_Video {
    flex: 1;
    min-width: 0;
}

#KOE_Video video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 48rem;
    border-radius: 3px;
    background-color: #000;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.12);
}

@media (max-width: 900px) {
	#KOE_Container {
		flex-direction: column;
		margin: 10vh 8vw;
	}

	#KOE_Text {
		max-width: none;
	}
}