:root {
    /* Color Scheme: Complementary (Retro Palette with a Complement) */
    --primary-color: #D98A4F; /* Burnt Orange / Retro Brown-Orange */
    --primary-color-darker: #B06C3B; /* Darker shade for hover */
    --accent-color: #4A9089;    /* Teal - Complementary to orange */
    --accent-color-light: #67C5BA; /* Lighter teal for highlights */

    --text-color-dark: #222222; /* Darker for strong contrast as per STROGO */
    --text-color-medium: #555555;
    --text-color-light: #FFFFFF;
    --text-color-subtle: #777777;

    --background-color-body: #FFFFFF;
    --background-color-light: #F0EFEB; /* Creamy off-white for some sections */
    --background-color-medium: #e8e8e8; /* Light gray for other sections */
    --background-color-dark-accent: #2c251e; /* Darker Brown for footer */

    --card-background: #FFFFFF;
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    --card-border-radius: 8px;

    --button-border-radius: 4px;
    --input-border-radius: 4px;

    /* Fonts */
    --font-family-headings: 'Oswald', sans-serif;
    --font-family-body: 'Nunito', sans-serif;

    /* Spacing */
    --section-padding-vertical: 4.5rem;
    --section-padding-horizontal: 1.5rem;


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

/* Global Styles */
html {
    scroll-behavior: smooth;
    background-color: var(--background-color-body);
}

body {
    font-family: var(--font-family-body);
    color: var(--text-color-dark);
    line-height: 1.65;
    font-size: 1rem; /* Base font size */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 52px; /* Default Bulma navbar height. is-fixed-top is used. */
    background-color: var(--background-color-body);
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-family-headings);
    color: var(--text-color-dark); /* Default for light backgrounds */
    font-weight: 700;
}

.title.is-1, .title.is-2, .title.is-3 {
    line-height: 1.2;
}

.subtitle {
    font-family: var(--font-family-body);
    color: var(--text-color-medium);
    font-weight: 400;
}

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

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

/* Section Styling */
.section {
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
}
/* Alternating section background example - apply classes to sections in HTML if needed */
/* .section-bg-light { background-color: var(--background-color-light); } */
/* .section-bg-medium { background-color: var(--background-color-medium); } */

.section-title {
    color: var(--text-color-dark) !important; /* Ensure dark on light backgrounds */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem !important;
}
.section-title.has-text-white { /* For titles on dark backgrounds */
    color: var(--text-color-light) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
section .subtitle { /* Subtitles below section titles */
    color: var(--text-color-medium);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem !important;
}
section .subtitle.has-text-light {
    color: #e0e0e0 !important;
}

/* Header & Navbar */
.navbar.is-fixed-top {
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
}
.navbar-item.logo-text {
    font-family: var(--font-family-headings);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary-color);
    padding-left: 0;
}
.navbar-item, .navbar-link {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--text-color-medium);
    transition: color var(--transition-speed) var(--transition-ease);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active /* For active page link if any */ {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}
.navbar-burger {
    color: var(--text-color-medium);
}
.navbar-burger:hover {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}

/* Hero Section */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Text colors are white, set in HTML via .has-text-white and linear-gradient overlay ensures readability */
}
.hero-title { /* Already .title and .has-text-white */
    font-size: 3.5rem; /* Larger for hero */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
.hero-subtitle { /* Already .subtitle and .has-text-white */
    font-size: 1.5rem; /* Larger for hero */
    margin-bottom: 2.5rem;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}
#hero .buttons .button {
    margin: 0.5rem;
    min-width: 200px;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
}

/* Global Button Styles */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-family-headings);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    border-radius: var(--button-border-radius);
    transition: background-color var(--transition-speed) var(--transition-ease),
                color var(--transition-speed) var(--transition-ease),
                transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
    padding: 0.7em 1.4em;
    border-width: 2px;
    border-style: solid; /* Ensure border is always there for outlined */
    line-height: 1.5; /* Ensure text vertical center */
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(0px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.button.is-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-primary:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    color: var(--text-color-light);
}
.button.is-primary.is-outlined, .retro-button-outline { /* .retro-button-outline is used in hero */
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.button.is-primary.is-outlined:hover, .retro-button-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}
.button.is-light.is-outlined { /* For hero secondary button */
    border-color: var(--text-color-light);
    color: var(--text-color-light);
    background-color: transparent;
}
.button.is-light.is-outlined:hover {
    background-color: var(--text-color-light);
    color: var(--primary-color);
}
/* Button inside cards */
.retro-button-card {
    /* Inherits global button styles. Define specific overrides if needed. */
    font-size: 0.9rem; /* Slightly smaller */
}
.retro-button-card.is-primary { /* For pricing "Choose Plan" on popular card */
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-color-light);
}
.retro-button-card.is-primary:hover {
    background-color: var(--accent-color-light);
    border-color: var(--accent-color-light);
}

/* Card Styles */
.card.retro-card {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a row */
}
.card.retro-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-hover-shadow);
}

.card.retro-card .card-image { /* Bulma's container for img */
    /* No extra styles needed if .image-container handles it */
}
.card.retro-card .image-container {
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0; /* Placeholder bg for images */
    display: flex; /* For centering image if it's smaller than container */
    justify-content: center;
    align-items: center;
}
/* Specific heights for different card image containers */
#services .card.retro-card .image-container { height: 200px; }
#instructors .card-image .image-container {
    height: 250px;
    width: 250px; /* For square portrait */
    margin: 1.5rem auto 0; /* Top margin for instructor image */
    border-radius: 50%; /* For rounded instructor images */
}
#customer-stories .card.retro-card .image-container { height: 200px; }
#press .card.retro-card .image-container { height: 160px; }

.card.retro-card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#instructors .card-image img.is-rounded { /* is-rounded handled by .image-container */
    border: 4px solid var(--background-color-light);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.card.retro-card .card-content {
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card.retro-card .card-content .content {
    text-align: left; /* Default text align for paragraphs within */
    margin-bottom: 1rem; /* Space before footer/progress */
    flex-grow: 1; /* Push elements below it down */
}
.card.retro-card .card-header-title.card-title-custom {
    font-family: var(--font-family-headings);
    color: var(--text-color-dark);
    font-weight: 700;
    font-size: 1.25rem;
    justify-content: center;
    padding: 1rem 1.5rem;
}
.card.retro-card .card-footer {
    border-top: 1px solid #ededed;
    margin-top: auto; /* Push footer to bottom */
}
.card.retro-card .card-footer-item {
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.75rem;
}
.card.retro-card .card-footer-item:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light) !important;
}

/* About Us Section Specifics */
#about .retro-image-frame img {
    border: 10px solid var(--card-background);
    box-shadow: var(--card-shadow);
    border-radius: var(--card-border-radius);
}
/* Parallax background with text */
[data-parallax-background] {
    background-attachment: fixed; /* JS will likely override/enhance this */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
/* Example: Ensure text on #about is readable if its parallax bg is dark.
   Current HTML has dark text. Assume image/about-us-team-collaboration.jpg is light.
   If not, JS or HTML needs to ensure overlay or text color adjustment.
   The HTML for #instructors and #insights already includes linear-gradient overlays.
*/

/* Progress Indicators */
.progress-indicator-container .label {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--text-color-subtle);
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}
.progress.is-primary::-webkit-progress-value { background-color: var(--primary-color); }
.progress.is-primary::-moz-progress-bar { background-color: var(--primary-color); }
.progress.is-success::-webkit-progress-value { background-color: var(--accent-color); }
.progress.is-success::-moz-progress-bar { background-color: var(--accent-color); }
.progress.is-info::-webkit-progress-value { background-color: var(--accent-color-light); }
.progress.is-info::-moz-progress-bar { background-color: var(--accent-color-light); }

/* Pricing Section */
.pricing-card {
    /* Standard retro-card styles apply */
}
.pricing-card .price-tag {
    color: var(--primary-color);
    font-size: 2.8rem;
    margin: 0.5rem 0;
}
.pricing-card ul {
    list-style: none;
    margin-left: 0;
    margin-top: 1rem;
    text-align: left; /* Align list items left in centered card */
    display: inline-block; /* To center the block of list items */
}
.pricing-card ul li {
    padding: 0.4rem 0;
    font-family: var(--font-family-body);
    color: var(--text-color-medium);
    border-bottom: 1px dashed #eee;
}
.pricing-card ul li:last-child {
    border-bottom: none;
}
.pricing-card-popular {
    position: relative;
    border: 2px solid var(--accent-color);
    transform: scale(1.03); /* Slightly larger */
}
.pricing-card-popular:hover {
    transform: scale(1.05) translateY(-6px); /* Enhanced hover */
}
.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: var(--text-color-light);
    padding: 0.3em 1.2em;
    border-radius: var(--button-border-radius);
    font-family: var(--font-family-headings);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Customer Stories */
#customer-stories blockquote {
    font-family: var(--font-family-body);
    font-style: italic;
    color: var(--text-color-medium);
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    margin-bottom: 1rem;
}
#customer-stories blockquote + p { /* Author */
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: var(--text-color-dark);
}

/* Clientele - Statistic Widgets */
.client-logos img {
    max-height: 60px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--transition-speed) var(--transition-ease);
    margin: 1rem; /* Space around logos */
}
.client-logos img:hover {
    opacity: 1;
}
.statistics-widgets .stat-number {
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: var(--primary-color);
    font-size: 3.2rem;
    line-height: 1.1;
}
.statistics-widgets .stat-label {
    font-family: var(--font-family-body);
    color: var(--text-color-medium);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
}

/* Insights - Accordion FAQ */
.accordion-container {
    max-width: 800px;
    margin: 2rem auto;
}
.accordion-item {
    background-color: rgba(255, 255, 255, 0.1); /* Glassmorphism on dark bg */
    margin-bottom: 12px;
    border-radius: var(--card-border-radius);
    box-shadow: none; /* Override card shadow for this style */
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.accordion-header {
    background-color: transparent;
    color: var(--text-color-light);
    cursor: pointer;
    padding: 1.2rem 1.5rem;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 1.15rem;
    font-family: var(--font-family-headings);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-speed) var(--transition-ease);
}
.accordion-item:hover .accordion-header { /* Subtle hover on item */
    background-color: rgba(255,255,255,0.05);
}
.accordion-header .accordion-icon {
    font-size: 1.6rem;
    font-weight: bold;
    transition: transform var(--transition-speed) var(--transition-ease);
    color: var(--primary-color);
}
.accordion-item.active .accordion-header .accordion-icon {
    transform: rotate(45deg);
}
.accordion-content {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    font-family: var(--font-family-body);
    color: #dadada; /* Light gray for content */
    background-color: transparent; /* Match item bg */
}
.accordion-content p {
    margin: 0 0 1rem 0; /* Adjust padding for p inside */
    line-height: 1.7;
}
.accordion-item.active .accordion-content {
    padding: 0rem 1.5rem 1.2rem 1.5rem; /* Adjust padding when active */
    /* max-height set by JS */
}

/* External Resources Section */
#external-resources { background-color: var(--background-color-medium); }
.resource-card .card-content .tag {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.resource-card .card-content .title a {
    color: var(--text-color-dark);
}
.resource-card .card-content .title a:hover {
    color: var(--primary-color);
}

/* Contact Form */
.form-label-custom {
    color: var(--text-color-medium);
    font-family: var(--font-family-headings);
    font-weight: 400;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.3rem;
}
.input.retro-input, .textarea.retro-textarea, .select.retro-select select {
    border-radius: var(--input-border-radius);
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
    font-family: var(--font-family-body);
    font-size: 1rem;
    padding: 0.7em 0.9em;
}
.input.retro-input:focus, .textarea.retro-textarea:focus, .select.retro-select select:focus,
.input.retro-input.is-focused, .textarea.retro-textarea.is-focused, .select.retro-select select.is-focused {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125em rgba(217, 138, 79, 0.25); /* Primary color with alpha */
}
.input.retro-input:focus ~ .icon.is-left, /* For icons inside input fields */
.input.retro-input:focus ~ .icon.is-right {
    color: var(--primary-color);
}
.control.has-icons-left .icon, .control.has-icons-right .icon {
    transition: color var(--transition-speed) var(--transition-ease);
}
.select.retro-select { width: 100%; }
.select.retro-select:not(.is-multiple):not(.is-loading)::after { /* Bulma's select arrow */
    border-color: var(--primary-color);
    right: 1.125em;
    z-index: 4;
}
.checkbox.retro-checkbox {
    font-family: var(--font-family-body);
    color: var(--text-color-medium);
}
.checkbox.retro-checkbox input[type="checkbox"] {
    margin-right: 0.5em;
}
.checkbox.retro-checkbox a {
    color: var(--primary-color);
    text-decoration: underline;
}
.checkbox.retro-checkbox a:hover {
    color: var(--primary-color-darker);
}

/* Footer */
.footer.retro-footer {
    background-color: var(--background-color-dark-accent);
    color: #b0b0b0; /* Lighter gray for footer text */
    padding: 3.5rem 1.5rem;
}
.footer.retro-footer .title.footer-title {
    color: var(--primary-color);
    font-family: var(--font-family-headings);
    margin-bottom: 1.2rem;
    font-size: 1.3rem;
}
.footer.retro-footer p, .footer.retro-footer li {
    font-family: var(--font-family-body);
    font-size: 0.9rem;
    line-height: 1.7;
}
.footer.retro-footer ul {
    list-style: none;
    margin-left: 0;
}
.footer.retro-footer ul li {
    margin-bottom: 0.5rem;
}
.footer.retro-footer a {
    color: #dfdfdf; /* Brighter for links */
}
.footer.retro-footer a:hover {
    color: var(--primary-color);
    text-decoration: none;
}
.footer.retro-footer #current-year {
    font-weight: bold;
    color: var(--text-color-light);
}

/* Success Page Styling */
.success-page-container { /* Wrapper for content on success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 52px); /* Assumes navbar is present */
    /* If no navbar on success.html, use: min-height: 100vh; */
    text-align: center;
    padding: var(--section-padding-vertical) var(--section-padding-horizontal);
    background-color: var(--background-color-light);
}
.success-page-container .success-icon { /* Placeholder for an icon */
    font-size: 4.5rem; /* Example size */
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    /* Example: if using Font Awesome: <i class="fas fa-check-circle success-icon"></i> */
}
.success-page-container .title {
    color: var(--text-color-dark);
    margin-bottom: 0.75rem;
}
.success-page-container .subtitle {
    color: var(--text-color-medium);
    margin-bottom: 2rem;
}

/* Privacy & Terms Pages Content Padding */
/* Apply to the main content wrapping element (e.g., <main class="privacy-main-content">) on these pages */
.privacy-main-content, .terms-main-content {
    padding-top: calc(100px - 52px); /* 100px total from viewport top, minus navbar height */
    /* This assumes the first .section inside these wrappers will not have its own large top padding */
}
.privacy-main-content .content h2, .terms-main-content .content h2 {
    font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.5rem;
}
.privacy-main-content .content h3, .terms-main-content .content h3 {
    font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.3rem;
}

/* Animation Placeholders (JS will target these) */
.animated-card, .animated-text-hero, .animated-button-hero,
.animated-stat, .animated-accordion, .animated-logo {
    opacity: 0;
    /* transform: translateY(20px); */ /* GSAP often handles transform from/to better */
}

/* Responsive Adjustments (Bulma handles most) */
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .section {
        padding: calc(var(--section-padding-vertical) * 0.7) var(--section-padding-horizontal);
    }
    .statistics-widgets .stat-number {
        font-size: 2.5rem;
    }
    .statistics-widgets .stat-label {
        font-size: 0.85rem;
    }
    #instructors .card-image .image-container {
        height: 200px;
        width: 200px;
    }
    .footer.retro-footer .columns > .column {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .footer.retro-footer .title.footer-title {
        margin-bottom: 0.8rem;
    }
}

/* Cookie Consent Popup (already styled inline in HTML, this is just a reminder) */
/* #cookie-consent-popup { ... } */
/* #accept-cookie { ... } */
*{
    opacity: 1 !important;
}
html,body{
    overflow-x: hidden;
}