/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. :root Variables
2. Global Styles & Typography
3. Utility Classes
4. Neumorphic Base Styles
5. Header & Navigation
6. Hero Section
7. Button Styles (Global)
8. Card Styles (Global Pattern)
9. Section Specific Styles
    9.1. About Us Section
    9.2. Services Section (incl. Accordion, Stats, Progress)
    9.3. Awards Section
    9.4. Partners Section
    9.5. Portfolio Section
    9.6. External Resources Section
    9.7. Contact Section (incl. Forms)
10. Footer
11. Animation & Scroll Effects
12. Specific Page Styles (Success, Privacy, Terms)
13. Responsive Design
-------------------------------------------------------------------*/

/* 1. :root Variables */
:root {
  --font-primary: 'Oswald', sans-serif;
  --font-secondary: 'Nunito', sans-serif;

  /* Complementary Color Scheme */
  --color-primary: #4A90E2;       /* Calm Blue */
  --color-secondary: #FF8C42;     /* Vibrant Orange */
  --color-accent: #50E3C2;         /* Fresh Teal/Mint */

  --color-background: #EBF0F5;
  --color-surface: #F5F8FA;        /* Slightly lighter surface for cards, or same as background */

  --color-text-dark: #222222;      /* Darker for strong contrast, for titles */
  --color-text-body: #333745;      /* Dark grey for primary body text */
  --color-text-medium: #5F677A;    /* Medium grey for secondary text */
  --color-text-light: #FFFFFF;

  /* Neumorphism Shadows */
  --shadow-color-light: rgba(255, 255, 255, 0.9);
  --shadow-color-dark: rgba(180, 190, 200, 0.7);

  --neumorphic-shadow-convex: 8px 8px 16px var(--shadow-color-dark), -8px -8px 16px var(--shadow-color-light);
  --neumorphic-shadow-concave: inset 8px 8px 16px var(--shadow-color-dark), inset -8px -8px 16px var(--shadow-color-light);
  --neumorphic-shadow-hover: 4px 4px 8px var(--shadow-color-dark), -4px -4px 8px var(--shadow-color-light);

  --border-radius-soft: 8px;
  --border-radius-medium: 15px;
  --border-radius-large: 25px;
  --border-radius-round: 50%;

  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-xxl: 4rem;    /* 64px */

  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  --header-height: 80px;
  --footer-height: auto;
}

/* 2. Global Styles & Typography */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base font size */
}

body {
  font-family: var(--font-secondary);
  background-color: var(--color-background);
  color: var(--color-text-body);
  line-height: 1.7;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-container {
  flex: 1 0 auto; /* Allows footer to stick to bottom */
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover, a:focus {
  color: var(--color-secondary);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-text-dark);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  line-height: 1.3;
  font-weight: 500;
}

h1 { font-size: 2.8rem; letter-spacing: 1px;} /* Oswald looks better with slight letter-spacing */
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }

p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-body);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3. Utility Classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.section-padding {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-dark); /* Ensure high contrast */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-subtitle {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-medium);
  font-size: 1.1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.text-center { text-align: center; }

/* 4. Neumorphic Base Styles */
.neumorphic-element {
  background-color: var(--color-background);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--neumorphic-shadow-convex);
  transition: box-shadow var(--transition-medium);
}

.neumorphic-element:hover {
  box-shadow: var(--neumorphic-shadow-hover);
}

.neumorphic-pressed,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
  background-color: var(--color-background);
  border-radius: var(--border-radius-soft);
  box-shadow: var(--neumorphic-shadow-concave);
  border: 1px solid transparent; /* To prevent layout shift on focus if border is added */
  padding: var(--spacing-sm);
  transition: box-shadow var(--transition-medium);
  color: var(--color-text-body);
  font-family: var(--font-secondary);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--neumorphic-shadow-concave), 0 0 0 2px var(--color-primary-light); /* Example focus ring */
}

.image-wrapper.neumorphic-image,
.map-placeholder.neumorphic-image {
  border-radius: var(--border-radius-medium);
  overflow: hidden; /* Ensure image conforms to border-radius */
  box-shadow: var(--neumorphic-shadow-convex);
}
.image-wrapper.neumorphic-image img,
.map-placeholder.neumorphic-image img {
   border-radius: var(--border-radius-medium); /* if image is direct child */
}


/* 5. Header & Navigation */
.site-header {
  background-color: var(--color-background);
  padding: var(--spacing-xs) 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  font-family: var(--font-primary);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.logo:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

.main-navigation .nav-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.main-navigation .nav-list li {
  margin-left: var(--spacing-md);
}

.main-navigation .nav-list a {
  font-family: var(--font-secondary);
  font-weight: 600;
  color: var(--color-text-body);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-soft);
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.main-navigation .nav-list a:hover,
.main-navigation .nav-list a:focus,
.main-navigation .nav-list a.active {
  color: var(--color-secondary);
  background-color: transparent; /* Neumorphic buttons don't usually have bg color on hover directly */
  box-shadow: var(--neumorphic-shadow-hover);
  text-decoration: none;
}

.menu-toggle {
  display: none; /* Hidden on desktop */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  z-index: 1001;
}

.hamburger-icon {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-text-dark);
  position: relative;
  transition: background-color var(--transition-fast);
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 3px;
  background-color: var(--color-text-dark);
  left: 0;
  transition: transform var(--transition-medium), top var(--transition-medium);
}

.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

/* Mobile menu open state */
.menu-toggle[aria-expanded="true"] .hamburger-icon {
  background-color: transparent; /* Middle bar disappears */
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: rotate(-45deg);
  top: 0;
}


/* 6. Hero Section */
.hero-section {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--header-height));
  padding-top: var(--header-height); /* Account for fixed header */
  position: relative; /* For overlay */
}

.hero-content {
  max-width: 800px;
  position: relative; /* Ensure content is above overlay if one is added via CSS */
  z-index: 2;
}

.hero-title {
  font-size: 3.5rem; /* Larger for hero */
  font-weight: 700;
  color: var(--color-text-light); /* Explicitly white */
  margin-bottom: var(--spacing-md);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Enhanced readability */
}

.hero-subtitle {
  font-size: 1.3rem;
  color: var(--color-text-light); /* Explicitly white */
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
}

/* 7. Button Styles (Global) */
.cta-button,
.submit-button,
.learn-more-button,
button,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-light);
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--neumorphic-shadow-convex); /* Start with a raised look if bg matches */
  transition: background-color var(--transition-medium), color var(--transition-medium), transform var(--transition-fast), box-shadow var(--transition-medium);
}

.cta-button:hover,
.submit-button:hover,
.learn-more-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
  transform: translateY(-2px);
  box-shadow: var(--neumorphic-shadow-hover);
  text-decoration: none;
}

.cta-button:active,
.submit-button:active,
.learn-more-button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(1px);
  box-shadow: var(--neumorphic-shadow-concave); /* Pressed effect */
  background-color: var(--color-primary); /* Or a slightly darker primary */
}

/* Specific button for learning more if it needs different styling */
.learn-more-button {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}
.learn-more-button:hover {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  box-shadow: var(--neumorphic-shadow-hover);
}


/* 8. Card Styles (Global Pattern) */
.card {
  background-color: var(--color-surface); /* Or var(--color-background) */
  border-radius: var(--border-radius-medium);
  box-shadow: var(--neumorphic-shadow-convex);
  padding: var(--spacing-md);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content like image and text block */
  text-align: center; /* Center text within card-content */
  overflow: hidden; /* Important for child elements with radius */
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--neumorphic-shadow-hover);
}

.card-image { /* Container for the image */
  width: 100%;
  height: 200px; /* Fixed height for consistent card appearance */
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-soft); /* Soft radius for image container inside card */
  display: flex; /* For centering the image if it's smaller */
  align-items: center;
  justify-content: center;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image covers the area, might crop */
  transition: transform var(--transition-slow);
}

.card:hover .card-image img {
  transform: scale(1.05); /* Slight zoom on card hover */
}

.card-content {
  width: 100%;
}

.card-content h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 1.5rem;
}
.card-content p {
  font-size: 0.95rem;
  color: var(--color-text-medium);
  margin-bottom: var(--spacing-sm); /* Default, can be overridden */
}

/* 9. Section Specific Styles */

/* 9.1. About Us Section */
.about-us-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.about-text p {
  margin-bottom: var(--spacing-md);
}
.about-image-container {
    display: flex;
    justify-content: center; /* Center the image wrapper */
}
.about-image-container .image-wrapper {
    max-width: 500px; /* Control image size */
    width: 100%;
}


/* 9.2. Services Section */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* Accordion */
.accordion {
  margin-top: var(--spacing-sm);
}
.accordion-header { /* Style as a button */
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  width: auto; /* Fit content */
  min-width: 120px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--border-radius-soft);
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--neumorphic-shadow-convex);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  margin: var(--spacing-sm) auto 0; /* Center if it's a block element */
  display: inline-block; /* Or block and margin auto for full width */
}
.accordion-header:hover {
  background-color: var(--color-secondary);
  box-shadow: var(--neumorphic-shadow-hover);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium), padding var(--transition-medium);
  padding: 0 var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--color-text-medium);
}
.accordion-content.open {
  max-height: 500px; /* Adjust as needed */
  padding: var(--spacing-sm) 0; /* Add padding when open */
}

/* Stats Widgets & Progress Indicators */
.stats-widgets-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}
.stat-widget {
  background-color: var(--color-surface);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--neumorphic-shadow-convex);
  text-align: center;
}
.stat-widget h4 {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}
.stat-widget p {
  font-size: 0.9rem;
  color: var(--color-text-medium);
  margin-bottom: 0;
}
.stat-number {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-xs);
}

.progress-indicator {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--spacing-sm);
  border-radius: var(--border-radius-round);
  background-color: var(--color-background); /* Neumorphic base */
  box-shadow: var(--neumorphic-shadow-concave); /* Inset look for the track */
}
.progress-ring {
  transform: rotate(-90deg); /* Start from top */
}
.progress-ring-circle-bg {
  stroke: var(--color-surface); /* Track color */
  stroke-width: 10;
}
.progress-ring-circle {
  stroke: var(--color-secondary); /* Progress color */
  stroke-linecap: round;
  stroke-width: 10;
  transition: stroke-dashoffset var(--transition-slow);
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* 9.3. Awards Section */
.awards-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}
.award-item {
  background-color: var(--color-surface);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--neumorphic-shadow-convex);
  text-align: center;
}
.award-item .image-wrapper {
  max-width: 200px; /* Control award image size */
  height: 150px;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--border-radius-soft); /* If image-wrapper itself is neumorphic */
}
.award-item .image-wrapper img {
  object-fit: contain; /* Awards might need to be fully visible */
  width: 100%;
  height: 100%;
}
.award-item h3 {
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}
.award-item p {
  font-size: 0.9rem;
  color: var(--color-text-medium);
}

/* 9.4. Partners Section */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
}
.partner-logo {
  padding: var(--spacing-sm);
  background-color: var(--color-surface); /* Or transparent */
  border-radius: var(--border-radius-soft);
  box-shadow: var(--neumorphic-shadow-convex);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 150px; /* Ensure some space for logo + text */
}
.partner-logo img {
  max-width: 120px;
  height: 60px; /* Adjust based on typical logo aspect ratio */
  object-fit: contain;
  margin-bottom: var(--spacing-xs);
  filter: grayscale(30%); /* Subtle effect, remove if full color preferred */
  transition: filter var(--transition-medium);
}
.partner-logo:hover img {
  filter: grayscale(0%);
}
.partner-logo p {
    font-size: 0.85rem;
    color: var(--color-text-medium);
    margin-bottom: 0;
}

/* 9.5. Portfolio Section */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}
.portfolio-item { /* Uses .card styles */
}

/* 9.6. External Resources Section */
.resources-list {
  display: grid;
  gap: var(--spacing-md);
}
.resource-item {
  background-color: var(--color-surface);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--neumorphic-shadow-convex);
  transition: box-shadow var(--transition-medium);
}
.resource-item:hover {
  box-shadow: var(--neumorphic-shadow-hover);
}
.resource-item h4 {
  margin-bottom: var(--spacing-xs);
}
.resource-item h4 a {
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 1.2rem;
  text-decoration: none;
}
.resource-item h4 a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}
.resource-item p {
  font-size: 0.9rem;
  color: var(--color-text-medium);
  margin-bottom: 0;
}

/* 9.7. Contact Section */
.contact-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  background-color: var(--color-surface); /* Optional: whole contact area on a surface */
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-large);
  box-shadow: var(--neumorphic-shadow-convex);
}
.contact-form-container, .contact-info-container {
  padding: var(--spacing-sm); /* Inner padding if needed */
}
.form-group {
  margin-bottom: var(--spacing-md);
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-dark);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  font-size: 1rem;
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-info-container h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}
.contact-info-container p {
  margin-bottom: var(--spacing-sm);
}
.contact-info-container p strong {
  color: var(--color-text-dark);
}
.map-placeholder {
    width: 100%;
    height: 300px; /* Or use aspect-ratio */
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}
.map-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 10. Footer */
.site-footer {
  background-color: var(--color-text-dark); /* Dark footer */
  color: var(--color-text-light);
  padding: var(--spacing-xl) 0 var(--spacing-sm);
  flex-shrink: 0; /* Prevents shrinking when content is short */
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.footer-column h4 {
  font-family: var(--font-primary);
  color: var(--color-secondary); /* Accent color for titles */
  font-size: 1.3rem;
  margin-bottom: var(--spacing-md);
}
.footer-column p {
  color: var(--color-background); /* Light grey text on dark bg */
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
}
.footer-nav-list, .social-media-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav-list li, .social-media-list li {
  margin-bottom: var(--spacing-xs);
}
.footer-nav-list a, .social-media-list a {
  color: var(--color-background);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer-nav-list a:hover, .social-media-list a:hover {
  color: var(--color-secondary);
  padding-left: 5px; /* Subtle hover effect */
  text-decoration: underline;
}
.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-text-medium); /* Subtle separator */
}
.footer-bottom p {
  font-size: 0.85rem;
  color: var(--color-text-medium);
  margin: 0;
}


/* 11. Animation & Scroll Effects */
.animate-on-scroll {
  /*opacity: 0;*/
  transform: translateY(30px);
  transition: opacity 0.6s var(--transition-medium), transform 0.6s var(--transition-medium);
}
.animate-on-scroll.is-visible { /* This class will be added by JavaScript */
  opacity: 1;
  transform: translateY(0);
}

/* 12. Specific Page Styles */
/* Success Page */
body.success-page { /* Add class="success-page" to body of success.html */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: var(--spacing-lg);
  background-color: var(--color-background); /* Consistent background */
}
.success-content {
    background-color: var(--color-surface);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-large);
    box-shadow: var(--neumorphic-shadow-convex);
    max-width: 600px;
}
.success-content h1 {
  color: var(--color-primary);
  font-size: 2.5rem;
}
.success-content p {
  font-size: 1.1rem;
  color: var(--color-text-body);
  margin-bottom: var(--spacing-lg);
}
.success-content .cta-button {
  margin-top: var(--spacing-md);
}

/* Privacy & Terms Pages */
/* Assuming a structure like: <body> <header> <main class="main-content-page"> ... </main> <footer> */
.main-content-page { /* Add this class to main element of privacy.html, terms.html */
  padding-top: calc(var(--header-height) + var(--spacing-lg)); /* Header height + extra space */
  padding-bottom: var(--spacing-lg);
  flex-grow: 1; /* Ensure it takes available space */
}
.main-content-page .container h1 {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}
.main-content-page .container h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}


/* 13. Responsive Design */
@media (max-width: 992px) {
  .hero-title { font-size: 2.8rem; }
  .hero-subtitle { font-size: 1.1rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

@media (max-width: 768px) {
  .container { width: 95%; }
  :root { --header-height: 70px; }

  .hero-title { font-size: 2.2rem; }
  .hero-subtitle { font-size: 1rem; }

  /* Mobile Navigation */
  .menu-toggle {
    display: block; /* Show burger on mobile */
  }
  .main-navigation .nav-list {
    display: none; /* Hide nav list by default */
    flex-direction: column;
    position: absolute;
    top: var(--header-height); /* Position below header */
    left: 0;
    width: 100%;
    background-color: var(--color-background);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    padding: var(--spacing-sm) 0;
  }
  .main-navigation .nav-list.open { /* Class added by JS to show menu */
    display: flex;
  }
  .main-navigation .nav-list li {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .main-navigation .nav-list a {
    display: block;
    padding: var(--spacing-md) var(--spacing-sm);
    border-bottom: 1px solid var(--shadow-color-dark); /* separator for mobile links */
  }
  .main-navigation .nav-list li:last-child a {
    border-bottom: none;
  }

  .about-us-content {
    grid-template-columns: 1fr; /* Stack on mobile */
    text-align: center;
  }
  .about-image-container {
      order: -1; /* Image on top on mobile if desired */
      margin-bottom: var(--spacing-md);
  }

  .contact-content {
    grid-template-columns: 1fr; /* Stack form and info */
  }
  .contact-info-container {
      margin-top: var(--spacing-lg);
  }

  .footer-container {
      grid-template-columns: 1fr; /* Stack footer columns */
      text-align: center;
  }
  .footer-column {
      margin-bottom: var(--spacing-md);
  }
}

@media (min-width: 769px) { /* Asymmetric balance for larger screens */
    .about-us-content {
        grid-template-columns: 2fr 1fr; /* Example: text takes more space */
        gap: var(--spacing-xl);
    }
    .about-us-content .about-text {
        text-align: left;
    }
     .about-us-content .about-image-container {
        order: 0; /* Reset order if changed for mobile */
    }

    .contact-content {
        grid-template-columns: 1.5fr 1fr; /* Form takes more space */
        align-items: start;
    }
}