/* style.css */
:root {
    /* Triad Color Scheme & Accents */
    --color-primary: #FF6B6B; /* Coral Red */
    --color-primary-darker: #e05252;
    --color-secondary-1: #6BCBFF; /* Adjusted Light Blue (was #6BFFB8 Mint Green) - for better harmony with coral and lavender */
    --color-secondary-1-darker: #52b0e0;
    --color-secondary-2: #976BFF; /* Adjusted Lavender (was #6B6BFF) - for better harmony */
    --color-secondary-2-darker: #7d52e0;
    --color-accent: #FFD93D; /* Bright Yellow */
    --color-accent-darker: #e6c330;

    /* Text Colors */
    --color-text-dark: #222222;       /* For headings, strong text */
    --color-text-body: #333333;       /* Main body text */
    --color-text-light: #F0F0F0;      /* For dark backgrounds, slightly off-white */
    --color-text-on-primary: #FFFFFF;
    --color-text-on-accent: #222222;  /* Dark text on yellow accent */
    --color-text-muted: #6c757d;

    /* Background Colors */
    --color-background-light: #FFFFFF;
    --color-background-alt: #F8F9FA;  /* Light grey for alternating sections */
    --color-background-dark: #20232A; /* Dark for footer/header */
    --color-background-hero-overlay: rgba(0, 0, 0, 0.55);
    --color-background-page-title-overlay: rgba(0, 0, 0, 0.45);

    /* Borders & Shadows */
    --color-border: #dee2e6;
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    --text-shadow-light: 1px 1px 3px rgba(0,0,0,0.5);
    --text-shadow-heavy: 2px 2px 5px rgba(0,0,0,0.7);

    /* Typography */
    --font-primary: 'Playfair Display', serif;
    --font-secondary: 'Source Sans Pro', sans-serif;

    /* Spacing & Sizing */
    --header-height: 75px;
    --section-padding-y: 80px;
    --container-max-width: 1200px;
    --grid-gap: 30px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

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

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

html {
    scroll-behavior: smooth;
    font-size: 100%; /* 16px base */
}

body {
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-body);
    background-color: var(--color-background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from AOS/animations */
}

.page-wrapper { /* Optional wrapper for complex layouts or full-page effects */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    line-height: 1.3;
    margin-bottom: 0.75em; /* Default bottom margin for headings */
}
h1 { font-size: 3em; }    /* Adjusted sizes */
h2 { font-size: 2.5em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.25em; }

p {
    margin-bottom: 1.25rem;
}

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

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

ul, ol {
    list-style-position: outside;
    padding-left: 20px;
    margin-bottom: 1rem;
}
li {
    margin-bottom: 0.5rem;
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.margin-auto { margin-left: auto; margin-right: auto; }
.d-block { display: block; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.w-100 { width: 100%; }

.highlight {
    color: var(--color-secondary-2);
    font-weight: bold;
}
.highlight-strong {
    color: var(--color-primary);
    font-weight: bold;
}

/* --- Container --- */
.content-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Section Styling --- */
.content-section {
    padding: var(--section-padding-y) 0;
}
.section-title {
    text-align: center;
    margin-bottom: calc(var(--section-padding-y) / 2);
    color: var(--color-text-dark);
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: var(--color-accent);
    margin: 15px auto 0;
    border-radius: 2px;
}
.alt-bg {
    background-color: var(--color-background-alt);
}
.dark-bg {
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
}
.dark-bg .section-title, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4 {
    color: var(--color-text-light);
}
.dark-bg p, .dark-bg li {
    color: #bdc3c7; /* Lighter shade for paragraph text on dark */
}
.dark-bg .section-title::after {
    background-color: var(--color-primary);
}


/* --- Global Button Styles --- */
.cta-button,
button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    font-family: var(--font-secondary);
    font-weight: bold;
    font-size: 1rem;
    padding: 0.75em 1.75em;
    border-radius: var(--border-radius-md);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-medium), color var(--transition-medium), transform var(--transition-fast), box-shadow var(--transition-medium);
    border: 2px solid transparent;
    position: relative; /* For microinteractions like ripple */
    overflow: hidden; /* For microinteractions */
}

.cta-button,
button[type="submit"], /* More specific for form submits */
input[type="submit"] {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
}
.cta-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
    color: var(--color-text-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-decoration: none;
}

.cta-button.secondary {
    background-color: var(--color-secondary-2);
    color: var(--color-text-on-primary);
    border-color: var(--color-secondary-2);
}
.cta-button.secondary:hover {
    background-color: var(--color-secondary-2-darker);
    border-color: var(--color-secondary-2-darker);
    color: var(--color-text-on-primary);
}

.cta-button.outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.cta-button.outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* Ripple effect for buttons */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Header --- */
.site-header {
    background-color: var(--color-background-dark);
    padding: 0; /* Let container handle padding */
    height: var(--header-height);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color var(--transition-medium);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.logo a {
    font-family: var(--font-primary);
    font-size: 1.8em;
    font-weight: bold;
    color: var(--color-accent) !important;
    text-decoration: none;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.main-navigation li {
    margin: 0 0 0 25px; /* Margin on left of items */
}
.main-navigation a {
    color: var(--color-text-light);
    font-weight: 600;
    padding: 10px 5px;
    position: relative;
    text-decoration: none;
    transition: color var(--transition-medium);
}
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-medium);
}
.main-navigation a:hover,
.main-navigation a.active { /* Assuming 'active' class is added by JS for current page */
    color: var(--color-accent);
    text-decoration: none;
}
.main-navigation a:hover::after,
.main-navigation a.active::after {
    width: 100%;
}
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 28px; /* Larger tap target */
    padding: 5px 10px;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
}

/* --- Hero Section --- */
.hero-section {
    color: var(--color-text-light); /* White text */
    padding: calc(var(--section-padding-y) * 1.5) 0;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Parallax: simple CSS version. JS can enhance. */
    /* background-attachment: fixed; */ /* Be cautious with mobile performance */
    min-height: calc(100vh - var(--header-height)); /* Example height, adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)); /* Example gradient */
    /* background-color: var(--color-background-hero-overlay); */
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}
.hero-title {
    font-size: clamp(2.5em, 5vw, 4em); /* Responsive font size */
    color: var(--color-text-light) !important; /* Ensure white text */
    text-shadow: var(--text-shadow-heavy);
    margin-bottom: 0.5em;
}
.hero-subtitle {
    font-size: clamp(1.1em, 2.5vw, 1.4em);
    color: var(--color-text-light) !important; /* Ensure white text */
    text-shadow: var(--text-shadow-light);
    margin-bottom: 1.5em;
    font-weight: 400;
    opacity: 0.9;
}
.hero-section .cta-button {
    padding: 0.8em 2em;
    font-size: 1.1em;
}


/* --- Card System --- */
.card {
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-lg); /* Softer, more modern radius */
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    display: flex;
    flex-direction: column;
    height: 100%; /* For consistent height in grids if parent uses align-items: stretch */
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-hover-shadow);
}
.card-image {
    width: 100%;
    position: relative; /* For potential overlays on image */
    /* Fixed height for image containers in cards, e.g., blog posts, features */
    /* This height can be overridden for specific card types */
    height: 220px; 
    overflow: hidden;
    background-color: #e9ecef; /* Placeholder bg while image loads */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for consistent image display */
    transition: transform 0.4s ease-out;
}
.card:hover .card-image img {
    transform: scale(1.05);
}
.card-content {
    padding: 25px;
    flex-grow: 1; /* Allows content to fill space */
    display: flex;
    flex-direction: column;
    text-align: left; /* Default, can be overridden */
}
/* For cards where content needs centering */
.card.text-center .card-content, 
.card-content.text-center {
    text-align: center;
}
.card-content h3 {
    font-size: 1.6em;
    margin-bottom: 10px;
    color: var(--color-primary);
}
.card-content p {
    font-size: 0.95em;
    color: var(--color-text-muted);
    margin-bottom: 15px;
    flex-grow: 1; /* Pushes actions to bottom if card-actions exists */
}
.card-actions {
    margin-top: auto; /* Pushes to the bottom of card-content */
    padding-top: 15px; /* Space above actions */
}
.read-more-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--color-secondary-2);
    font-weight: bold;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.read-more-link:hover {
    color: var(--color-secondary-2-darker);
    text-decoration: none;
}
.read-more-link::after { /* Arrow */
    content: ' \2192'; /* Right arrow */
    display: inline-block;
    transition: transform var(--transition-fast);
}
.read-more-link:hover::after {
    transform: translateX(4px);
}

/* Grid for cards */
.features-grid, .blog-grid, .team-grid, .external-links-grid, .customer-stories-grid, .press-gallery {
    display: grid;
    gap: var(--grid-gap);
}
/* Default to 3 columns, adjust as needed */
.features-grid, .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* --- Specific Card Type Adjustments --- */

/* Feature Cards (can inherit most from .card) */
.feature-card .card-content h3 {
    color: var(--color-secondary-1);
}

/* Testimonial / Story Cards */
.story-card, .customer-testimonial {
    text-align: center; /* Center content for these */
}
.story-card .card-image, .customer-testimonial .card-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 20px; /* Center avatar */
    border: 4px solid var(--color-accent);
}
.story-card .card-image img, .customer-testimonial .card-image img {
    border-radius: 50%;
}
.story-card h4, .customer-testimonial h4 { /* Name of person */
    font-size: 1.2em;
    color: var(--color-text-dark);
    margin-bottom: 5px;
}
.story-card p, .customer-testimonial p {
    font-style: italic;
    font-size: 1em;
}
.customer-testimonial span { /* Author */
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: var(--color-primary);
}


/* --- Progress Indicators (Methodology Section) --- */
.progress-indicators-container {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--grid-gap);
}
.progress-item {
    background-color: var(--color-background-light);
    padding: 20px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
}
.progress-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text-dark);
}
.progress-bar-wrapper {
    display: flex;
    align-items: center;
}
.progress-item progress {
    flex-grow: 1;
    width: 100%; /* Fallback for non-flex */
    height: 12px; /* Slimmer bar */
    border-radius: 6px;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden; /* Ensure rounded corners on value */
}
.progress-item progress::-webkit-progress-bar {
    background-color: #e9ecef; /* Lighter background */
    border-radius: 6px;
}
.progress-item progress::-webkit-progress-value {
    background-color: var(--color-secondary-1);
    border-radius: 6px;
    transition: width 0.8s ease-in-out;
}
.progress-item progress::-moz-progress-bar { /* Firefox */
    background-color: var(--color-secondary-1);
    border-radius: 6px;
}
.progress-item span { /* Percentage text */
    margin-left: 15px;
    font-weight: bold;
    color: var(--color-text-dark);
    font-size: 0.9em;
}

/* --- Carousels (Success Stories, Partners) - Basic Structure Styling --- */
.content-carousel {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    gap: var(--grid-gap);
    padding: 10px 0 20px; /* Padding for scrollbar visibility and aesthetics */
    /* Hide scrollbar (optional, platform dependent) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.content-carousel::-webkit-scrollbar { /* Chrome, Safari, Opera */
    display: none;
}
.content-carousel > .card, .content-carousel > .partner-logo {
    min-width: 300px; /* Ensure items don't shrink too much */
    flex-shrink: 0; /* Prevent shrinking */
}


/* --- External Resources Section --- */
.external-links-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.external-link-card .card-content h3 {
    font-size: 1.3em;
    color: var(--color-secondary-1);
}
.external-link-card .card-content h3 a {
    color: inherit;
}
.external-link-card .card-content h3 a:hover {
    color: var(--color-secondary-1-darker);
}
.external-link-card .card-content p {
    font-size: 0.9em;
}


/* --- Press Section (Image Gallery) --- */
.press-gallery {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: center; /* Vertically align items if heights differ */
}
.gallery-item {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--card-hover-shadow);
}
.gallery-item img {
    width: 100%;
    height: 200px; /* Consistent height */
    object-fit: contain; /* Use contain if logos/clippings need full visibility */
    background-color: var(--color-background-alt);
}

/* --- Partners Section --- */
.partners-carousel .partner-logo {
    min-width: 180px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.partner-logo img {
    max-height: 70px;
    width: auto;
    filter: grayscale(100%) contrast(80%) opacity(0.6); /* Muted effect */
    transition: filter var(--transition-medium), opacity var(--transition-medium);
}
.partner-logo img:hover {
    filter: grayscale(0%) contrast(100%) opacity(1);
}

/* --- Contact CTA Section --- */
.contact-cta-section { /* Usually dark or primary color background */
    background-color: var(--color-background-dark); /* Using dark bg for example */
    color: var(--color-text-light);
}
.contact-cta-section .section-title {
    color: var(--color-text-light);
}
.contact-cta-section p {
    color: #bdc3c7; /* Lighter shade for paragraph text on dark */
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    font-size: 1.1em;
}


/* --- Footer --- */
.site-footer {
    background-color: var(--color-background-dark);
    color: #abb8c3; /* Lighter grey text for footer */
    padding-top: calc(var(--section-padding-y) * 0.75);
    font-size: 0.95rem;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--grid-gap) * 1.5);
    padding-bottom: calc(var(--section-padding-y) * 0.5);
}
.footer-content h4 {
    font-family: var(--font-secondary); /* Using secondary font for footer titles for a change */
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-content ul {
    list-style: none;
    padding: 0;
}
.footer-content li {
    margin-bottom: 10px;
}
.footer-content a {
    color: #abb8c3;
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer-content a:hover {
    color: var(--color-text-light);
    padding-left: 5px; /* Subtle hover effect */
    text-decoration: none;
}
.footer-social ul {
    display: flex;
    flex-direction: column; /* Stack social links */
}
.footer-social a {
    font-weight: 500; /* Make social text links a bit bolder */
}
.footer-bottom {
    text-align: center;
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,0.1); /* Subtle separator */
    font-size: 0.9em;
}
.footer-bottom p {
    margin: 5px 0;
    color: #7f8c97; /* Muted text for copyright */
}

/* --- Forms (Contact Page, etc.) --- */
.modern-form .form-group {
    margin-bottom: 25px;
}
.modern-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 0.95em;
}
.modern-form input[type="text"],
.modern-form input[type="email"],
.modern-form input[type="tel"],
.modern-form input[type="subject"], /* Added for completeness */
.modern-form textarea,
.modern-form select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm); /* Slightly sharper radius for inputs */
    font-size: 1rem;
    font-family: var(--font-secondary);
    background-color: var(--color-background-light);
    color: var(--color-text-body);
    transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
}
.modern-form input:focus,
.modern-form textarea:focus,
.modern-form select:focus {
    outline: none;
    border-color: var(--color-secondary-2);
    box-shadow: 0 0 0 3px rgba(var(--rgb-secondary-2, 107, 107, 255), 0.25); /* Define --rgb-secondary-2 if needed */
}
/* Assuming --rgb-secondary-2: 151, 107, 255 based on #976BFF */
:root { --rgb-secondary-2: 151, 107, 255; }

.modern-form textarea {
    resize: vertical;
    min-height: 150px;
}
.modern-form .form-submit-button { /* Can use .cta-button directly */
    min-width: 200px;
}

/* Glassmorphism example for a specific element, e.g., a callout box */
.glass-effect {
    background: rgba(255, 255, 255, 0.15); /* Lighter for light themes */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 25px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Subtle shadow */
}
/* Dark theme glass */
.dark-bg .glass-effect {
    background: rgba(40, 40, 40, 0.35);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}


/* --- Page Specific Styles --- */

/* Common Page Title Section (for About, Contact, Terms, Privacy) */
.page-title-section {
    padding: calc(var(--section-padding-y) * 0.8) 0; /* Slightly less padding */
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--color-text-light);
    min-height: 250px; /* Ensure a minimum presence */
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-title-section .hero-overlay { /* Re-use overlay style */
    background-color: var(--color-background-page-title-overlay);
}
.page-main-title { /* For sub-page main titles */
    font-size: clamp(2.2em, 4vw, 3.2em);
    color: var(--color-text-light) !important;
    text-shadow: var(--text-shadow-heavy);
    margin-bottom: 0; /* Title is usually standalone here */
    position: relative;
    z-index: 2;
}
.sub-section-title { /* For h2 within text sections of subpages */
    font-size: 1.8em;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.5rem;
}

/* About Page - Team Section */
.team-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.team-member-card { text-align: center; }
.team-member-card .card-image {
    width: 160px; /* Slightly larger avatar */
    height: 160px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 5px solid var(--color-accent);
    box-shadow: 0 0 15px rgba(var(--rgb-accent, 255, 217, 61), 0.5);
}
:root { --rgb-accent: 255, 217, 61; }
.team-member-card .card-image img { border-radius: 50%; }
.team-member-card .card-content h3 {
    color: var(--color-text-dark);
    font-size: 1.4em;
}
.team-member-card .card-content span { /* Role */
    display: block;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.95em;
    text-transform: uppercase;
}

/* Contact Page */
.contact-form-section {
    max-width: 800px; /* Center form with reasonable width */
    margin-left: auto;
    margin-right: auto;
}
.contact-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    text-align: center;
}
.contact-info-item {
    padding: 25px;
    /* background-color: var(--color-background-alt); Can add bg if needed */
    border-radius: var(--border-radius-md);
}
.contact-info-item .card-image { /* Wrapper for icon */
    height: auto; /* Let icon define height */
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}
.contact-info-item .card-image img { /* Icon itself */
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.contact-info-item h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: var(--color-secondary-2);
}
.contact-info-item a.text-link, .contact-info-item a:not(.cta-button) {
    color: var(--color-primary);
    font-weight: 600;
}
.contact-info-item a.text-link:hover, .contact-info-item a:not(.cta-button):hover {
    color: var(--color-primary-darker);
}


/* Privacy & Terms Pages Content Offset */
body.privacy-page main, body.terms-page main {
    padding-top: calc(var(--header-height) + 30px); /* Offset for fixed header */
}
/* Or, apply to the first section if structure is consistent */
.privacy-page .content-section:first-of-type,
.terms-page .content-section:first-of-type {
    padding-top: calc(var(--header-height) + var(--section-padding-y));
}


/* Success Page */
body.success-page .page-wrapper { /* Ensure wrapper takes full height */
   /* min-height: 100vh; This is on .page-wrapper by default */
}
.success-page-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - 100px); /* Adjust 100px if footer height is known/fixed */
    text-align: center;
    padding: 40px 20px;
}
.success-page-section .card-image { /* Icon wrapper */
    height: auto; /* Let icon define height */
    margin-bottom: 30px;
}
.success-page-section .card-image img {
    width: 100px; /* Icon size */
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
.success-page-section .page-main-title {
    color: var(--color-secondary-1) !important; /* Use a theme color for success */
    text-shadow: none; /* No shadow for cleaner look on light bg */
    margin-bottom: 20px;
}
.success-page-section p {
    font-size: 1.1em;
    margin-bottom: 25px;
    max-width: 600px;
}
.success-page-actions .cta-button {
    margin: 10px;
}


/* --- Responsive Design --- */
@media (max-width: 992px) { /* Tablets */
    :root {
        --section-padding-y: 60px;
    }
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    .section-title { font-size: 2.2em; }

    .page-title-section { min-height: 200px; }
    .page-main-title { font-size: clamp(2em, 3.5vw, 2.8em); }
}

@media (max-width: 768px) { /* Mobile */
    :root {
        --header-height: 65px;
        --section-padding-y: 50px;
        --grid-gap: 20px;
    }
    body { font-size: 0.95rem; } /* Slightly smaller base for mobile */

    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }
    .section-title {
        font-size: 2em;
        margin-bottom: 30px;
        padding-bottom: 10px;
    }
    .section-title::after { width: 60px; height: 3px; margin-top: 10px; }

    .menu-toggle { display: block; }
    .main-navigation {
        position: relative; /* Context for absolute positioned ul */
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: calc(var(--header-height) - 15px); /* Adjust based on actual header padding */
        left: 0;
        width: 100%;
        background-color: var(--color-background-dark);
        padding: 10px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .main-navigation ul.open { display: flex; width: 200px;left: -100px;}
    .main-navigation li {
        margin: 0;
        width: 100%;
        text-align: left;
    }
    .main-navigation a {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .main-navigation li:last-child a { border-bottom: none; }
    .main-navigation a::after { display: none; } /* No underline effect for mobile dropdown */

    .hero-section {
        min-height: 60vh; /* Reduce hero height on mobile */
        padding: var(--section-padding-y) 0;
    }
    .hero-title { font-size: clamp(1.8em, 6vw, 2.5em); }
    .hero-subtitle { font-size: clamp(1em, 3.5vw, 1.2em); }

    .features-grid, .blog-grid, .team-grid, .external-links-grid, .contact-info-grid, .customer-stories-grid, .press-gallery, .progress-indicators-container {
        grid-template-columns: 1fr; /* Stack cards */
    }
    .card-image { height: 200px; } /* Adjust general card image height */

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-content div { margin-bottom: 30px; }
    .footer-social ul { justify-content: center; flex-direction: row; gap: 15px;}
    .footer-content a:hover { padding-left: 0; } /* Disable padding shift on mobile */

    body.privacy-page main, body.terms-page main {
        padding-top: calc(var(--header-height) + 20px);
    }
     .privacy-page .content-section:first-of-type,
    .terms-page .content-section:first-of-type {
        padding-top: calc(var(--header-height) + var(--section-padding-y) - 20px);
    }
}

/* Animate.css Harmonization:
   Animate.css provides entrance animations. Ensure your own transitions
   (hovers, etc.) don't conflict and feel smooth.
   The default duration for AOS is also different from Animate.css,
   so consistency might be desired if using both heavily.
*/

/* Parallax placeholder - true parallax often requires JS or more complex CSS perspective.
   A simple CSS parallax for background images:
.parallax-background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
   Apply this class to sections where desired. Be mindful of performance, especially on mobile.
*/