/* Contact & About Page Styles */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Contact page main element positioning - account for header */
body.contact-page,
body:has(.contact-hero-section) {
	padding-top: 0 !important;
}

.contact-page .site-main,
body:has(.contact-hero-section) .site-main {
	padding: 0 !important;
	margin-top: var(--header-height-large, 130px) !important; /* Account for fixed header */
}

/* Remove any pseudo-elements that might add spacing */
.contact-page .site-main::before,
body:has(.contact-hero-section) .site-main::before {
	display: none !important;
	content: none !important;
}

/* Ensure contact hero starts right after header */
.contact-page .contact-hero-section,
body:has(.contact-hero-section) .contact-hero-section {
	margin-top: 0;
	padding-top: 0;
}

/* CONTACT PAGE - Split Hero Section */
.contact-hero-section {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}

.contact-hero-split {
	display: flex;
	width: 100%;
	min-height: 80vh;
	margin: 0;
	padding: 0;
}

.contact-hero-left {
	width: 50%;
	flex-shrink: 0;
	background-color: var(--color-primary, #93c47d);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: clamp(2rem, 5vw, 5rem);
	position: sticky;
	top: 0;
	z-index: 10000;
}

.contact-hero-left-inner {
	max-width: 600px;
	width: 100%;
}

.contact-hero-title {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 700;
	color: var(--color-bg-dark, #000000);
	line-height: 1.2;
	letter-spacing: -0.03em;
	margin: 0 0 1.5rem 0;
}

.contact-hero-subtitle {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	color: var(--color-bg-dark, #000000);
	line-height: 1.6;
	margin: 0;
	font-weight: 400;
	opacity: 0.95;
}

.contact-hero-right {
	width: 50%;
	flex-shrink: 0;
	background-color: var(--color-white, #ffffff);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 5vw, 5rem);
}

.contact-hero-right-inner {
	width: 100%;
	max-width: 600px;
}

.contact-main { 
	padding: 80px 0; 
	background: #fafafa; 
}
.contact-wrapper { 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: 60px; 
	align-items: start; 
}

.contact-form-section h2, 
.contact-info-section h2 { 
	font-size: clamp(1.5rem, 3vw, 2rem); 
	font-weight: 600; 
	margin-bottom: 30px; 
	color: #1a1a1a; 
}
.contact-form { 
	background: white; 
	padding: 40px; 
	border-radius: 12px; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.07); 
}
.form-row { 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: 20px; 
	margin-bottom: 20px; 
}
.form-group { 
	margin-bottom: 25px; 
}
.form-group label { 
	display: block; 
	margin-bottom: 8px; 
	font-weight: 500; 
	color: #1a1a1a; 
	font-size: 0.95rem; 
}
.form-group .required { 
	color: #e53e3e; 
}
.form-group input, 
.form-group textarea { 
	width: 100%; 
	padding: 12px 16px; 
	border: 2px solid #e2e8f0; 
	border-radius: 8px; 
	font-size: 1rem; 
	font-family: inherit; 
	transition: all 0.3s ease; 
	box-sizing: border-box; 
	background: white;
	color: #1a1a1a;
}
.form-group input:focus, 
.form-group textarea:focus { 
	outline: none; 
	border-color: var(--color-primary, #93c47d); 
	box-shadow: 0 0 0 3px rgba(147, 196, 125, 0.1); 
}
.form-group textarea { 
	resize: vertical; 
	min-height: 120px; 
}
.btn-submit { 
	background-color: var(--color-primary, #93c47d); 
	color: var(--color-bg-dark, #000000); 
	padding: 14px 32px; 
	border: none; 
	border-radius: 8px; 
	font-size: 1rem; 
	font-weight: 600; 
	cursor: pointer; 
	transition: all 0.3s ease; 
	box-shadow: 0 4px 6px rgba(147, 196, 125, 0.3); 
}
.btn-submit:hover { 
	transform: translateY(-2px); 
	box-shadow: 0 6px 12px rgba(147, 196, 125, 0.4); 
	background-color: var(--color-primary-dark, #7ab366);
}
.form-message { 
	margin-top: 20px; 
	padding: 12px 16px; 
	border-radius: 8px; 
	display: none; 
}
.form-message.success { 
	background: #c6f6d5; 
	color: #22543d; 
	border: 1px solid #9ae6b4; 
	display: block; 
}
.form-message.error { 
	background: #fed7d7; 
	color: #742a2a; 
	border: 1px solid #fc8181; 
	display: block; 
}

.contact-info-section { 
	background: white; 
	padding: 40px; 
	border-radius: 12px; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.07); 
}
.contact-info-grid { 
	display: grid; 
	gap: 30px; 
}
.contact-info-item { 
	display: flex; 
	gap: 20px; 
	padding-bottom: 30px; 
	border-bottom: 1px solid #e2e8f0; 
}
.contact-info-item:last-child { 
	border-bottom: none; 
	padding-bottom: 0; 
}
.contact-icon { 
	flex-shrink: 0; 
	width: 50px; 
	height: 50px; 
	background-color: transparent; 
	border-radius: 12px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	color: var(--color-bg-dark, #000000); 
	font-size: 1.5rem;
}
.contact-details h3 { 
	font-size: 1.25rem; 
	font-weight: 600; 
	margin-bottom: 8px; 
	color: #1a1a1a; 
}
.contact-details p { 
	color: #666666; 
	line-height: 1.6; 
	margin: 0; 
}
.contact-details a { 
	color: var(--color-primary, #93c47d); 
	text-decoration: none; 
	transition: color 0.3s ease; 
}
.contact-details a:hover { 
	color: var(--color-primary-dark, #7ab366); 
	text-decoration: underline; 
}

.contact-map-section { 
	padding: 80px 0; 
	background: #fafafa; 
}
.contact-map-section h2 { 
	font-size: clamp(1.5rem, 3vw, 2rem); 
	font-weight: 600; 
	margin-bottom: 40px; 
	text-align: center; 
	color: #1a1a1a; 
}
.map-wrapper { 
	border-radius: 12px; 
	overflow: hidden; 
	box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
}
.contact-map iframe { 
	width: 100%; 
	height: 450px; 
	border: none; 
	display: block; 
}

/* ABOUT PAGE */
.about-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 100px 0; text-align: center; }
.about-hero .page-title { font-size: 4rem; font-weight: 700; margin-bottom: 20px; line-height: 1.2; }
.about-hero .page-subtitle { font-size: 1.5rem; opacity: 0.95; line-height: 1.6; }

.about-mission, .about-background, .about-values, .about-team { padding: 80px 0; }
.about-mission, .about-values, .about-cta { background: white; }
.about-background, .about-team { background: #f8f9fa; }

.mission-content, .cta-content { max-width: 900px; margin: 0 auto; text-align: center; }
.section-header { margin-bottom: 40px; }
.section-header h2 { font-size: 2.5rem; font-weight: 600; margin-bottom: 15px; color: #2d3748; }
.section-divider { width: 60px; height: 4px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 0 auto; border-radius: 2px; }
.section-description { font-size: 1.1rem; color: #4a5568; margin-top: 15px; }
.mission-text .lead { font-size: 1.5rem; font-weight: 500; color: #2d3748; margin-bottom: 25px; line-height: 1.6; }
.mission-text p { font-size: 1.1rem; color: #4a5568; line-height: 1.8; margin-bottom: 20px; }

.background-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.background-image, .member-image { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.image-placeholder { width: 100%; padding-bottom: 75%; position: relative; background: #e2e8f0; }
.image-placeholder svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.story-content p { font-size: 1.1rem; color: #4a5568; line-height: 1.8; margin-bottom: 20px; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.value-card { text-align: center; padding: 40px 30px; background: #f8f9fa; border-radius: 12px; transition: all 0.3s ease; }
.value-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); background: white; }
.value-icon { width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
.value-card h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 15px; color: #2d3748; }
.value-card p { color: #4a5568; line-height: 1.6; font-size: 1rem; }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-top: 60px; }
.team-member { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.07); transition: all 0.3s ease; }
.team-member:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.member-image { padding-bottom: 100%; }
.member-info { padding: 30px; }
.member-info h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; color: #2d3748; }
.member-role { color: #667eea; font-weight: 500; margin-bottom: 15px; font-size: 1rem; }
.member-bio { color: #4a5568; line-height: 1.6; margin-bottom: 20px; font-size: 0.95rem; }
.member-social { display: flex; gap: 15px; }
.member-social a { color: #4a5568; transition: color 0.3s ease; }
.member-social a:hover { color: #667eea; }

.about-cta { padding: 80px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; }
.cta-content h2 { font-size: 2.5rem; font-weight: 600; margin-bottom: 20px; }
.cta-content p { font-size: 1.25rem; margin-bottom: 35px; opacity: 0.95; line-height: 1.6; }
.btn-cta { display: inline-block; background: white; color: #667eea; padding: 16px 40px; border-radius: 8px; font-size: 1.1rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }

@media (max-width: 968px) {
  .contact-wrapper, .form-row { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .background-content { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .contact-hero-split {
    flex-direction: column;
    min-height: auto;
  }
  
  .contact-hero-left {
    width: 100%;
    min-height: 50vh;
    padding: clamp(1.5rem, 4vw, 2rem);
    position: relative;
  }
  
  .contact-hero-right {
    width: 100%;
    min-height: 50vh;
    padding: clamp(1.5rem, 4vw, 2rem);
  }
  
  .contact-hero-title { 
    font-size: clamp(2rem, 6vw, 2.5rem); 
  }
  
  .contact-hero-subtitle { 
    font-size: clamp(1rem, 3vw, 1.25rem); 
  }
  
  .contact-main { padding: 60px 0; }
  .contact-form-section, .contact-info-section { padding: 30px 20px; }
  .contact-map-section { padding: 60px 0; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}