/* CSS Variables - Retro & Eco-Minimalism with Analogous Colors */
:root {
    --primary-color: #558B2F; /* Earthy, slightly muted green - retro feel */
    --primary-color-darker: #33691E; /* Darker shade for hover/active */
    --secondary-color: #7CB342; /* Lighter, analogous green */
    --accent-color: #9CCC65; /* Even lighter green, for subtle accents */
    --cta-accent-color: #FFB300; /* Warm amber/mustard for CTAs, provides pop */
    
    --light-bg-color: #F1F8E9; /* Very light, slightly warm green tint */
    --neutral-bg-color: #FAFAFA; /* Off-white for general sections */
    --dark-bg-color: #263238; /* Dark, slightly desaturated blue-grey */
    
    --text-color-dark: #212121; /* Dark grey for body text on light backgrounds */
    --text-color-light: #FFFFFF; /* White for text on dark backgrounds */
    --text-color-headings-dark: #1B5E20; /* Darker green for headings on light bg */
    --text-color-muted: #757575; /* Muted grey for less important text */

    --font-family-headings: 'Oswald', sans-serif;
    --font-family-body: 'Nunito', sans-serif;

    --border-radius-main: 8px;
    --border-radius-slight: 4px;
    --box-shadow-main: 0 4px 12px rgba(0, 0, 0, 0.1);
    --box-shadow-light: 0 2px 6px rgba(0, 0, 0, 0.07);
    --box-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.15);
    
    --transition-main: all 0.3s ease-in-out;
    --header-height: 70px; /* Approximate height of the fixed header */
}

/* Global Styles */
*,
*::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-family-body);
    color: var(--text-color-dark);
    background-color: var(--neutral-bg-color);
    line-height: 1.7;
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* For pages like privacy and terms */
body.page-layout {
    padding-top: var(--header-height);
}
.page-content-container {
    padding: 2rem 1rem; /* Add padding for content on static pages */
}
@media screen and (min-width: 769px) {
    .page-content-container {
        padding: 3rem 2rem;
    }
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--text-color-headings-dark);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--text-color-headings-dark);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

p {
    margin-bottom: 1rem;
    color: var(--text-color-dark);
}

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

a:hover {
    color: var(--primary-color-darker);
    text-decoration: underline;
}

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

/* Utility Classes */
.Oswald-font { font-family: var(--font-family-headings); }
.Nunito-font { font-family: var(--font-family-body); }
.has-text-white { color: var(--text-color-light) !important; }
.has-text-primary { color: var(--primary-color) !important; }

/* Bulma Overrides & Customizations */
.container {
    max-width: 1140px; /* Standard container width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.section {
    padding: 4rem 1.5rem; /* Adjust padding for sections */
}
.section.has-background-light {
    background-color: var(--light-bg-color);
}


/* Header & Navbar */
.header .navbar {
    background-color: rgba(255, 255, 255, 0.95); /* Slight transparency */
    box-shadow: var(--box-shadow-light);
    min-height: var(--header-height);
}
.header .navbar.is-fixed-top {
    height: var(--header-height);
}
.header .navbar-item, .header .navbar-link {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--text-color-dark);
    transition: var(--transition-main);
}
.header .navbar-item:hover, .header .navbar-link:hover {
    background-color: var(--light-bg-color);
    color: var(--primary-color);
}
.header .navbar-item img {
    max-height: 2.5rem; /* Logo size */
}
.header .navbar-burger {
    color: var(--text-color-dark);
    height: var(--header-height);
    width: var(--header-height);
}
.header .navbar-burger:hover {
    background-color: var(--light-bg-color);
}
.header .navbar-menu {
    background-color: rgba(255, 255, 255, 0.98);
}
@media screen and (max-width: 1023px) {
    .header .navbar-menu {
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        padding: 0.5rem 0;
    }
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-body);
    font-weight: 700;
    border-radius: var(--border-radius-slight);
    padding: 0.75em 1.5em;
    transition: var(--transition-main);
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 1rem;
    line-height: 1.5;
}

.button.is-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-primary:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    color: var(--text-color-light);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-light);
}
.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.button.is-primary.is-outlined:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-light {
    background-color: var(--light-bg-color);
    border-color: var(--light-bg-color);
    color: var(--text-color-dark);
}
.button.is-light:hover {
    background-color: #e0e0e0; /* Slightly darker light */
    border-color: #e0e0e0;
    color: var(--text-color-dark);
}
.button.is-info { /* For webinar subscribe or similar */
    background-color: var(--cta-accent-color);
    border-color: var(--cta-accent-color);
    color: var(--text-color-dark); /* Or white if contrast is better */
}
.button.is-info:hover {
    background-color: #FFC107; /* Darker shade of cta-accent */
    border-color: #FFC107;
}
.button.is-large {
    font-size: 1.25rem;
    padding: 1em 2em;
}
.button.is-fullwidth {
    display: block;
    width: 100%;
}

/* Hero Section */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* min-height set by Bulma 'is-large' or 'is-fullheight', ensure no extra min-height */
    /* Linear gradient is applied inline in HTML for dynamic image path */
}
#hero .hero-body {
    padding: 6rem 1.5rem; /* Ensure enough padding */
    display: flex;
    align-items: center;
    justify-content: center;
}
#hero .title {
    color: var(--text-color-light);
    font-size: 3.5rem; /* Larger for hero */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
#hero .subtitle {
    color: var(--text-color-light);
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
#hero p {
    color: var(--text-color-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Card Styles (Services, Team, External Resources) */
.card {
    background-color: var(--text-color-light);
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-main);
    transition: var(--transition-main);
    height: 100%; /* Make cards in a row equal height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures content respects border-radius */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}
.card .card-image { /* Bulma's card-image */
    position: relative;
}
.card .image-container { /* Custom container for better control */
    height: 200px; /* Fixed height for images in cards */
    overflow: hidden;
    display: flex; /* For centering if image is smaller, though object-fit handles it */
    align-items: center;
    justify-content: center;
}
.card .card-image img, .card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block;
}
.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to take up space and push button to bottom */
    display: flex;
    flex-direction: column;
}
.card .card-content .title {
    margin-bottom: 0.75rem;
    color: var(--text-color-headings-dark);
}
.card .card-content .subtitle {
    color: var(--text-color-muted);
    margin-bottom: 1rem;
}
.card .card-content .content {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}
.card .card-content .button {
    margin-top: auto; /* Pushes button to the bottom of card-content */
}

/* Team Section specific card image */
#team .card .image-container {
    height: 250px; /* Or specific aspect ratio if needed for portraits */
}
#team .card .card-content.has-text-centered {
    text-align: center;
}


/* Vision, History, Research Sections (two-column layout) */
#vision .column, #history .column, #research .column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#vision .content, #history .content, #research .content {
    font-size: 1.1rem;
}
#vision img, #history img, #research img {
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-light);
}

/* Statistics Section */
#statistics .title.is-1 {
    font-size: 3.5rem;
    margin-bottom: 0.25rem;
    color: var(--primary-color);
}
#statistics .subtitle.is-5 {
    color: var(--text-color-muted);
    font-weight: 400;
}
.progress-indicator-container {
    margin-bottom: 1.5rem;
}
.progress-indicator-container p {
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.progress-bar-background {
    background-color: #e0e0e0;
    border-radius: var(--border-radius-slight);
    height: 25px;
    overflow: hidden;
    width: 100%;
}
.progress-bar {
    background-color: var(--secondary-color);
    height: 100%;
    color: var(--text-color-light);
    text-align: center;
    font-weight: 700;
    line-height: 25px;
    border-radius: var(--border-radius-slight);
    transition: width 1s ease-in-out;
    font-size: 0.9rem;
}

/* Webinars Section */
#webinars .box {
    background-color: var(--text-color-light);
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-main);
    padding: 2rem;
}
#webinars .image-container img {
    border-radius: var(--border-radius-main); /* if icon should be rounded */
}

/* External Resources Section */
#external-resources .card .title a {
    color: var(--text-color-headings-dark);
}
#external-resources .card .title a:hover {
    color: var(--primary-color);
}
#external-resources .card .content {
    font-size: 0.9rem;
    color: var(--text-color-muted);
}

/* Contact Section */
#contact .label {
    font-weight: 700;
    color: var(--text-color-dark);
}
#contact .input, #contact .textarea, #contact .select select {
    border-radius: var(--border-radius-slight);
    border: 1px solid #dbdbdb;
    box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
    transition: var(--transition-main);
    padding: 0.75em 1em;
}
#contact .input:focus, #contact .textarea:focus, #contact .select select:focus,
#contact .input:active, #contact .textarea:active, #contact .select select:active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(var(--rgb-primary-color), 0.25); /* Needs --rgb-primary-color var */
}
/* Placeholder for --rgb-primary-color assuming #558B2F -> 85, 139, 47 */
:root { --rgb-primary-color: 85, 139, 47; }

#contact .select::after { /* Arrow for select */
    border-color: var(--primary-color);
}

/* Footer */
.footer {
    background-color: var(--dark-bg-color);
    color: var(--text-color-light);
    padding: 3rem 1.5rem 2rem;
}
.footer .title {
    color: var(--text-color-light);
}
.footer a {
    color: var(--accent-color); /* Light green for links on dark footer */
    font-weight: 500;
}
.footer a:hover {
    color: var(--text-color-light);
    text-decoration: underline;
}
.footer hr {
    background-color: #4a4a4a;
    height: 1px;
    margin: 1.5rem 0;
}
.footer .content p {
    color: #cccccc; /* Lighter grey for footer text */
    font-size: 0.9rem;
}
.footer .column h4 { /* Footer section titles */
    margin-bottom: 1rem;
}
.footer .column p {
    margin-bottom: 0.5rem;
}


/* Success Page Specific Styles */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height)); /* Full height minus header */
    text-align: center;
    padding: 2rem;
    background-color: var(--light-bg-color);
}
.success-page-container .icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.success-page-container h1 {
    color: var(--text-color-headings-dark);
    margin-bottom: 1rem;
}
.success-page-container p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 600px;
}

/* ScrollReveal Animations - Basic Setup (JS handles the triggering) */
.reveal-fade-in, .reveal-card, .reveal-text-block, .reveal-image-block, .reveal-stat-item, .reveal-progress, .reveal-form {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-fade-in { transform: translateY(20px); }
.reveal-card { transform: scale(0.95); }
/* Delays can be added with JS or more specific CSS if needed */
.reveal-fade-in-delay-1 { transition-delay: 0.2s !important; }
.reveal-fade-in-delay-2 { transition-delay: 0.4s !important; }
.reveal-fade-in-delay-3 { transition-delay: 0.6s !important; }


/* Responsiveness */
@media screen and (max-width: 1023px) {
    .columns.is-vcentered .column.is-half:first-child {
        order: 2; /* Image below text on mobile for vision/history/research if image is first in HTML */
    }
     #history .column.is-half:first-child { /* If image is first in HTML for history */
        order: 1; /* Keep image on top if that's the design */
    }
    #history .column.is-half:last-child {
        order: 2;
    }

     /* Ensure columns stack properly */
    .columns .column.is-two-thirds, .columns .column.is-one-third, .columns .column.is-half {
        width: 100% !important; /* Override Bulma's tablet behavior if needed for stacking */
        margin-bottom: 1.5rem;
    }
    .columns.is-multiline .column {
        margin-bottom: 1.5rem; /* Add bottom margin for stacked cards */
    }
    .columns.is-multiline .column:last-child {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    #hero .title { font-size: 2.5rem; }
    #hero .subtitle { font-size: 1.2rem; }
    .section { padding: 3rem 1rem; }
    
    .footer .columns {
        text-align: left; /* Align footer columns content to left on mobile */
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
}


/* Cookie Popup (basic styling from HTML, can be enhanced) */
#cookie-popup {
    font-family: var(--font-family-body); /* Ensure it uses the correct font */
}
#cookie-popup a {
    color: var(--accent-color) !important; /* Ensure link color is visible and matches style */
}
#cookie-popup #accept-cookie {
    font-family: var(--font-family-body); /* Ensure button font */
    background-color: var(--accent-color) !important;
    color: var(--text-color-dark) !important;
}
#cookie-popup #accept-cookie:hover {
    background-color: var(--secondary-color) !important;
}

/* Fix for Bulma navbar burger color */
.navbar-burger span {
    background-color: var(--text-color-dark);
}

*{
    opacity: 1 !important;
}