/* GLOBAL STYLES */
:root {
    /* Gradient Color Scheme - Futuristic */
    --primary-color-start: #0f0c29; /* Deep space blue */
    --primary-color-mid: #302b63;   /* Cosmic purple */
    --primary-color-end: #24243e;   /* Galactic indigo */
    
    --accent-color: #00e0ff;        /* Cyber teal - Main Accent */
    --accent-color-secondary: #ff00ff; /* Neon pink - Secondary Accent */
    --accent-glow: #00ffff;         /* Lighter glow for main accent */
    --accent-secondary-glow: #ff7dff;/* Lighter glow for secondary accent */

    /* Text Colors */
    --text-color-light: #e0e7ff;    /* Light ethereal blue for text on dark backgrounds */
    --text-color-dark: #1a1a2e;     /* Deep void black for text on light backgrounds */
    --text-color-medium: #4a4a6a;   /* Neutral dark grey for less prominent text */
    --hero-text-color: #FFFFFF;     /* Pure white for hero text */

    /* Backgrounds */
    --bg-dark-gradient: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-mid), var(--primary-color-end));
    --bg-light-surface: #f0f2f5;    /* Clean light grey for content pages */
    --bg-light-gradient: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); /* Subtle light gradient */

    /* Card & UI Element Styling - Neo-Brutalism hints */
    --card-bg-dark: rgba(26, 26, 46, 0.6); /* Translucent dark for cards on dark bg */
    --card-bg-light: #ffffff;             /* Solid white for cards on light bg */
    --card-border-dark: 1px solid rgba(0, 224, 255, 0.3); /* Accent border */
    --card-border-light: 1px solid #ced4da; /* Subtle border for light cards */
    --neo-shadow-color: var(--accent-color);
    --neo-shadow: 4px 4px 0px var(--neo-shadow-color);
    --neo-shadow-secondary: 4px 4px 0px var(--accent-color-secondary);
    --neo-shadow-hover: 6px 6px 0px var(--neo-shadow-color);
    
    /* Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    /* Layout */
    --container-width: 1200px;
    --border-radius-sharp: 4px; /* Neo-brutalism prefers sharper edges */
    --border-radius-smooth: 8px;
}

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

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

body {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--text-color-light);
    background: var(--bg-dark-gradient);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-container {
    width: 100%;
    overflow: hidden;
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
    color: var(--text-color-light);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.page-title, .section-title {
    font-size: clamp(2rem, 5vw, 2.8rem); /* Responsive font size */
    font-weight: 900;
    text-align: center;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-color-light);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5), 0 0 10px var(--accent-glow); /* Futuristic glow */
}

.sub-section-title {
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

p, li {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    color: var(--text-color-light); /* Default for dark bg */
}

.section-text {
    font-size: 1.05rem;
    line-height: 1.8;
}

.section-intro {
    text-align: center;
    font-size: 1.15rem;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: #c0c8e0; /* Lighter text for intros */
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
a:hover, a:focus {
    color: var(--accent-glow);
    text-decoration: none; /* Often preferred in modern design over underline */
    text-shadow: 0 0 5px var(--accent-glow);
}

.read-more-link {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--accent-color-secondary);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}
.read-more-link::after {
    content: ' →'; /* Arrow */
    display: inline-block;
    transition: transform 0.3s ease;
}
.read-more-link:hover, .read-more-link:focus {
    color: var(--accent-secondary-glow);
    border-bottom-color: var(--accent-secondary-glow);
}
.read-more-link:hover::after {
    transform: translateX(5px);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sharp);
}

/* Global Button Styles */
.btn, button, input[type='submit'] {
    display: inline-block;
    padding: 0.75rem 1.75rem; /* Adjusted padding */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: var(--border-radius-sharp);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Non-linear for "bouncy" feel */
    border: 2px solid transparent;
    text-decoration: none; /* Ensure no underline from default <a> if .btn is on an <a> */
    color: var(--hero-text-color); /* Default text color for buttons */
}

.btn-primary, input[type='submit'].btn-primary { /* Assuming submit buttons get .btn-primary */
    background-color: var(--accent-color);
    color: var(--text-color-dark); /* Good contrast for teal */
    border-color: var(--accent-color);
    box-shadow: var(--neo-shadow);
}
.btn-primary:hover, .btn-primary:focus, input[type='submit'].btn-primary:hover, input[type='submit'].btn-primary:focus {
    background-color: var(--accent-glow);
    border-color: var(--accent-glow);
    color: var(--text-color-dark);
    transform: translateY(-3px) translateX(-3px);
    box-shadow: var(--neo-shadow-hover);
}
.btn-primary:active, input[type='submit'].btn-primary:active {
    transform: translateY(0) translateX(0);
    box-shadow: var(--neo-shadow);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    box-shadow: 4px 4px 0px var(--accent-color-secondary);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--accent-color-secondary);
    color: var(--hero-text-color);
    transform: translateY(-3px) translateX(-3px);
    box-shadow: 6px 6px 0px var(--accent-color-secondary);
}
.btn-secondary:active {
    transform: translateY(0) translateX(0);
    box-shadow: 4px 4px 0px var(--accent-color-secondary);
}

.btn-hero {
    padding: 0.9rem 2.25rem;
    font-size: 1.1rem;
}

/* Header & Navigation */
.site-header {
    background: rgba(15, 12, 41, 0.7); /* Dark, semi-transparent base */
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px) saturate(150%); /* Glassmorphism */
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid rgba(0, 224, 255, 0.2); /* Accent border */
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--hero-text-color); /* Ensure visibility */
    text-decoration: none;
    text-shadow: 0 0 8px var(--accent-glow);
}
.logo:hover {
    color: var(--accent-glow);
}
.main-nav .nav-list {
    list-style: none;
    display: flex;
}
.main-nav .nav-link {
    color: var(--text-color-light);
    padding: 0.5rem 1rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-sharp);
    transition: color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .nav-link:focus {
    color: var(--accent-color);
    background-color: rgba(0, 224, 255, 0.1);
    text-shadow: 0 0 5px var(--accent-color);
}
.nav-toggle { display: none; } /* Handle in responsive section */
.hamburger { /* Handle in responsive section */
    display: block; width: 25px; height: 3px; background-color: var(--text-color-light); position: relative;
    transition: transform 0.3s ease;
}
.hamburger::before, .hamburger::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 3px; background-color: var(--text-color-light);
    transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, opacity 0.3s ease;
}
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 0; /* Natural height based on content */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* The background-image with linear-gradient is set inline in HTML */
}
.hero-content {
    max-width: 800px;
    position: relative; /* For z-index if needed */
    z-index: 1;
}
.hero-title {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    font-weight: 900;
    color: var(--hero-text-color) !important; /* Strict white as requested */
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7); /* Ensure readability */
}
.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--hero-text-color) !important; /* Strict white as requested */
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7); /* Ensure readability */
}

/* General Content Sections */
.content-section {
    padding: 4rem 0;
}
.content-section:nth-child(even) {
     background: rgba(0,0,0,0.08); /* Subtle alternating for depth on dark theme */
}

/* Card Styling */
.card {
    background: var(--card-bg-dark);
    border: var(--card-border-dark);
    border-radius: var(--border-radius-smooth);
    padding: 1.5rem;
    margin-bottom: 1.5rem; /* Ensure proper spacing in grids */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* align-items: center; -- This centers the .card-image and .card-content blocks. */
    text-align: center; /* This centers inline/inline-block content within .card-content */
    height: 100%; /* For equal height in grids */
}
.card:hover {
    transform: translateY(-10px) rotate(-1deg); /* Non-linear playful movement */
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), var(--neo-shadow); /* Enhanced shadow */
}
.card-image { /* This is the container for the image */
    width: 100%; /* Make container take full width of card */
    max-width: 400px; /* Optional: cap image container width if card gets too wide */
    height: 250px; /* Fixed height as requested */
    margin-left: auto; /* Center the image container if it's capped by max-width */
    margin-right: auto;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: var(--border-radius-sharp);
    display: flex; /* Centers the img if it's smaller than this container */
    justify-content: center;
    align-items: center;
}
.card-image img {
    width: 100%;
    height: 100%; /* Make image fill its container */
    object-fit: cover; /* Cover behavior as requested */
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:hover .card-image img {
    transform: scale(1.1) rotate(2deg);
}
.card-content {
    flex-grow: 1;
    width: 100%; /* Ensure content block also takes width */
}
.card-title {
    font-size: 1.6rem;
    color: var(--accent-color);
    margin-bottom: 0.75rem;
}
.card p {
    font-size: 0.95rem;
    color: #b0b8d8; /* Lighter text for card content */
    margin-bottom: 1rem;
}

/* Grids for Cards */
.services-grid, .case-studies-grid, .instructors-grid, .pricing-grid, .resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); /* Responsive columns */
    gap: 2rem;
}

/* Specific Card Styles */
.pricing-card .price-tag {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-glow);
    margin: 1rem 0;
}
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
    text-align: left; /* Align list items left in a centered card */
    max-width: 280px; /* Constrain list width */
    margin-left: auto;
    margin-right: auto;
}
.pricing-card li {
    padding-left: 1.8em;
    position: relative;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.pricing-card li::before {
    content: '◈'; /* Futuristic bullet */
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--accent-color);
    font-size: 1.2em;
    line-height: 1;
}
.pricing-card.featured {
    border: 2px solid var(--accent-color-secondary);
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.4), var(--neo-shadow-secondary);
    position: relative;
}
.featured-badge {
    position: absolute;
    top: -2px; /* Adjust to sit over border */
    right: 20px;
    background-color: var(--accent-color-secondary);
    color: var(--hero-text-color);
    padding: 6px 15px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 0 0 var(--border-radius-sharp) var(--border-radius-sharp);
    text-transform: uppercase;
}
.instructor-card .card-image { /* Overriding default card-image height for circular profile */
    width: 150px;
    height: 150px;
    margin-bottom: 1rem; /* Reset as it's auto from card-image global */
}
.instructor-card .card-image img {
    border-radius: 50%;
    border: 3px solid var(--accent-color);
}
.instructor-role {
    font-style: italic;
    color: #9098b8;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.resource-item { /* Resources can be simpler cards */
    background: rgba(0, 224, 255, 0.05);
    border-left: 4px solid var(--accent-color);
}
.resource-item .resource-title a { font-size: 1.25rem; color: var(--accent-glow); }
.resource-item .resource-description { font-size: 0.9rem; color: #a0a8c8; }

/* Contact Form Styling */
.contact-form .form-group {
    margin-bottom: 1.5rem;
    text-align: left; /* Labels align left */
}
.contact-form label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 700;
    color: var(--text-color-light); /* On dark bg */
    font-size: 0.9rem;
    text-transform: uppercase;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(0, 224, 255, 0.3);
    border-radius: var(--border-radius-sharp);
    background-color: rgba(10, 10, 30, 0.5); /* Darker translucent */
    color: var(--text-color-light);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(224, 231, 255, 0.6);
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background-color: rgba(10, 10, 30, 0.7);
    box-shadow: 0 0 10px rgba(0, 224, 255, 0.3), 0 0 0 2px var(--accent-color);
}
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}
/* Contact Info Section (on main page) */
.contact-info-container { text-align: left; }
.contact-info-container h3 { color: var(--accent-color); margin-bottom: 1rem; }
.contact-info p { margin-bottom: 0.75rem; font-size: 1rem; }
.contact-info .animated-icon { /* Placeholder */
    display: inline-block; margin-right: 0.5em; color: var(--accent-color);
}
.contact-visual img {
    border: 1px solid var(--card-border-dark);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
/* Columns (Flexbox based simple grid) */
.columns { display: flex; flex-wrap: wrap; margin: -0.75rem; }
.column { flex-basis: 0; flex-grow: 1; min-width: 0; padding: 0.75rem; }
.column.is-two-thirds { flex: none; width: 66.6666%; }
.column.is-one-third { flex: none; width: 33.3333%; }

/* Footer */
.site-footer {
    background: var(--primary-color-start); /* Darkest base */
    color: #9098b8; /* Lighter grey for footer text */
    padding: 3rem 0 1.5rem 0;
    border-top: 3px solid var(--accent-color);
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.site-footer h4 {
    font-size: 1.25rem;
    color: var(--text-color-light);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.5rem;
}
.site-footer h4::after { /* Underline effect for footer titles */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--accent-color);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer a { color: #a0a8c8; transition: color 0.3s ease, padding-left 0.3s ease; }
.site-footer a:hover, .site-footer a:focus {
    color: var(--accent-glow);
    padding-left: 5px; /* Slight indent on hover */
}
/* Styling for text-based social links */
.footer-social ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } /* Social links in a row */
.footer-social li a {
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 0.3rem 0; /* Minimal padding for text links */
    display: inline-block;
}
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 224, 255, 0.15);
    font-size: 0.9rem;
}

/* Light Theme for Content Pages (About, Contact page, Terms, Privacy) */
.page-content {
    background: var(--bg-light-surface);
    color: var(--text-color-dark);
}
/* Specific padding for privacy and terms pages */
body.privacy-page main.page-content,
body.terms-page main.page-content {
    padding-top: 100px; /* Avoid header overlap */
}

.page-content .page-title,
.page-content .section-title,
.page-content .sub-section-title,
.page-content h1, .page-content h2, .page-content h3, .page-content h4 {
    color: var(--text-color-dark);
    text-shadow: none; /* Remove shadows on light bg */
}
.page-content .sub-section-title {
    color: var(--primary-color-mid); /* Use a darker accent for sub-titles */
}
.page-content p, .page-content li {
    color: var(--text-color-medium);
}
.page-content a { color: var(--primary-color-mid); }
.page-content a:hover, .page-content a:focus { color: var(--accent-color); text-shadow: none; }

.page-content .card {
    background: var(--card-bg-light);
    border: var(--card-border-light);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.page-content .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12), 3px 3px 0px var(--primary-color-mid); /* Neo-brutalism on hover */
}
.page-content .card-title { color: var(--primary-color-mid); }
.page-content .card p { color: var(--text-color-medium); }
.page-content .card .read-more-link { color: var(--primary-color-mid); }
.page-content .card .read-more-link:hover { color: var(--accent-color); border-bottom-color: var(--accent-color); }


.page-content .contact-form label { color: var(--text-color-dark); }
.page-content .contact-form input,
.page-content .contact-form textarea {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: var(--text-color-dark);
}
.page-content .contact-form input::placeholder,
.page-content .contact-form textarea::placeholder {
    color: #6c757d;
}
.page-content .contact-form input:focus,
.page-content .contact-form textarea:focus {
    border-color: var(--primary-color-mid);
    background-color: #fff;
    box-shadow: 0 0 8px rgba(48, 43, 99, 0.2);
}
.page-content .contact-info-block {
     border: 1px solid #e0e0e0;
     background: #f9f9f9;
}
.page-content .map-placeholder img { border: 1px solid #ccc; }
.values-list { list-style: '◈ '; padding-left: 20px; } /* Custom bullet from pricing */
.values-list li { margin-bottom: 0.5rem; }
.testimonial-snippet {
    background-color: #e9ecef;
    padding: 1.5rem;
    border-left: 5px solid var(--primary-color-mid);
    border-radius: var(--border-radius-sharp);
}
.testimonial-snippet .card-title { font-size: 1.2rem; }

/* Success Page Styling */
body.success-page .page-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* To allow header/footer if they were part of this structure */
    padding-top: 0; /* Override if it inherited from .page-content */
}
body.success-page .content-section.success-page { /* Target the specific section */
    flex-grow: 1; /* Make this section take available space */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0; /* Add some padding */
}
.success-page .container {
    /* Container handles width, centering happens within its parent */
}
.success-page .page-title { color: #28a745; text-shadow: none; }
.success-icon svg {
    width: clamp(60px, 15vw, 80px);
    height: clamp(60px, 15vw, 80px);
    fill: #28a745;
    margin-bottom: 1.5rem;
}

/* Animate.css Integration & ScrollReveal Placeholders */
/* Default ScrollReveal hidden state (optional, can be controlled by JS if not using Animate.css this way) */
.animate__animated { visibility: hidden; }
/* When ScrollReveal adds 'sr' class or element is otherwise revealed */
.sr .animate__animated, .is-visible .animate__animated { visibility: visible; }

/* Responsive Design */
@media (max-width: 992px) { /* Tablet */
    .column.is-two-thirds, .column.is-one-third { width: 100%; flex: auto; }
}

@media (max-width: 768px) { /* Mobile */
    .nav-toggle { display: block; background: none; border: none; cursor: pointer; z-index: 1001; }
    .main-nav .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        background-color: rgba(15, 12, 41, 0.98); /* Darker, less transparent for menu */
        padding: 1rem 0;
        border-top: 1px solid rgba(0, 224, 255, 0.2);
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }
    .main-nav.nav-open .nav-list { display: flex; }
    .main-nav .nav-link { display: block; padding: 0.8rem 1.5rem; text-align: center; border-bottom: 1px solid rgba(0, 224, 255, 0.1); }
    .main-nav .nav-list li:last-child .nav-link { border-bottom: none; }
    /* Hamburger animation */
    .nav-open .hamburger { transform: rotate(45deg); }
    .nav-open .hamburger::before { top: 0; transform: rotate(90deg); }
    .nav-open .hamburger::after { bottom: 0; opacity: 0; }

    .columns { margin: 0; }
    .column { padding-left: 0; padding-right: 0; }
    .content-section { padding: 3rem 0; }
    .page-title, .section-title { margin-bottom: 2rem; }
    .section-intro { margin-bottom: 2rem; }
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .site-footer h4::after { left: 50%; transform: translateX(-50%); } /* Center underline */
    .footer-social ul { justify-content: center; }
}

@media (max-width: 576px) { /* Small Mobile */
    html { font-size: 15px; }
    .btn { padding: 0.7rem 1.5rem; font-size: 0.9rem; }
    .btn-hero { padding: 0.8rem 2rem; font-size: 1rem; }
    .card { padding: 1.25rem; }
    .card-image { height: 200px; }
    .content-section { padding: 2.5rem 0; }
    /* Fix for specific pages on mobile if header covers content */
    body.privacy-page main.page-content,
    body.terms-page main.page-content {
        padding-top: 80px; /* Adjust if header height changes */
    }
}