/* style.css */

/* 1. CSS Variables
-------------------------------------------------- */
:root {
    /* Color Palette (Split-Complementary & Neumorphism) */
    --neumorphic-bg: #e0e5ec; /* Light grey base for neumorphism */
    --neumorphic-primary: #2980b9; /* Primary Blue for actions, links */
    --neumorphic-accent1: #16a085; /* Teal accent */
    --neumorphic-accent2: #f39c12; /* Amber/Orange accent */
    --neumorphic-text-dark: #34495e; /* Dark grey for main text */
    --neumorphic-text-light: #7f8c8d; /* Lighter grey for subtitles, secondary text */
    --neumorphic-white: #ffffff;
    --neumorphic-black: #000000;
    --neumorphic-danger: #e74c3c; /* For errors or important warnings */

    /* Neumorphic Shadows (derived from --neumorphic-bg) */
    --neumorphic-shadow-color-light: #ffffff;
    --neumorphic-shadow-color-dark: #a3b1c6; /* Adjusted for #e0e5ec background */
    
    --neumorphic-shadow-distance: 6px;
    --neumorphic-shadow-blur: 16px;
    --neumorphic-shadow-distance-sm: 4px;
    --neumorphic-shadow-blur-sm: 8px;

    --neumorphic-shadow: 
        var(--neumorphic-shadow-distance) var(--neumorphic-shadow-distance) var(--neumorphic-shadow-blur) var(--neumorphic-shadow-color-dark),
        calc(-1 * var(--neumorphic-shadow-distance)) calc(-1 * var(--neumorphic-shadow-distance)) var(--neumorphic-shadow-blur) var(--neumorphic-shadow-color-light);
    
    --neumorphic-shadow-inset: 
        inset var(--neumorphic-shadow-distance) var(--neumorphic-shadow-distance) var(--neumorphic-shadow-blur) var(--neumorphic-shadow-color-dark),
        inset calc(-1 * var(--neumorphic-shadow-distance)) calc(-1 * var(--neumorphic-shadow-distance)) var(--neumorphic-shadow-blur) var(--neumorphic-shadow-color-light);

    --neumorphic-shadow-pressed: /* For button active state */
        inset calc(var(--neumorphic-shadow-distance) / 2) calc(var(--neumorphic-shadow-distance) / 2) calc(var(--neumorphic-shadow-blur) / 2) var(--neumorphic-shadow-color-dark),
        inset calc(-1 * var(--neumorphic-shadow-distance) / 2) calc(-1 * var(--neumorphic-shadow-distance) / 2) calc(var(--neumorphic-shadow-blur) / 2) var(--neumorphic-shadow-color-light);

    /* Typography */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Lato', sans-serif;

    /* Borders & Spacing */
    --neumorphic-border-radius: 15px;
    --neumorphic-border-radius-sm: 10px;
    --section-padding: 4rem 1.5rem; /* Increased padding for sections */
    --header-height: 70px; /* Approximate height of fixed header */
}

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

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

body {
    font-family: var(--font-secondary);
    color: var(--neumorphic-text-dark);
    background-color: var(--neumorphic-bg);
    line-height: 1.7;
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0; 
    pointer-events: none;
}

.page-container {
    position: relative;
    z-index: 1;
    /* background-color: var(--neumorphic-bg);  Ensure content bg is opaque over particles */
}

h1, h2, h3, h4, h5, h6,
.title,
.subtitle {
    font-family: var(--font-primary);
    color: var(--neumorphic-text-dark);
    font-weight: 700;
}

.title {
    margin-bottom: 1rem; /* Default Bulma */
}
.subtitle {
    color: var(--neumorphic-text-light);
    font-weight: 400;
    margin-bottom: 1.5rem; /* Default Bulma */
}

a {
    color: var(--neumorphic-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--neumorphic-accent1);
}

p {
    margin-bottom: 1.25em; /* Consistent paragraph spacing */
}

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

/* Ensure main content is below fixed header */
.main-content {
    padding-top: var(--header-height); 
}

/* 3. Layout (Sections, Containers - Bulma provides .section, .container)
-------------------------------------------------- */
.section {
    padding: var(--section-padding);
    background-color: transparent; /* Sections are on the main page background */
}

.section-title {
    text-align: center;
    margin-bottom: 3rem; /* More space below section titles */
    font-size: 2.5rem; /* Larger section titles */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    .section {
        padding: 3rem 1rem;
    }
}

/* 4. Neumorphic Base Styles (Buttons, Cards, Forms)
-------------------------------------------------- */

/* General Neumorphic Element Styling */
.neumorphic-element {
    background: var(--neumorphic-bg);
    border-radius: var(--neumorphic-border-radius);
    box-shadow: var(--neumorphic-shadow);
    transition: box-shadow 0.3s ease-in-out;
}

/* Buttons */
.button.neumorphic-button,
input[type="submit"].neumorphic-button, /* If used */
a.neumorphic-button /* If styled as button */ {
    background: var(--neumorphic-bg);
    border: none;
    border-radius: var(--neumorphic-border-radius-sm); /* Slightly smaller radius for buttons */
    box-shadow: var(--neumorphic-shadow);
    color: var(--neumorphic-text-dark);
    font-weight: 600;
    padding: 0.8em 1.8em;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
    outline: none;
}
.button.neumorphic-button:hover,
input[type="submit"].neumorphic-button:hover,
a.neumorphic-button:hover {
    box-shadow: 
        8px 8px 18px var(--neumorphic-shadow-color-dark),
        -8px -8px 18px var(--neumorphic-shadow-color-light);
    transform: translateY(-2px);
    color: var(--neumorphic-primary);
}
.button.neumorphic-button:active,
input[type="submit"].neumorphic-button:active,
a.neumorphic-button:active {
    box-shadow: var(--neumorphic-shadow-pressed);
    transform: translateY(1px);
    color: var(--neumorphic-accent1);
}

/* Primary Button Coloration (using Bulma's .is-primary as a hook) */
.button.neumorphic-button.is-primary {
    color: var(--neumorphic-white);
    background-color: var(--neumorphic-primary); /* Solid color for primary actions */
    box-shadow: 3px 3px 6px #075a8f, -3px -3px 6px #0d9aff, var(--neumorphic-shadow); /* Add colored shadow */
}
.button.neumorphic-button.is-primary:hover {
    background-color: #2570a6; /* Darken primary */
}
.button.neumorphic-button.is-primary:active {
    background-color: #0A7ABF; /* Slightly lighter on press */
    box-shadow: var(--neumorphic-shadow-pressed);
}

.button.neumorphic-button.is-secondary {
    color: var(--neumorphic-text-dark); /* Default neumorphic button style */
}
.button.neumorphic-button.is-secondary:hover {
    color: var(--neumorphic-accent2);
}

.button.neumorphic-button.is-info {
    color: var(--neumorphic-white);
    background-color: var(--neumorphic-accent1);
     box-shadow: 3px 3px 6px #10705a, -3px -3px 6px #1cc9a0, var(--neumorphic-shadow);
}
.button.neumorphic-button.is-info:hover {
    background-color: #13856d;
}


.button.neumorphic-button-sm { /* For smaller buttons like "Read More" */
    padding: 0.6em 1.2em;
    font-size: 0.9rem;
    border-radius: calc(var(--neumorphic-border-radius-sm) - 2px);
}
.button.is-link.is-outlined.neumorphic-button-sm { /* "Leer Mas" style */
    border: 1px solid var(--neumorphic-primary); /* Keep outlined feel */
    color: var(--neumorphic-primary);
    background-color: transparent; /* True outline */
    box-shadow: none; /* Neumorphic shadow might be too much for small outlined */
}
.button.is-link.is-outlined.neumorphic-button-sm:hover {
    background-color: var(--neumorphic-primary);
    color: var(--neumorphic-white);
    box-shadow: none;
    transform: none;
}


/* Cards */
.neumorphic-card {
    background: var(--neumorphic-bg);
    border-radius: var(--neumorphic-border-radius);
    box-shadow: var(--neumorphic-shadow);
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* For equal height columns in Bulma */
    display: flex;
    flex-direction: column;
    text-align: center; /* STROGO: Center content in cards */
}
.neumorphic-card:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 20px var(--neumorphic-shadow-color-dark),
                -10px -10px 20px var(--neumorphic-shadow-color-light);
}
.neumorphic-card .card-image.image-container { /* Style for Bulma cards with .image-container */
    border-radius: var(--neumorphic-border-radius-sm) var(--neumorphic-border-radius-sm) 0 0;
    overflow: hidden;
    height: 220px; /* STROGO: Fixed height for image containers */
    margin-bottom: 1rem; /* Space between image and content */
    display: flex; /* For centering the img tag itself if it's smaller due to object-fit: contain */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Placeholder */
}
.neumorphic-card .card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO: Ensure image covers the container */
    display: block;
}
.neumorphic-card .card-content {
    padding: 0.5rem; /* Adjusted padding within card content */
    flex-grow: 1; /* Allows content to fill space for equal height cards */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if it's last child */
}
.neumorphic-card .card-content .title {
    margin-bottom: 0.75rem;
    color: var(--neumorphic-text-dark);
    font-size: 1.25rem;
}
.neumorphic-card .card-content .content, 
.neumorphic-card .card-content p { /* Ensure content within card-content is also centered */
    text-align: center;
    color: var(--neumorphic-text-light);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* Inset Neumorphic style */
.neumorphic-card-inset {
    background: var(--neumorphic-bg);
    border-radius: var(--neumorphic-border-radius);
    box-shadow: var(--neumorphic-shadow-inset);
    padding: 1.5rem;
}


/* Forms */
.neumorphic-form .label {
    color: var(--neumorphic-text-dark);
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: block;
    text-align: left;
}
.neumorphic-input,
.neumorphic-textarea {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: var(--neumorphic-border-radius-sm);
    background-color: var(--neumorphic-bg);
    box-shadow: var(--neumorphic-shadow-inset);
    color: var(--neumorphic-text-dark);
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: box-shadow 0.3s ease;
    outline: none;
}
.neumorphic-input::placeholder,
.neumorphic-textarea::placeholder {
    color: var(--neumorphic-text-light);
    opacity: 0.8;
}
.neumorphic-input:focus,
.neumorphic-textarea:focus {
    box-shadow: inset 3px 3px 7px var(--neumorphic-shadow-color-dark), 
                inset -3px -3px 7px var(--neumorphic-shadow-color-light),
                0 0 0 2px var(--neumorphic-primary); /* Focus ring */
}
.neumorphic-textarea {
    min-height: 120px;
    resize: vertical;
}
.field {
    margin-bottom: 1.5rem;
}


/* 5. Header & Navigation (Bulma handles .navbar)
-------------------------------------------------- */
.site-header.is-fixed-top {
    background-color: rgba(224, 229, 236, 0.85); /* Slightly transparent neumorphic bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: var(--header-height);
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--neumorphic-text-dark) !important; /* Override Bulma */
    transition: color 0.3s ease;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important; /* Neumorphic doesn't use bg color for hover on nav */
    color: var(--neumorphic-primary) !important;
}
.navbar-dropdown {
    background-color: var(--neumorphic-bg);
    border-radius: 0 0 var(--neumorphic-border-radius-sm) var(--neumorphic-border-radius-sm);
    box-shadow: var(--neumorphic-shadow);
    border-top: none;
}
.logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--neumorphic-text-dark) !important;
}
.logo-accent {
    color: var(--neumorphic-primary);
}
.navbar-burger span {
    background-color: var(--neumorphic-text-dark) !important; /* Burger lines */
    height: 2px;
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05) !important;
}
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--neumorphic-bg);
        box-shadow: var(--neumorphic-shadow);
        padding: 0.5rem 0;
        border-radius: 0 0 var(--neumorphic-border-radius) var(--neumorphic-border-radius);
    }
}

/* 6. Hero Section
-------------------------------------------------- */
.hero { /* Bulma's .hero class */
    position: relative; /* For overlay */
    background-size: cover !important; /* STROGO */
    background-position: center center !important;
    background-repeat: no-repeat !important; /* STROGO */
}
.hero::before { /* Dark overlay for text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
    z-index: 1;
}
.hero .hero-body {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero .hero-title,
.hero .hero-subtitle {
    color: var(--neumorphic-white) !important; /* STROGO: White text on Hero */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.hero .hero-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero .hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 400; /* Lighter than title */
}
.hero .hero-button { /* Already uses .neumorphic-button .is-primary */
    padding: 1em 2.5em;
    font-size: 1.1rem;
}
@media screen and (max-width: 768px) {
    .hero .hero-title { font-size: 2.5rem; }
    .hero .hero-subtitle { font-size: 1.2rem; }
}

/* 7. Generic Card Styles (already covered by .neumorphic-card)
   Can add specifics if needed for Insights, Portfolio, News, Workshops */

/* Example: Workshop Card specific styling if different */
.workshop-card .card-content {
    text-align: left; /* Workshops might need left-aligned text */
}
.workshop-card .card-content p, 
.workshop-card .card-content .subtitle {
    text-align: left;
}

/* 8. Specific Section Styles
-------------------------------------------------- */
/* Statistics Section */
.stat-card {
    padding: 2rem 1rem;
}
.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--neumorphic-primary) !important; /* Bulma color override */
    margin-bottom: 0.5rem;
}
.stat-label {
    font-size: 1rem;
    color: var(--neumorphic-text-light) !important; /* Bulma color override */
    line-height: 1.4;
}

/* Customer Stories / Testimonials Section */
.testimonial-card .card-content {
    text-align: left; /* Testimonials usually better left-aligned */
}
.testimonial-card .media-left .image img {
    border-radius: 50%; /* Rounded profile pictures */
    box-shadow: var(--neumorphic-shadow);
}
.testimonial-card .media-content .title {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.testimonial-card .media-content .subtitle {
    font-size: 0.9rem;
}
.testimonial-card .content {
    font-style: italic;
    color: var(--neumorphic-text-dark);
    text-align: left;
    font-size: 0.95rem;
}
.testimonial-card .content::before {
    content: "“";
    font-size: 2em;
    color: var(--neumorphic-primary);
    margin-right: 0.1em;
    line-height: 0.5;
    position: relative;
    top: 0.15em;
}
.testimonial-card .content::after {
    content: "”";
    font-size: 2em;
    color: var(--neumorphic-primary);
    margin-left: 0.1em;
    line-height: 0.5;
    position: relative;
    top: 0.15em;
}


/* News Section */
.news .card .card-content .title {
    font-size: 1.15rem; /* Slightly smaller for news titles */
}
.news .card .is-size-7.has-text-grey { /* Published date */
    color: var(--neumorphic-text-light) !important;
    margin-bottom: 0.75rem;
    display: block;
    text-align: center;
}

/* Events Calendar Section */
.event-item { /* Uses .neumorphic-card-inset */
    margin-bottom: 1.5rem;
    text-align: left;
}
.event-item .title {
    color: var(--neumorphic-primary);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.event-item p {
    margin-bottom: 0.5rem;
    color: var(--neumorphic-text-dark);
}
.event-item p span.has-text-weight-bold {
    color: var(--neumorphic-text-dark);
}

/* External Resources Section */
.external-links-list {
    list-style: none;
    padding: 0;
}
.external-links-list li { /* Uses .neumorphic-card-inset */
    text-align: left;
}
.external-links-list li .title a {
    color: var(--neumorphic-primary);
    font-size: 1.2rem;
}
.external-links-list li p {
    color: var(--neumorphic-text-light);
    font-size: 0.95rem;
}

/* FAQ Section */
.faq-item { /* Uses .neumorphic-card */
    margin-bottom: 1rem !important; /* Override Bulma margin for .card */
    padding: 0 !important; /* Button will handle padding */
}
.faq-question { /* Is a .button.neumorphic-button */
    width: 100%;
    text-align: left;
    justify-content: space-between; /* Pushes potential icon to right */
    font-weight: 600;
    color: var(--neumorphic-text-dark);
    padding: 1rem 1.5rem; /* Internal padding for question */
    border-radius: var(--neumorphic-border-radius); /* Full card radius if answer hidden */
}
.faq-item.is-active .faq-question {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--neumorphic-primary);
}
.faq-question:hover {
    color: var(--neumorphic-primary);
}
.faq-question::after { /* Simple +/- indicator */
    content: '+';
    font-size: 1.5em;
    color: var(--neumorphic-primary);
}
.faq-item.is-active .faq-question::after {
    content: '–';
}
.faq-answer {
    padding: 1.5rem;
    background-color: var(--neumorphic-bg); /* Ensure it has bg */
    border-bottom-left-radius: var(--neumorphic-border-radius);
    border-bottom-right-radius: var(--neumorphic-border-radius);
    text-align: left;
    color: var(--neumorphic-text-dark);
    box-shadow: var(--neumorphic-shadow-inset); /* Answer appears slightly inset */
}
.faq-answer p {
    margin-bottom: 0.5rem;
}

/* Contact Section */
.contact-details {
    margin-top: 3rem;
    text-align: center;
}
.contact-details p {
    font-size: 1.1rem;
    color: var(--neumorphic-text-dark);
    margin-bottom: 0.75rem;
}
.contact-details strong {
    color: var(--neumorphic-text-dark);
}
.neumorphic-image { /* For mission image and contact map */
    border-radius: var(--neumorphic-border-radius);
    box-shadow: var(--neumorphic-shadow);
    overflow: hidden; /* If image has its own radius */
}


/* 9. Footer
-------------------------------------------------- */
.site-footer { /* Bulma's .footer */
    background-color: var(--neumorphic-bg); /* Consistent BG */
    padding: 3rem 1.5rem 2rem; /* Adjusted padding */
    border-top: 1px solid var(--neumorphic-shadow-color-dark); /* Subtle separator */
    box-shadow: inset 0px 5px 10px -5px var(--neumorphic-shadow-color-dark); /* Inner shadow from top */
    color: var(--neumorphic-text-light);
}
.site-footer .title {
    color: var(--neumorphic-text-dark);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.site-footer p, .site-footer ul li {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.site-footer ul {
    list-style: none;
    padding-left: 0;
}
.site-footer a {
    color: var(--neumorphic-text-light);
}
.site-footer a:hover {
    color: var(--neumorphic-primary);
}
.site-footer hr {
    background-color: var(--neumorphic-shadow-color-dark);
    height: 1px;
    margin: 1.5rem 0;
}
.site-footer .has-text-centered { /* Copyright */
    font-size: 0.9rem;
}

/* 10. Utility & Animations
-------------------------------------------------- */
.animated-text { /* Simple fade-in for hero text example */
    opacity: 0;
    animation: fadeInText 1s ease-out forwards;
    animation-delay: 0.5s;
}
.animated-text:nth-child(2) { animation-delay: 1s; }
.animated-text:nth-child(3) { animation-delay: 1.5s; }

@keyframes fadeInText {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Placeholder for scroll animations - typically JS-driven */
[data-animate-on-scroll] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate-on-scroll].is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* 11. Page-Specific Styles
-------------------------------------------------- */
/* success.html */
body[data-barba-namespace="success"] .page-container, /* Assuming page-container is the main wrapper */
.success-page-container { /* If a dedicated wrapper exists on success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--neumorphic-bg);
}
body[data-barba-namespace="success"] .main-content {
    padding-top: 0; /* Override if header not on success page or is different */
    width: 100%;
    max-width: 600px; /* Limit content width */
}
body[data-barba-namespace="success"] .neumorphic-card {
    padding: 2rem;
}
body[data-barba-namespace="success"] .title {
    color: var(--neumorphic-accent1);
    font-size: 2.5rem;
}
body[data-barba-namespace="success"] p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* privacy.html & terms.html */
body[data-barba-namespace="privacy"] .main-content,
body[data-barba-namespace="terms"] .main-content {
    padding-top: calc(var(--header-height) + 30px); /* Header height + extra space */
    padding-bottom: 40px;
    min-height: calc(100vh - var(--header-height) - 100px); /* Approx footer height */
}
body[data-barba-namespace="privacy"] .section,
body[data-barba-namespace="terms"] .section {
    text-align: left; /* Content is typically left-aligned */
}
body[data-barba-namespace="privacy"] .content h2,
body[data-barba-namespace="terms"] .content h2 {
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--neumorphic-primary);
}
body[data-barba-namespace="privacy"] .content p,
body[data-barba-namespace="terms"] .content p,
body[data-barba-namespace="privacy"] .content ul li,
body[data-barba-namespace="terms"] .content ul li {
    text-align: left;
    line-height: 1.8;
}


/* 12. Responsive Adjustments (Bulma handles most structural responsiveness)
-------------------------------------------------- */
@media screen and (max-width: 768px) {
    .hero .hero-title {
        font-size: 2.2rem;
    }
    .hero .hero-subtitle {
        font-size: 1.1rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .neumorphic-card {
        padding: 1rem;
    }
    .neumorphic-card .card-image.image-container {
        height: 180px; /* Adjust card image height for mobile */
    }
    .stat-number {
        font-size: 2.5rem;
    }
    .stat-label {
        font-size: 0.9rem;
    }
    .contact-form .field {
        margin-bottom: 1rem;
    }
    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: 1.5rem;
    }
}