/* Variables based on Corporate Tetradic Scheme */
:root {
    --color-primary: #0A4C85; /* Deep Blue - Main brand color */
    --color-primary-rgb: 10, 76, 133; /* RGB values for shadows */
    --color-secondary: #FFC300; /* Gold/Yellow - Accent/Highlight */
    --color-accent-1: #00A86B; /* Emerald Green - Success/Positive */
    --color-accent-2: #E03B8A; /* Pink/Magenta - Secondary Accent/Highlight */

    --color-dark: #222222; /* Very Dark Gray/Black */
    --color-text-dark: #333333; /* Dark Gray - Primary text */
    --color-text-light: #FFFFFF; /* White - Text on dark backgrounds */
    --color-gray: #555555; /* Medium Gray - Secondary text */
    --color-light-gray: #cccccc; /* Light Gray - Borders, subtle elements */
    --color-background-light: #f4f4f4; /* Very Light Gray - Section background */
    --color-background-darker-light: #e9ecef; /* Slightly darker light background */
    --color-background-dark: #333333; /* Dark Gray - Footer background */
    --color-footer-text: #bbb; /* Lighter text for footer */
    --color-footer-heading: #eee; /* Lighter headings for footer */

    --border-radius-base: 8px;
    --spacing-unit: 20px;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}


/* Basic Reset and Typography */
body {
    font-family: 'Work Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-dark);
    margin-top: 1em;
    margin-bottom: 0.5em;
    text-align: center; /* Centered section headers */
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.5em; }

p { margin-bottom: 1.2em; }

a {
    color: var(--color-primary); /* Primary color for links */
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: color-mix(in srgb, var(--color-primary) 80%, black 20%); /* Darker hover using color-mix */
    text-decoration: underline;
}

/* Responsive Typography */
@media (max-width: 1024px) {
    h1 { font-size: 2.4em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.6em; }
    h4 { font-size: 1.4em; }
}

@media (max-width: 768px) {
     h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.4em; }
    h4 { font-size: 1.3em; }
    body { font-size: 0.95em; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.3em; }
    h4 { font-size: 1.2em; }
     body { font-size: 0.9em; }
}


/* Container for content width control */
.container {
    max-width: 1200px; /* Max width */
    margin: 0 auto;
    padding: 0 var(--spacing-unit); /* Padding on sides */
}

/* Responsive Columns using Flexbox */
.columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--spacing-unit) / 2); /* Adjust for gutter */
    margin-right: calc(-1 * var(--spacing-unit) / 2); /* Adjust for gutter */
}

.column {
    padding: 0 calc(var(--spacing-unit) / 2); /* Gutter */
    box-sizing: border-box;
    flex-basis: 100%; /* Default to full width on small screens */
    flex-grow: 0;
    flex-shrink: 0;
}

/* Mobile default is full-width already */
/* Tablet Breakpoint (769px) */
@media (min-width: 769px) {
    .column.is-half-tablet { flex-basis: 50%; }
    .column.is-two-thirds-tablet { flex-basis: 66.666%; }
    .column.is-one-third-tablet { flex-basis: 33.333%; }
    .column.is-one-quarter-tablet { flex-basis: 25%; }
}

/* Desktop Breakpoint (1024px) */
@media (min-width: 1024px) {
    .column.is-half-desktop { flex-basis: 50%; }
    .column.is-two-thirds-desktop { flex-basis: 66.666%; }
    .column.is-one-third-desktop { flex-basis: 33.333%; }
    .column.is-one-quarter-desktop { flex-basis: 25%; }
    .column.is-one-fifth-desktop { flex-basis: 20%; }
}

.columns.is-centered {
    justify-content: center;
}


/* Sections */
.section {
    padding: calc(var(--spacing-unit) * 3) 0; /* Large spacing between sections */
    margin-bottom: 0;
    position: relative; /* Needed for parallax effects */
    overflow: hidden; /* Hide parallax overflow */
}

.section-title {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px; /* Wider underline */
    height: 4px; /* Thicker underline */
    background-color: var(--color-secondary); /* Accent color for underline */
    margin: 10px auto 0;
    border-radius: 2px;
}

.section-description {
    font-size: 1.15em;
    color: var(--color-gray);
    line-height: 1.7;
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* More space below description */
}

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

/* Header */
.site-header {
    background-color: var(--color-text-light); /* White background */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: calc(var(--spacing-unit) / 2) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

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

.site-logo img {
    display: block;
    width: 150px;
    height: auto;
    max-height: 40px;
}

.site-nav {
    flex-grow: 1; /* Allow nav to take space */
    display: flex;
    justify-content: flex-end; /* Align links to the right */
}

.site-nav .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-unit);
    align-items: center;
}

.site-nav .nav-link {
    color: var(--color-text-dark);
    font-weight: 500;
    padding: 5px 0;
    position: relative;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px; /* Thicker underline */
    background-color: var(--color-secondary); /* Accent color */
    position: absolute;
    bottom: -8px; /* More space */
    left: 0;
    transition: width 0.3s ease;
}

.site-nav .nav-link::after {
     content: '';
    display: block;
    width: 0%;
    height: 3px; /* Thicker underline */
    background-color: var(--color-secondary); /* Accent color */
    position: absolute;
    bottom: -8px; /* More space */
    left: 0;
    transition: width 0.3s ease;
}


/* Burger Menu (Mobile) */
.burger-menu {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above content and potentially overlay */
    position: relative; /* Needed for transition */
    width: 30px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-dark);
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 2px;
}

.burger-menu.open span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.burger-menu.open span:nth-child(2) {
    opacity: 0;
}

.burger-menu.open span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

.mobile-nav-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* Dark semi-transparent overlay */
    z-index: 999; /* Below burger, above main content */
    transition: opacity 0.3s ease;
    opacity: 0;
}
.mobile-nav-overlay.visible {
    display: block; /* Show overlay */
    opacity: 1;
}

.mobile-site-nav {
    position: fixed;
    top: 60px; /* Below header */
    left: 0;
    width: 80%; /* Mobile menu width */
    max-width: 300px;
    background-color: var(--color-background-light); /* Menu background */
    height: calc(100% - 60px); /* Full height below header */
    overflow-y: auto;
    padding: var(--spacing-unit);
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    transform: translateX(-100%); /* Start off-screen */
    transition: transform 0.3s ease;
}

.mobile-site-nav.open {
    transform: translateX(0); /* Slide in */
}

.mobile-site-nav .mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-site-nav .mobile-nav-list li {
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}

.mobile-site-nav .nav-link {
    color: var(--color-text-dark);
    font-size: 1.2em;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-light-gray); /* Separator */
    transition: color 0.3s ease;
}

.mobile-site-nav .nav-link:hover {
    color: var(--color-primary); /* Hover color */
}

/* Prevent body scroll when mobile menu or modal is open */
body.no-scroll {
    overflow: hidden;
}


@media (max-width: 768px) { /* Mobile breakpoint */
    .site-nav {
        display: none; /* Hide desktop nav */
    }
    .burger-menu {
        display: flex; /* Show burger */
    }
     .header-container {
        padding: 0 var(--spacing-unit); /* Add padding to header container on mobile */
    }
}


/* Hero Section */
.hero-section {
    background-size: cover;
    background-position: center;
    color: var(--color-text-light); /* White text for Hero */
    text-align: center;
    padding: calc(var(--spacing-unit) * 5) var(--spacing-unit); /* Increased padding */
    position: relative;
    overflow: hidden;
    min-height: 60vh; /* Ensure hero is tall enough */
    display: flex; /* Use flex to center content easily */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* Background image and gradient overlay are set inline in HTML */
    background-repeat: no-repeat;
}

/* Parallax Placeholder for Hero */
/* Add this class to the section for simple CSS parallax */
.parallax-background {
    background-attachment: fixed;
}


.hero-content {
    position: relative; /* Ensure content is above background */
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    color: var(--color-text-light); /* White text */
    font-size: 3.8em;
    margin-bottom: var(--spacing-unit);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Add shadow for readability */
}

.hero-subtitle {
    color: var(--color-text-light); /* White text */
    font-size: 1.6em;
    margin-bottom: calc(var(--spacing-unit) * 2);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /* Add shadow for readability */
}

/* GLOBAL Button Styles */
.btn, button, input[type='submit'] {
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--border-radius-base);
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none; /* Ensure buttons aren't underlined */
    font-family: 'Poppins', sans-serif; /* Use header font for buttons */
}

.cta-button {
    background-color: var(--color-secondary); /* Accent color */
    color: var(--color-dark); /* Dark text on bright accent */
    font-weight: 600;
}

.cta-button:hover {
    background-color: color-mix(in srgb, var(--color-secondary) 80%, black 20%); /* Darker hover */
    text-decoration: none;
    transform: translateY(-3px); /* Lift slightly */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.cta-button:active {
     transform: translateY(0);
     box-shadow: none;
}

.submit-button {
    background-color: var(--color-accent-1); /* Green success color */
    color: var(--color-text-light); /* White text on green */
    font-weight: 600;
}

.submit-button:hover {
    background-color: color-mix(in srgb, var(--color-accent-1) 80%, black 20%); /* Darker hover */
     transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.submit-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.secondary-button {
    background-color: var(--color-gray); /* Gray/Neutral secondary */
    color: var(--color-text-light);
    margin-left: var(--spacing-unit);
}

.secondary-button:hover {
    background-color: color-mix(in srgb, var(--color-gray) 80%, black 20%); /* Darker hover */
}

@media (max-width: 768px) {
     .cta-button, .submit-button, .secondary-button {
        padding: 10px 25px;
        font-size: 1em;
     }
     .secondary-button { margin-left: 0; margin-top: var(--spacing-unit) ; } /* Stack buttons on mobile */
}


/* Section Specific Styles */
.services-section {
    background-color: var(--color-background-light);
}

.mission-section {
     background-color: var(--color-background-darker-light);
}

.vision-section {
     background-color: var(--color-background-light);
}

.innovation-section {
     background-color: var(--color-background-darker-light);
}

.community-section {
     background-color: var(--color-background-light);
}

.clientele-section {
     background-color: var(--color-background-darker-light);
}

.resources-section {
     background-color: var(--color-background-light);
}

.events-section {
     background-color: var(--color-background-darker-light);
}

.careers-section {
     background-color: var(--color-background-light);
}

.contact-section {
     background-color: var(--color-background-darker-light);
}

.page-title-section {
    background-color: var(--color-primary); /* Primary color for page titles */
    color: var(--color-text-light);
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit) calc(var(--spacing-unit) * 2); /* Adjust padding */
    text-align: center;
}

.page-title-section .section-title {
    color: var(--color-text-light); /* White */
    margin-bottom: 0;
}

.page-title-section .section-title::after {
    background-color: var(--color-text-light); /* White underline */
}

/* Content Pages Styles (About, Privacy, Terms, Success) */
.about-history-section, .about-values-section, .about-team-section,
.privacy-content-section, .terms-content-section, .contact-page-section {
    background-color: var(--color-text-light); /* Default white background */
    padding-top: calc(var(--spacing-unit) * 2);
    padding-bottom: calc(var(--spacing-unit) * 2);
}

/* Add top padding specifically for Privacy and Terms to clear fixed header */
.privacy-content-section, .terms-content-section {
    padding-top: calc(60px + var(--spacing-unit) * 2); /* Header height + section padding */
}


.content h3 {
    text-align: left; /* Subtitles within content blocks align left */
    margin-top: 1.8em; /* More space above subtitles */
    margin-bottom: 0.8em;
    color: var(--color-dark);
    font-size: 1.5em; /* Slightly smaller subtitle */
}

.content p {
    margin-bottom: 1.5em; /* More space between paragraphs */
    color: var(--color-gray);
    font-size: 1.05em;
}

/* Image Containers & Styling */
.image-container {
    /* Add styling here if images need specific wrapping/alignment */
    text-align: center; /* Center inline/inline-block elements */
    margin-bottom: var(--spacing-unit); /* Space below image container */
}

.image-container img {
    display: block; /* Make image a block element for margin auto centering */
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: var(--border-radius-base);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    margin: 0 auto; /* Center the image */
    object-fit: cover; /* Ensure image covers container if fixed height is applied later */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-container img:hover {
    transform: scale(1.03); /* Subtle zoom effect on hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}


/* Card Structure (Services, Clientele, Team) */
.card {
    background-color: var(--color-text-light);
    border-radius: var(--border-radius-base);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards have equal height in a row */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center; /* Center card content */
}

.card:hover {
     transform: translateY(-8px); /* Lift more on hover */
     box-shadow: 0 12px 20px rgba(0,0,0,0.2);
}

.card-image {
    position: relative;
    overflow: hidden;
    /* Fixed height for consistency in grids/columns */
    height: 200px; /* Example fixed height - adjust as needed */
    width: 100%; /* Ensure container takes full width */
}

.card-image img {
    display: block;
    width: 100%;
    height: 100%; /* Make image fill the fixed height container */
    border-radius: 0; /* No border radius on card images */
    box-shadow: none;
    margin: 0; /* Remove margin auto here, object-fit is key */
    object-fit: cover; /* Crop image to cover the container */
    transition: transform 0.5s ease; /* Smooth zoom */
}

.card:hover .card-image img {
    transform: scale(1.1); /* Zoom effect */
}


.card-content {
    padding: var(--spacing-unit);
    flex-grow: 1; /* Allow content area to expand */
    display: flex; /* Use flex to align content */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

.card-content h3, .card-content h4 {
    margin-top: 0;
    text-align: center; /* Ensure headers in cards are centered */
    margin-bottom: 0.5em;
}
.card-content p {
     text-align: center; /* Ensure paragraphs in cards are centered */
     margin-bottom: 1em;
}


/* Specific card adjustments */
.client-card .card-image {
    height: 100px; /* Smaller height for logos */
    padding: calc(var(--spacing-unit) / 2); /* Add padding */
    background-color: var(--color-text-light); /* White background for logos */
}
.client-card .card-image img {
     object-fit: contain; /* Contain logos */
     height: 100%; /* Fill container height */
     width: 100%;
}

.team-card .card-image {
     height: 280px; /* Fixed height for team photos */
}

.team-card .card-content .team-title {
    font-weight: 500;
    color: var(--color-gray); /* Muted color for title */
    margin-bottom: 0.5em;
}
.team-card .card-content .team-bio-short {
    font-size: 0.95em;
    color: color-mix(in srgb, var(--color-gray) 80%, black 20%);
}


/* Accordion */
.accordion-container {
    margin-top: calc(var(--spacing-unit) * 2);
}

.accordion-item {
    border: 1px solid var(--color-light-gray);
    margin-bottom: calc(var(--spacing-unit) / 2);
    border-radius: calc(var(--border-radius-base) / 2);
    overflow: hidden;
}

.accordion-header {
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    padding: var(--spacing-unit);
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 1.1em;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header:hover {
    background-color: color-mix(in srgb, var(--color-background-light) 90%, black 10%);
    color: var(--color-dark);
}

.accordion-content {
    padding: 0 var(--spacing-unit);
    background-color: var(--color-text-light); /* White content background */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.accordion-content p {
    padding: 15px 0; /* Restore padding via JS on open */
    margin: 0; /* Remove default p margin inside */
    color: var(--color-gray);
}

/* Styles for active accordion handled by JS adding 'active' class */
.accordion-item.active .accordion-content {
    /* max-height set by JS based on scrollHeight */
    /* padding set by JS */
}


.icon-arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-text-dark);
    border-bottom: 2px solid var(--color-text-dark);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Prevent arrow from shrinking */
}

/* Rotation handled by JS adding 'active' class */
.accordion-item.active .icon-arrow {
    transform: rotate(-135deg); /* Arrow up */
}

/* Animated Icons Placeholder */
.animated-icons-placeholder {
    display: flex;
    justify-content: center;
    gap: var(--spacing-unit);
    margin-top: var(--spacing-unit);
}
.animated-icons-placeholder img {
    width: 50px;
    height: 50px;
    opacity: 0; /* Initially hidden for JS animation */
    /* Add animation via JS (Motion One or Lottie) */
}


/* External Links Section */
.external-links-list {
    margin-top: calc(var(--spacing-unit) * 2);
}

.link-item {
    background-color: var(--color-background-light);
    border: 1px solid var(--color-light-gray);
    border-radius: calc(var(--border-radius-base) / 2);
    padding: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.link-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.link-item h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    text-align: left;
    font-size: 1.3em;
}

.link-item h3 a {
    color: var(--color-dark); /* Darker link color for title */
    font-weight: 600;
}

.link-item h3 a:hover {
    color: var(--color-primary); /* Primary color on hover */
    text-decoration: underline;
}

.link-item p {
    margin-bottom: 0;
    font-size: 1em;
    color: var(--color-gray);
}

/* Events Section Placeholder */
.events-list-placeholder {
    margin-top: var(--spacing-unit);
}
.events-list-placeholder h4 {
    text-align: left;
    margin-bottom: calc(var(--spacing-unit)/2);
    color: var(--color-dark);
}
.events-list-placeholder ul {
    list-style: disc;
    margin-left: var(--spacing-unit);
    color: var(--color-gray);
}
.events-list-placeholder li {
    margin-bottom: calc(var(--spacing-unit)/4);
}


/* Contact Form */
.contact-form {
    background-color: var(--color-text-light); /* White background */
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius-base);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-top: calc(var(--spacing-unit) * 1.5);
}

.contact-form .form-title {
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    text-align: center;
    color: var(--color-dark);
}

.form-group {
    margin-bottom: var(--spacing-unit);
}

.form-group label {
    display: block;
    margin-bottom: calc(var(--spacing-unit) / 4); /* Less space above input */
    font-weight: 500;
    color: var(--color-text-dark);
    font-size: 0.95em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="subject"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-unit)/2;
    border: 1px solid var(--color-light-gray);
    border-radius: calc(var(--border-radius-base) / 4);
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Work Sans', sans-serif; /* Use body font for inputs */
    color: var(--color-text-dark);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="subject"]:focus,
.form-group textarea:focus {
    border-color: var(--color-primary); /* Primary color on focus */
    outline: none;
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3); /* Use RGB var for shadow opacity */
}

.form-group textarea {
    resize: vertical;
}

/* Contact Info on Contact Page */
.contact-info {
    margin-top: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 1.1em;
    color: var(--color-gray);
}

.contact-info p {
    margin-bottom: calc(var(--spacing-unit) / 2);
}

.contact-info a {
     color: var(--color-primary); /* Link color */
}


/* Footer */
.site-footer {
    background-color: var(--color-background-dark); /* Dark background */
    color: var(--color-footer-text); /* Lighter text */
    padding: calc(var(--spacing-unit) * 2) 0 var(--spacing-unit);
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-unit); /* Gap between columns */
}

.footer-column {
    flex: 1 1 200px; /* Flex-grow, flex-shrink, basis */
    margin-bottom: var(--spacing-unit);
}

.footer-column h4 {
    color: var(--color-footer-heading); /* Lighter header in footer */
    margin-bottom: var(--spacing-unit);
    font-size: 1.2em;
    text-align: left; /* Footer titles align left */
}

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

.footer-column ul li {
    margin-bottom: calc(var(--spacing-unit) / 4);
}

.footer-column ul li a {
    color: var(--color-footer-text); /* Lighter link color */
    font-size: 0.95em;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--color-text-light); /* White hover */
    text-decoration: underline;
}

.footer-bottom {
    margin-top: calc(var(--spacing-unit) * 1.5);
    padding-top: var(--spacing-unit);
    border-top: 1px solid color-mix(in srgb, var(--color-background-dark) 80%, white 20%); /* Lighter border */
    text-align: center;
    font-size: 0.9em;
    color: var(--color-footer-text); /* Copyright text color */
}

/* Social Links (Text Only) */
.footer-column .social-links {
     display: flex;
     gap: var(--spacing-unit)/2; /* Space between text links */
     flex-wrap: wrap;
}
.footer-column .social-links li {
    margin-bottom: 0; /* Remove extra margin */
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-column {
        flex-basis: 100%; /* Stack columns */
        text-align: center;
        margin-bottom: calc(var(--spacing-unit) * 1.5);
    }
    .footer-column h4 {
        text-align: center;
    }
    .footer-column ul {
        align-items: center; /* Center list items */
        display: flex;
        flex-direction: column;
    }
    .footer-column .social-links {
         justify-content: center; /* Center social links */
         gap: var(--spacing-unit); /* More space on mobile */
    }
}


/* Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    backdrop-filter: blur(5px); /* Optional: Glassmorphism blur */
}

.modal-content {
    background-color: var(--color-background-light);
    margin: 10% auto; /* 10% from the top and centered */
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--color-light-gray);
    width: 90%; /* Wider on small screens */
    max-width: 500px;
    border-radius: var(--border-radius-base);
    position: relative;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    animation-name: animatetop;
    animation-duration: 0.4s;
    color: var(--color-text-dark); /* Ensure readable text inside modal */
}

/* Modal Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 10%; opacity: 1}
}

.close-button {
    color: var(--color-gray);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--color-dark);
    text-decoration: none;
}

.modal-content h3 {
    margin-top: 0;
    text-align: center;
    margin-bottom: var(--spacing-unit);
    color: var(--color-dark);
}

.modal-content ul {
    list-style: disc;
    margin-left: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    color: var(--color-gray);
}

.modal-content li {
    margin-bottom: calc(var(--spacing-unit) / 4);
}


/* Success Page Styles */
.success-message-section {
    min-height: calc(100vh - 60px - 200px); /* Approx. viewport height - header height - footer height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
}

.success-message-section .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

.success-message-section .section-content {
    /* Flex column already centers the inner items horizontally */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.success-message-section .section-description {
    max-width: 600px;
    margin: var(--spacing-unit) auto;
    font-size: 1.2em;
}
.success-message-section .image-container {
     margin: var(--spacing-unit) auto;
}
.success-message-section .image-container img {
     width: 100px; /* Fixed size for checkmark */
     height: 100px;
     box-shadow: none; /* No shadow for simple icon */
     border-radius: 50%; /* Optional: round icon */
     object-fit: contain;
}
.success-message-section .cta-buttons {
    margin-top: var(--spacing-unit);
    display: flex;
    gap: var(--spacing-unit); /* Space between buttons */
    flex-wrap: wrap;
    justify-content: center;
}

/* Read More Link Style */
/* Assuming a specific link like <a href="#" class="read-more">Read More</a> */
.read-more {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--color-primary);
    transition: color 0.3s ease, transform 0.3s ease;
}

.read-more::after {
    content: ' \2192'; /* Right arrow */
    transition: transform 0.3s ease;
    display: inline-block;
    margin-left: 5px;
}

.read-more:hover {
    color: var(--color-secondary); /* Change color on hover */
    text-decoration: none;
}

.read-more:hover::after {
     transform: translateX(5px); /* Move arrow on hover */
}


/* Placeholder for Scroll Animations (using Intersection Observer + JS) */
/* Elements with this class will be initially hidden and animated into view */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px); /* Start slightly below */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0); /* Slide up */
}

/* Using Animate.css - no need for .animate-on-scroll if using their classes directly
   but you might hide them initially if they should only animate on scroll
   or use JS to add the Animate.css class when visible.
   The HTML already has animate__animated classes, so they animate on load.
   To make them animate on scroll, remove the animation class from HTML initially,
   and add it via JS Intersection Observer.
*/


/* Placeholder for Glassmorphism Effect */
/* Example on a specific card or element */
.glassmorphic-card {
    background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Apply blur */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Shadow */
    color: var(--color-text-light); /* Ensure text is readable on blurred background */
    /* May need specific text shadows for readability */
}


/* Utility Classes */
.margin-top-large { margin-top: calc(var(--spacing-unit) * 2); }
.margin-bottom-large { margin-bottom: calc(var(--spacing-unit) * 2); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent-1 { color: var(--color-accent-1); }
.text-accent-2 { color: var(--color-accent-2); }


/* Additional considerations */

/* Ensure images within content don't overflow */
.content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
    border-radius: calc(var(--border-radius-base) / 2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* General button reset */
button, input[type="submit"] {
    font-family: inherit; /* Use inherited font */
    font-size: inherit; /* Use inherited font size */
}