/* style.css */

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

1. ROOT VARIABLES
2. GLOBAL STYLES
3. UTILITY CLASSES
4. BUTTONS
5. HEADER & NAVIGATION
6. FOOTER
7. HERO SECTION
8. STATISTICS SECTION
9. COURSES SECTION (CARDS)
10. NEWS SECTION
11. CUSTOMER STORIES SECTION
12. PRESS SECTION
13. EXTERNAL RESOURCES SECTION
14. FAQ SECTION (ACCORDION)
15. CONTACT SECTION (FORMS)
16. PAGE-SPECIFIC STYLES (About, Contact, Privacy, Terms, Success)
17. ANIMATIONS & TRANSITIONS (General, Barba.js placeholders)
18. RESPONSIVE DESIGN
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES
-------------------------------------------------------------------*/
:root {
    /* Fonts */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Work Sans', sans-serif;

    /* Base Colors */
    --color-text-dark: #212529; /* Bootstrap dark text */
    --color-text-dark-rgb: 33, 37, 41;
    --color-text-medium: #495057; /* Bootstrap secondary text */
    --color-text-light: #f8f9fa;  /* Bootstrap light text */
    --color-text-light-rgb: 248, 249, 250;
    --color-text-muted: #6c757d; /* Bootstrap muted text */

    /* Dynamic Gradient Palette */
    --gradient-primary-start: #4e54c8; /* Deep Indigo */
    --gradient-primary-end: #8f94fb;   /* Light Violet */
    
    --gradient-secondary-start: #ff7e5f; /* Coral */
    --gradient-secondary-end: #feb47b;   /* Light Orange/Peach */

    --gradient-accent-start: #00c6ff; /* Bright Sky Blue */
    --gradient-accent-end: #0072ff;   /* Vivid Blue */
    
    --gradient-bg-light-start: #eef1f5;
    --gradient-bg-light-end: #ffffff;

    /* Solid Accent Colors */
    --color-accent-1: #8f94fb; /* Light Violet from primary gradient */
    --color-accent-2: #ff7e5f; /* Coral from secondary gradient */
    --color-accent-3: #00c6ff; /* Bright Sky Blue from accent gradient */

    --color-accent-1-darker: #7075d9;
    --color-accent-2-darker: #e6684b;
    --color-accent-3-darker: #00a3d9;

    /* Backgrounds */
    --color-bg-body: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-bg-dark: #1a1a2e; /* Dark blue/purple for contrast */
    --color-bg-dark-rgb: 26, 26, 46;
    --color-bg-card: #ffffff;
    --color-bg-card-dark: #24243e;

    --color-bg-glass: rgba(255, 255, 255, 0.1);
    --color-border: #dee2e6; /* Bootstrap border color */
    --color-border-dark: #3a3a5a;

    /* Spacing */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem;  /* 8px */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;  /* 24px */
    --spacing-xl: 2.5rem;  /* 40px */
    --spacing-xxl: 4rem;   /* 64px */

    /* Borders & Shadows */
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --box-shadow-light: 0 5px 15px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.12);
    --box-shadow-heavy: 0 10px 30px rgba(0,0,0,0.2);

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-smooth: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Header height */
    --header-height: 80px; 
}

/* 2. GLOBAL 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.7;
    color: var(--color-text-medium);
    background-color: var(--color-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-top: var(--header-height); /* For fixed header */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.8rem; margin-bottom: var(--spacing-lg); }
h2 { font-size: 2.2rem; margin-bottom: var(--spacing-lg); }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.3rem; }

p {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    color: var(--color-text-medium);
}

a {
    color: var(--color-accent-1);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-1-darker);
    text-decoration: none; /* Often preferred to remove underline on hover for modern look */
}

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

ul, ol {
    list-style: none;
    padding-left: 0;
}

section {
    width: 100%;
    overflow: hidden; /* Prevent horizontal scroll from animations */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.section-padding {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
}

.section-padding-gradient {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background: linear-gradient(135deg, var(--gradient-bg-light-start), var(--gradient-bg-light-end));
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, var(--color-accent-1), var(--color-accent-2));
    margin: var(--spacing-sm) auto 0;
    border-radius: var(--border-radius-sm);
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl);
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.content-container { /* For static pages like privacy, terms */
    max-width: 800px;
}
.content-container h1, .content-container h2, .content-container h3 {
    margin-top: var(--spacing-lg);
}
.content-container ul {
    list-style: disc;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}
.content-container ul li {
    margin-bottom: var(--spacing-sm);
}

/* For background images with text overlay */
.background-image-overlay {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--color-text-light);
}
.background-image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-text-dark-rgb), 0.5); /* Semi-transparent dark overlay */
    z-index: 1;
}
.background-image-overlay > * {
    position: relative;
    z-index: 2;
}


/* 3. UTILITY CLASSES
-------------------------------------------------------------------*/
.text-center { text-align: center; }
.text-light { color: var(--color-text-light) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-xl { margin-top: var(--spacing-xl); }

/* 4. BUTTONS
-------------------------------------------------------------------*/
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-lg); /* More rounded for creative feel */
    transition: all var(--transition-smooth);
    box-shadow: var(--box-shadow-light);
    outline: none;
}

.primary-button {
    background: linear-gradient(to right, var(--color-accent-1), var(--color-accent-2));
    color: var(--color-text-light);
    border-color: transparent;
}
.primary-button:hover {
    color: var(--color-text-light);
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--box-shadow-medium);
    filter: brightness(1.1);
}

.secondary-button {
    background-color: transparent;
    color: var(--color-accent-1);
    border-color: var(--color-accent-1);
}
.secondary-button:hover {
    background-color: var(--color-accent-1);
    color: var(--color-text-light);
    border-color: var(--color-accent-1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--color-accent-1-rgb), 0.3);
}

.read-more-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-weight: 600;
    color: var(--color-accent-3);
    text-decoration: none;
    position: relative;
    padding-bottom: var(--spacing-xs);
    transition: color var(--transition-smooth);
}
.read-more-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent-3);
    transition: width var(--transition-smooth);
}
.read-more-link:hover {
    color: var(--color-accent-3-darker);
}
.read-more-link:hover::after {
    width: 100%;
}


/* 5. HEADER & NAVIGATION
-------------------------------------------------------------------*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(to right, rgba(var(--color-bg-dark-rgb),0.95), rgba(var(--color-bg-dark-rgb),0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-sm) 0;
    box-shadow: var(--box-shadow-light);
    height: var(--header-height);
    transition: background-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.navbar-logo-link img {
    max-height: 50px; /* Adjust as needed */
    transition: transform var(--transition-smooth);
}
.navbar-logo-link:hover img {
    transform: scale(1.05);
}

.navbar-menu {
    display: flex;
    align-items: center;
}

.navbar-item {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-text-light);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-left: var(--spacing-sm);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-fast);
    font-size: 0.95rem;
}
.navbar-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-accent-3);
    transition: width var(--transition-smooth);
    border-radius: 1px;
}
.navbar-item:hover,
.navbar-item.is-active { /* Assuming is-active class for current page */
    color: var(--color-accent-3);
}
.navbar-item:hover::after,
.navbar-item.is-active::after {
    width: 70%;
}

.navbar-burger {
    display: none; /* Hidden by default, shown in media query */
    color: var(--color-text-light);
    background: transparent;
    border: none;
    font-size: 1.8rem; /* Larger for better touch target */
    padding: var(--spacing-sm);
    cursor: pointer;
}
.navbar-burger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-light);
    margin: 5px 0;
    transition: all var(--transition-smooth);
    border-radius: 2px;
}
.navbar-burger.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.navbar-burger.is-active span:nth-child(2) {
    opacity: 0;
}
.navbar-burger.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* 6. FOOTER
-------------------------------------------------------------------*/
.site-footer {
    background: var(--color-bg-dark);
    color: var(--color-text-muted);
    padding: var(--spacing-xl) 0 var(--spacing-md);
    font-size: 0.9rem;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-column .footer-heading {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.footer-links li {
    margin-bottom: var(--spacing-sm);
}
.footer-links li a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer-links li a:hover {
    color: var(--color-accent-3);
    padding-left: 5px;
}

.footer-social-links li a {
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--spacing-xs) 0;
    display: block;
    transition: color var(--transition-smooth), transform var(--transition-fast);
}
.footer-social-links li a:hover {
    color: var(--color-accent-3);
    transform: translateX(5px);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-dark);
    font-size: 0.85rem;
}
.footer-bottom p {
    margin-bottom: 0;
}


/* 7. HERO SECTION
-------------------------------------------------------------------*/
.hero-section {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md);
    color: var(--color-text-light);
    position: relative; /* For overlay if needed */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* The linear-gradient overlay is applied inline in HTML, which is fine for data-prompt */

.hero-content {
    max-width: 800px;
    position: relative; /* Ensure content is above overlay if done via pseudo-element */
    z-index: 2; /* If overlay is via pseudo-element */
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-text-light); /* Enforced by prompt */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--color-text-light); /* Enforced by prompt */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: var(--spacing-xl);
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.hero-section .primary-button {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: 1.1rem;
}


/* 8. STATISTICS SECTION
-------------------------------------------------------------------*/
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.statistic-item {
    text-align: center;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--gradient-primary-start), var(--gradient-primary-end));
    color: var(--color-text-light);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-medium);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.statistic-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--box-shadow-heavy);
}

.statistic-number {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    font-family: var(--font-primary);
    margin-bottom: var(--spacing-sm);
}

.statistic-description {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;
    opacity: 0.9;
}
.section-paragraph {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.05rem;
    color: var(--color-text-medium);
}

/* 9. COURSES SECTION (CARDS)
-------------------------------------------------------------------*/
.courses-grid, .news-grid, .stories-grid, .resources-grid, .team-grid, .press-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.navbar-logo-link {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text-light);
}

.card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    display: flex;
    flex-direction: column;
    text-align: center; /* For content inside card-content */
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-medium);
}

.card-image { /* Container for the image */
    width: 100%;
    height: 220px; /* Fixed height for consistent card appearance */
    overflow: hidden;
    /* display: flex; align-items: center; justify-content: center; */ /* Not needed if img is 100% w/h */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform var(--transition-smooth);
}
.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: var(--spacing-lg);
    flex-grow: 1; /* Allows content to take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if card content varies */
}
.card-content > *:last-child {
    margin-bottom: 0; /* Remove bottom margin from last element (often button) */
}

.card-title {
    font-size: 1.4rem;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}
.card p { /* Paragraphs inside cards */
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}


/* 10. NEWS SECTION
-------------------------------------------------------------------*/
.news-item .card-title { /* Alias for .news-title if structure is same */
    font-size: 1.3rem;
}
.news-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
}


/* 11. CUSTOMER STORIES SECTION
-------------------------------------------------------------------*/
.story-item {
    background: var(--color-bg-light); /* Slightly different background */
    align-items: center; /* Center avatar */
}
.story-image-container { /* This is the .card-image for stories */
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-top: calc(-1 * var(--spacing-xl)); /* Pull avatar up a bit, if card has padding */
    border: 5px solid var(--color-bg-light);
    box-shadow: var(--box-shadow-light);
    position: relative; /* if needed for overlap */
    z-index: 2; /* If overlapping */
}
.story-image-container img.story-avatar { /* This is the actual img */
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-item blockquote {
    font-style: italic;
    color: var(--color-text-medium);
    margin: var(--spacing-md) 0;
    padding: 0 var(--spacing-sm);
    position: relative;
}
.story-item blockquote p {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
}
.story-item blockquote::before {
    content: '“';
    font-size: 3rem;
    color: var(--color-accent-1);
    opacity: 0.5;
    position: absolute;
    left: -5px;
    top: -10px;
    font-family: Georgia, serif;
}
.story-item footer {
    font-weight: 600;
    color: var(--color-text-dark);
    margin-top: var(--spacing-sm);
    font-style: normal;
}

/* 12. PRESS SECTION
-------------------------------------------------------------------*/
.press-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-md);
    transition: opacity var(--transition-smooth);
}
.press-logo-item:hover {
    opacity: 0.8;
}
.press-logo-item img {
    max-height: 60px; /* As per HTML */
    width: auto;
    margin-bottom: var(--spacing-sm);
    filter: grayscale(80%); /* Creative touch */
    transition: filter var(--transition-smooth);
}
.press-logo-item:hover img {
    filter: grayscale(0%);
}
.press-logo-item p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* 13. EXTERNAL RESOURCES SECTION
-------------------------------------------------------------------*/
.resource-card {
    background-color: var(--color-bg-light);
}
.resource-title a {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-accent-2);
}
.resource-title a:hover {
    color: var(--color-accent-2-darker);
    text-decoration: underline;
}

/* 14. FAQ SECTION (ACCORDION)
-------------------------------------------------------------------*/
.accordion-item {
    background-color: var(--color-bg-card);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-light);
    border: 1px solid var(--color-border);
}

.accordion-header {
    width: 100%;
    background-color: transparent;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
}
.accordion-header:hover {
    background-color: rgba(var(--color-accent-1-rgb), 0.05); /* Very subtle hover */
}

.accordion-icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
    transition: transform var(--transition-smooth);
}
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 2px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--transition-smooth);
}
.accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    /* transform: rotate(45deg); No, icon itself changes */
}
.accordion-header[aria-expanded="true"] .accordion-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}


.accordion-content {
    padding: 0 var(--spacing-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-smooth), padding var(--transition-smooth);
}
.accordion-content p {
    padding: var(--spacing-md) 0;
    font-size: 0.95rem;
    color: var(--color-text-medium);
}
.accordion-header[aria-expanded="true"] + .accordion-content {
    max-height: 500px; /* Adjust if content is very long */
    /* padding will be handled by p inside */
}


/* 15. CONTACT SECTION (FORMS)
-------------------------------------------------------------------*/
.contact-form {
    background-color: var(--color-bg-light);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-medium);
}
.contact-details-form-wrapper { /* For side-by-side layout on contacts.html */
    display: grid;
    grid-template-columns: 1fr; /* Default for mobile */
    gap: var(--spacing-xl);
}
@media (min-width: 768px) {
    .contact-details-form-wrapper {
        grid-template-columns: 1fr 1.2fr; /* Details | Form */
    }
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dark);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="subject"], /* Assuming 'subject' is text */
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-text-medium);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="subject"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent-1);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-1-rgb), 0.25);
}
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}
.contact-form ::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* 16. PAGE-SPECIFIC STYLES
-------------------------------------------------------------------*/
/* Adjust padding for static content pages to avoid header overlap */
body[data-barba-namespace="about"] .page-container,
body[data-barba-namespace="contact"] .page-container, /* Contact page too */
body[data-barba-namespace="privacy"] .page-container,
body[data-barba-namespace="terms"] .page-container {
    padding-top: var(--spacing-xl); /* Header offset is on body, this is additional for content */
    padding-bottom: var(--spacing-xl);
}

/* Success Page */
body[data-barba-namespace="success"] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body[data-barba-namespace="success"] .page-container {
    flex-grow: 1; /* Make main content area take available space */
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-message-container {
    text-align: center;
    padding: var(--spacing-xl);
}
.success-icon {
    font-size: 5rem; /* Larger icon */
    color: var(--color-accent-1); /* Using accent color */
    margin-bottom: var(--spacing-lg);
    line-height: 1;
    animation: success-pop 0.5s var(--transition-bounce) forwards;
}
@keyframes success-pop {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* About Page - Team */
.team-member {
    align-items: center; /* Center avatar and content */
}
.team-member .card-image { /* Avatar container */
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-bottom: var(--spacing-md);
}
.team-member .card-image img {
    border-radius: 50%;
}
.team-member h3 {
    margin-top: var(--spacing-sm);
    font-size: 1.3rem;
}
.team-member p em {
    color: var(--color-accent-2);
    font-style: normal;
    display: block;
    margin-bottom: var(--spacing-sm);
}

/* Contact Page - Details & Map */
.contact-details {
    padding: var(--spacing-md) 0;
}
.contact-details p {
    margin-bottom: var(--spacing-sm);
}
.map-placeholder {
    height: 300px;
    background-color: var(--color-bg-light);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-style: italic;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: var(--box-shadow-light);
}
.map-placeholder p { /* Text on map placeholder */
    background-color: rgba(var(--color-bg-dark-rgb), 0.7);
    color: var(--color-text-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
}


/* 17. ANIMATIONS & TRANSITIONS
-------------------------------------------------------------------*/
/* Barba.js basic fade transition (can be customized) */
.barba-leave-active,
.barba-enter-active {
    transition: opacity var(--transition-smooth);
}
.barba-leave-to,
.barba-enter-from {
    opacity: 0;
}

/* Animate.css is linked, use its classes in HTML.
   Example: .animate__animated .animate__fadeInUp
*/
/* Custom scroll-triggered animations (if not using a library or if Motion One needs base states) */
[data-scroll-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth);
}
[data-scroll-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glassmorphism example class (apply where needed) */
.glass-effect {
    background: rgba(var(--color-text-light-rgb), 0.15); /* Light glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--color-text-light-rgb), 0.2);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}


/* 18. RESPONSIVE DESIGN
-------------------------------------------------------------------*/
@media (max-width: 1023px) { /* Tablet and mobile general adjustments */
    .navbar-menu {
        display: none; /* Controlled by JS and .is-active */
        position: absolute;
        top: var(--header-height); /* Below header */
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(var(--color-bg-dark-rgb), 0.98); /* Solid background for mobile menu */
        flex-direction: column;
        align-items: stretch; /* Stretch items to full width */
        padding: var(--spacing-md) 0;
        box-shadow: var(--box-shadow-light);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }
    .navbar-menu.is-active {
        display: flex;
    }
    .navbar-item {
        padding: var(--spacing-md) var(--spacing-lg);
        margin-left: 0;
        text-align: center;
        border-bottom: 1px solid var(--color-border-dark);
        width: 100%;
    }
    .navbar-item:last-child {
        border-bottom: none;
    }
    .navbar-item::after { /* Adjust hover effect for mobile */
        display: none;
    }
     .navbar-item:hover,
    .navbar-item.is-active {
        background-color: rgba(var(--color-accent-3-rgb), 0.1);
        color: var(--color-accent-3);
    }
    .navbar-burger {
        display: block; /* Show burger */
    }
}

@media (max-width: 767px) { /* Mobile specific */
    h1, .hero-title { font-size: 2.2rem; }
    h2, .section-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 1.1rem; }

    .section-padding, .section-padding-gradient {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    .courses-grid, .news-grid, .stories-grid, .resources-grid, .team-grid, .press-logos-grid, .statistics-grid {
        grid-template-columns: 1fr; /* Stack cards on mobile */
        gap: var(--spacing-lg);
    }
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-column .footer-heading {
        margin-top: var(--spacing-md);
    }
    .footer-links li a, .footer-social-links li a {
        padding-left: 0;
        text-align: center;
    }
    .footer-links li a:hover, .footer-social-links li a:hover {
        transform: none;
    }
    .contact-details-form-wrapper {
        grid-template-columns: 1fr;
    }
}