/* style.css */

/* -------------------------------------------------------------------------- */
/*                                 VARIABLES                                  */
/* -------------------------------------------------------------------------- */
:root {
    --bg-color: #e0e5ec; /* Light grayish blue, neomorphism base */
    --bg-color-darker: #c8d0e7; /* Slightly darker for depth */
    --bg-color-lighter: #f0f5fc; /* Slightly lighter for raised elements */

    --text-color: #363636; /* Bulma's default, good contrast */
    --text-color-light: #55575c; /* Slightly lighter text */
    --text-color-headings: #2c3e50; /* Darker blue-gray for headings */
    --text-color-white: #FFFFFF;

    --primary-color: #4A90E2; /* Calm, trustworthy blue */
    --primary-color-dark: #357ABD;
    --primary-color-light: #67ABF3;
    --primary-text-color: var(--text-color-white); /* Text on primary color buttons */

    --accent-color: #50E3C2; /* Modern teal/mint accent */
    --accent-color-dark: #38A89D;

    --neutral-light-gray: #f5f7fa;
    --neutral-mid-gray: #d3dce6;
    --neutral-dark-gray: #7f8c9b;

    --shadow-light-strong: rgba(255, 255, 255, 0.9);
    --shadow-dark-strong: rgba(163, 177, 198, 0.7);
    --shadow-light-soft: rgba(255, 255, 255, 0.5);
    --shadow-dark-soft: rgba(180, 190, 210, 0.5);


    --inset-shadow-light: rgba(255, 255, 255, 0.7);
    --inset-shadow-dark: rgba(174, 174, 192, 0.4);

    --font-family-headings: 'Poppins', sans-serif;
    --font-family-body: 'Work Sans', sans-serif;

    --neumorphic-distance-sm: 4px;
    --neumorphic-blur-sm: 8px;
    --neumorphic-distance-md: 6px;
    --neumorphic-blur-md: 12px;
    --neumorphic-distance-lg: 8px;
    --neumorphic-blur-lg: 16px;

    --neumorphic-radius-sm: 10px;
    --neumorphic-radius-md: 15px;
    --neumorphic-radius-lg: 20px;

    --transition-speed: 0.3s ease-in-out;
    --transition-morph: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* For morphing */

    --header-height: 70px; /* Approx height of sticky header */
}

/* -------------------------------------------------------------------------- */
/*                                GLOBAL STYLES                               */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    background-color: var(--bg-color);
}

body {
    font-family: var(--font-family-body);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-family-headings);
    color: var(--text-color-headings);
    font-weight: 600; /* Poppins bold */
}

.title {
    margin-bottom: 1rem; /* Default Bulma is 1.5rem, can adjust */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.subtitle {
    color: var(--text-color-light);
    font-weight: 400; /* Work Sans regular for subtitles */
}

p {
    margin-bottom: 1rem;
    color: var(--text-color-light);
    font-size: 1.05rem; /* Slightly larger body text for readability */
}

a {
    color: var(--primary-color);
    transition: color var(--transition-speed);
    font-weight: 500; /* Work Sans medium for links */
}

a:hover {
    color: var(--primary-color-dark);
}

/* Section styling */
.section {
    padding: 4rem 1.5rem; /* Reduced top/bottom padding from Bulma's 3rem 1.5rem */
    position: relative; /* For pseudo-elements like curved backgrounds */
    background-color: var(--bg-color);
}

.section-curved-bg {
    position: relative;
    overflow: hidden; /* To contain the curve */
    background-color: var(--bg-color-darker); /* Slightly different bg for visual separation */
}

.section-curved-bg::before {
    content: '';
    position: absolute;
    bottom: 99%; /* Position just above the section */
    left: 0;
    width: 100%;
    height: 80px; /* Height of the curve */
    background-color: var(--bg-color); /* Match the previous section's background */
    border-bottom-left-radius: 50% 40px; /* Create an upward curve */
    border-bottom-right-radius: 50% 40px;
    z-index: 1;
}
.section-curved-bg:nth-child(odd)::before { /* Alternate curve direction */
    top: 99%;
    bottom: auto;
    background-color: var(--bg-color-darker); /* Match current section's bg */
    border-top-left-radius: 50% 40px;
    border-top-right-radius: 50% 40px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.section-title, .section-subtitle {
    text-align: center;
    margin-bottom: 1.5rem; /* Ensure space below title */
}
.section-title {
    font-size: 2.5rem; /* Bulma .title.is-2 */
    font-weight: 700; /* Poppins extra-bold */
    color: var(--text-color-headings);
    text-shadow: 1px 1px 3px var(--shadow-dark-soft);
}
.section-subtitle {
    font-size: 1.25rem; /* Bulma .subtitle.is-5 */
    color: var(--text-color-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem; /* More space after subtitle */
}

/* Privacy & Terms Page Specific Padding */
body.privacy-page main > .section:first-child,
body.terms-page main > .section:first-child {
    padding-top: calc(var(--header-height) + 4rem); /* Header height + desired top padding */
}


/* -------------------------------------------------------------------------- */
/*                                NEOMORPHISM                                 */
/* -------------------------------------------------------------------------- */

.neomorphic-card,
.neomorphic-button,
.neomorphic-input,
.neomorphic-textarea,
.neomorphic-image-frame { /* For images that need a frame, not just a shadow */
    background-color: var(--bg-color);
    border-radius: var(--neumorphic-radius-md);
    box-shadow:
        var(--neumorphic-distance-md) var(--neumorphic-distance-md) var(--neumorphic-blur-md) var(--shadow-dark-strong),
        calc(-1 * var(--neumorphic-distance-md)) calc(-1 * var(--neumorphic-distance-md)) var(--neumorphic-blur-md) var(--shadow-light-strong);
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
    position: relative; /* For pseudo elements if needed */
}

.neomorphic-card {
    padding: 2rem;
}

/* Inset Neomorphism (for pressed state or inputs) */
.neomorphic-inset,
.neomorphic-input:focus,
.neomorphic-textarea:focus,
.neomorphic-button:active {
    box-shadow:
        inset var(--neumorphic-distance-sm) var(--neumorphic-distance-sm) var(--neumorphic-blur-sm) var(--inset-shadow-dark),
        inset calc(-1 * var(--neumorphic-distance-sm)) calc(-1 * var(--neumorphic-distance-sm)) var(--neumorphic-blur-sm) var(--inset-shadow-light);
}
.neomorphic-button:active {
    transform: translateY(2px);
}


/* Global Button Styles (extends Bulma's .button) */
.button.neomorphic-button,
button.neomorphic-button, /* for <button> elements */
input[type='submit'].neomorphic-button { /* for input submit */
    font-family: var(--font-family-headings);
    font-weight: 600;
    border: none;
    padding: 0.8em 1.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border-radius: var(--neumorphic-radius-md);
    box-shadow:
        var(--neumorphic-distance-md) var(--neumorphic-distance-md) var(--neumorphic-blur-md) var(--shadow-dark-strong),
        calc(-1 * var(--neumorphic-distance-md)) calc(-1 * var(--neumorphic-distance-md)) var(--neumorphic-blur-md) var(--shadow-light-strong);
    transition: all var(--transition-speed);
}

.button.neomorphic-button:hover,
button.neomorphic-button:hover,
input[type='submit'].neomorphic-button:hover {
    background-color: var(--primary-color-light);
    color: var(--primary-text-color);
    transform: translateY(-2px) scale(1.02); /* Slight lift and scale */
    box-shadow:
        var(--neumorphic-distance-lg) var(--neumorphic-distance-lg) var(--neumorphic-blur-lg) var(--shadow-dark-strong),
        calc(-1 * var(--neumorphic-distance-lg)) calc(-1 * var(--neumorphic-distance-lg)) var(--neumorphic-blur-lg) var(--shadow-light-strong);
}

.button.neomorphic-button:active,
button.neomorphic-button:active,
input[type='submit'].neomorphic-button:active {
    background-color: var(--primary-color-dark);
    transform: translateY(1px) scale(0.98); /* Pressed effect */
    box-shadow:
        inset var(--neumorphic-distance-sm) var(--neumorphic-distance-sm) var(--neumorphic-blur-sm) var(--inset-shadow-dark),
        inset calc(-1 * var(--neumorphic-distance-sm)) calc(-1 * var(--neumorphic-distance-sm)) var(--neumorphic-blur-sm) var(--inset-shadow-light);
}

.neomorphic-button-light { /* For buttons on dark backgrounds, like Hero */
    background-color: var(--bg-color-lighter); /* Or a light accent */
    color: var(--primary-color);
}
.neomorphic-button-light:hover {
    background-color: var(--white-color);
    color: var(--primary-color-dark);
}

.neomorphic-button-small {
    padding: 0.6em 1.2em;
    font-size: 0.9rem;
}

/* Form Elements */
.neomorphic-input,
.neomorphic-textarea {
    border: none;
    padding: 0.8em 1.2em;
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--text-color);
    width: 100%;
    background-color: var(--bg-color); /* Match main background */
    border-radius: var(--neumorphic-radius-md);
    box-shadow:
        inset var(--neumorphic-distance-sm) var(--neumorphic-distance-sm) var(--neumorphic-blur-sm) var(--inset-shadow-dark),
        inset calc(-1 * var(--neumorphic-distance-sm)) calc(-1 * var(--neumorphic-distance-sm)) var(--neumorphic-blur-sm) var(--inset-shadow-light);
    transition: box-shadow var(--transition-speed);
}
.neomorphic-input::placeholder,
.neomorphic-textarea::placeholder {
    color: var(--neutral-dark-gray);
}

.neomorphic-input:focus,
.neomorphic-textarea:focus {
    outline: none;
    box-shadow:
        var(--neumorphic-distance-sm) var(--neumorphic-distance-sm) var(--neumorphic-blur-sm) var(--shadow-dark-strong),
        calc(-1 * var(--neumorphic-distance-sm)) calc(-1 * var(--neumorphic-distance-sm)) var(--neumorphic-blur-sm) var(--shadow-light-strong),
        0 0 0 2px var(--primary-color-light); /* Focus ring */
}

.neomorphic-form .label {
    color: var(--text-color-headings);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Neomorphic Image with subtle shadow */
.neomorphic-image {
    border-radius: var(--neumorphic-radius-md);
    box-shadow:
        var(--neumorphic-distance-md) var(--neumorphic-distance-md) var(--neumorphic-blur-md) var(--shadow-dark-soft),
        calc(-1 * var(--neumorphic-distance-md)) calc(-1 * var(--neumorphic-distance-md)) var(--neumorphic-blur-md) var(--shadow-light-soft);
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Ensure images cover their containers */
}


/* -------------------------------------------------------------------------- */
/*                                   HEADER                                   */
/* -------------------------------------------------------------------------- */
.header.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(224, 229, 236, 0.85); /* Semi-transparent bg-color */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-speed);
}

.navbar.is-transparent {
    background-color: transparent !important; /* Override Bulma */
    height: var(--header-height);
}
.navbar-item, .navbar-link {
    color: var(--text-color-headings);
    font-family: var(--font-family-headings);
    font-weight: 500;
    font-size: 1.05rem;
    transition: color var(--transition-speed), transform var(--transition-speed);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    transform: translateY(-2px);
}
.navbar-burger {
    color: var(--text-color-headings);
}
.navbar-burger:hover {
    background-color: transparent;
    color: var(--primary-color);
}
.logo-text {
    font-size: 1.8rem;
    font-weight: 700; /* Poppins Bold */
    color: var(--primary-color) !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(224, 229, 236, 0.98); /* Solid for mobile menu */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-radius: 0 0 var(--neumorphic-radius-sm) var(--neumorphic-radius-sm);
    }
    .navbar-item {
        padding: 0.75rem 1rem;
    }
}

/* -------------------------------------------------------------------------- */
/*                                HERO SECTION                                */
/* -------------------------------------------------------------------------- */
.hero-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Dark overlay is applied via inline style in HTML for dynamic image URL */
}
.hero-section .hero-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}
.hero-section .title,
.hero-section .subtitle {
    color: var(--text-color-white) !important; /* IMPORTANT: Hero text must be white */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.hero-section .title {
    font-size: 3.5rem;
    font-weight: 700; /* Poppins Bold */
    margin-bottom: 1.5rem;
}
.hero-section .subtitle {
    font-size: 1.5rem;
    font-weight: 400; /* Work Sans Regular */
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.hero-section .button {
    margin-top: 1rem;
}

/* Animations for Hero text */
.animated-text {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s 0.5s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animated-text-delay {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animated-button {
    opacity: 0;
    transform: scale(0.8);
    animation: scaleUp 0.6s 1.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes scaleUp {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* -------------------------------------------------------------------------- */
/*                              OUR PROCESS (TIMELINE)                        */
/* -------------------------------------------------------------------------- */
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.timeline-container::after { /* The central line */
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--primary-color-light);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
    box-shadow: 0 0 8px var(--primary-color-light);
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: transparent;
    width: 50%;
}
/* Alternating sides */
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 70px; /* Space for marker + line */
}
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 70px; /* Space for marker + line */
}
.timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
}
.timeline-item:nth-child(even) .timeline-content {
    text-align: left;
}

/* The circular marker */
.timeline-marker {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px; /* Half of width to center on the line */
    background-color: var(--bg-color);
    border: 4px solid var(--primary-color);
    top: 20px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--bg-color), 0 0 10px var(--primary-color);
}
.timeline-item:nth-child(odd) .timeline-marker {
    right: -10px;
}
.timeline-item:nth-child(even) .timeline-marker {
    left: -10px;
}

.timeline-content {
    padding: 20px 30px;
    /* neomorphic-card styles will be applied via class */
    position: relative;
}
.timeline-content h3 {
    margin-top: 0;
    color: var(--primary-color);
}
.timeline-content p {
    font-size: 0.95rem;
}

/* Responsive Timeline */
@media screen and (max-width: 768px) {
    .timeline-container::after {
        left: 31px; /* Move line to the left */
    }
    .timeline-item {
        width: 100%;
        padding-left: 70px; /* Content to the right of the line */
        padding-right: 25px;
    }
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
        padding-left: 70px;
        padding-right: 15px;
    }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        text-align: left;
    }
    .timeline-marker {
        left: 21px; /* Marker on the line */
        right: auto;
    }
     .timeline-item:nth-child(odd) .timeline-marker,
    .timeline-item:nth-child(even) .timeline-marker {
        left: 21px;
    }
}

/* -------------------------------------------------------------------------- */
/*                                 METHODOLOGY                                */
/* -------------------------------------------------------------------------- */
.stat-widget {
    padding: 1.5rem;
    text-align: center;
}
.stat-widget .title.is-1 {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.stat-widget .subtitle.is-5 {
    color: var(--text-color-light);
    font-size: 1rem;
    line-height: 1.3;
}
#methodology .columns.is-vcentered .column img {
    max-width: 100%;
    border-radius: var(--neumorphic-radius-md);
}

/* -------------------------------------------------------------------------- */
/*                             CARDS (GENERAL)                                */
/* -------------------------------------------------------------------------- */
.card.neomorphic-card { /* General card styling */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a row have same height if in Bulma columns */
    overflow: hidden; /* To contain image effects if any */
}

.card .card-image { /* Bulma's card-image */
    position: relative;
    display: block; /* Ensure it takes up space */
}

.card .card-image figure.image { /* Bulma's figure.image */
    margin: 0; /* Reset margin if any */
    overflow: hidden; /* Important for object-fit */
    height: 200px; /* STROGO: Fixed height for image containers */
    display: flex; /* For centering image */
    align-items: center; /* For centering image */
    justify-content: center; /* For centering image */
}

.card .card-image figure.image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO: Cover the container */
    transition: transform var(--transition-speed);
    display: block; /* Remove extra space below image */
}

.card:hover .card-image figure.image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card .card-content {
    padding: 1.5rem;
    text-align: center; /* STROGO: Center content */
    flex-grow: 1; /* Allow content to fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if present */
}

.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: 0.75rem;
}
.card .card-content .title {
    font-size: 1.3rem;
}
.card .card-content .content {
    font-size: 0.95rem;
    color: var(--text-color-light);
    margin-bottom: 1rem; /* Space before button */
    flex-grow: 1;
}

.card .card-content .button {
    margin-top: auto; /* Push button to bottom if card-content is flex */
    align-self: center; /* Center button */
}


/* Testimonial Card specific */
.testimonial-card .media {
    align-items: center;
    margin-bottom: 1rem;
    text-align: left; /* Overrides general card content center for media block */
}
.testimonial-card .media-left {
    margin-right: 1rem;
}
.testimonial-card .image.is-96x96 img {
    border-radius: 50%; /* Rounded avatar */
    box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 5px var(--primary-color-light);
}
.testimonial-card .media-content .title {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}
.testimonial-card .media-content .subtitle {
    font-size: 0.9rem;
    color: var(--neutral-dark-gray);
}
.testimonial-card .content {
    font-style: italic;
    font-size: 1rem;
    text-align: left; /* Overrides general card content center for quote */
}
.testimonial-card .content small {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    color: var(--neutral-dark-gray);
    font-size: 0.85rem;
}

/* Blog Card Specific */
.blog-card .card-content .title {
    min-height: 3.2em; /* approx 2 lines of text */
}
.blog-card .card-content .button.is-link.is-outlined {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: none; /* Remove neomorphic shadow for outlined button */
}
.blog-card .card-content .button.is-link.is-outlined:hover {
    background-color: var(--primary-color-light);
    color: var(--white-color);
    border-color: var(--primary-color-light);
}
/* Read More Link */
.button.is-link.is-outlined.neomorphic-button-small {
    text-transform: none;
    font-weight: 500;
}


/* Portfolio Card Specific - uses general card styles mostly */
.portfolio-card .card-content .title {
    font-size: 1.2rem;
}

/* -------------------------------------------------------------------------- */
/*                                 INNOVATION                                 */
/* -------------------------------------------------------------------------- */
/* Bulma's switch is used. We can enhance its neomorphic feel if needed */
.switch[type="checkbox"] + label {
    font-size: 1rem;
    color: var(--text-color-light);
    padding-left: 0.5em;
}
.switch[type="checkbox"]:checked + label {
    color: var(--primary-color);
}
/* Basic neomorphism for the switch track if desired, though Bulma's is flat */
.switch[type="checkbox"] + label::before { /* The track */
    background: var(--bg-color-darker);
    border-radius: var(--neumorphic-radius-sm);
    box-shadow: inset 1px 1px 2px var(--shadow-dark-soft), inset -1px -1px 2px var(--shadow-light-soft);
}
.switch[type="checkbox"]:checked + label::before {
    background: var(--primary-color-light);
}
.switch[type="checkbox"] + label::after { /* The thumb */
    background: var(--bg-color);
    border-radius: 50%;
    box-shadow: 1px 1px 2px var(--shadow-dark-strong), -1px -1px 2px var(--shadow-light-strong);
}


/* -------------------------------------------------------------------------- */
/*                               EVENTS CALENDAR                              */
/* -------------------------------------------------------------------------- */
.event-item {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.event-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}
.event-item p {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.event-item p .has-text-weight-bold {
    color: var(--text-color-headings);
}

/* -------------------------------------------------------------------------- */
/*                                  COMMUNITY                                 */
/* -------------------------------------------------------------------------- */
#community .columns.is-vcentered .column img {
    max-width: 100%;
    border-radius: var(--neumorphic-radius-md);
}

/* -------------------------------------------------------------------------- */
/*                                   PARTNERS                                 */
/* -------------------------------------------------------------------------- */
.partner-logos .column {
    display: flex;
    justify-content: center;
    align-items: center;
}
.partner-logo-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px; /* Ensure consistent height for cards */
    text-align: center;
}
.partner-logo-card img {
    max-height: 70px; /* Control logo size */
    width: auto;
    margin-bottom: 1rem;
    filter: grayscale(80%);
    transition: filter var(--transition-speed);
}
.partner-logo-card:hover img {
    filter: grayscale(0%);
}
.partner-logo-card .partner-name {
    font-size: 0.9rem;
    color: var(--text-color-light);
    font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/*                             EXTERNAL RESOURCES                             */
/* -------------------------------------------------------------------------- */
.resource-card {
    padding: 1.5rem;
    height: 100%;
}
.resource-card h4.title.is-5 {
    margin-bottom: 0.5rem;
}
.resource-card h4.title.is-5 a {
    color: var(--primary-color);
    font-weight: 600;
}
.resource-card h4.title.is-5 a:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}
.resource-card p {
    font-size: 0.9rem;
    color: var(--text-color-light);
}

/* -------------------------------------------------------------------------- */
/*                                CONTACT FORM                                */
/* -------------------------------------------------------------------------- */
#contact-form-section .neomorphic-form {
    background-color: var(--bg-color-lighter); /* Slightly different background for the form area */
    padding: 2.5rem;
    border-radius: var(--neumorphic-radius-lg);
    box-shadow:
        var(--neumorphic-distance-lg) var(--neumorphic-distance-lg) var(--neumorphic-blur-lg) var(--shadow-dark-strong),
        calc(-1 * var(--neumorphic-distance-lg)) calc(-1 * var(--neumorphic-distance-lg)) var(--neumorphic-blur-lg) var(--shadow-light-strong);
}
.contact-info-block {
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--bg-color);
    border-radius: var(--neumorphic-radius-md);
     box-shadow:
        var(--neumorphic-distance-md) var(--neumorphic-distance-md) var(--neumorphic-blur-md) var(--shadow-dark-soft),
        calc(-1 * var(--neumorphic-distance-md)) calc(-1 * var(--neumorphic-distance-md)) var(--neumorphic-blur-md) var(--shadow-light-soft);
}
.contact-info-block h3 {
    color: var(--primary-color);
}
.contact-info-block p {
    font-size: 1.1rem;
    color: var(--text-color-light);
}
.contact-info-block p strong {
    color: var(--text-color-headings);
}

/* -------------------------------------------------------------------------- */
/*                                   FOOTER                                   */
/* -------------------------------------------------------------------------- */
.footer.neomorphic-footer {
    background-color: var(--bg-color-darker); /* Darker base for footer */
    color: var(--text-color-light);
    padding: 3rem 1.5rem 2rem; /* Less bottom padding */
    border-top-left-radius: 30px; /* Curved top edge */
    border-top-right-radius: 30px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
}
.footer .footer-title {
    color: var(--text-color-headings);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.footer p, .footer li {
    font-size: 0.95rem;
    color: var(--text-color-light); /* Ensure good contrast */
}
.footer a {
    color: var(--primary-color);
    font-weight: 500;
}
.footer a:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}
.footer ul {
    list-style: none;
    margin-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer .content.has-text-centered p {
    font-size: 0.9rem;
    color: var(--neutral-dark-gray); /* Lighter for copyright */
    margin-top: 2rem;
}
/* Social media text links */
.footer .column ul li a[target="_blank"] { /* Style for social media links */
    display: inline-block;
    padding: 0.2em 0;
    position: relative;
}
.footer .column ul li a[target="_blank"]::after { /* Underline effect */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--primary-color);
    transition: width .3s ease;
}
.footer .column ul li a[target="_blank"]:hover::after {
    width: 100%;
    left: 0;
    background: var(--primary-color-dark);
}

/* -------------------------------------------------------------------------- */
/*                               SUCCESS PAGE                                 */
/* -------------------------------------------------------------------------- */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color);
}
.success-page main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.success-page .success-container {
    background-color: var(--bg-color-lighter);
    padding: 3rem;
    border-radius: var(--neumorphic-radius-lg);
    box-shadow:
        var(--neumorphic-distance-lg) var(--neumorphic-distance-lg) var(--neumorphic-blur-lg) var(--shadow-dark-strong),
        calc(-1 * var(--neumorphic-distance-lg)) calc(-1 * var(--neumorphic-distance-lg)) var(--neumorphic-blur-lg) var(--shadow-light-strong);
    max-width: 600px;
}
.success-page .success-icon { /* Placeholder for an icon */
    font-size: 4rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}
.success-page .title {
    color: var(--primary-color);
}

/* -------------------------------------------------------------------------- */
/*                         SCROLL ANIMATIONS & UTILITIES                      */
/* -------------------------------------------------------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--transition-morph), transform 0.8s var(--transition-morph);
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.parallax-bg { /* For JS to target for parallax */
    background-attachment: fixed; /* Simple parallax, JS can do more complex */
}

/* Sticky Header Adjustment for Anchors */
html {
  scroll-padding-top: var(--header-height); /* Adjust scroll position for fixed header */
}

/* Cookie Consent Popup (already styled inline in HTML, just ensure it's above all) */
#cookieConsentPopup {
    z-index: 99999 !important;
}


/* Responsive adjustments for Bulma columns */
@media screen and (min-width: 769px) {
    .columns.is-two-thirds-tablet .column.is-two-thirds {
        flex: none;
        width: 66.6666%;
    }
    /* Ensure larger columns for readability on wider screens if needed */
    .container.is-readable-desktop {
        max-width: 960px; /* Or Bulma's is-desktop */
    }
}