/* style.css */

/* --------------------
   CSS Variables
   -------------------- */
:root {
    /* Tetradic Color Scheme Example */
    /* Base: Blue-Green */
    --primary-color: #0A7E8C; /* Tealish Blue */
    --primary-color-dark: #075E68;
    --primary-color-light: #5AB6C3;
    --primary-rgb: 10, 126, 140;

    /* Complementary (or part of Tetrad) */
    --secondary-color: #D95A4C; /* Coral Red */
    --secondary-color-dark: #A73B2E;
    --secondary-rgb: 217, 90, 76;

    /* Accent Colors for Tetrad */
    --accent-color-1: #4CAF50; /* Green (Success, Positive) */
    --accent-color-1-dark: #388E3C;
    --accent-1-rgb: 76, 175, 80;

    --accent-color-2: #FF9800; /* Orange (Attention, Other Accents) */
    --accent-color-2-dark: #F57C00;
    --accent-2-rgb: 255, 152, 0;

    /* Text & Background Colors */
    --text-color: #333333; /* Dark gray for body text on light backgrounds */
    --text-color-light: #FFFFFF;
    --text-color-medium: #555555;
    --text-color-darker: #222222; /* For important titles on light bg */
    --text-on-primary: var(--text-color-light);
    --text-on-secondary: var(--text-color-light);

    --background-color: #F8F9FA; /* Very light gray / Off-white */
    --background-color-dark: #121A26; /* Dark background for some sections */
    --background-color-light-accent: #EBF5F7; /* Light accent for sections like external-resources */

    /* Glassmorphism & Borders */
    --glass-bg-light: rgba(255, 255, 255, 0.15);
    --glass-bg-dark: rgba(10, 20, 30, 0.25);
    --glass-border-light: rgba(255, 255, 255, 0.25);
    --glass-border-dark: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-dark-bg: rgba(0, 0, 0, 0.3);

    /* Fonts */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Work Sans', sans-serif;

    /* Spacing & Sizing */
    --section-padding: 4rem 1.5rem; /* Default section padding */
    --card-border-radius: 12px;
    --button-border-radius: 8px;
    --header-height: 70px; /* Approximate height of the sticky header */
}

/* --------------------
   Base & Reset Styles
   -------------------- */
*,
*::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);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.main-wrapper {
    overflow-x: hidden; /* Prevents horizontal scroll from animations */
}

/* --------------------
   Typography
   -------------------- */
h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes */
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--text-color-darker);
    line-height: 1.3;
}

.title.is-1 { font-size: 3rem; }
.title.is-2 { font-size: 2.5rem; margin-bottom: 1rem; }
.title.is-3 { font-size: 2rem; margin-bottom: 0.75rem; }
.title.is-4 { font-size: 1.5rem; margin-bottom: 0.5rem; }

p {
    margin-bottom: 1rem;
    font-family: var(--font-secondary);
    color: var(--text-color-medium);
}

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

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

.section {
    padding: var(--section-padding);
}

.container { /* Bulma container */
    max-width: 1140px; /* Or your preferred max width */
    margin: 0 auto;
    position: relative; /* For absolutely positioned children */
}

/* --------------------
   Global Component Styles
   -------------------- */

/* --- Buttons --- */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 0.8em 1.8em;
    border-radius: var(--button-border-radius);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
}

.button.is-primary, button.is-primary {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}
.button.is-primary:hover, button.is-primary:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
}

.button.is-secondary { /* Example for another button type */
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
}
.button.is-secondary:hover {
    background-color: var(--secondary-color-dark);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(var(--secondary-rgb), 0.3);
}

.glass-button {
    background: rgba(var(--primary-rgb), 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--primary-color-light);
    color: var(--text-color-light);
}
.glass-button:hover {
    background: rgba(var(--primary-rgb), 0.9);
    border-color: var(--text-color-light);
}

.glass-button-hero { /* For hero specific button */
    font-size: 1.1rem;
    padding: 0.9em 2.2em;
    background: rgba(var(--accent-color-2-rgb), 0.8); /* Using accent 2 for contrast */
    color: var(--text-color-darker);
    border: 1px solid var(--accent-color-2);
}
.glass-button-hero:hover {
    background: var(--accent-color-2);
    color: var(--text-color-darker);
    box-shadow: 0 6px 20px rgba(var(--accent-2-rgb), 0.4);
}


/* --- Forms (Modern Inputs for Contact Section) --- */
.modern-input, .modern-textarea {
    background-color: rgba(255, 255, 255, 0.1); /* Assuming form on dark bg */
    border: 1px solid var(--glass-border-dark);
    border-radius: var(--button-border-radius);
    padding: 14px 18px;
    color: var(--text-color-light);
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}
.modern-input::placeholder, .modern-textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.modern-input:focus, .modern-textarea:focus {
    outline: none;
    border-color: var(--accent-color-1);
    box-shadow: 0 0 0 3px rgba(var(--accent-1-rgb), 0.25);
}
.label.has-text-white {
    color: var(--text-color-light) !important;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
}
.checkbox.has-text-white, .checkbox.has-text-white a {
    color: rgba(255,255,255,0.8) !important;
    font-size: 0.9rem;
}
.checkbox.has-text-white a {
    text-decoration: underline;
}
.checkbox.has-text-white a:hover {
    color: var(--accent-color-1) !important;
}
.field:not(:last-child) { /* Bulma field adjustment */
    margin-bottom: 1.25rem;
}


/* --- Cards (Info, Success, Team) --- */
.card.glass-effect, .card .glass-effect { /* If .glass-effect is applied directly or to a child */
    background: var(--glass-bg-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-light);
    box-shadow: 0 5px 25px var(--shadow-color);
    border-radius: var(--card-border-radius);
    overflow: hidden; /* Important for child elements with radius */
}

/* Base card styles */
.card {
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a row if using Bulma columns */
    text-align: center; /* Center content within the card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.card-image.image-container { /* This div wraps the img */
    width: 100%;
    max-height: 220px; /* Fixed height for image area */
    min-height: 200px; /* Ensure some height */
    overflow: hidden;
    margin-bottom: 0; /* Image touches content usually or small margin */
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-top-left-radius: var(--card-border-radius); /* If card itself has radius */
    border-top-right-radius: var(--card-border-radius);
}
.team-card .card-image.image-container img { /* For circular team member photos */
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    margin: 1.5rem auto 1rem auto; /* Centering and spacing */
    border: 4px solid var(--primary-color-light);
}
.team-card .card-image.image-container {
    max-height: none; /* Override for team card image container */
    min-height: auto;
}


.card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Default, can be space-between if buttons at bottom */
}
.card-title { /* Already covered by .title styles, but can be specific */
    color: var(--text-color-darker);
    font-weight: 700;
}
.info-card .card-title, .success-card .card-title, .team-card .card-title {
    margin-top: 0;
}

.info-card p, .success-card p, .team-card p {
    font-size: 0.95rem;
    color: var(--text-color-medium);
}
.success-card {
    border-left: 6px solid var(--accent-color-1);
}
.team-card .subtitle.is-6 {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* --- Accordion --- */
.accordion-container.glass-effect-dark {
    padding: 1.5rem;
    background: var(--glass-bg-dark);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--glass-border-dark);
}
.accordion-item {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 0.5rem;
}
.accordion-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.accordion-header {
    background: transparent;
    border: none;
    color: var(--text-color-light);
    padding: 1rem 0.5rem;
    width: 100%;
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}
.accordion-header:hover {
    /* background-color: rgba(255,255,255,0.05); */
    color: var(--accent-color-1);
}
.accordion-icon {
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.3s ease-in-out;
}
.accordion-header.active .accordion-icon {
    transform: rotate(45deg);
    color: var(--accent-color-1);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out;
    color: rgba(255,255,255,0.8);
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}
.accordion-content p {
    padding: 0.5rem 0.5rem 1rem 0.5rem; /* Padding inside the content */
    margin:0;
}


/* --- Modals --- */
.modal-card.glass-effect {
    background: var(--glass-bg-light);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border-light);
    box-shadow: 0 8px 32px 0 var(--shadow-color);
    border-radius: var(--card-border-radius);
}
.modal-card-head, .modal-card-foot {
    background-color: rgba(255,255,255,0.1);
    border-bottom: 1px solid var(--glass-border-light);
    border-top: 1px solid var(--glass-border-light);
}
.modal-card-title {
    color: var(--text-color-darker);
}
.modal-card-body {
    color: var(--text-color);
}
.modal-background {
    background-color: rgba(10, 10, 10, 0.75); /* Darker overlay */
}


/* --------------------
   Header & Navigation
   -------------------- */
.header.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    padding: 0.5rem 0; /* Initial padding */
}
.header.sticky-header.scrolled { /* Class added by JS on scroll */
    background-color: rgba(var(--primary-rgb), 0.9); /* Darker glass on scroll */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0; /* Reduced padding on scroll */
}
.navbar.is-transparent {
    background-color: transparent;
}
.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 500;
    color: var(--text-color-light);
    transition: color 0.3s ease;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active {
    background-color: transparent !important;
    color: var(--accent-color-2) !important; /* Use a bright accent for hover/active */
}
.logo-text {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--text-color-light) !important;
    letter-spacing: -0.5px;
}
.navbar-burger {
    color: var(--text-color-light);
    height: var(--header-height);
    width: var(--header-height);
}
.navbar-burger span {
    background-color: var(--text-color-light);
    height: 2px;
}

/* Mobile Menu */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: rgba(var(--primary-rgb), 0.97); /* Solid, slightly transparent background */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        padding: 0.5rem 0;
        position: absolute; /* Ensures it's correctly positioned */
        width: 100%;
        left: 0;
        border-bottom-left-radius: var(--card-border-radius);
        border-bottom-right-radius: var(--card-border-radius);
    }
    .navbar-menu .navbar-item {
        padding: 0.75rem 1.5rem;
        color: var(--text-color-light);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .navbar-menu .navbar-item:last-child {
        border-bottom: none;
    }
    .navbar-menu .navbar-item:hover,
    .navbar-menu .navbar-item.is-active {
        color: var(--accent-color-2) !important;
        background-color: rgba(255,255,255,0.05) !important;
    }
    .navbar-end .navbar-item .button { /* Ensure button looks good in mobile menu */
        width: calc(100% - 2rem);
        margin: 0.5rem 1rem;
    }
}

/* --------------------
   Section Specific Styles
   -------------------- */

/* --- Hero Section --- */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--text-color-light);
}
.hero.is-fullheight .hero-body { /* Bulma adjustment */
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive font size */
    font-weight: 700;
    color: var(--text-color-light) !important;
    text-shadow: 2px 3px 10px rgba(0, 0, 0, 0.6);
    margin-bottom: 1rem;
    line-height: 1.2;
}
.hero-subtitle {
    font-family: var(--font-secondary);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--text-color-light) !important;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 2.5rem;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
.scroll-down-icon {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounceUpDown 2.5s infinite ease-in-out;
    opacity: 0.8;
}
.scroll-down-icon svg path {
    stroke-width: 1.5px;
}
@keyframes bounceUpDown {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -12px); }
}

/* Generic Section Title Styling */
.section-title {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--text-color-darker);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.75rem;
    text-align: center;
}
.section-title.has-text-white { /* For sections with dark backgrounds */
    color: var(--text-color-light) !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.section-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}
.section-title.has-text-white::after {
    background-color: var(--accent-color-1);
}

.section .subtitle { /* Subtitle common for sections */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    color: var(--text-color-medium);
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
}
.section .subtitle.has-text-white,
.section .subtitle.has-text-light {
    color: rgba(255,255,255,0.85) !important;
}

/* --- Insights Section --- */
.insights-section {
    background-color: var(--background-color);
}

/* --- Research Section (Accordion) --- */
.research-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color-light);
}

/* --- Success Stories Section --- */
.success-stories-section {
    background-color: var(--background-color-light-accent);
}

/* --- Team Section --- */
.team-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- External Resources Section --- */
.external-resources-section {
    background-color: var(--background-color);
}
.resource-list ul {
    list-style: none;
    padding-left: 0;
}
.resource-item.glass-effect {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--glass-bg-light); /* Ensure glass effect if not inherited */
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--card-border-radius);
}
.resource-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.resource-title a {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.2rem;
    text-decoration: none;
    display: inline-block;
}
.resource-title a:hover {
    text-decoration: underline;
    color: var(--primary-color-dark);
}
.resource-item p {
    font-family: var(--font-secondary);
    color: var(--text-color-medium);
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Contact Section --- */
.contact-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color-light);
}
.contact-form-container.glass-effect-dark {
    padding: 2.5rem;
    background: var(--glass-bg-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--glass-border-dark);
    box-shadow: 0 8px 30px var(--shadow-color-dark-bg);
}
.contact-form-container .section-title {
    margin-bottom: 0.5rem; /* Less margin for title inside form box */
}
.contact-form-container .subtitle {
    margin-bottom: 2rem; /* More margin for subtitle inside form box */
    font-size: 1rem;
}

/* --------------------
   Footer
   -------------------- */
.footer.glass-effect-footer {
    padding: 3.5rem 1.5rem 2rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(var(--background-color-dark-rgb, 18, 26, 38), 0.9); /* Define --background-color-dark-rgb */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border-dark);
}
:root { /* Adding missing RGB for dark background */
    --background-color-dark-rgb: 18, 26, 38;
}
.footer-title {
    color: var(--text-color-light);
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.footer ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}
.footer ul li a {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}
.footer ul li a:hover {
    color: var(--accent-color-1);
    padding-left: 5px;
}
.footer .content p { /* For copyright text */
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin-top: 2rem;
}
.footer hr {
    background-color: rgba(255,255,255,0.1) !important; /* Bulma override */
    height: 1px;
    margin: 2rem 0;
}


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

/* --- Success Page (success.html) --- */
.success-page-section {
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    padding: 2rem; /* Padding for smaller screens */
}
.success-message-box.glass-effect-dark {
    padding: 2.5rem; /* Adjusted padding */
    max-width: 650px;
    width: 100%;
    text-align: center;
    background: var(--glass-bg-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--glass-border-dark);
}
.success-message-box .title.is-2 {
    color: var(--text-color-light) !important;
    margin-bottom: 0.75rem;
}
.success-message-box .subtitle.is-5 {
    color: rgba(255,255,255,0.9) !important;
    margin-bottom: 1rem;
}
.success-message-box p.has-text-light {
    color: rgba(255,255,255,0.8) !important;
    font-size: 1rem;
    line-height: 1.7;
}

/* --- Content Pages (privacy.html, terms.html, about.html, contacts.html) --- */
.page-content-section {
    padding-top: calc(var(--header-height) + 3rem); /* Ensure content below sticky header */
    padding-bottom: 4rem;
    background-color: var(--background-color); /* Light background for these pages */
}
.page-content-section .section-title { /* Title on static pages */
    margin-bottom: 2rem;
}
.glass-effect-content-box { /* Container for text content on these pages */
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.7); /* Lighter glass for readable text */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--card-border-radius);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    color: var(--text-color);
}
.glass-effect-content-box h1,
.glass-effect-content-box h2,
.glass-effect-content-box h3,
.glass-effect-content-box .title {
    color: var(--text-color-darker);
    margin-top: 1.5rem; /* Spacing for subheadings */
}
.glass-effect-content-box h1:first-child,
.glass-effect-content-box h2:first-child,
.glass-effect-content-box h3:first-child,
.glass-effect-content-box .title:first-child {
    margin-top: 0;
}
.glass-effect-content-box p {
    color: var(--text-color-medium);
    line-height: 1.8;
}
.glass-effect-content-box ul {
    list-style-position: inside;
    padding-left: 1rem;
    margin-bottom: 1rem;
}
.glass-effect-content-box ul li {
    margin-bottom: 0.5rem;
    color: var(--text-color-medium);
}
.contact-info-blocks { margin-top: 2rem; }
.contact-block.glass-effect {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}
.contact-block h3 { margin-bottom: 0.5rem; }
.contact-block p { font-size: 0.95rem; margin-bottom: 0.25rem;}


/* --------------------
   Utility Classes & Animations
   -------------------- */
.scroll-reveal { /* Base for ScrollReveal.js */
    /*visibility: hidden; !* Hidden until revealed by JS *!*/
}

/* Animated Text Fill (Hero Example) */
.animated-text-fill {
    /* If you want a specific text fill animation */
}

/* Read More Link Style */
.read-more-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.read-more-link::after {
    content: ' →'; /* Arrow */
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more-link:hover {
    color: var(--primary-color-dark);
}
.read-more-link:hover::after {
    transform: translateX(5px);
}


/* --------------------
   Media Queries for Responsiveness
   -------------------- */
@media screen and (max-width: 768px) {
    .title.is-1 { font-size: 2.2rem; }
    .title.is-2 { font-size: 1.9rem; }
    .section { padding: 3rem 1rem; }

    .hero-title { margin-bottom: 0.8rem; }
    .hero-subtitle { margin-bottom: 1.8rem; }

    .columns.is-multiline .column { /* Better stacking on mobile */
        margin-bottom: 1.5rem;
    }
    .columns.is-multiline .column:last-child {
        margin-bottom: 0;
    }

    .contact-form-container.glass-effect-dark,
    .glass-effect-content-box {
        padding: 1.5rem;
    }
    .footer {
        text-align: center;
    }
    .footer .columns > .column {
        margin-bottom: 1.5rem;
    }
}