/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. ROOT VARIABLES
2. GLOBAL STYLES & TYPOGRAPHY
3. BULMA OVERRIDES & ENHANCEMENTS
4. UTILITY CLASSES
5. HEADER & NAVIGATION
6. BUTTONS & INTERACTIVE ELEMENTS
7. FORMS
8. GENERAL SECTION STYLING
9. HERO SECTION
10. CARD STYLES (General & Glassmorphism)
    10.1. Generic Card Structure
    10.2. Process Cards
    10.3. Expert Cards (Team/Instructors)
    10.4. Media Cards
    10.5. Project Cards
    10.6. Resource Cards
11. SPECIFIC SECTIONS
    11.1. Mission Section
    11.2. Our Process Section (Toggle)
    11.3. Experts Section (Carousel)
    11.4. Behind The Scenes Section
    11.5. Partners Section (Carousel)
    11.6. Contact Section
12. FOOTER
13. SPECIFIC PAGE STYLES
    13.1. Success Page
    13.2. Privacy & Terms Pages
14. ANIMATIONS & TRANSITIONS
15. RESPONSIVE ADJUSTMENTS
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --font-primary: 'Manrope', sans-serif;
    --font-secondary: 'Rubik', sans-serif;

    /* Gradient Color Scheme */
    --primary-color-start: #0D47A1; /* Deep Blue */
    --primary-color-end: #00796B;   /* Teal */
    --primary-gradient: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));

    --accent-color: #FFC107; /* Amber/Gold */
    --accent-color-darker: #FFA000;

    /* Text Colors */
    --text-color-light: #FFFFFF;
    --text-color-medium: #E0E0E0;
    --text-color-dark: #333333;
    --text-color-headings: #222222; /* Darker for strong contrast */

    /* Background Colors */
    --background-light: #F8F9FA;
    --background-dark-transparent: rgba(0, 0, 0, 0.5);
    --background-glass: rgba(255, 255, 255, 0.1);
    --background-glass-darker: rgba(0, 0, 0, 0.15);

    /* Borders & Shadows */
    --border-radius-small: 8px;
    --border-radius-medium: 15px;
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.15);
    --glass-border: 1px solid rgba(255, 255, 255, 0.18);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;

    /* Spacing */
    --section-padding: 4rem 1.5rem;
    --header-height: 60px; /* Approximate, Bulma's navbar can vary */
}

/* 2. GLOBAL STYLES & TYPOGRAPHY */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

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

.main-container {
    overflow: hidden; /* Helps contain elements and manage scroll behavior */
}

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

.title.is-1, .title.is-2, .title.is-3 {
    margin-bottom: 1.5rem;
}
.subtitle {
    font-weight: 400; /* Rubik regular for subtitles if they are secondary font */
    color: var(--text-color-dark);
    opacity: 0.9;
}

p {
    margin-bottom: 1rem;
    font-size: 1.05rem; /* Slightly larger base paragraph text */
}

a {
    color: var(--primary-color-end);
    transition: color var(--transition-speed) var(--transition-timing);
}

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

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

/* 3. BULMA OVERRIDES & ENHANCEMENTS */
.section {
    padding: var(--section-padding);
}

.container {
    max-width: 1140px; /* Or Bulma's default, adjust if needed */
    margin-left: auto;
    margin-right: auto;
}

.columns {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}
.column.is-two-thirds {
    flex: none;
    width: 66.6666%; /* Ensure Bulma class behaves as expected */
}


/* 4. UTILITY CLASSES */
.has-text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 5. HEADER & NAVIGATION */
.header.is-fixed-top {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1030;
    transition: background-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
}

.glassmorphism-nav {
    background: rgba(255, 255, 255, 0.15); /* Light glass effect for nav */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header.is-fixed-top.scrolled .glassmorphism-nav { /* Optional: slightly change on scroll */
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 500;
    color: var(--text-color-dark); /* Ensure readability on light glass */
    transition: color var(--transition-speed) var(--transition-timing);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important; /* Override Bulma default */
    color: var(--primary-color-end) !important;
}

.navbar-burger span {
    background-color: var(--text-color-dark); /* Burger lines color */
}
.navbar-burger.is-active span {
    background-color: var(--primary-color-end);
}

/* Ensure navbar menu on mobile has a solid background for readability */
@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        background-color: rgba(245, 245, 245, 0.95); /* Slightly transparent white for mobile menu */
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    }
    .navbar-item {
        color: var(--text-color-dark); /* Ensure text is dark on light mobile menu */
    }
     .navbar-item:hover {
        color: var(--primary-color-end) !important;
    }
}


/* 6. BUTTONS & INTERACTIVE ELEMENTS */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    font-weight: 500;
    border-radius: var(--border-radius-small);
    padding: 0.75em 1.75em;
    transition: all var(--transition-speed) var(--transition-timing);
    border: none;
    box-shadow: var(--box-shadow-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.button.is-primary, .modern-button {
    background: var(--primary-gradient);
    color: var(--text-color-light);
    border: none;
}
.button.is-primary:hover, .modern-button:hover {
    background: var(--primary-gradient); /* Keep gradient on hover */
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-strong);
    color: var(--text-color-light); /* Ensure text remains light */
}
.button.is-primary:active, .modern-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.button.is-large {
    padding: 1em 2.25em;
    font-size: 1.15rem;
}

/* Read more link styling */
.read-more-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-weight: 500;
    color: var(--accent-color);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}
.read-more-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color-darker);
    transition: width var(--transition-speed) var(--transition-timing);
}
.read-more-link:hover::after {
    width: 100%;
}
.read-more-link:hover {
    color: var(--accent-color-darker);
}


/* 7. FORMS */
.modern-input, .modern-textarea {
    font-family: var(--font-secondary);
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-small);
    padding: 0.8em 1em;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    color: var(--text-color-dark);
}
.modern-input::placeholder, .modern-textarea::placeholder {
    color: #999;
}
.modern-input:focus, .modern-textarea:focus {
    border-color: var(--primary-color-end);
    box-shadow: 0 0 0 0.125em rgba(0, 121, 107, 0.25); /* Focus ring matches primary end color */
    background-color: var(--text-color-light);
}

.label.form-label {
    color: var(--text-color-dark);
    font-weight: 500;
}

.glassmorphism-form {
    background: var(--background-glass-darker); /* Darker glass for forms on light backgrounds */
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    padding: 2.5rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-strong);
    border: var(--glass-border);
}
.glassmorphism-form .label.form-label {
    color: var(--text-color-medium); /* Lighter labels on dark glass */
}
.glassmorphism-form .modern-input,
.glassmorphism-form .modern-textarea {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color-light);
}
.glassmorphism-form .modern-input::placeholder,
.glassmorphism-form .modern-textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.glassmorphism-form .modern-input:focus,
.glassmorphism-form .modern-textarea:focus {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.125em rgba(255, 193, 7, 0.35); /* Focus ring with accent color */
}


/* 8. GENERAL SECTION STYLING */
.section-title {
    font-size: 2.5rem; /* Large, prominent titles */
    font-weight: 800; /* Manrope ExtraBold */
    margin-bottom: 1rem; /* Space below title before subtitle/content */
    color: var(--text-color-headings);
    position: relative;
    padding-bottom: 0.5rem;
    display: inline-block; /* For centering and underline */
}
.section-title::after { /* Optional: underline effect */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--primary-gradient);
    border-radius: 2px;
}
.section .subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem; /* Space after subtitle */
    line-height: 1.6;
    color: #555;
}

/* Section specific backgrounds - can be overridden */
.mission-section, .process-section, .experts-section,
.behind-scenes-section, .media-section, .projects-section,
.partners-section, .external-resources-section, .contact-section {
    position: relative; /* For potential pseudo-elements or parallax layers */
}

/* Example: Alternating section backgrounds slightly */
.process-section, .behind-scenes-section, .partners-section, .contact-section {
    background-color: #f1f5f9; /* A very light grey for alternate sections */
}


/* 9. HERO SECTION */
.hero.hero-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}
.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    font-weight: 800;
    color: var(--text-color-light) !important; /* IMPORTANT: White text */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-color-light) !important; /* IMPORTANT: White text */
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}
.hero .button {
    margin-top: 1rem;
}
.parallax-layer { /* Basic setup for JS-driven parallax */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('path/to/parallax-element.png'); example */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1; /* Behind content */
}

/* 10. CARD STYLES (General & Glassmorphism) */

/* 10.1. Generic Card Structure */
.card {
    background-color: var(--text-color-light);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light);
    overflow: hidden; /* Ensures content respects border-radius */
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row equal height if needed */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-strong);
}

.card .card-image { /* Bulma's .card-image */
    position: relative;
    overflow: hidden; /* Ensure image respects container boundaries */
}
.card .card-image .image-container { /* Custom container for strict control */
    display: flex; /* Centering */
    justify-content: center; /* Centering */
    align-items: center; /* Centering */
    overflow: hidden; /* Important for object-fit */
    /* Example fixed height for consistent card image sizes, adjust as needed */
    /* e.g., for 16:9 aspect ratio on a 400px wide card: height: 225px; */
    /* e.g., for 1:1 aspect ratio: height might be equal to width or a fixed value */
}
.card .card-image .image-container img,
.card .card-image > figure.image img { /* Also target Bulma's direct figure > img */
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Crop to fit, maintain aspect ratio */
    display: block; /* Remove extra space below image */
    transition: transform 0.4s ease-out;
}
.card:hover .card-image .image-container img,
.card:hover .card-image > figure.image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill space, useful for equal height cards */
    display: flex;
    flex-direction: column;
    text-align: left; /* Default for card content */
}
.card .card-content .title,
.card .card-content .card-title { /* Custom class if .title is too generic */
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-color-headings);
    line-height: 1.3;
}
.card .card-content .subtitle {
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 1rem;
}
.card .card-content .content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color-dark);
}
.card .card-content .content p:last-child {
    margin-bottom: 0;
}

/* Glassmorphism Element Modifier for cards */
.glassmorphism-element {
    background: var(--background-glass);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: var(--glass-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.glassmorphism-element .card-title,
.glassmorphism-element .title,
.glassmorphism-element .subtitle,
.glassmorphism-element .content,
.glassmorphism-element p {
    color: var(--text-color-medium); /* Lighter text for dark glass */
}
.glassmorphism-element .title,
.glassmorphism-element .card-title {
    color: var(--text-color-light);
}

/* Strict Centering for card elements if specifically designed for it */
.card.centered-card-content .card-content {
    align-items: center;
    text-align: center;
}
.card.centered-card-content .card-image .image-container {
    /* Already centered by flex properties */
}


/* 10.2. Process Cards */
.process-card { /* Inherits .card and .glassmorphism-element */
    text-align: center;
}
.process-card .media-left {
    margin-right: 1rem;
}
.process-card .media-left img {
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    padding: 8px;
}
.process-card .title.is-4 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

/* 10.3. Expert Cards (Team/Instructors) */
.expert-card .card-image .image-container {
    height: 300px; /* Example fixed height for profile images */
}
.expert-card .card-content {
    text-align: center;
}
.expert-card .title.is-4 {
    margin-top: 0.5rem;
}

/* 10.4. Media Cards */
.media-card { /* Inherits .card and .glassmorphism-element */
    /* Add specific styles if different from generic glassmorphism card */
}
.media-card .card-title {
    font-size: 1.3rem;
}

/* 10.5. Project Cards */
.project-card .card-image .image-container {
    height: 250px; /* Example for project images, adjust based on content */
}

/* 10.6. Resource Cards */
.resource-card { /* Inherits .card and .glassmorphism-element */
    /* Add specific styles if different from generic glassmorphism card */
}
.resource-card .card-title a {
    color: var(--text-color-light);
    text-decoration: none;
}
.resource-card .card-title a:hover {
    color: var(--accent-color);
}


/* 11. SPECIFIC SECTIONS */

/* 11.1. Mission Section */
.mission-section .content {
    font-size: 1.1rem;
}
.mission-section figure.image img {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-strong);
}

/* 11.2. Our Process Section (Toggle) */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
input:checked + .slider {
  background: var(--primary-gradient);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color-start);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.slider.round {
  border-radius: 28px;
}
.slider.round:before {
  border-radius: 50%;
}
#advancedDetails {
    background: rgba(0,0,0,0.03);
    padding: 1rem;
    border-radius: var(--border-radius-small);
    margin-top: 1rem;
    color: var(--text-color-dark);
}

/* 11.3. Experts Section (Carousel - Swiper.js) */
.expert-carousel, .partners-carousel {
    padding-bottom: 40px; /* Space for pagination */
}
.swiper-pagination-bullet {
    background-color: var(--primary-color-end);
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary-gradient);
}
.swiper-button-next, .swiper-button-prev {
    color: var(--primary-color-end);
    transition: color var(--transition-speed) var(--transition-timing);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: var(--primary-color-start);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 1.5rem !important; /* Adjust size of arrows */
}

/* 11.4. Behind The Scenes Section */
.behind-scenes-section .card .card-image .image-container {
    height: 300px; /* Example height */
}

/* 11.5. Partners Section (Carousel) */
.partners-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Adjust as needed for logo sizes */
}
.partner-logo img {
    max-height: 75px; /* Control max logo height */
    width: auto;
    filter: grayscale(80%);
    opacity: 0.7;
    transition: filter var(--transition-speed), opacity var(--transition-speed);
}
.partner-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* 11.6. Contact Section */
.contact-section .contact-info {
    margin-top: 2rem;
    font-size: 1.1rem;
}
.contact-section .contact-info p {
    margin-bottom: 0.5rem;
}
.contact-section .contact-info a {
    color: var(--text-color-dark);
    font-weight: 500;
}
.contact-section .contact-info a:hover {
    color: var(--primary-color-end);
}
.contact-section {
    background-color: var(--background-light); /* Ensure form is on a light BG if not glassmorphism */
}
/* If form is NOT glassmorphism, adjust form background: */
/*
.contact-section #contactForm {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-strong);
}
.contact-section #contactForm .label.form-label {
    color: var(--text-color-dark);
}
*/


/* 12. FOOTER */
.footer {
    background-color: #263238; /* Dark footer background */
    color: var(--text-color-medium);
    padding: 3rem 1.5rem 2rem;
}
.footer .title.footer-title {
    color: var(--text-color-light);
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}
.footer p, .footer ul li {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.footer a {
    color: var(--text-color-medium);
    transition: color var(--transition-speed) var(--transition-timing);
}
.footer a:hover {
    color: var(--accent-color);
}
.footer hr {
    background-color: rgba(255,255,255,0.1);
    height: 1px;
    margin: 2rem 0;
}
.footer .content p {
    color: var(--text-color-medium);
    font-size: 0.9rem;
}
/* Footer social links - text based */
.footer .column p strong + p a { /* Targeting social links after "Síganos en redes:" */
    display: inline-block;
    padding: 0.2rem 0;
    font-weight: 500;
}


/* 13. SPECIFIC PAGE STYLES */

/* 13.1. Success Page */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page .main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.success-page .success-content-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--section-padding);
}
.success-page .success-message-card {
    background: var(--text-color-light);
    padding: 3rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-strong);
    max-width: 600px;
}
.success-page .success-message-card .icon {
    font-size: 4rem;
    color: var(--primary-color-end); /* Or green for success */
    margin-bottom: 1.5rem;
}
.success-page .success-message-card .title {
    color: var(--text-color-headings);
    margin-bottom: 1rem;
}
.success-page .success-message-card p {
    color: var(--text-color-dark);
    margin-bottom: 2rem;
}

/* 13.2. Privacy & Terms Pages */
body.privacy-page, body.terms-page {
    padding-top: var(--header-height); /* Placeholder, adjust if nav height varies */
}
.privacy-page .section, .terms-page .section {
    padding-top: calc(var(--section-padding) + 30px); /* Add to existing top padding */
}
@media screen and (min-width: 1024px) {
    body.privacy-page, body.terms-page {
        padding-top: 80px; /* More precise for desktop where nav might be taller */
    }
}
.legal-content-container {
    background-color: var(--text-color-light);
    padding: 2rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light);
    margin-top: 2rem; /* space from title */
}
.legal-content-container h1, .legal-content-container h2, .legal-content-container h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-color-headings);
}
.legal-content-container h1:first-child, .legal-content-container h2:first-child {
    margin-top: 0;
}
.legal-content-container p {
    margin-bottom: 1rem;
    line-height: 1.8;
}
.legal-content-container ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}


/* 14. ANIMATIONS & TRANSITIONS (GSAP will handle scroll triggers) */
.gsap-fade-in {
    opacity: 0;
    transform: translateY(20px);
}
/* Transitions for hover effects are defined inline with elements */


/* 15. RESPONSIVE ADJUSTMENTS */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        padding: 0.5rem 0; /* Bulma default */
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .section-title {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .column.is-two-thirds {
        width: 100%; /* Stack columns on mobile */
    }
    .columns.is-vcentered .column.is-one-third {
        order: -1; /* Image above text on mobile for Mission section example */
        margin-bottom: 2rem;
    }
    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: 2rem;
    }
    .footer .column:last-child {
        margin-bottom: 0;
    }
    .glassmorphism-form {
        padding: 1.5rem;
    }
    .section {
        padding: 3rem 1rem;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .section .subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .card .card-content {
        padding: 1rem;
    }
    .expert-card .card-image .image-container,
    .behind-scenes-section .card .card-image .image-container,
    .project-card .card-image .image-container {
        height: 200px; /* Adjust card image heights for mobile */
    }
}