/* style.css */

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

1.  Global Styles & Variables
    - CSS Variables
    - Reset & Base Styles
    - Typography
    - Layout Containers
    - Utility Classes
2.  Header & Navigation
3.  Footer
4.  Hero Section
5.  General Content Sections
6.  Specific Section Styles
    - Services (#services) & Cards
    - Methodology (#methodology) & Timeline
    - Innovation (#innovation) & Accordion
    - Research (#research) & Custom Slider
    - Team (#team)
    - Events (#events)
    - Resources (#resources)
    - Contact (#contact) & Forms
7.  Page-Specific Styles
    - Success Page
    - Static Content Pages (Privacy, Terms)
8.  Responsive Design
-------------------------------------------------------------------*/

/* 1. Global Styles & Variables
-------------------------------------------------------------------*/
:root {
    /* Fonts */
    --font-heading: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Primary Colors (Eco-Corporate Gradient Tones) */
    --primary-color-dark: #004d40;  /* Dark Teal/Green */
    --primary-color-main: #00796b;  /* Main Teal/Green */
    --primary-color-light: #48a999; /* Light Teal/Green */
    --primary-gradient: linear-gradient(135deg, var(--primary-color-main), var(--primary-color-light));

    /* Accent Colors */
    --accent-color-1: #ffb300; /* Amber - for attention, energy */
    --accent-color-1-dark: #e69500;
    --accent-color-2: #039be5; /* Light Blue - for trust, tech */
    --accent-color-2-dark: #0277bd;

    /* Neutral Colors */
    --text-color-light: #f8f9fa;
    --text-color-dark: #212529;
    --text-color-medium: #495057;
    --text-color-headings: #1a1a1a;
    --background-color-light: #ffffff;
    --background-color-alt: #eef3f2; /* Very light green/grey tint */
    --border-color: #dee2e6;
    --input-border-color: #ced4da;
    --input-focus-border-color: var(--primary-color-main);

    /* Shadows & Effects */
    --box-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.075);
    --box-shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --text-shadow-subtle: 1px 1px 2px rgba(0,0,0,0.2);

    /* Spacing */
    --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 */

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-smooth: 0.3s ease-in-out;

    /* Header Height */
    --header-height: 70px;
    --header-height-mobile: 60px;

    /* Border Radius */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-color-dark);
    background-color: var(--background-color-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height); /* For fixed header */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color-headings);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.8rem; text-shadow: var(--text-shadow-subtle); }
h2 { font-size: 2.2rem; } /* Section titles */
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }

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

a {
    color: var(--primary-color-main);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover, a:focus {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

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

/* Layout Containers */
.main-container {
    overflow-x: hidden; /* Prevents horizontal scroll from animations */
}

.page-width-container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* Global Button Styles */
.cta-button,
button[type="submit"] {
    display: inline-block;
    font-family: var(--font-heading);
    background: var(--accent-color-1);
    color: var(--text-color-dark); /* Dark text on yellow for contrast */
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-smooth), color var(--transition-smooth), transform var(--transition-fast), box-shadow var(--transition-smooth);
    box-shadow: var(--box-shadow-soft);
}

.cta-button:hover,
button[type="submit"]:hover {
    background: var(--accent-color-1-dark);
    color: var(--text-color-dark);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-medium);
    text-decoration: none;
}
.cta-button:active,
button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: var(--box-shadow-soft);
}

/* Utility Classes for animations */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.fade-in {
    opacity: 1;
}
.animate-on-scroll.fade-in-up {
    transform: translateY(30px);
}
.animate-on-scroll.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll.fade-in-left {
    transform: translateX(-30px);
}
.animate-on-scroll.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.animate-on-scroll.fade-in-right {
    transform: translateX(30px);
}
.animate-on-scroll.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Delay classes for staggered animations */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }


/* Basic Column system (like Bulma) */
.columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem; /* For consistent spacing when nested or stacked */
}
.columns:not(:last-child) {
     margin-bottom: calc(1.5rem - 0.75rem); /* Default Bulma bottom margin for columns */
}
.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem; /* Gutter */
}
.column.is-one-third { flex: none; width: 33.3333%; }
.column.is-two-thirds { flex: none; width: 66.6666%; }


/* 2. Header & Navigation
-------------------------------------------------------------------*/
.site-header {
    background-color: var(--background-color-light);
    box-shadow: var(--box-shadow-soft);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
}

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

.logo img {
    max-height: calc(var(--header-height) - 30px); /* Adjust based on logo aspect ratio */
    width: auto;
}

.main-navigation ul {
    list-style: none;
    display: flex;
}

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

.main-navigation a {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--text-color-medium);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation li.active a { /* Add .active class via JS for current page/section */
    color: var(--primary-color-main);
    background-color: rgba(0, 121, 107, 0.05); /* Light primary bg */
    text-decoration: none;
}

.nav-toggle { /* Burger menu button */
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
}

.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color-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(--text-color-dark);
    left: 0;
    transition: transform var(--transition-smooth);
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { bottom: -8px; }

/* Active burger states (add via JS) */
.nav-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* Middle bar disappears */
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}


/* 3. Footer
-------------------------------------------------------------------*/
.site-footer {
    background: var(--primary-gradient);
    color: var(--text-color-light);
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-xxl);
}

.site-footer h4 {
    color: var(--text-color-light);
    margin-bottom: var(--spacing-md);
    font-size: 1.3rem;
}

.site-footer p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--spacing-sm);
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-column {
    flex: 1 1 200px; /* Flex basis for responsiveness */
    min-width: 200px;
}
.footer-column.about-us img {
    margin-top: var(--spacing-sm);
    max-width: 150px;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: var(--spacing-xs);
}

.footer-column a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.footer-column a:hover,
.footer-column a:focus {
    color: var(--text-color-light);
    padding-left: 5px; /* Subtle hover effect */
    text-decoration: underline;
}

.copyright {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.copyright p {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
    color: rgba(255, 255, 255, 0.7);
}


/* 4. Hero Section
-------------------------------------------------------------------*/
.hero-section {
    position: relative;
    color: var(--text-color-light); /* Default text color for hero */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Height: use padding or min-height, but avoid fixed large min-heights */
    padding: var(--spacing-xxl) 0; /* Natural height based on padding */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Parallax effect can be enhanced with JS if background-attachment: fixed is not enough */
.parallax-background {
    background-attachment: fixed; /* Simple parallax */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-content h1 {
    font-size: 3.5rem; /* Larger for Hero */
    color: #FFFFFF; /* Explicitly white as requested */
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* Stronger shadow for readability */
}

.hero-content p {
    font-size: 1.25rem;
    color: #FFFFFF; /* Explicitly white */
    margin-bottom: var(--spacing-lg);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.hero-section .cta-button {
    background-color: var(--accent-color-1);
    color: var(--text-color-dark);
    font-size: 1.1rem;
    padding: var(--spacing-md) var(--spacing-xl);
}
.hero-section .cta-button:hover {
    background-color: var(--accent-color-1-dark);
}

/* 5. General Content Sections
-------------------------------------------------------------------*/
.content-section {
    padding: var(--spacing-xxl) 0;
}

.content-section.alt-background {
    background-color: var(--background-color-alt);
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg); /* Increased margin for title */
    color: var(--text-color-headings);
    font-weight: 700; /* Ensured */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.section-intro {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl); /* Increased margin for intro */
    font-size: 1.1rem;
    color: var(--text-color-medium);
}

/* 6. Specific Section Styles
-------------------------------------------------------------------*/

/* Services (#services) & Cards */
.services-grid, .team-grid, .resources-grid {
    gap: var(--spacing-lg) 0; /* Vertical gap, horizontal handled by column padding */
}

.card {
    background-color: var(--background-color-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-medium);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content like image and icon */
    text-align: center; /* Center text within card-content */
    height: 100%; /* Make cards in a row same height */
    overflow: hidden; /* Ensure content fits rounded borders */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card .card-image { /* Container for the image */
    width: 100%;
    height: 200px; /* Fixed height for consistent card image sizes */
    overflow: hidden; /* Clip image to this container */
    margin-bottom: var(--spacing-sm); /* Space between image and content */
    display: flex; /* Helps with centering the image if it's smaller */
    justify-content: center;
    align-items: center;
}

.card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    transition: transform var(--transition-smooth);
}
.card:hover .card-image img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.card .card-content {
    padding: var(--spacing-md);
    flex-grow: 1; /* Allows content to expand and push footer elements down if card is flex */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items in content too */
}
.card .card-content h3 {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    font-size: 1.4rem;
    color: var(--primary-color-dark);
}
.card .card-content p {
    font-size: 0.95rem;
    flex-grow: 1; /* Allows paragraph to take up space if needed */
}

.animated-icon {
    font-size: 2.5rem; /* Larger icons for services */
    color: var(--primary-color-main);
    margin-bottom: var(--spacing-sm);
    display: inline-block; /* To allow margin */
    transition: transform var(--transition-fast);
}
.card:hover .animated-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Methodology (#methodology) & Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md) 0;
}
.timeline::before { /* The central line */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--primary-color-light);
    border-radius: 2px;
}

.timeline-item {
    padding: var(--spacing-sm) var(--spacing-lg);
    position: relative;
    width: 50%;
    margin-bottom: var(--spacing-lg);
}
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: calc(var(--spacing-lg) + 30px); /* Space for icon */
    text-align: right;
}
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: calc(var(--spacing-lg) + 30px); /* Space for icon */
    text-align: left;
}
.timeline-item:nth-child(odd)::before, /* Connector to central line */
.timeline-item:nth-child(even)::before {
    content: '';
    position: absolute;
    top: calc(var(--spacing-md) + 5px); /* Align with icon center */
    width: 20px; /* Length of horizontal connector */
    height: 3px;
    background-color: var(--primary-color-light);
}
.timeline-item:nth-child(odd)::before {
    right: calc(var(--spacing-lg) + 10px - 20px); /* (padding-right - icon_space) - width */
}
.timeline-item:nth-child(even)::before {
    left: calc(var(--spacing-lg) + 10px - 20px);
}

.timeline-icon {
    position: absolute;
    top: var(--spacing-md);
    width: 40px;
    height: 40px;
    background-color: var(--primary-color-main);
    color: var(--text-color-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
    border: 3px solid var(--background-color-alt); /* Match section bg */
}
.timeline-item:nth-child(odd) .timeline-icon {
    right: -20px; /* Half of icon width to sit on the line */
    transform: translateX(0%); /* Adjusted from 50% for odd items */
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -20px; /* Half of icon width */
    transform: translateX(0%); /* Adjusted */
}
.timeline-icon .animated-icon {
    font-size: 1.2rem;
    color: var(--text-color-light);
    margin: 0;
}

.timeline-content {
    background: var(--background-color-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-soft);
}
.timeline-content h3 {
    margin-top: 0;
    color: var(--primary-color-dark);
}

/* Innovation (#innovation) & Accordion */
.accordion-container {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background-color: var(--background-color-light);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-soft);
    overflow: hidden;
}
.accordion-header {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: var(--spacing-md);
    text-align: left;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-color-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
}
.accordion-header:hover {
    background-color: rgba(0, 121, 107, 0.05); /* Light primary bg */
}
.accordion-icon {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color-main);
    transition: transform var(--transition-smooth);
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
}
.accordion-content {
    padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-smooth) ease-in-out, padding var(--transition-smooth) ease-in-out;
}
.accordion-content p {
    margin-bottom: 0;
}

/* Research (#research) & Custom Slider */
.custom-slider-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.custom-slider {
    display: flex; /* This will be handled by JS for actual sliding */
    overflow: hidden; /* Clips the non-visible slides */
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-medium);
}
.slide {
    min-width: 100%; /* Each slide takes full width of slider */
    position: relative; /* For caption positioning */
    transition: transform 0.5s ease-in-out; /* JS will manipulate transform: translateX */
}
.slide img {
    width: 100%;
    height: 400px; /* Fixed height for slider images */
    object-fit: cover;
    display: block;
}
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    color: var(--text-color-light);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
}
.slide-caption h3 {
    color: var(--text-color-light);
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    font-size: 1.5rem;
}
.slide-caption p {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    margin-bottom: 0;
}
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 2rem;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    z-index: 10;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}
.slider-prev:hover, .slider-next:hover {
    background-color: rgba(0,0,0,0.8);
}
.slider-prev { left: var(--spacing-sm); }
.slider-next { right: var(--spacing-sm); }

/* Team (#team) */
.team-member-card .card-image img {
    border-radius: 50%; /* Circular team member photos */
    width: 150px; /* Fixed size */
    height: 150px;
    object-fit: cover;
    margin: 0 auto; /* Center image if card-image container is wider */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.team-member-card .card-image {
    height: auto; /* Override general card image height for team */
    margin-bottom: var(--spacing-md);
}
.team-member-card h3 {
    font-size: 1.5rem;
}
.team-member-card .role {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--primary-color-main);
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

/* Events (#events) */
.events-list {
    max-width: 800px;
    margin: 0 auto;
}
.event-item {
    display: flex;
    background-color: var(--background-color-light);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-soft);
    overflow: hidden;
    transition: box-shadow var(--transition-smooth);
}
.event-item:hover {
    box-shadow: var(--box-shadow-medium);
}
.event-date {
    background-color: var(--primary-color-main);
    color: var(--text-color-light);
    padding: var(--spacing-md);
    text-align: center;
    min-width: 100px; /* Ensure date section has some width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.event-date .month {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
}
.event-date .day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    display: block;
}
.event-details {
    padding: var(--spacing-md);
    flex-grow: 1;
}
.event-details h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    color: var(--text-color-dark);
}
.event-meta {
    font-size: 0.9rem;
    color: var(--text-color-medium);
    margin-bottom: var(--spacing-sm);
    display: block;
}
.link-arrow {
    font-weight: 700;
    color: var(--accent-color-2);
    text-decoration: none;
    display: inline-block;
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.link-arrow::after {
    content: ' →'; /* Arrow */
    transition: margin-left var(--transition-fast);
}
.link-arrow:hover {
    color: var(--accent-color-2-dark);
    transform: translateX(3px);
    text-decoration: underline;
}
.link-arrow:hover::after {
    margin-left: 3px;
}

/* Resources (#resources) */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}
.resource-card {
    background-color: var(--background-color-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-soft);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    display: flex;
    flex-direction: column;
}
.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-medium);
}
.resource-card h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    font-size: 1.25rem;
}
.resource-card h4 a {
    color: var(--primary-color-dark);
}
.resource-card h4 a:hover {
    color: var(--primary-color-main);
}
.resource-card p {
    font-size: 0.9rem;
    flex-grow: 1;
}

/* Contact (#contact) & Forms */
.contact-section.parallax-background {
    position: relative;
    padding: var(--spacing-xxl) 0;
    color: var(--text-color-light); /* Assuming dark bg image */
    background-size: cover;
    background-position: center;
}
.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 50, 42, 0.85), rgba(0, 20, 15, 0.95)); /* Darker eco gradient */
    z-index: 1;
}
.contact-content-wrapper { /* To ensure content is above overlay */
    position: relative;
    z-index: 2;
}
.contact-content-wrapper .section-title,
.contact-content-wrapper .section-intro,
.contact-content-wrapper h3,
.contact-content-wrapper p,
.contact-content-wrapper strong {
    color: var(--text-color-light); /* Make text light on dark background */
}
.contact-content-wrapper .section-intro {
    color: rgba(255,255,255,0.85);
}
.contact-content-wrapper a {
    color: var(--accent-color-1);
}
.contact-content-wrapper a:hover {
    color: var(--accent-color-1-dark);
}

.contact-form-container {
    margin-top: var(--spacing-lg);
}

.contact-form .form-group {
    margin-bottom: var(--spacing-md);
}
.contact-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-color-light); /* Labels also light */
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: rgba(255,255,255,0.9);
    color: var(--text-color-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--input-focus-border-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 121, 107, 0.25); /* Primary color focus ring */
}
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}
.contact-form .cta-button {
    width: auto;
    min-width: 150px;
}

.contact-info h3, .contact-info h4 {
    color: var(--text-color-light); /* Override general h3/h4 if needed */
}
.contact-info h4 { margin-top: var(--spacing-lg); }
.contact-info p { margin-bottom: var(--spacing-sm); }
.contact-info .animated-icon { font-size: 1.2rem; margin-bottom: 0; color: var(--accent-color-1); }

.map-placeholder {
    margin-top: var(--spacing-lg);
    background-color: rgba(0,0,0,0.2);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    text-align: center;
}
.map-placeholder img {
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-sm);
}

/* 7. Page-Specific Styles
-------------------------------------------------------------------*/

/* Success Page (success.html) */
.success-page-container, /* Assuming you have a container like this */
.page-content.centered-full-page-content { /* Generic class for centered content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - 250px); /* Adjust 250px based on actual footer height */
    text-align: center;
    padding: var(--spacing-xl);
}
.success-page-container h1,
.centered-full-page-content h1 {
    color: var(--primary-color-dark);
    font-size: 2.5rem;
}
.success-page-container p,
.centered-full-page-content p {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
}
.success-page-container .icon-success { /* Example for a success icon */
    font-size: 4rem;
    color: var(--primary-color-main);
    margin-bottom: var(--spacing-md);
}

/* Static Content Pages (privacy.html, terms.html, about.html, etc.) */
.static-page-content {
    padding-top: var(--spacing-xl); /* Already has body padding-top for header */
    padding-bottom: var(--spacing-xl);
}
.static-page-content h1 {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}
.static-page-content h2 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color-dark);
}
.static-page-content ul, .static-page-content ol {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

/* 8. Responsive Design
-------------------------------------------------------------------*/
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    .hero-content h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }

    .column.is-one-third,
    .column.is-two-thirds {
        width: 50%; /* Two columns on tablets */
    }
    .services-grid .column.is-one-third,
    .team-grid .column.is-one-third {
         /* Stack cards on smaller tablets if desired, or keep 2-col */
    }
}

@media (max-width: 768px) {
    body {
        padding-top: var(--header-height-mobile);
    }
    .site-header {
        height: var(--header-height-mobile);
    }
    .logo img {
        max-height: calc(var(--header-height-mobile) - 20px);
    }

    .main-navigation ul {
        display: none; /* Hide on mobile by default */
        position: absolute;
        top: var(--header-height-mobile);
        left: 0;
        width: 100%;
        background-color: var(--background-color-light);
        flex-direction: column;
        padding: var(--spacing-sm) 0;
        box-shadow: var(--box-shadow-medium);
        border-top: 1px solid var(--border-color);
    }
    .main-navigation ul.is-active { /* JS toggles this class */
        display: flex;
    }
    .main-navigation li {
        margin-left: 0;
        width: 100%;
    }
    .main-navigation a {
        display: block;
        padding: var(--spacing-md);
        text-align: center;
        border-bottom: 1px solid var(--border-color);
    }
    .main-navigation li:last-child a {
        border-bottom: none;
    }

    .nav-toggle {
        display: block; /* Show burger */
    }

    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.1rem; }
    .hero-section { padding: var(--spacing-xl) 0; }

    .content-section { padding: var(--spacing-xl) 0; }
    .section-title { margin-bottom: var(--spacing-md); }
    .section-intro { margin-bottom: var(--spacing-lg); font-size: 1rem; }

    .columns {
        margin-left: 0;
        margin-right: 0;
    }
    .column {
        width: 100% !important; /* Stack columns on mobile */
        padding-left: var(--spacing-sm); /* Adjust padding for full width */
        padding-right: var(--spacing-sm);
    }

    .timeline::before { left: 20px; transform: translateX(0); } /* Move timeline to the left */
    .timeline-item, .timeline-item:nth-child(even) {
        width: 100%;
        left: 0;
        padding-left: calc(20px + var(--spacing-lg) + 20px); /* (line_pos + icon_space + padding) */
        padding-right: var(--spacing-sm);
        text-align: left;
    }
    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        left: calc(20px + 10px - 20px); /* (line_pos + half_icon_width - connector_length) */
    }
    .timeline-item .timeline-icon,
    .timeline-item:nth-child(even) .timeline-icon {
        left: 0; /* Align icon with the line (which is at 20px) */
    }

    .footer-columns {
        flex-direction: column;
        text-align: center;
    }
    .footer-column {
        margin-bottom: var(--spacing-lg);
    }
    .footer-column.about-us img {
        margin: var(--spacing-sm) auto;
    }

    .contact-form-container .columns {
        flex-direction: column;
    }
    .contact-form-container .column {
        width: 100% !important;
    }
    .contact-info {
        margin-top: var(--spacing-lg);
        text-align: center;
    }
    .map-placeholder {
        margin-left: auto;
        margin-right: auto;
    }

}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    .hero-content h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    .cta-button, button[type="submit"] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }
    .hero-section .cta-button {
        font-size: 1rem;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}