/* TABLE OF CONTENTS
1.  VARIABLES
2.  GLOBAL RESETS & BASE STYLES
3.  LAYOUT (Page Container, Content Wrap, Section, Container)
4.  HEADER & NAVIGATION
5.  GLOBAL BUTTON STYLES
6.  GLOBAL CARD STYLES
7.  HERO SECTION
8.  SPECIFIC SECTION STYLES
    8.1.  Services Section
    8.2.  About Us Snippet / Media Focus / Sustainability Sections
    8.3.  Instructors Section
    8.4.  Testimonials Section
    8.5.  Blog Preview Section
    8.6.  External Resources Section
    8.7.  Gallery Section
    8.8.  Careers Section (Accordion)
    8.9.  Contact Section (Forms)
9.  FOOTER
10. SPECIFIC PAGE STYLES (About, Contact, Privacy, Terms, Success)
11. UI COMPONENTS (Accordion, Timeline - general)
12. UTILITY CLASSES
13. ANIMATIONS & TRANSITIONS (Hover effects, general)
14. RESPONSIVE DESIGN (Media Queries)
*/

/* 1. VARIABLES */
:root {
    /* Color Scheme: Monochromatic with a primary accent */
    --primary-color: #00d1b2; /* Bright turquoise accent */
    --primary-color-darker: #00a78e;
    --primary-color-lighter: #48e5c2;
    --primary-color-rgb: 0, 209, 178; /* For rgba usage */

    /* Monochromatic Palette (Greys) */
    --black: #1a1a1a;
    --darkest-grey: #222222; /* For dark backgrounds, footer */
    --dark-grey: #363636;    /* Main text color on light backgrounds */
    --medium-grey: #555555;  /* Subtitles, less important text */
    --light-grey: #aaaaaa;   /* Borders, placeholders */
    --lighter-grey: #dbdbdb; /* Input borders */
    --lightest-grey: #f5f5f5;/* Light section backgrounds */
    --white: #ffffff;

    /* Text Colors */
    --text-color-light-bg: var(--dark-grey);
    --text-color-dark-bg: var(--lightest-grey); /* For text on dark backgrounds like footer */
    --heading-color-light-bg: var(--darkest-grey);
    --heading-color-dark-bg: var(--white);
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-color-darker);

    /* Backgrounds */
    --background-body: var(--white);
    --background-section-alt: var(--lightest-grey);
    --background-card: var(--white);
    --background-input: #fdfdfd;

    /* Fonts */
    --font-family-headings: 'Raleway', sans-serif;
    --font-family-base: 'Open Sans', sans-serif;

    /* Borders & Shadows */
    --border-radius-small: 3px;
    --border-radius-medium: 5px;
    --border-radius-large: 8px;
    --border-color-light: var(--lighter-grey);
    --border-color-dark: #444444;
    --box-shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
    --box-shadow-elevated: 0 12px 35px rgba(0, 0, 0, 0.12);
    --text-shadow-subtle: 1px 1px 3px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-easing: ease-in-out;

    /* Spacing (using Bulma's defaults mostly, can add custom if needed) */
    --navbar-height: 52px; /* Bulma's default, adjust if custom */
    --padding-content-top-legal: 100px; /* For privacy/terms pages */
}

/* 2. GLOBAL RESETS & BASE STYLES */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* For rem unit base */
}

body {
    font-family: var(--font-family-base);
    color: var(--text-color-light-bg);
    background-color: var(--background-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from AOS */
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Bulma classes */
    font-family: var(--font-family-headings);
    color: var(--heading-color-light-bg);
    font-weight: 700; /* Default bold for Raleway */
}

.title.is-1, .title.is-2 {
    font-weight: 800; /* Extra bold for main titles */
}
.title, .subtitle {
    word-break: break-word; /* Prevent overflow */
}

p {
    margin-bottom: 1rem;
    color: var(--text-color-light-bg);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-easing);
}
a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove bottom space */
}

/* Adaptive Typography Base */
/* Example: Base font size based on viewport width */
@media (min-width: 769px) { /* Bulma's tablet breakpoint */
    html {
        font-size: 17px; /* Slightly larger base for desktop */
    }
}
@media (min-width: 1024px) { /* Bulma's desktop breakpoint */
    html {
        font-size: 18px;
    }
}


/* 3. LAYOUT */
#page-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content-wrap {
  flex-grow: 1;
  /* padding-bottom will be dynamically set by footer height later, or a fixed large enough value.
     For now, this is handled by page-container being flex column and footer not growing. */
}

.section { /* Bulma class */
    padding: 3rem 1.5rem; /* Default padding, can be overridden */
    /* Ensure no fixed min-height is set here */
}
.section.is-medium { padding: 4.5rem 1.5rem; }
.section.is-large { padding: 6rem 1.5rem; }

.section-title {
    color: var(--heading-color-light-bg);
    text-shadow: var(--text-shadow-subtle);
    margin-bottom: 1.5rem !important; /* Override Bulma if needed */
}
.section-title.has-text-white { /* For sections with dark backgrounds */
    color: var(--heading-color-dark-bg) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.section-subtitle {
    color: var(--medium-grey);
    max-width: 800px; /* Consistent width for subtitles */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem !important;
}
.section-subtitle.has-text-white-ter {
    color: var(--text-color-dark-bg);
}

/* 4. HEADER & NAVIGATION */
.header .navbar.is-fixed-top {
    background-color: rgba(255, 255, 255, 0.97); /* Subtle transparency */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    transition: background-color var(--transition-speed-normal) var(--transition-easing);
}
/* Optional: Darker navbar on scroll
.header .navbar.is-fixed-top.is-scrolled {
    background-color: rgba(250, 250, 250, 1);
} */

.navbar-item.logo-text {
    font-family: var(--font-family-headings);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--primary-color) !important;
    letter-spacing: -0.5px;
}
.navbar-item, .navbar-link {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark-grey);
    transition: color var(--transition-speed-fast) var(--transition-easing),
                background-color var(--transition-speed-fast) var(--transition-easing);
}
.navbar-item:hover, .navbar-link:hover {
    color: var(--primary-color) !important;
    background-color: transparent !important; /* Bulma override */
}
.navbar-item.is-active {
    color: var(--primary-color) !important;
    background-color: transparent !important; /* Bulma override */
    border-bottom: 2px solid var(--primary-color); /* Active indicator */
}
.navbar-burger {
    color: var(--dark-grey);
}
.navbar-burger:hover {
    background-color: transparent;
    color: var(--primary-color);
}
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--white);
        box-shadow: 0 8px 16px rgba(10,10,10,.1);
        border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    }
    .navbar-item.is-active {
        border-bottom: none; /* No border for mobile active items if preferred */
    }
}

/* 5. GLOBAL BUTTON STYLES */
/* Base for Bulma's .button and custom .btn */
.button, .btn, input[type='submit'], input[type='button'] {
    font-family: var(--font-family-headings);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-medium);
    padding: 0.75em 1.75em; /* Adjusted padding */
    transition: all var(--transition-speed-normal) var(--transition-easing);
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1.5; /* Ensure text is centered vertically */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
}

/* Futuristic Button Primary (complements Bulma's .is-primary) */
.button.is-primary, .futuristic-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white) !important; /* Important to override Bulma specificity */
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}
.button.is-primary:hover, .futuristic-button:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), 0.4);
}
.button.is-primary:focus, .futuristic-button:focus {
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb), 0.35);
}
.button.is-primary:active, .futuristic-button:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.25);
}


/* Futuristic Button Outlined */
.futuristic-button-outlined {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
}
.futuristic-button-outlined:hover {
    background-color: var(--primary-color);
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.2);
}
/* For dark backgrounds */
.futuristic-button-outlined-white {
    background-color: transparent;
    border-color: var(--text-on-dark-bg);
    color: var(--text-on-dark-bg) !important;
}
.futuristic-button-outlined-white:hover {
    background-color: var(--text-on-dark-bg);
    color: var(--darkest-grey) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(241, 241, 241, 0.2);
}

/* 6. GLOBAL CARD STYLES */
.card, .futuristic-card, .testimonial-item, .instructor-card, .external-link-item, .blog-preview-section .card { /* Apply to all card-like elements */
    background-color: var(--background-card);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-soft);
    overflow: hidden; /* Important for images and rounded corners */
    transition: transform var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    height: 100%; /* For Bulma columns to make cards equal height */
    display: flex; /* For vertical centering of content and image handling */
    flex-direction: column;
    text-align: center; /* Center inline/inline-block children, including text */
}
.card:hover, .futuristic-card:hover, .testimonial-item:hover, .instructor-card:hover, .external-link-item:hover, .blog-preview-section .card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--box-shadow-elevated);
}

.card .card-image, .futuristic-card .card-image, .instructor-card .card-image, .blog-preview-section .card .card-image, .gallery-section .card .card-image {
    /* Bulma's .card-image already handles this well for figure > img */
    position: relative;
    display: block; /* Ensure it takes width */
    /* Fixed height for image containers - adjust as needed or make responsive */
    /* Example fixed height for consistent card image sizes */
}
.card .card-image .image-container, .futuristic-card .card-image .image-container, .instructor-card .card-image .image-container {
    height: 200px; /* Example fixed height for most cards */
    width: 100%;
    overflow: hidden;
    display: flex; /* Centering the image if it's smaller or object-fit is used */
    align-items: center;
    justify-content: center;
}
.instructor-card .card-image .image-container {
    height: 250px; /* Taller for profile images */
}
.gallery-section .card .card-image .image-container {
    height: 220px;
}

.card .card-image img, .futuristic-card .card-image img, .instructor-card .card-image img, .blog-preview-section .card .card-image img, .gallery-section .card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for fixed height containers */
    display: block;
    margin: 0 auto; /* Center if image is smaller than container (though object-fit:cover should handle it) */
}

.card .card-content, .futuristic-card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if card-content is flex */
    text-align: left; /* Default text align for content, override for titles if needed */
}
.card .card-content .content, .futuristic-card .card-content .content {
    flex-grow: 1; /* Ensure content paragraph takes up space */
    margin-bottom: 1rem; /* Space before button */
}
.card .card-content .title, .futuristic-card .card-content .title,
.card .card-content .subtitle, .futuristic-card .card-content .subtitle {
    margin-bottom: 0.75rem;
    color: var(--heading-color-light-bg);
}
.card .card-content .title.card-title {
    text-align: center;
}
.instructor-card .card-content {
    text-align: center;
}

/* 7. HERO SECTION */
.hero {
    position: relative;
    background-size: cover !important; /* Ensure these are applied */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    color: var(--white); /* Default text color for hero children */
}
.hero-body { /* Bulma class */
    position: relative; /* For z-index stacking if needed for overlay */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem; /* Ensure sufficient padding */
}
.hero-content-overlay {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.7)); /* Dark overlay for text readability */
    padding: 2.5rem;
    border-radius: var(--border-radius-large);
    max-width: 900px; /* Limit width of content box */
    text-align: center; /* Center content within the overlay */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Adaptive font size */
    color: var(--white) !important;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem); /* Adaptive font size */
    color: var(--white) !important;
    margin-bottom: 2rem;
    font-weight: 400;
    line-height: 1.7;
    opacity: 0.9;
}
.hero .button {
    margin-top: 1rem;
}

/* Parallax effect placeholder style - actual effect by JS */
.parallax-background {
    background-attachment: fixed; /* Basic CSS parallax, can be enhanced with JS */
}

/* 8. SPECIFIC SECTION STYLES */

/* 8.1. Services Section */
.services-section {
    background-color: var(--background-section-alt);
}
.services-section .price-tag {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    display: block; /* Ensure it's on its own line */
    text-align: center;
}
.services-section .card .button {
    margin-top: auto; /* Push button to bottom of card content */
}

/* 8.2. About Us Snippet / Media Focus / Sustainability Sections */
.about-us-snippet-section, .media-focus-section, .sustainability-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.has-text-justified {
    text-align: justify;
}

/* 8.3. Instructors Section */
.instructors-section .instructor-card .card-content .subtitle {
    color: var(--medium-grey);
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
}

/* 8.4. Testimonials Section */
.testimonials-section {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.testimonial-overlay {
    background: linear-gradient(rgba(var(--darkest-grey-rgb, 34, 34, 34), 0.85), rgba(var(--darkest-grey-rgb, 34, 34, 34), 0.95));
    padding: 4rem 1.5rem;
}
.testimonials-section .testimonial-item.card {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent card */
    box-shadow: var(--box-shadow-medium);
    text-align: left; /* Content inside testimonial card */
}
.testimonials-section .testimonial-item .card-content .media {
    align-items: center; /* Vertically align avatar and name */
}
.testimonials-section .testimonial-item .card-content .media-left img.is-rounded {
    border: 2px solid var(--primary-color);
}
.testimonials-section .testimonial-item .card-content .title.is-5 {
    color: var(--heading-color-light-bg);
    margin-bottom: 0.25rem;
}
.testimonials-section .testimonial-item .card-content .content {
    font-style: italic;
    color: var(--medium-grey);
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color-light);
    margin-top: 1rem;
}
.testimonial-navigation .button {
    margin: 0 0.5rem;
}

/* 8.5. Blog Preview Section */
.blog-preview-section {
    background-color: var(--background-section-alt);
}
.blog-preview-section .card .card-image .image-container {
    height: 180px; /* Specific height for blog post images */
}
.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--link-color);
    font-weight: 700;
    transition: color var(--transition-speed-fast) var(--transition-easing),
                transform var(--transition-speed-fast) var(--transition-easing);
}
.read-more-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
    transform: translateX(3px); /* Subtle movement */
}
.read-more-link::after { /* Optional: arrow */
    content: " →";
}

/* 8.6. External Resources Section */
.external-resources-section {
    background-color: var(--background-body); /* Or alternate */
}
.external-link-item.card { /* Is already a futuristic-card */
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-color);
    text-align: left;
}
.external-link-item .card-content .title a {
    color: var(--primary-color);
}
.external-link-item .card-content p:not(.title) {
    font-size: 0.9rem;
    color: var(--medium-grey);
}

/* 8.7. Gallery Section */
.gallery-section .card { /* Is already a futuristic-card */
    box-shadow: var(--box-shadow-soft);
}

/* 8.8. Careers Section (Accordion) */
.careers-section {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.careers-overlay {
    background: linear-gradient(rgba(var(--darkest-grey-rgb, 10, 10, 10), 0.88), rgba(var(--darkest-grey-rgb, 10, 10, 10), 0.96));
    padding: 4rem 1.5rem;
}
.careers-section .has-text-white-ter {
    color: var(--text-color-dark-bg) !important;
}
/* Accordion styles moved to UI COMPONENTS */

/* 8.9. Contact Section (Forms) */
.contact-section {
    background-color: var(--background-section-alt);
}
.futuristic-label {
    color: var(--heading-color-light-bg);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5em; /* Ensure it's Bulma's label spacing */
}
.futuristic-input, .futuristic-textarea, .futuristic-select select {
    background-color: var(--background-input);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-medium);
    padding: 12px 15px;
    transition: border-color var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    font-size: 1rem;
    color: var(--text-color-light-bg);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.futuristic-input::placeholder, .futuristic-textarea::placeholder {
    color: var(--light-grey);
}
.futuristic-input:focus, .futuristic-textarea:focus,
.futuristic-select select:focus, .futuristic-select.is-focused select { /* Bulma class */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(var(--primary-color-rgb), 0.25), inset 0 1px 3px rgba(0,0,0,0.04);
    outline: none;
}
.futuristic-select.select:not(.is-multiple):not(.is-loading)::after { /* Bulma's arrow */
    border-color: var(--primary-color);
    transition: transform var(--transition-speed-fast) var(--transition-easing);
}
.futuristic-select.select:not(.is-multiple):not(.is-loading):hover::after {
    transform: scale(1.1) translateY(-1px);
}
.futuristic-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem; /* More space */
    color: var(--text-color-light-bg);
}
.futuristic-checkbox input[type="checkbox"] {
    margin-right: 0.75em;
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-speed-fast) var(--transition-easing),
                border-color var(--transition-speed-fast) var(--transition-easing);
    vertical-align: middle; /* Align with text */
}
.futuristic-checkbox input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.futuristic-checkbox input[type="checkbox"]:checked::before {
    content: '✔'; /* Checkmark */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-size: 14px;
    font-weight: bold;
}
.futuristic-checkbox a {
    color: var(--primary-color);
    font-weight: 600;
}

/* 9. FOOTER */
.futuristic-footer {
    background-color: var(--darkest-grey);
    color: var(--text-color-dark-bg);
    padding: 3rem 1.5rem 2rem;
    font-size: 0.9rem;
}
.futuristic-footer .title.footer-title { /* Bulma .title */
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.futuristic-footer p, .futuristic-footer li {
    color: #cccccc; /* Slightly lighter than var(--text-color-dark-bg) */
    margin-bottom: 0.5rem;
}
.futuristic-footer a {
    color: #cccccc;
    transition: color var(--transition-speed-fast) var(--transition-easing);
}
.futuristic-footer a:hover {
    color: var(--primary-color-lighter);
    text-decoration: none;
}
.futuristic-footer .social-links {
    list-style: none;
    padding-left: 0;
}
.futuristic-footer .social-links li {
    display: inline-block; /* Or use flex for more control */
    margin-right: 1rem;
}
.futuristic-footer .social-links li:last-child {
    margin-right: 0;
}
.futuristic-footer .social-links a {
    font-weight: 600;
    /* Add futuristic touch to text links */
    padding: 0.3em 0.5em;
    border-radius: var(--border-radius-small);
}
.futuristic-footer .social-links a:hover {
    background-color: rgba(255,255,255,0.05); /* Subtle hover background */
}
.futuristic-footer .content p { /* For copyright */
    color: #aaaaaa;
    font-size: 0.85rem;
}

/* 10. SPECIFIC PAGE STYLES */
/* Privacy & Terms Pages */
.page-hero-section { /* Shared hero for subpages */
    /* min-height will be set by is-medium or similar Bulma class */
    padding-top: var(--navbar-height); /* Ensure content below navbar */
}
.page-hero-section .hero-body {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.page-hero-section .hero-content-overlay {
    padding: 2rem; /* Slightly smaller overlay for subpage heroes */
}
.page-hero-section .page-title {
    font-size: clamp(2rem, 5vw, 3rem);
}
.page-hero-section .page-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
}

.privacy-page-content, .terms-page-content { /* Use these classes on column or content div */
    padding-top: var(--padding-content-top-legal); /* Avoid navbar overlap */
}
/* Ensure the content itself for these pages has enough top padding if not using a dedicated hero */
.section.main-content-legal { /* Apply this to the main section of legal pages */
    padding-top: calc(var(--navbar-height) + 2rem); /* If no sub-hero */
}
.privacy-page-content h2, .terms-page-content h2,
.privacy-page-content h3, .terms-page-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--heading-color-light-bg);
}
.privacy-page-content ul, .terms-page-content ul {
    list-style-position: outside;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.privacy-page-content li, .terms-page-content li {
    margin-bottom: 0.5rem;
}


/* Success Page */
.success-page-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--navbar-height)); /* Full viewport height minus navbar */
    text-align: center;
    padding: 2rem;
}
.success-page-section .page-title { /* Bulma class */
    color: var(--heading-color-light-bg);
    margin-bottom: 1rem;
}
.success-page-section .page-subtitle { /* Bulma class */
    color: var(--medium-grey);
    margin-bottom: 2rem;
    max-width: 600px;
}
.success-icon-container svg {
    width: 80px;
    height: 80px;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    /* "Hand-drawn" subtle animation for the icon */
    animation: drawInSuccess 0.8s var(--transition-easing) forwards;
}

@keyframes drawInSuccess {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}


/* 11. UI COMPONENTS */
/* Accordion (General styles, can be used in Careers or elsewhere) */
.accordion {
    margin-top: 1.5rem;
}
.accordion .accordion-item {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-medium);
    overflow: hidden; /* For smooth animation of content */
}
.accordion .accordion-item:last-child {
    margin-bottom: 0;
}
.accordion .accordion-header {
    width: 100%;
    text-align: left;
    padding: 0.8em 1.2em;
    font-family: var(--font-family-headings);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    background-color: var(--lightest-grey); /* Slight contrast for header */
    color: var(--heading-color-light-bg);
    border: none;
    border-bottom: 1px solid var(--border-color-light); /* Separator */
    transition: background-color var(--transition-speed-fast) var(--transition-easing);
    position: relative; /* For pseudo-element icon */
}
.careers-section .accordion .accordion-header { /* Specific for careers section on dark bg */
    background-color: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--text-on-dark-bg);
}

.accordion .accordion-header:hover {
    background-color: #e9e9e9; /* Slightly darker hover */
}
.careers-section .accordion .accordion-header:hover {
    background-color: rgba(255,255,255,0.1);
}

.accordion .accordion-header::after { /* Toggle icon */
    content: '+';
    font-family: var(--font-family-base); /* Ensure consistent font for icon */
    position: absolute;
    right: 1.2em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    transition: transform var(--transition-speed-normal) var(--transition-easing);
    font-weight: 300; /* Lighter plus sign */
}
.accordion .accordion-item.is-active .accordion-header::after {
    transform: translateY(-50%) rotate(45deg); /* To 'x' */
}

.accordion .accordion-content {
    padding: 1.2rem;
    background-color: var(--white);
    color: var(--text-color-light-bg);
    /* JS will handle display:none/block and height animation */
    /* Ensure content is not displayed by default if JS manages it */
    display: none; 
}
.careers-section .accordion .accordion-content {
    background-color: transparent; /* For dark background accordions */
    padding: 1rem 1.2rem;
}
.careers-section .accordion .accordion-content p {
     color: #dadada !important;
}

/* Timeline (Basic visual structure, if used outside of Bulma extensions) */
.timeline {
    position: relative;
    list-style: none;
    padding-left: 0; /* Remove default list padding */
}
.timeline::before { /* Central line */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary-color-lighter);
    border-radius: 2px;
}
.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    width: 50%;
    padding: 0 2rem;
}
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: calc(50% + 1.5rem); /* Align content to the left of the center line */
    text-align: right;
}
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: calc(50% + 1.5rem); /* Align content to the right of the center line */
    text-align: left;
}
.timeline-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 3px var(--primary-color);
    z-index: 1;
}
.timeline-item:nth-child(odd) .timeline-marker {
    left: auto;
    right: -10px; /* Adjust to sit on the line correctly */
    transform: translateX(0);
}
.timeline-item:nth-child(even) .timeline-marker {
    left: -10px; /* Adjust to sit on the line correctly */
    transform: translateX(0);
}
.timeline-content {
    background-color: var(--background-section-alt);
    padding: 1rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-soft);
}
.timeline-content .heading { /* Bulma class */
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}
.timeline-content p:not(.heading) {
    font-size: 0.95rem;
    color: var(--medium-grey);
    margin-bottom: 0;
}
.timeline-header { /* Bulma class for timeline separators */
    width: auto;
    margin: 0 auto 1rem auto; /* Center the tag */
    display: inline-block; /* Allow centering with text-align on parent */
    position: relative; /* To be above the line if needed */
    z-index: 1;
}
.timeline-header .tag { /* Bulma class */
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .timeline::before {
        left: 10px; /* Move line to the left */
        transform: translateX(0);
    }
    .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even) {
        width: 100%;
        left: 0;
        padding-left: 3rem; /* Space for marker and content */
        padding-right: 0;
        text-align: left; /* All items aligned left */
    }
    .timeline-marker, .timeline-item:nth-child(odd) .timeline-marker, .timeline-item:nth-child(even) .timeline-marker {
        left: 0; /* Align marker to the line */
        transform: translateX(0);
    }
}


/* 12. UTILITY CLASSES */
.has-text-justified {
    text-align: justify;
}
.has-text-white-ter { /* Bulma class */
    color: var(--text-color-dark-bg) !important;
}
.full-width-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* 13. ANIMATIONS & TRANSITIONS */
/* Hand-drawn style: subtle imperfections and organic movement.
   Primarily using smooth CSS transitions for a modern feel.
   True hand-drawn effect often requires SVG/JS.
   Here's a subtle "drawn" border effect for images on hover as an example.
*/
.futuristic-card .card-image img, .gallery-section .card-image img {
    transition: transform var(--transition-speed-normal) var(--transition-easing),
                filter var(--transition-speed-normal) var(--transition-easing);
}
.futuristic-card:hover .card-image img, .gallery-section .card:hover .card-image img {
    transform: scale(1.03); /* Slight zoom */
    filter: brightness(1.05) contrast(1.02); /* Subtle pop */
}

/* Example of a subtle "drawn" underline for links */
.drawn-underline {
    position: relative;
    display: inline-block;
}
.drawn-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    transition: width var(--transition-speed-normal) var(--transition-easing);
    border-radius: 1px;
}
.drawn-underline:hover::after {
    width: 100%;
}


/* 14. RESPONSIVE DESIGN (Media Queries) */
/* Bulma handles most structural responsiveness. These are for custom elements or tweaks. */
@media screen and (max-width: 1023px) { /* Tablet and below */
    .section {
        padding: 2.5rem 1rem;
    }
    .section.is-medium { padding: 3.5rem 1rem; }
    .section.is-large { padding: 4.5rem 1rem; }

    .hero-content-overlay {
        padding: 2rem;
    }
    .navbar-menu { /* Ensure it has enough padding when open */
        padding: .5rem 0;
    }
}

@media screen and (max-width: 768px) { /* Mobile */
    .section {
        padding: 2rem 1rem;
    }
    .title.is-1 { font-size: 2rem; }
    .title.is-2 { font-size: 1.7rem; }
    .subtitle.is-3 { font-size: 1.2rem; }

    .hero-content-overlay {
        padding: 1.5rem;
    }

    .futuristic-footer .columns {
        text-align: center; /* Center footer columns on mobile */
    }
    .futuristic-footer .column {
        margin-bottom: 1.5rem;
    }
    .futuristic-footer .social-links li {
        display: block; /* Stack social links */
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    /* Adjust card image heights on mobile if needed */
    .card .card-image .image-container, .futuristic-card .card-image .image-container {
        height: 180px;
    }
    .instructor-card .card-image .image-container {
        height: 220px;
    }

    /* Contact form fields full width on mobile if not already */
    .contact-section .column.is-two-thirds {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}
*{
    opacity: 1 !important;
}