/* ==========================================================================
   1. Root Variables & Global Styles
   ========================================================================== */
:root {
    /* Fonts */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Merriweather', serif;

    /* Core Colors */
    --color-primary: #0A76A8; /* Professional Blue */
    --color-primary-light: #1E90FF; /* Dodger Blue */
    --color-primary-dark: #004D7A; /* Darker Blue */
    --color-accent: #FFC107; /* Amber - Bright and inviting */
    --color-accent-dark: #FFA000; /* Darker Amber for hover */

    /* Text Colors */
    --text-dark: #1a1a1a; /* Very dark grey for high contrast */
    --text-medium: #333333;
    --text-light: #FFFFFF;
    --text-muted: #6c757d;
    --text-link: var(--color-primary-light);
    --text-link-hover: var(--color-primary-dark);

    /* Background Colors & Gradients */
    --bg-light: #FFFFFF;
    --bg-alt: linear-gradient(135deg, #f8f9fa, #e9ecef); /* Subtle light grey gradient */
    --bg-dark-overlay: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    --bg-dark-overlay-strong: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));

    --gradient-primary: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    --gradient-hero-overlay: linear-gradient(0deg, rgba(10, 25, 40, 0.8) 0%, rgba(10, 25, 40, 0.4) 70%, rgba(10, 25, 40, 0.1) 100%);
    --gradient-contact-overlay: linear-gradient(45deg, rgba(7, 47, 122, 0.85), rgba(13, 71, 161, 0.95)); /* Overlay for contact background image */


    /* UI Elements */
    --card-bg: var(--bg-light);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --card-border-radius: 12px;
    --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    --border-radius-small: 6px;
    --border-radius-medium: 10px;

    /* Spacing */
    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 1.5rem;  /* 24px */
    --spacing-lg: 2.5rem;  /* 40px */
    --spacing-xl: 4rem;    /* 64px */

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
    font-size: 100%; /* Typically 16px */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--text-medium);
    background-color: var(--bg-light);
    font-size: 1rem; /* Base font size for Merriweather */
    padding-top: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

h1 { font-size: 2.8rem; margin-bottom: var(--spacing-md); } /* Approx 44.8px */
h2 { font-size: 2.2rem; margin-bottom: var(--spacing-md); } /* Approx 35.2px (Section Titles) */
h3 { font-size: 1.6rem; margin-bottom: var(--spacing-sm); } /* Approx 25.6px (Card Titles) */
h4 { font-size: 1.25rem; } /* Approx 20px */

p {
    margin-bottom: var(--spacing-md);
    font-size: 1rem; /* Ensures Merriweather is legible */
}
p:last-child { margin-bottom: 0; }

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

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

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

/* Section Styling */
.section-padding {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: #222222; /* Enforced dark color for section titles */
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: var(--color-accent);
    margin: var(--spacing-sm) auto 0;
    border-radius: 2px;
}

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

.alt-background {
    background: var(--bg-alt);
}

/* Global Button Styles */
.cta-button, button[type="submit"], .button-style { /* Added .button-style for generic buttons */
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--button-text-color);
    background: var(--button-bg); /* Solid color for base */
    background: var(--gradient-accent); /* Gradient for modern look */
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-shadow: var(--button-shadow);
    transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cta-button:hover, button[type="submit"]:hover, .button-style:hover,
.cta-button:focus, button[type="submit"]:focus, .button-style:focus {
    background: var(--color-accent-dark); /* Solid hover */
    /* Or a slightly different gradient for hover if preferred */
    /* background: linear-gradient(135deg, var(--color-accent), #e89200); */
    color: var(--text-light);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    text-decoration: none;
}

/* Columns basic helper (can be expanded) */
.columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: -var(--spacing-sm);
    margin-right: -var(--spacing-sm);
}

.column {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    margin-bottom: var(--spacing-md); /* Spacing between columns on mobile */
}

.is-two-thirds { flex: 0 0 66.666%; max-width: 66.666%; }
.is-one-third { flex: 0 0 33.333%; max-width: 33.333%; }
/* Add more column sizes as needed */

@media (max-width: 768px) {
    .is-two-thirds, .is-one-third {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   2. Header & Navigation
   ========================================================================== */
.site-header {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    padding: var(--spacing-sm) 0;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--transition-smooth);
}

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

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


.main-navigation ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.main-navigation a {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--text-medium);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-small);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    font-size: 0.95rem;
}

.main-navigation a:hover,
.main-navigation a.active { /* Add .active class via JS for current page/section */
    color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb, 10, 118, 168), 0.1); /* Assuming var(--color-primary-rgb) is set */
}
/* Fallback if RGB var not available */
.main-navigation a:hover, .main-navigation a.active {
    color: #0A76A8; /* --color-primary */
    background-color: #e7f3f8; /* Light blueish */
}


.nav-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: 1001; /* Above nav list on mobile */
}

.hamburger-icon {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--text-dark);
    position: relative;
    transition: background-color var(--transition-fast);
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--text-dark);
    position: absolute;
    left: 0;
    transition: transform var(--transition-smooth), top var(--transition-smooth);
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

/* Mobile Menu Styles */
@media (max-width: 992px) { /* Adjust breakpoint as needed */
    .nav-toggle { display: block; }
    .main-navigation ul {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--bg-light);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: var(--spacing-md) 0;
        text-align: center;
    }
    .main-navigation ul.nav-active { display: flex; } /* JS toggles this class */
    .main-navigation li { width: 100%; }
    .main-navigation a { display: block; padding: var(--spacing-sm); width: 100%; }

    /* Hamburger animation when active */
    .nav-toggle[aria-expanded="true"] .hamburger-icon { background-color: transparent; }
    .nav-toggle[aria-expanded="true"] .hamburger-icon::before { transform: rotate(45deg); top: 0; }
    .nav-toggle[aria-expanded="true"] .hamburger-icon::after { transform: rotate(-45deg); top: 0; }
}

/* ==========================================================================
   3. Hero Section
   ========================================================================== */
.hero-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--text-light); /* Enforced white text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80vh; /* Ensure it's substantial but not overly fixed */
    padding: var(--spacing-xl) 0; /* Vertical padding */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-hero-overlay); /* Dark overlay for text readability */
    z-index: 1;
}

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

.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    color: var(--text-light); /* Enforced white text */
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

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

.hero-section .cta-button {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .hero-section { min-height: 70vh; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }
}

/* ==========================================================================
   4. About Us Section
   ========================================================================== */
.about-us-section .about-content {
    align-items: center; /* Vertically align columns */
}

.about-us-section .text-content {
    padding-right: var(--spacing-lg); /* Asymmetric spacing */
}
@media (max-width: 768px) {
    .about-us-section .text-content { padding-right: 0; margin-bottom: var(--spacing-lg); }
}

.about-us-section .image-column .image-container {
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.about-us-section .image-column img {
    border-radius: var(--card-border-radius);
    width: 100%;
    object-fit: cover;
}

/* ==========================================================================
   5. Projects / Services Section
   ========================================================================== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.project-card, .press-item.card /* Generic Card Styling */ {
    background-color: var(--card-bg);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    text-align: center; /* Center content inside card */
}

.project-card:hover, .press-item.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.card-image { /* Container for the image in a card */
    width: 100%;
    height: 220px; /* Fixed height for consistency */
    overflow: hidden;
    display: flex; /* For centering image if not full width by default */
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0; /* Placeholder bg */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform var(--transition-smooth);
}
.project-card:hover .card-image img, .press-item.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: var(--spacing-md);
    flex-grow: 1; /* Allows content to fill space if cards have different heights */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes elements apart if needed */
}
.card-title {
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary-dark);
}
.card-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.read-more-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-accent-dark);
    text-decoration: none;
    display: inline-block;
    margin-top: auto; /* Pushes to bottom if card content is taller */
}
.read-more-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.read-more-link::after {
    content: ' →';
}

/* Custom Slider basic styling (JS handles functionality) */
.custom-slider {
    /* If using a library like Swiper, it will add its own classes.
       Otherwise, this might be a flex container with overflow hidden. */
    display: flex; /* Example for horizontal scroll */
    overflow-x: auto; /* For manual scroll, or JS will manage */
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-sm); /* For scrollbar visibility */
}
.custom-slider > .project-card {
    min-width: 300px; /* Ensure cards don't shrink too much in slider */
    flex-shrink: 0;
}

/* ==========================================================================
   6. Gallery Section
   ========================================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--card-shadow);
    aspect-ratio: 4/3; /* Maintain aspect ratio for gallery images */
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth), filter var(--transition-smooth);
}
.gallery-item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}
.gallery-item .image-container {
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   7. Press Section
   ========================================================================== */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}
/* .press-item.card reuses .project-card styles */
.press-item .card-image {
    height: 100px; /* Smaller height for logos */
    padding: var(--spacing-sm); /* Padding around logo */
}
.press-item .card-image img {
    object-fit: contain; /* Logos should be contained, not covered */
    max-height: 100%;
}

/* ==========================================================================
   8. External Resources Section
   ========================================================================== */
.external-resources-section {
    background-color: var(--bg-light); /* Or keep alt-background if preferred */
}
.resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}
.resource-item {
    background: var(--bg-alt);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: box-shadow var(--transition-smooth);
}
.resource-item:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.resource-item h3 {
    margin-bottom: var(--spacing-xs);
    font-size: 1.2rem;
}
.resource-item h3 a {
    color: var(--color-primary-dark);
}
.resource-item h3 a:hover {
    color: var(--color-accent-dark);
}
.resource-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==========================================================================
   9. FAQ Section
   ========================================================================== */
.accordion {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background-color: var(--bg-light);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    overflow: hidden; /* For smooth open/close */
}
.accordion-item:last-child { margin-bottom: 0; }

.accordion-header {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: var(--spacing-md);
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
}
.accordion-header:hover {
    background-color: rgba(var(--color-primary-rgb, 10, 118, 168), 0.05);
}
.accordion-header[aria-expanded="true"] {
     background-color: rgba(var(--color-primary-rgb, 10, 118, 168), 0.1);
}
/* Fallback */
.accordion-header:hover { background-color: #f0f6fa; }
.accordion-header[aria-expanded="true"] { background-color: #e7f3f8; }


.accordion-icon {
    width: 1em;
    height: 1em;
    transition: transform var(--transition-smooth);
    position: relative;
}
.accordion-icon::before, .accordion-icon::after {
    content: '';
    position: absolute;
    background-color: var(--text-medium);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.accordion-icon::before { /* Horizontal bar */
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}
.accordion-icon::after { /* Vertical bar */
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
}
.accordion-header[aria-expanded="true"] .accordion-icon::after {
    transform: rotate(90deg);
    opacity: 0; /* Hide vertical bar to make a minus */
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(0deg); /* Plus becomes minus, or use a different icon rotation */
}


.accordion-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-smooth), padding var(--transition-smooth);
    font-size: 0.95rem;
}
.accordion-content p {
    color: var(--text-muted);
}

/* ==========================================================================
   10. Contact Section
   ========================================================================== */
.contact-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-light); /* Default for overlay */
}
.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-contact-overlay);
    z-index: 1;
}
.contact-container-content { /* .container specific to contact section */
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr; /* Default single column */
    gap: var(--spacing-lg);
}
@media (min-width: 992px) {
    .contact-container-content {
        grid-template-columns: 2fr 1fr; /* Form on left, details on right */
        align-items: start; /* Align items to the start of the grid cell */
    }
}

.contact-section .section-title,
.contact-section .section-intro,
.contact-section .contact-details h3 {
    color: var(--text-light); /* Ensure titles and text on overlay are light */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.contact-section .section-title::after { background: var(--color-accent); }

.contact-form-container {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle glassmorphism */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--spacing-lg);
    border-radius: var(--card-border-radius);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

.form-group {
    margin-bottom: var(--spacing-md);
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-light);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-small);
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-light);
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb, 255, 193, 7), 0.3);
}
/* Fallback */
.form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group textarea:focus {
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

.contact-section button[type="submit"] {
    width: 100%;
}

.contact-details {
    color: var(--text-light);
    padding-top: var(--spacing-sm); /* Align with form start if necessary */
}
.contact-details h3 {
    margin-bottom: var(--spacing-md);
}
.contact-details p {
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}
.contact-details a {
    color: var(--color-accent-light);
    text-decoration: underline;
}
.contact-details a:hover {
    color: var(--text-light);
}


/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer {
    background-color: #161c27; /* Dark background for footer */
    color: rgba(255, 255, 255, 0.7);
    padding: var(--spacing-xl) 0 var(--spacing-sm);
    font-size: 0.9rem;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.site-footer h4 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.site-footer ul {
    list-style: none;
    padding-left: 0;
}
.site-footer li {
    margin-bottom: var(--spacing-xs);
}
.site-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.site-footer a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Social Media Links (Text-based) */
.footer-social ul {
    display: flex;
    flex-direction: column; /* Stack them or row */
    gap: var(--spacing-xs);
}
.footer-social a {
    /* Could add padding here if they need to look more like buttons */
    font-weight: 500; /* Slightly bolder for social links */
}


.footer-copyright {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   12. Specific Page Styles (Success, Privacy, Terms)
   ========================================================================== */
.body-success { /* Apply to <body> tag of success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page-content { /* Main content wrapper on success.html */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl);
}
.success-page-content h1 {
    color: var(--color-primary);
    font-size: 3rem;
}
.success-page-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: var(--spacing-lg);
}


/* For privacy.html and terms.html content */
.page-content-privacy,
.page-content-terms {
    padding-top: 100px; /* Offset for fixed header */
    padding-bottom: var(--spacing-xl);
}
.page-content-privacy .container,
.page-content-terms .container {
    max-width: 800px; /* Constrain width for readability */
}
.page-content-privacy h1,
.page-content-terms h1 {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

/* Cookie Consent Popup (minimal inline styles are in HTML, this can augment) */
#cookieConsentPopup {
    font-size: 0.9rem; /* Base font-size for popup content */
}
#cookieConsentPopup p {
    font-size: 0.95rem; /* Slightly larger for main text */
    line-height: 1.5;
}
#cookieConsentPopup a {
    font-weight: 600;
}
#acceptCookieButton {
    transition: background-color var(--transition-fast);
}
#acceptCookieButton:hover {
    background-color: #3e8e41 !important; /* Darker green, !important if needed to override inline */
}


/* Animations & Parallax (Basic Placeholders - GSAP would enhance this) */
.fade-in-up { /* Example class for scroll animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth);
}
.fade-in-up.is-visible { /* JS adds this class when element is in viewport */
    opacity: 1;
    transform: translateY(0);
}

/* Parallax effect for background images (CSS only basic) */
[style*="background-image"] { /* General selector for elements with inline background images */
    background-attachment: fixed; /* Creates a simple parallax, might need adjustment based on layout */
}
/* Note: `background-attachment: fixed` can have performance implications and issues on mobile.
   A JS-based parallax is often smoother and more reliable.
   For sections like Hero or Contact, if they are full viewport height, this works okay.
   If they are shorter sections, it might not give the desired effect or cover properly.
   It's better to apply this selectively.
*/
.hero-section, .contact-section { /* Apply parallax only to specific sections if desired */
     /* background-attachment: fixed;  -- UNCOMMENT IF THIS EFFECT IS DESIRED AND WORKS WELL */
}


/* Responsive Adjustments */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; } /* Section Titles */
    h3 { font-size: 1.4rem; } /* Card Titles */

    .hero-title { font-size: 3rem; }
    .projects-grid, .gallery-grid, .press-grid, .resources-list {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    body { font-size: 0.95rem; }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }

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

    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1rem; }
    .hero-section .cta-button { padding: var(--spacing-sm) var(--spacing-lg); font-size: 1rem; }

    .footer-container {
        grid-template-columns: 1fr; /* Stack footer columns on mobile */
        text-align: center;
    }
    .site-footer ul { padding-left: 0; }
    .footer-social ul {
        justify-content: center;
        flex-direction: row; /* Social links in a row on mobile */
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.2rem; }

    .container { width: 95%; }
    .projects-grid, .gallery-grid, .press-grid, .resources-list {
        grid-template-columns: 1fr; /* Single column for cards on very small screens */
    }
    .card-image { height: 200px; }
}