/**
 * =========================================================
 * KIDWISE - Template Kit CSS
 * Reconstitué depuis le template WordPress/Elementor
 * Nettoyé et structuré pour intégration Laravel
 * =========================================================
 */

/* =========================================================
   1. VARIABLES CSS (Design Tokens)
   ========================================================= */
:root {
    /* Couleurs principales */
    --kw-primary: #FF6F3C;          /* Orange vif */
    --kw-primary-dark: #E55A2B;     /* Orange foncé */
    --kw-secondary: #FFD93D;        /* Jaune soleil */
    --kw-accent-green: #6BCB77;     /* Vert nature */
    --kw-accent-blue: #4D96FF;      /* Bleu ciel */
    --kw-accent-pink: #FF6B9D;      /* Rose bonbon */
    --kw-accent-purple: #9B59B6;    /* Violet doux */
    
    /* Couleurs neutres */
    --kw-dark: #2D3436;
    --kw-dark-soft: #636E72;
    --kw-gray: #B2BEC3;
    --kw-light: #F5F6FA;
    --kw-white: #FFFFFF;
    
    /* Couleurs de fond */
    --kw-bg-light: #FFF9E6;         /* Crème chaud */
    --kw-bg-blue: #E8F4FD;          /* Bleu très pâle */
    --kw-bg-green: #E8F8EA;         /* Vert très pâle */
    --kw-bg-orange: #FFF0EB;        /* Orange très pâle */
    
    /* Typographie */
    --kw-font-heading: 'McLaren', cursive;
    --kw-font-body: 'DM Sans', sans-serif;
    
    /* Tailles de police */
    --kw-text-xs: 0.75rem;          /* 12px */
    --kw-text-sm: 0.875rem;         /* 14px */
    --kw-text-base: 1rem;           /* 16px */
    --kw-text-lg: 1.125rem;         /* 18px */
    --kw-text-xl: 1.25rem;          /* 20px */
    --kw-text-2xl: 1.5rem;          /* 24px */
    --kw-text-3xl: 1.875rem;        /* 30px */
    --kw-text-4xl: 2.25rem;         /* 36px */
    --kw-text-5xl: 3rem;            /* 48px */
    --kw-text-6xl: 3.75rem;         /* 60px */
    
    /* Espacement */
    --kw-spacing-xs: 0.25rem;
    --kw-spacing-sm: 0.5rem;
    --kw-spacing-md: 1rem;
    --kw-spacing-lg: 1.5rem;
    --kw-spacing-xl: 2rem;
    --kw-spacing-2xl: 3rem;
    --kw-spacing-3xl: 4rem;
    --kw-spacing-4xl: 6rem;
    
    /* Bordures */
    --kw-radius-sm: 8px;
    --kw-radius-md: 12px;
    --kw-radius-lg: 20px;
    --kw-radius-xl: 30px;
    --kw-radius-full: 9999px;
    
    /* Ombres */
    --kw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --kw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --kw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --kw-shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --kw-transition-fast: 150ms ease;
    --kw-transition-normal: 300ms ease;
    --kw-transition-slow: 500ms ease;
    
    /* Container */
    --kw-container-max: 1200px;
    --kw-container-padding: 1.5rem;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-base);
    line-height: 1.6;
    color: var(--kw-dark);
    background-color: var(--kw-white);
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--kw-transition-fast);
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* =========================================================
   3. TYPOGRAPHIE
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--kw-font-heading);
    font-weight: 400;
    line-height: 1.2;
    color: var(--kw-dark);
}

h1 {
    font-size: var(--kw-text-5xl);
}

h2 {
    font-size: var(--kw-text-4xl);
}

h3 {
    font-size: var(--kw-text-3xl);
}

h4 {
    font-size: var(--kw-text-2xl);
}

h5 {
    font-size: var(--kw-text-xl);
}

h6 {
    font-size: var(--kw-text-lg);
}

p {
    margin-bottom: var(--kw-spacing-md);
    color: var(--kw-dark-soft);
}

/* =========================================================
   4. LAYOUT & CONTAINER
   ========================================================= */
.kw-container {
    width: 100%;
    max-width: var(--kw-container-max);
    margin: 0 auto;
    padding: 0 var(--kw-container-padding);
}

.kw-section {
    padding: var(--kw-spacing-4xl) 0;
}

.kw-section--light {
    background-color: var(--kw-light);
}

.kw-section--cream {
    background-color: var(--kw-bg-light);
}

.kw-section--blue {
    background-color: var(--kw-bg-blue);
}

.kw-grid {
    display: grid;
    gap: var(--kw-spacing-xl);
}

.kw-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.kw-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.kw-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.kw-flex {
    display: flex;
}

.kw-flex--center {
    align-items: center;
    justify-content: center;
}

.kw-flex--between {
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   5. TOPBAR
   ========================================================= */
.kw-topbar {
    background-color: var(--kw-primary);
    color: var(--kw-white);
    padding: var(--kw-spacing-sm) 0;
}

.kw-topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kw-topbar__social {
    display: flex;
    gap: var(--kw-spacing-md);
}

.kw-topbar__social a {
    color: var(--kw-white);
    font-size: var(--kw-text-sm);
    opacity: 0.9;
    transition: opacity var(--kw-transition-fast);
}

.kw-topbar__social a:hover {
    opacity: 1;
}

.kw-topbar__contact {
    display: flex;
    gap: var(--kw-spacing-xl);
}

.kw-topbar__contact-item {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    font-size: var(--kw-text-sm);
}

.kw-topbar__contact-item i,
.kw-topbar__contact-item svg {
    font-size: var(--kw-text-xs);
    width: 14px;
    height: 14px;
}

/* =========================================================
   6. HEADER & NAVIGATION
   ========================================================= */
.kw-header {
    background-color: var(--kw-white);
    box-shadow: var(--kw-shadow-sm);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    transition: box-shadow 0.3s ease;
}

.kw-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Spacer pour compenser le header fixe */
.kw-header-spacer {
    height: 80px;
}

.kw-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--kw-spacing-md) 0;
    gap: var(--kw-spacing-lg);
}

.kw-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.kw-logo img {
    height: 50px;
    width: auto;
    display: block;
}

.kw-nav {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-md);
}

.kw-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kw-nav__item {
    position: relative;
}

.kw-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--kw-dark);
    transition: color var(--kw-transition-fast);
    white-space: nowrap;
    text-decoration: none;
}

.kw-nav__link i {
    font-size: 10px;
}

.kw-nav__link:hover,
.kw-nav__link.active {
    color: var(--kw-primary);
}

/* Dropdown */
.kw-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--kw-white);
    box-shadow: var(--kw-shadow-lg);
    border-radius: var(--kw-radius-md);
    padding: var(--kw-spacing-sm) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--kw-transition-normal);
    z-index: 1001;
    list-style: none;
    margin: 0;
}

.kw-nav__item:hover .kw-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kw-nav__dropdown-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--kw-dark-soft);
    transition: all var(--kw-transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
    white-space: nowrap;
}

.kw-nav__dropdown-link:hover {
    background-color: var(--kw-light);
    color: var(--kw-primary);
}

/* Mobile Menu Toggle */
.kw-nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--kw-spacing-sm);
    cursor: pointer;
    background: none;
    border: none;
}

.kw-nav__toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--kw-dark);
    border-radius: 2px;
    transition: all var(--kw-transition-normal);
}

/* Hide helper classes */
.d-lg-none {
    display: none;
}

.d-md-none {
    display: none;
}

@media (min-width: 1100px) {
    .d-md-none {
        display: inline-flex;
    }
}

@media (max-width: 992px) {
    .d-lg-none {
        display: flex;
    }
}

/* =========================================================
   7. BOUTONS
   ========================================================= */
.kw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kw-spacing-sm);
    padding: var(--kw-spacing-md) var(--kw-spacing-xl);
    font-family: var(--kw-font-body);
    font-weight: 600;
    font-size: var(--kw-text-base);
    border-radius: var(--kw-radius-full);
    transition: all var(--kw-transition-normal);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.kw-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.kw-btn--primary {
    background-color: var(--kw-primary);
    color: var(--kw-white);
}

.kw-btn--primary:hover {
    background-color: #e5623a;
    transform: translateY(-2px);
    box-shadow: var(--kw-shadow-md);
}

.kw-btn--secondary {
    background-color: var(--kw-secondary);
    color: var(--kw-dark);
}

.kw-btn--secondary:hover {
    background-color: #f5cd32;
    transform: translateY(-2px);
    box-shadow: var(--kw-shadow-md);
}

.kw-btn--outline {
    background-color: transparent;
    border: 2px solid var(--kw-primary);
    color: var(--kw-primary);
}

.kw-btn--outline:hover {
    background-color: var(--kw-primary);
    color: var(--kw-white);
}

.kw-btn--white {
    background-color: var(--kw-white);
    color: var(--kw-dark);
}

.kw-btn--white:hover {
    background-color: var(--kw-light);
    transform: translateY(-2px);
}

.kw-btn--link {
    background: none;
    padding: 0;
    color: var(--kw-primary);
    font-weight: 600;
}

.kw-btn--link:hover {
    color: #e5623a;
}

.kw-btn--link i,
.kw-btn--link svg {
    transition: transform var(--kw-transition-fast);
}

.kw-btn--link:hover i,
.kw-btn--link:hover svg {
    transform: translateX(4px);
}

/* =========================================================
   8. HERO SECTION
   ========================================================= */
.kw-hero {
    background: linear-gradient(135deg, var(--kw-bg-light) 0%, var(--kw-bg-blue) 100%);
    padding: var(--kw-spacing-4xl) 0;
    position: relative;
    overflow: hidden;
}

.kw-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0 C 500 100 500 100 1000 0 L 1000 100 L 0 100 Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
}

.kw-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-3xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.kw-hero__content {
    max-width: 600px;
}

.kw-hero__slogan {
    display: inline-block;
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-lg);
    color: var(--kw-secondary);
    font-weight: 600;
    margin-bottom: var(--kw-spacing-md);
    padding: var(--kw-spacing-sm) var(--kw-spacing-lg);
    background: rgba(var(--kw-secondary-rgb), 0.1);
    border-radius: var(--kw-radius-full);
    border: 2px dashed var(--kw-secondary);
}

.kw-hero__title {
    font-size: var(--kw-text-6xl);
    margin-bottom: var(--kw-spacing-md);
    color: var(--kw-dark);
}

.kw-hero__title span {
    color: var(--kw-primary);
}

.kw-hero__subtitle {
    font-size: var(--kw-text-lg);
    color: var(--kw-dark-soft);
    margin-bottom: var(--kw-spacing-xl);
    line-height: 1.7;
}

.kw-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kw-spacing-lg);
    margin-bottom: var(--kw-spacing-xl);
}

.kw-hero__feature {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
}

.kw-hero__feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--kw-primary);
    color: var(--kw-white);
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-sm);
}

.kw-hero__buttons {
    display: flex;
    gap: var(--kw-spacing-md);
}

.kw-hero__images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kw-spacing-md);
}

.kw-hero__img {
    border-radius: var(--kw-radius-lg);
    transition: transform var(--kw-transition-normal);
}

.kw-hero__img:hover {
    transform: rotate(3deg) scale(1.02);
}

.kw-hero__img:nth-child(2) {
    transform: translateY(20px);
}

.kw-hero__img:nth-child(2):hover {
    transform: translateY(20px) rotate(-3deg) scale(1.02);
}

/* =========================================================
   9. BADGE / LABEL
   ========================================================= */
.kw-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    padding: var(--kw-spacing-sm) var(--kw-spacing-md);
    background-color: var(--kw-bg-light);
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-sm);
    font-weight: 600;
    color: var(--kw-primary);
    margin-bottom: var(--kw-spacing-md);
}

.kw-badge i,
.kw-badge svg {
    color: var(--kw-secondary);
}

/* =========================================================
   10. SECTION TITLES
   ========================================================= */
.kw-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--kw-spacing-3xl);
}

.kw-section-header--left {
    text-align: left;
    margin-left: 0;
}

.kw-section-header__title {
    margin-bottom: var(--kw-spacing-md);
}

.kw-section-header__text {
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-lg);
}

/* =========================================================
   11. ABOUT SECTION
   ========================================================= */
.kw-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-3xl);
    align-items: center;
}

.kw-about__content {
    padding-right: var(--kw-spacing-xl);
}

.kw-about__text {
    font-size: var(--kw-text-lg);
    margin-bottom: var(--kw-spacing-xl);
}

.kw-about__image-wrapper {
    position: relative;
}

.kw-about__image {
    border-radius: var(--kw-radius-lg);
    transform: rotate(-2deg);
    transition: transform var(--kw-transition-normal);
}

.kw-about__image:hover {
    transform: rotate(0deg);
}

.kw-about__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kw-spacing-md);
    grid-column: 1 / -1;
    margin-top: var(--kw-spacing-xl);
}

.kw-about__stats--vertical {
    display: flex;
    flex-direction: column;
    gap: var(--kw-spacing-md);
    margin-top: 0;
    align-self: center;
}

.kw-about__image-wrapper--portrait .kw-about__image {
    max-height: 550px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
}

.kw-stat-card {
    background-color: var(--kw-white);
    padding: var(--kw-spacing-lg);
    border-radius: var(--kw-radius-md);
    text-align: center;
    box-shadow: var(--kw-shadow-sm);
    transition: transform var(--kw-transition-normal), box-shadow var(--kw-transition-normal);
}

.kw-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--kw-shadow-md);
}

.kw-stat-card:nth-child(1) {
    background-color: var(--kw-secondary);
}

.kw-stat-card:nth-child(3) {
    background-color: var(--kw-accent-green);
    color: var(--kw-white);
}

.kw-stat-card:nth-child(4) {
    background-color: var(--kw-accent-blue);
    color: var(--kw-white);
}

.kw-stat-card__number {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-4xl);
    font-weight: 700;
    margin-bottom: var(--kw-spacing-xs);
}

.kw-stat-card__icon {
    font-size: 1.75rem;
    margin-bottom: var(--kw-spacing-sm);
    opacity: 0.85;
}

.kw-stat-card:nth-child(1) .kw-stat-card__icon {
    color: var(--kw-primary);
}

.kw-stat-card:nth-child(2) .kw-stat-card__icon {
    color: var(--kw-dark);
}

.kw-stat-card:nth-child(3) .kw-stat-card__icon,
.kw-stat-card:nth-child(4) .kw-stat-card__icon {
    color: rgba(255, 255, 255, 0.9);
}

.kw-stat-card__label {
    font-size: var(--kw-text-sm);
}

/* About Vision & Mission Blocks */
.kw-about__vision-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-lg);
    margin: var(--kw-spacing-xl) 0;
}

.kw-about__block {
    background: var(--kw-white);
    padding: var(--kw-spacing-lg);
    border-radius: var(--kw-radius-md);
    box-shadow: var(--kw-shadow-sm);
    border-left: 4px solid var(--kw-primary);
}

.kw-about__block h4 {
    font-family: var(--kw-font-heading);
    color: var(--kw-primary);
    margin-bottom: var(--kw-spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
}

.kw-about__block h4 i {
    color: var(--kw-secondary);
}

.kw-about__block p {
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
    margin: 0;
}

@media (max-width: 768px) {
    .kw-about__vision-mission {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   12. SERVICES / WHAT WE OFFER
   ========================================================= */
.kw-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kw-spacing-xl);
}

.kw-service-card {
    background-color: var(--kw-white);
    padding: var(--kw-spacing-xl);
    border-radius: var(--kw-radius-lg);
    box-shadow: var(--kw-shadow-sm);
    transition: transform var(--kw-transition-normal), box-shadow var(--kw-transition-normal);
}

.kw-service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--kw-shadow-lg);
}

.kw-service-card:nth-child(1) {
    border-top: 4px solid var(--kw-primary);
}

.kw-service-card:nth-child(2) {
    border-top: 4px solid var(--kw-accent-green);
}

.kw-service-card:nth-child(3) {
    border-top: 4px solid var(--kw-accent-blue);
}

.kw-service-card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--kw-bg-light);
    border-radius: var(--kw-radius-full);
    margin-bottom: var(--kw-spacing-lg);
    font-size: var(--kw-text-2xl);
    color: var(--kw-primary);
}

.kw-service-card__title {
    margin-bottom: var(--kw-spacing-sm);
}

.kw-service-card__subtitle {
    display: inline-block;
    font-size: var(--kw-text-xs);
    color: var(--kw-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--kw-spacing-md);
    padding: var(--kw-spacing-xs) var(--kw-spacing-sm);
    background: rgba(var(--kw-secondary-rgb), 0.1);
    border-radius: var(--kw-radius-sm);
}

.kw-service-card__text {
    color: var(--kw-dark-soft);
    margin-bottom: 0;
}

/* Service Card Featured Variant */
.kw-service-card--featured {
    text-align: center;
    padding: var(--kw-spacing-2xl);
}

.kw-service-card--featured .kw-service-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--kw-spacing-lg);
    font-size: var(--kw-text-3xl);
}

.kw-service-card__icon--primary {
    background: linear-gradient(135deg, var(--kw-primary) 0%, var(--kw-primary-dark) 100%);
    color: var(--kw-white);
}

.kw-service-card__icon--secondary {
    background: linear-gradient(135deg, var(--kw-secondary) 0%, #e6a800 100%);
    color: var(--kw-white);
}

.kw-service-card__icon--accent {
    background: linear-gradient(135deg, var(--kw-accent-blue) 0%, #1565C0 100%);
    color: var(--kw-white);
}

/* Services Grid 3 Columns */
.kw-services__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 992px) {
    .kw-services__grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kw-services__grid--3 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   13. CLASSES SECTION
   ========================================================= */
.kw-classes__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kw-spacing-xl);
}

.kw-class-card {
    background-color: var(--kw-white);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
    box-shadow: var(--kw-shadow-sm);
    transition: transform var(--kw-transition-normal), box-shadow var(--kw-transition-normal);
}

.kw-class-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--kw-shadow-lg);
}

.kw-class-card__image {
    position: relative;
    overflow: hidden;
}

.kw-class-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--kw-transition-slow);
}

.kw-class-card:hover .kw-class-card__image img {
    transform: scale(1.1);
}

.kw-class-card__body {
    padding: var(--kw-spacing-lg);
}

.kw-class-card__title {
    margin-bottom: var(--kw-spacing-sm);
}

.kw-class-card__age {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    color: var(--kw-primary);
    font-size: var(--kw-text-sm);
    font-weight: 600;
    margin-bottom: var(--kw-spacing-sm);
}

.kw-class-card__text {
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
    margin-bottom: var(--kw-spacing-md);
}

/* =========================================================
   14. EVENTS SECTION
   ========================================================= */
.kw-events__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-3xl);
}

.kw-events__list {
    display: flex;
    flex-direction: column;
    gap: var(--kw-spacing-md);
}

.kw-event-item {
    display: flex;
    gap: var(--kw-spacing-lg);
    padding: var(--kw-spacing-lg);
    background-color: var(--kw-white);
    border-radius: var(--kw-radius-md);
    box-shadow: var(--kw-shadow-sm);
    transition: transform var(--kw-transition-normal);
}

.kw-event-item:hover {
    transform: translateX(8px);
}

.kw-event-item__date {
    min-width: 60px;
    text-align: center;
}

.kw-event-item__day {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-3xl);
    color: var(--kw-primary);
    line-height: 1;
}

.kw-event-item__month {
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
    text-transform: uppercase;
}

.kw-event-item__content {
    flex: 1;
}

.kw-event-item__title {
    margin-bottom: var(--kw-spacing-xs);
}

.kw-event-item__text {
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
    margin-bottom: 0;
}

.kw-event-featured {
    background-color: var(--kw-primary);
    color: var(--kw-white);
    border-radius: var(--kw-radius-lg);
    padding: var(--kw-spacing-2xl);
}

.kw-event-featured__title {
    color: var(--kw-white);
    margin-bottom: var(--kw-spacing-md);
}

.kw-event-featured__date {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    margin-bottom: var(--kw-spacing-md);
    opacity: 0.9;
}

.kw-event-featured__text {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--kw-spacing-lg);
}

/* =========================================================
   15. TEACHERS SECTION
   ========================================================= */
.kw-teachers {
    background-color: var(--kw-bg-light);
}

.kw-teachers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kw-spacing-xl);
}

.kw-teacher-card {
    text-align: center;
}

.kw-teacher-card__image {
    position: relative;
    margin-bottom: var(--kw-spacing-lg);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
}

.kw-teacher-card__image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform var(--kw-transition-slow);
}

.kw-teacher-card:hover .kw-teacher-card__image img {
    transform: scale(1.05);
}

.kw-teacher-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
    opacity: 0;
    transition: opacity var(--kw-transition-normal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--kw-spacing-lg);
}

.kw-teacher-card:hover .kw-teacher-card__overlay {
    opacity: 1;
}

.kw-teacher-card__social {
    display: flex;
    gap: var(--kw-spacing-md);
}

.kw-teacher-card__social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--kw-white);
    border-radius: var(--kw-radius-full);
    color: var(--kw-dark);
    transition: all var(--kw-transition-fast);
}

.kw-teacher-card__social a:hover {
    background-color: var(--kw-primary);
    color: var(--kw-white);
}

.kw-teacher-card__name {
    margin-bottom: var(--kw-spacing-xs);
}

.kw-teacher-card__role {
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
}

/* =========================================================
   15B. GALLERY SECTION
   ========================================================= */
.kw-gallery-section {
    padding: var(--kw-spacing-4xl) 0;
    background-color: var(--kw-bg-light);
}

.kw-gallery-carousel {
    width: 100%;
    overflow: hidden;
    margin: var(--kw-spacing-xl) 0;
}

.kw-gallery-swiper {
    width: 100%;
}

.kw-gallery-swiper .swiper-slide {
    width: auto;
    height: 300px;
    flex-shrink: 0;
}

/* Progressive Image Loading */
.kw-gallery-img-wrapper {
    position: relative;
    width: auto;
    height: 100%;
    overflow: hidden;
    border-radius: var(--kw-radius-md);
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.kw-gallery-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: kw-skeleton-shimmer 1.5s infinite ease-in-out;
    z-index: 1;
}

.kw-gallery-skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    z-index: -1;
}

.kw-gallery-skeleton.kw-skeleton-hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

@keyframes kw-skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.kw-lazy-img {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.kw-lazy-img.kw-img-loaded {
    opacity: 1;
    transform: scale(1);
}

.kw-gallery-swiper .swiper-slide img {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gallery Grid Page */
.kw-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kw-spacing-md);
}

.kw-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--kw-radius-md);
    aspect-ratio: 1/1;
    cursor: pointer;
}

/* Hidden gallery items for pagination */
.kw-gallery-item.kw-gallery-hidden {
    display: none;
}

/* Fade in animation for loaded images */
.kw-gallery-item.kw-gallery-fade-in {
    animation: kw-gallery-appear 0.5s ease forwards;
}

@keyframes kw-gallery-appear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Gallery item with wrapper */
.kw-gallery-item .kw-gallery-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.kw-gallery-item .kw-gallery-img-wrapper .kw-lazy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kw-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--kw-transition-normal);
}

.kw-gallery-item:hover img {
    transform: scale(1.1);
}

/* Load More Section */
.kw-gallery-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kw-spacing-md);
    margin-top: var(--kw-spacing-2xl);
    padding: var(--kw-spacing-xl);
}

.kw-gallery-counter {
    font-size: var(--kw-text-sm);
    color: var(--kw-text-muted);
    font-weight: 500;
}

.kw-gallery-counter span {
    color: var(--kw-primary);
    font-weight: 700;
}

/* Gallery Pagination */
.kw-gallery-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--kw-spacing-lg);
    margin-top: var(--kw-spacing-2xl);
    padding: var(--kw-spacing-lg);
    flex-wrap: wrap;
}

.kw-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    padding: var(--kw-spacing-sm) var(--kw-spacing-lg);
    background-color: var(--kw-primary);
    color: var(--kw-white) !important;
    border: 2px solid var(--kw-primary);
    border-radius: var(--kw-radius-full);
    font-weight: 600;
    font-size: var(--kw-text-sm);
    cursor: pointer;
    transition: all var(--kw-transition-fast);
}

.kw-pagination-btn:hover:not(:disabled) {
    background-color: var(--kw-secondary);
    border-color: var(--kw-secondary);
    color: var(--kw-white) !important;
    transform: translateY(-2px);
}

.kw-pagination-btn:disabled {
    background-color: #ccc;
    border-color: #ccc;
    color: #666 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.kw-pagination-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kw-spacing-xs);
}

.kw-pagination-pages {
    font-size: var(--kw-text-base);
    font-weight: 700;
    color: var(--kw-text-dark);
}

.kw-pagination-pages span {
    color: var(--kw-primary);
}

.kw-pagination-images {
    font-size: var(--kw-text-sm);
    color: var(--kw-text-muted);
}

@media (max-width: 576px) {
    .kw-gallery-pagination {
        flex-direction: column;
        gap: var(--kw-spacing-md);
    }
    
    .kw-pagination-btn {
        width: 100%;
        justify-content: center;
    }
}

.kw-gallery-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--kw-transition-normal);
    z-index: 2;
}

.kw-gallery-item:hover .kw-gallery-item__overlay {
    opacity: 1;
}

.kw-gallery-item__overlay i {
    color: var(--kw-white);
    font-size: 2rem;
}

@media (max-width: 992px) {
    .kw-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .kw-gallery-swiper .swiper-slide {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .kw-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kw-gallery-swiper .swiper-slide {
        height: 200px;
    }
}

/* Gallery Lightbox */
.kw-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.kw-lightbox.active {
    display: block;
}

.kw-lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}

.kw-lightbox__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.kw-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.kw-lightbox__close:hover {
    background: var(--kw-primary);
    transform: rotate(90deg);
}

.kw-lightbox__prev,
.kw-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.kw-lightbox__prev {
    left: 20px;
}

.kw-lightbox__next {
    right: 20px;
}

.kw-lightbox__prev:hover,
.kw-lightbox__next:hover {
    background: var(--kw-primary);
    transform: translateY(-50%) scale(1.1);
}

.kw-lightbox__image-wrapper {
    max-width: 90%;
    max-height: calc(100% - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.kw-lightbox__image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--kw-radius-md);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

.kw-lightbox__loader {
    position: absolute;
    color: white;
    font-size: 2rem;
    display: none;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.kw-lightbox__counter {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .kw-lightbox__prev,
    .kw-lightbox__next {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .kw-lightbox__prev {
        left: 10px;
    }
    
    .kw-lightbox__next {
        right: 10px;
    }
    
    .kw-lightbox__image {
        max-height: 70vh;
    }
}

/* =========================================================
   16. TESTIMONIALS SECTION
   ========================================================= */
.kw-testimonials__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-3xl);
    align-items: center;
}

.kw-testimonials__image {
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
}

.kw-testimonials__image img {
    width: 100%;
    height: auto;
}

.kw-testimonial-card {
    background-color: var(--kw-secondary);
    padding: var(--kw-spacing-2xl);
    border-radius: var(--kw-radius-lg);
    position: relative;
}

.kw-testimonial-card__quote {
    position: absolute;
    top: var(--kw-spacing-lg);
    right: var(--kw-spacing-lg);
    font-size: var(--kw-text-5xl);
    color: var(--kw-primary);
    opacity: 0.3;
}

.kw-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-md);
    margin-bottom: var(--kw-spacing-lg);
}

.kw-testimonial-card__avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--kw-radius-full);
    object-fit: cover;
}

.kw-testimonial-card__name {
    font-weight: 600;
    margin-bottom: 0;
}

.kw-testimonial-card__role {
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
}

.kw-testimonial-card__text {
    font-size: var(--kw-text-lg);
    line-height: 1.8;
    color: var(--kw-dark);
    margin-bottom: 0;
}

/* Slider Dots */
.kw-testimonials__dots {
    display: flex;
    justify-content: center;
    gap: var(--kw-spacing-sm);
    margin-top: var(--kw-spacing-lg);
}

.kw-testimonials__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--kw-radius-full);
    background-color: var(--kw-gray);
    cursor: pointer;
    transition: background-color var(--kw-transition-fast);
}

.kw-testimonials__dot.active {
    background-color: var(--kw-primary);
}

/* =========================================================
   17. CONTACT SECTION
   ========================================================= */
.kw-contact {
    background-color: var(--kw-bg-blue);
}

.kw-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-3xl);
    align-items: center;
}

.kw-contact__form {
    background-color: var(--kw-white);
    padding: var(--kw-spacing-2xl);
    border-radius: var(--kw-radius-lg);
    box-shadow: var(--kw-shadow-md);
}

.kw-form__row {
    display: grid;
    gap: var(--kw-spacing-md);
    margin-bottom: var(--kw-spacing-md);
}

.kw-form__row--2 {
    grid-template-columns: repeat(2, 1fr);
}

.kw-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--kw-spacing-xs);
}

.kw-form__label {
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-sm);
    font-weight: 600;
    color: var(--kw-dark);
}

.kw-form__input,
.kw-form__textarea {
    width: 100%;
    padding: var(--kw-spacing-md) var(--kw-spacing-lg);
    border: 2px solid var(--kw-gray);
    border-radius: var(--kw-radius-md);
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-base);
    transition: border-color var(--kw-transition-fast);
}

.kw-form__input:focus,
.kw-form__textarea:focus {
    outline: none;
    border-color: var(--kw-primary);
}

.kw-form__textarea {
    min-height: 150px;
    resize: vertical;
}

.kw-contact__images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kw-spacing-md);
}

.kw-contact__images img {
    border-radius: var(--kw-radius-md);
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* =========================================================
   18. BLOG SECTION
   ========================================================= */
.kw-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kw-spacing-xl);
}

.kw-blog-card {
    background-color: var(--kw-white);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
    box-shadow: var(--kw-shadow-sm);
    transition: transform var(--kw-transition-normal), box-shadow var(--kw-transition-normal);
}

.kw-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--kw-shadow-lg);
}

.kw-blog-card__image {
    position: relative;
    overflow: hidden;
}

.kw-blog-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--kw-transition-slow);
}

.kw-blog-card:hover .kw-blog-card__image img {
    transform: scale(1.1);
}

.kw-blog-card__category {
    position: absolute;
    top: var(--kw-spacing-md);
    left: var(--kw-spacing-md);
    padding: var(--kw-spacing-xs) var(--kw-spacing-md);
    background-color: var(--kw-primary);
    color: var(--kw-white);
    font-size: var(--kw-text-xs);
    font-weight: 600;
    border-radius: var(--kw-radius-full);
}

.kw-blog-card__body {
    padding: var(--kw-spacing-lg);
}

.kw-blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-md);
    margin-bottom: var(--kw-spacing-sm);
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
}

.kw-blog-card__title {
    margin-bottom: var(--kw-spacing-md);
    line-height: 1.4;
}

.kw-blog-card__title a:hover {
    color: var(--kw-primary);
}

/* =========================================================
   19. FAQ SECTION
   ========================================================= */
.kw-faq__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-3xl);
    align-items: start;
}

.kw-faq__image {
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
}

.kw-faq__image img {
    width: 100%;
    height: auto;
}

.kw-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--kw-spacing-md);
}

.kw-accordion__item {
    background-color: var(--kw-white);
    border-radius: var(--kw-radius-md);
    box-shadow: var(--kw-shadow-sm);
    overflow: hidden;
}

.kw-accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--kw-spacing-lg);
    cursor: pointer;
    transition: background-color var(--kw-transition-fast);
}

.kw-accordion__header:hover {
    background-color: var(--kw-light);
}

.kw-accordion__title {
    font-weight: 600;
    margin-bottom: 0;
}

.kw-accordion__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kw-primary);
    transition: transform var(--kw-transition-normal);
}

.kw-accordion__item.active .kw-accordion__icon {
    transform: rotate(45deg);
}

.kw-accordion__body {
    padding: 0 var(--kw-spacing-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--kw-transition-normal), padding var(--kw-transition-normal);
}

.kw-accordion__item.active .kw-accordion__body {
    padding: var(--kw-spacing-md) var(--kw-spacing-lg) var(--kw-spacing-lg);
    max-height: 500px;
}

.kw-accordion__text {
    color: var(--kw-dark-soft);
    margin-bottom: 0;
}

/* =========================================================
   20. CTA SECTION
   ========================================================= */
.kw-cta {
    background: linear-gradient(135deg, var(--kw-primary) 0%, #ff8f6a 100%);
    padding: var(--kw-spacing-4xl) 0;
    text-align: center;
    color: var(--kw-white);
}

.kw-cta__title {
    color: var(--kw-white);
    margin-bottom: var(--kw-spacing-md);
}

.kw-cta__text {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--kw-text-lg);
    max-width: 600px;
    margin: 0 auto var(--kw-spacing-xl);
}

.kw-cta__buttons {
    display: flex;
    justify-content: center;
    gap: var(--kw-spacing-md);
}

/* =========================================================
   21. FOOTER
   ========================================================= */
.kw-footer {
    background-color: var(--kw-dark);
    color: var(--kw-white);
    padding: var(--kw-spacing-4xl) 0 0;
}

.kw-footer__main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--kw-spacing-3xl);
    padding-bottom: var(--kw-spacing-3xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kw-footer__brand p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--kw-spacing-lg);
}

.kw-footer__logo {
    margin-bottom: var(--kw-spacing-lg);
}

.kw-footer__logo img {
    height: 50px;
}

.kw-footer__social {
    display: flex;
    gap: var(--kw-spacing-md);
}

.kw-footer__social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--kw-radius-full);
    color: var(--kw-white);
    transition: all var(--kw-transition-fast);
}

.kw-footer__social a:hover {
    background-color: var(--kw-primary);
}

.kw-footer__title {
    color: var(--kw-white);
    margin-bottom: var(--kw-spacing-lg);
}

.kw-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--kw-spacing-sm);
}

.kw-footer__links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--kw-transition-fast);
}

.kw-footer__links a:hover {
    color: var(--kw-primary);
}

.kw-footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-md);
    margin-bottom: var(--kw-spacing-md);
    color: rgba(255, 255, 255, 0.7);
}

.kw-footer__contact-item i,
.kw-footer__contact-item svg {
    color: var(--kw-primary);
    width: 16px;
    flex-shrink: 0;
}

.kw-footer__contact-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kw-footer__newsletter {
    margin-top: var(--kw-spacing-lg);
}

.kw-footer__newsletter-form {
    display: flex;
    gap: var(--kw-spacing-sm);
}

.kw-footer__newsletter-input {
    flex: 1;
    padding: var(--kw-spacing-md);
    border: none;
    border-radius: var(--kw-radius-md);
    font-family: var(--kw-font-body);
}

.kw-footer__bottom {
    padding: var(--kw-spacing-lg) 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--kw-text-sm);
}

/* =========================================================
   22. BACK TO TOP
   ========================================================= */
.kw-back-to-top {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--kw-primary);
    color: var(--kw-white);
    border-radius: var(--kw-radius-full);
    box-shadow: var(--kw-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--kw-transition-normal);
    z-index: 99;
}

.kw-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kw-back-to-top:hover {
    background-color: #e5623a;
    transform: translateY(-5px);
}

/* =========================================================
   23. ANIMATIONS
   ========================================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   26. PAGE HEADER
   ========================================================= */
.kw-page-header {
    background: linear-gradient(135deg, var(--kw-bg-orange) 0%, var(--kw-bg-light) 100%);
    padding: 80px 0 60px;
    text-align: center;
    margin-top: 80px;
}

.kw-page-header__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-4xl);
    color: var(--kw-dark);
    margin-bottom: 15px;
}

.kw-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
}

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

.kw-breadcrumb a:hover {
    color: var(--kw-secondary);
}

.kw-breadcrumb span:not(:last-child) {
    color: var(--kw-gray);
}

/* =========================================================
   27. EVENT CARDS (Liste événements)
   ========================================================= */
.kw-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.kw-event-card {
    background: var(--kw-white);
    border-radius: var(--kw-radius-xl);
    overflow: hidden;
    box-shadow: var(--kw-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kw-event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--kw-shadow-lg);
}

.kw-event-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.kw-event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kw-event-card__date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--kw-primary);
    color: var(--kw-white);
    padding: 10px 15px;
    border-radius: var(--kw-radius-lg);
    text-align: center;
}

.kw-event-card__day {
    display: block;
    font-size: var(--kw-text-2xl);
    font-weight: 700;
    line-height: 1;
}

.kw-event-card__month {
    display: block;
    font-size: var(--kw-text-sm);
    text-transform: uppercase;
}

.kw-event-card__body {
    padding: 25px;
}

.kw-event-card__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-xl);
    color: var(--kw-dark);
    margin-bottom: 10px;
}

.kw-event-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
}

.kw-event-card__meta i {
    color: var(--kw-primary);
    margin-right: 5px;
}

.kw-event-card__text {
    color: var(--kw-dark-soft);
    margin-bottom: 15px;
}

/* =========================================================
   28. SINGLE PAGE LAYOUTS
   ========================================================= */
.kw-class-single,
.kw-event-single,
.kw-teacher-single {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.kw-class-single__image img,
.kw-event-single__image img,
.kw-teacher-single__image img {
    width: 100%;
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow-lg);
}

.kw-class-single__meta,
.kw-event-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.kw-class-single__meta-item,
.kw-event-single__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kw-dark-soft);
}

.kw-class-single__meta-item i,
.kw-event-single__meta-item i {
    color: var(--kw-primary);
}

.kw-class-single__description,
.kw-event-single__description,
.kw-teacher-single__bio {
    color: var(--kw-dark-soft);
    line-height: 1.8;
    margin-bottom: 25px;
}

.kw-class-single__description h4 {
    color: var(--kw-dark);
    margin-bottom: var(--kw-spacing-sm);
}

.kw-class-single__description p {
    margin-bottom: var(--kw-spacing-md);
}

.kw-class-single__fee,
.kw-class-single__schedule {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    padding: var(--kw-spacing-md);
    background: var(--kw-light);
    border-radius: var(--kw-radius-md);
    margin-bottom: var(--kw-spacing-md);
    color: var(--kw-dark);
}

.kw-class-single__fee i,
.kw-class-single__schedule i {
    color: var(--kw-primary);
    font-size: 1.2rem;
}

.kw-class-single__fee strong,
.kw-class-single__schedule strong {
    color: var(--kw-primary);
}

.kw-teacher-single__social {
    display: flex;
    gap: 15px;
}

.kw-social-link {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kw-light);
    color: var(--kw-dark);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.kw-social-link:hover {
    background: var(--kw-primary);
    color: var(--kw-white);
}

/* =========================================================
   29. PREREGISTRATION PAGE
   ========================================================= */
.kw-preregistration {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
}

.kw-preregistration__content,
.kw-preregistration__info {
    min-width: 0;
}

.kw-preregistration__form {
    background: var(--kw-white);
    padding: 40px;
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow);
}

.kw-form__section-title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-lg);
    color: var(--kw-dark);
    margin: 25px 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--kw-light);
}

.kw-form__section-title:first-of-type {
    margin-top: 0;
}

.kw-form__select {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid var(--kw-gray);
    border-radius: var(--kw-radius-lg);
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-base);
    background: var(--kw-white);
    color: var(--kw-dark);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.kw-form__select:focus {
    outline: none;
    border-color: var(--kw-primary);
}

.kw-info-card {
    background: var(--kw-bg-light);
    padding: 30px;
    border-radius: var(--kw-radius-xl);
    margin-bottom: 20px;
}

.kw-info-card__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-lg);
    color: var(--kw-dark);
    margin-bottom: 15px;
}

.kw-info-card__list {
    padding-left: 20px;
    color: var(--kw-dark-soft);
    line-height: 2;
}

/* Download Links */
.kw-download-links {
    display: flex;
    flex-direction: column;
    gap: var(--kw-spacing-sm);
}

.kw-download-link {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    padding: var(--kw-spacing-md);
    background: var(--kw-light);
    border-radius: var(--kw-radius-md);
    color: var(--kw-dark);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.kw-download-link:hover {
    background: var(--kw-white);
    border-color: var(--kw-primary);
    color: var(--kw-primary);
}

.kw-download-link i {
    font-size: 1.5rem;
    color: #e74c3c;
}

.kw-download-link span {
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* =========================================================
   30. ARTICLE / BLOG SINGLE
   ========================================================= */
.kw-article {
    max-width: 800px;
    margin: 0 auto;
}

.kw-article__image {
    width: 100%;
    border-radius: var(--kw-radius-xl);
    margin-bottom: 30px;
}

.kw-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
}

.kw-article__meta i {
    color: var(--kw-primary);
    margin-right: 5px;
}

.kw-article__content {
    color: var(--kw-dark-soft);
    line-height: 1.9;
}

.kw-article__content p {
    margin-bottom: 20px;
}

.kw-article__content h2,
.kw-article__content h3,
.kw-article__content h4 {
    font-family: var(--kw-font-heading);
    color: var(--kw-dark);
    margin: 30px 0 15px;
}

.kw-article__footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--kw-light);
}

/* =========================================================
   31. REVIEWS PAGE
   ========================================================= */
.kw-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.kw-reviews__grid--comfortable {
    grid-template-columns: repeat(2, 1fr);
}

.kw-review-card {
    background: var(--kw-white);
    padding: 30px;
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow);
}

.kw-review-card__header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.kw-review-card__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.kw-review-card__avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kw-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--kw-white);
    background: linear-gradient(135deg, var(--kw-primary), #ff8f4f);
    box-shadow: 0 8px 18px rgba(255, 111, 60, 0.25);
    flex-shrink: 0;
}

.kw-review-card__name {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-lg);
    color: var(--kw-dark);
    margin-bottom: 2px;
}

.kw-review-card__role {
    font-size: var(--kw-text-sm);
    color: var(--kw-dark-soft);
}

.kw-review-card__stars {
    color: var(--kw-secondary);
    margin-bottom: 15px;
}

.kw-review-card__stars i {
    margin-right: 2px;
}

.kw-review-card__text {
    color: var(--kw-dark-soft);
    line-height: 1.7;
    font-style: italic;
}

.kw-testimonials-slider {
    position: relative;
    padding: 8px 6px 44px;
}

.kw-testimonials-slider .swiper-slide {
    height: auto;
}

.kw-testimonials-slider .kw-review-card {
    height: 100%;
}

.kw-testimonials-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.kw-testimonials-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--kw-gray);
    opacity: 1;
}

.kw-testimonials-pagination .swiper-pagination-bullet-active {
    background: var(--kw-primary);
}

.kw-testimonials-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--kw-white);
    color: var(--kw-primary);
    box-shadow: var(--kw-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--kw-transition-fast);
    z-index: 3;
}

.kw-testimonials-nav:hover {
    background: var(--kw-primary);
    color: var(--kw-white);
}

.kw-testimonials-prev {
    left: -12px;
}

.kw-testimonials-next {
    right: -12px;
}

.kw-testimonials-slider--page {
    padding-left: 50px;
    padding-right: 50px;
}

.kw-testimonials-prev--page {
    left: 0;
}

.kw-testimonials-next--page {
    right: 0;
}

/* =========================================================
   32. EMPTY STATE
   ========================================================= */
.kw-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--kw-dark-soft);
}

.kw-empty-state i {
    font-size: 48px;
    color: var(--kw-gray);
    margin-bottom: 20px;
    display: block;
}

/* =========================================================
   33. ALERTS
   ========================================================= */
.kw-alert {
    padding: 15px 20px;
    border-radius: var(--kw-radius-lg);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kw-alert i {
    margin-top: 3px;
}

.kw-alert ul {
    margin: 0;
    padding-left: 20px;
}

.kw-alert--success {
    background: var(--kw-bg-green);
    color: var(--kw-accent-green);
    border: 1px solid var(--kw-accent-green);
}

.kw-alert--error {
    background: #FEE2E2;
    color: #DC2626;
    border: 1px solid #DC2626;
}

/* =========================================================
   34. CONTACT INFO GRID
   ========================================================= */
.kw-contact-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.kw-contact-info__item {
    text-align: center;
    padding: 30px 20px;
    background: var(--kw-white);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow);
}

.kw-contact-info__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: var(--kw-bg-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kw-contact-info__icon i {
    font-size: 28px;
    color: var(--kw-primary);
}

.kw-contact-info__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-lg);
    color: var(--kw-dark);
    margin-bottom: 10px;
}

.kw-contact-info__item p {
    color: var(--kw-dark-soft);
    margin: 0;
}

.kw-contact-info__item p a {
    color: var(--kw-dark-soft);
    text-decoration: none;
    transition: color var(--kw-transition-fast);
}

.kw-contact-info__item p a:hover {
    color: var(--kw-primary);
}

/* =========================================================
   35. PAGINATION
   ========================================================= */
.kw-pagination {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.kw-pagination nav {
    display: flex;
    gap: 8px;
}

.kw-pagination a,
.kw-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    border-radius: var(--kw-radius-lg);
    font-weight: 500;
    transition: all 0.3s ease;
}

.kw-pagination a {
    background: var(--kw-white);
    color: var(--kw-dark);
    border: 2px solid var(--kw-light);
}

.kw-pagination a:hover {
    background: var(--kw-primary);
    color: var(--kw-white);
    border-color: var(--kw-primary);
}

.kw-pagination span[aria-current="page"] {
    background: var(--kw-primary);
    color: var(--kw-white);
}

/* =========================================================
   36. ACCORDION LARGE
   ========================================================= */
.kw-accordion--large {
    max-width: 800px;
    margin: 0 auto;
}

.kw-accordion--large .kw-accordion__item {
    margin-bottom: 20px;
}

.kw-accordion--large .kw-accordion__header {
    padding: 25px 30px;
}

.kw-accordion--large .kw-accordion__title {
    font-size: var(--kw-text-lg);
}

.kw-accordion--large .kw-accordion__body {
    padding: 0 30px 25px;
}

/* =========================================================
   37. TEACHERS GRID VARIATIONS
   ========================================================= */
.kw-teachers__grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* =========================================================
   38. SECTION NO PADDING
   ========================================================= */
.kw-section--no-padding-top {
    padding-top: 0;
}

/* =========================================================
   39. DIRECTION / ORGANIGRAM / MAP
   ========================================================= */
.kw-direction-highlight {
    background: linear-gradient(180deg, #fff6eb 0%, #ffffff 100%);
}

.kw-direction-highlight__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 32px;
    align-items: center;
    background: var(--kw-white);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow);
    padding: 24px;
}

.kw-direction-highlight__media {
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
}

.kw-direction-highlight__image {
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: cover;
}

.kw-direction-highlight__text {
    margin: 16px 0 24px;
    color: var(--kw-dark-soft);
    line-height: 1.85;
}

.kw-org-chart {
    background: var(--kw-white);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow);
    padding: 24px;
}

.kw-org-chart__image {
    display: block;
    width: 100%;
    border-radius: var(--kw-radius-lg);
    border: 1px solid var(--kw-light);
}

.kw-map-block {
    margin-top: 32px;
    background: var(--kw-white);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow);
    padding: 24px;
}

.kw-map-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.kw-map-block__header h3 {
    margin: 0;
    font-family: var(--kw-font-heading);
    color: var(--kw-dark);
}

.kw-map-block__embed iframe {
    border-radius: var(--kw-radius-lg);
}

/* =========================================================
   40. RESPONSIVE ADDITIONS
   ========================================================= */
@media (max-width: 1200px) {
    .kw-teachers__grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .kw-events__grid,
    .kw-reviews__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kw-testimonials-prev {
        left: 0;
    }

    .kw-testimonials-next {
        right: 0;
    }
    
    .kw-class-single,
    .kw-event-single,
    .kw-teacher-single,
    .kw-preregistration {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .kw-contact-info {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kw-teachers__grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .kw-direction-highlight__inner {
        grid-template-columns: 1fr;
    }

    .kw-direction-highlight__image {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .kw-page-header {
        padding: 60px 0 40px;
        margin-top: 70px;
    }
    
    .kw-page-header__title {
        font-size: var(--kw-text-3xl);
    }
    
    .kw-events__grid,
    .kw-reviews__grid {
        grid-template-columns: 1fr;
    }
    
    .kw-preregistration__form {
        padding: 25px;
    }

    .kw-preregistration {
        gap: 24px;
    }

    .kw-form__section-title {
        font-size: var(--kw-text-base);
        margin: 18px 0 12px;
    }

    .kw-form__input,
    .kw-form__select,
    .kw-form__textarea {
        padding: 12px 14px;
        font-size: 16px;
    }

    .kw-preregistration__form .kw-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.4;
    }

    .kw-download-link {
        align-items: flex-start;
    }
    
    .kw-contact-info {
        grid-template-columns: 1fr;
    }

    .kw-testimonials-slider {
        padding-left: 0;
        padding-right: 0;
    }

    .kw-testimonials-nav {
        display: none;
    }
    
    .kw-teachers__grid--4 {
        grid-template-columns: 1fr;
    }

    .kw-map-block {
        padding: 18px;
    }

    .kw-map-block__header {
        flex-direction: column;
        align-items: flex-start;
    }
}
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fadeIn { animation: fadeIn 0.6s ease forwards; }
.animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; }
.animate-fadeInDown { animation: fadeInDown 0.6s ease forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease forwards; }
.animate-fadeInRight { animation: fadeInRight 0.6s ease forwards; }

[data-animate] {
    opacity: 0;
}

/* =========================================================
   24. RESPONSIVE DESIGN
   ========================================================= */
@media (max-width: 1200px) {
    .kw-footer__main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    :root {
        --kw-text-5xl: 2.5rem;
        --kw-text-6xl: 3rem;
    }
    
    .kw-hero__inner,
    .kw-about__inner,
    .kw-contact__inner,
    .kw-testimonials__inner,
    .kw-faq__inner,
    .kw-events__inner {
        grid-template-columns: 1fr;
    }

    .kw-about__inner {
        grid-template-columns: 1fr;
    }

    .kw-about__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .kw-about__image-wrapper--portrait {
        text-align: center;
    }
    
    .kw-hero__content {
        text-align: center;
        max-width: 100%;
    }
    
    .kw-hero__features {
        justify-content: center;
    }
    
    .kw-hero__buttons {
        justify-content: center;
    }
    
    .kw-hero__images {
        display: none;
    }
    
    .kw-classes__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kw-teachers__grid,
    .kw-blog__grid,
    .kw-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Mobile Navigation */
    .kw-nav__toggle {
        display: flex;
        z-index: 1003;
        position: relative;
    }
    
    .kw-nav__toggle.active {
        position: fixed;
        top: 20px;
        right: 20px;
    }
    
    /* Mobile Overlay */
    .kw-nav__overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    
    .kw-nav__overlay.active {
        display: block;
    }
    
    .kw-nav__list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--kw-white);
        padding: 80px 20px 40px 20px;
        box-shadow: var(--kw-shadow-xl);
        transition: right var(--kw-transition-normal);
        z-index: 1001;
        overflow-y: auto;
        gap: 0;
    }
    
    .kw-nav__item {
        border-bottom: 1px solid var(--kw-light);
        padding: 10px 0;
        width: 100%;
    }
    
    .kw-nav__link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 8px 0;
    }
    
    .kw-nav__list.active {
        right: 0;
    }
    
    .kw-nav__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        padding-left: var(--kw-spacing-lg);
        background-color: var(--kw-light);
        border-radius: var(--kw-radius-md);
        margin-top: var(--kw-spacing-sm);
    }
    
    /* JavaScript controls display via slideDown/slideUp */
    
    /* Disable hover on mobile */
    .kw-nav__item:hover .kw-nav__dropdown {
        display: none;
    }
    
    /* Dropdown toggle indicator */
    .kw-nav__item > .kw-nav__link i {
        transition: transform var(--kw-transition-fast);
    }
    
    .kw-nav__item.dropdown-open > .kw-nav__link i {
        transform: rotate(180deg);
    }
    
    /* Toggle button animation - transforms hamburger to X */
    .kw-nav__toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .kw-nav__toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .kw-nav__toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

@media (max-width: 768px) {
    :root {
        --kw-text-4xl: 2rem;
        --kw-text-5xl: 2.25rem;
        --kw-text-6xl: 2.5rem;
    }
    
    .kw-section {
        padding: var(--kw-spacing-3xl) 0;
    }
    
    .kw-topbar__inner {
        flex-direction: column;
        gap: var(--kw-spacing-sm);
        text-align: center;
    }
    
    .kw-topbar__contact {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .kw-classes__grid,
    .kw-teachers__grid,
    .kw-blog__grid,
    .kw-services__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .kw-footer__main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .kw-footer__contact-item {
        justify-content: center;
    }

    .kw-footer__contact-links {
        align-items: center;
        text-align: center;
    }
    
    .kw-footer__social {
        justify-content: center;
    }
    
    .kw-footer__newsletter-form {
        flex-direction: column;
    }
    
    .kw-form__row--2 {
        grid-template-columns: 1fr;
    }
    
    .kw-contact__form {
        padding: var(--kw-spacing-lg);
    }
    
    .kw-hero__images {
        grid-template-columns: 1fr;
    }
    
    .kw-hero__img:nth-child(2) {
        transform: none;
    }
}

@media (max-width: 480px) {
    .kw-container {
        padding: 0 var(--kw-spacing-md);
    }
    
    .kw-btn {
        padding: var(--kw-spacing-sm) var(--kw-spacing-lg);
    }
    
    .kw-hero__buttons,
    .kw-cta__buttons {
        flex-direction: column;
    }
    
    .kw-contact__images {
        grid-template-columns: 1fr;
    }
    
    .kw-about__stats {
        grid-template-columns: 1fr;
    }

    .kw-preregistration__form {
        padding: 16px;
        border-radius: var(--kw-radius-lg);
    }

    .kw-info-card {
        padding: 18px;
    }

    .kw-info-card__list {
        padding-left: 16px;
        line-height: 1.7;
    }

    .kw-form__label {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .kw-preregistration__form .kw-btn {
        font-size: 0.95rem;
        padding: 12px 14px;
    }

    .kw-preregistration__content > p,
    .kw-info-card p,
    .kw-download-link span {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* =========================================================
   25. UTILITY CLASSES
   ========================================================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--kw-spacing-sm) !important; }
.mb-2 { margin-bottom: var(--kw-spacing-md) !important; }
.mb-3 { margin-bottom: var(--kw-spacing-lg) !important; }
.mb-4 { margin-bottom: var(--kw-spacing-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--kw-spacing-sm) !important; }
.mt-2 { margin-top: var(--kw-spacing-md) !important; }
.mt-3 { margin-top: var(--kw-spacing-lg) !important; }
.mt-4 { margin-top: var(--kw-spacing-xl) !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

@media (max-width: 768px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
}

/* =========================================================
   26. TABLES
   ========================================================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--kw-spacing-lg) 0;
    background: var(--kw-white);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
    box-shadow: var(--kw-shadow-sm);
    border: 1px solid var(--kw-gray-light);
}

table thead {
    background: linear-gradient(135deg, var(--kw-primary) 0%, var(--kw-primary-dark) 100%);
    display: table-header-group;
}

table thead tr {
    background: linear-gradient(135deg, var(--kw-primary) 0%, var(--kw-primary-dark) 100%);
}

table th {
    padding: var(--kw-spacing-md) var(--kw-spacing-lg);
    text-align: left;
    font-family: var(--kw-font-heading);
    font-weight: 600;
    color: var(--kw-white) !important;
    background: var(--kw-primary);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--kw-primary-dark);
}

table td {
    padding: var(--kw-spacing-md) var(--kw-spacing-lg);
    border-bottom: 1px solid var(--kw-gray-light);
    color: var(--kw-text);
    font-size: 0.95rem;
}

table tbody tr:last-child td {
    border-bottom: none;
}

table tbody tr:nth-child(even) {
    background-color: rgba(var(--kw-primary-rgb), 0.03);
}

table tbody tr:hover {
    background-color: rgba(var(--kw-primary-rgb), 0.08);
    transition: background-color 0.2s ease;
}

table tbody tr td:first-child {
    font-weight: 600;
    color: var(--kw-primary);
}

/* Table without thead (implied header in first row) */
table:not(:has(thead)) tr:first-child th,
table:not(:has(thead)) tr:first-child td {
    background: linear-gradient(135deg, var(--kw-primary) 0%, var(--kw-primary-dark) 100%);
    color: var(--kw-white);
    font-weight: 600;
}

/* Responsive tables */
@media (max-width: 768px) {
    table {
        font-size: 0.85rem;
    }
    
    table th,
    table td {
        padding: var(--kw-spacing-sm) var(--kw-spacing-md);
    }
    
    /* Make table scrollable on mobile */
    .kw-article__content table,
    .kw-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .kw-article__content table thead,
    .kw-article__content table tbody,
    .kw-article__content table tr,
    .kw-content table thead,
    .kw-content table tbody,
    .kw-content table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
}

/* Pricing table variation */
table.kw-table--pricing th:last-child,
table.kw-table--pricing td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--kw-secondary);
}

/* Menu table specific styling */
table.kw-table--menu tbody tr td:nth-child(2) {
    color: var(--kw-primary-dark);
    font-weight: 500;
}

/* =========================================================
   27. BLOCKQUOTES & CONTENT ELEMENTS
   ========================================================= */
blockquote {
    margin: var(--kw-spacing-lg) 0;
    padding: var(--kw-spacing-lg) var(--kw-spacing-xl);
    background: linear-gradient(135deg, rgba(var(--kw-primary-rgb), 0.05) 0%, rgba(var(--kw-secondary-rgb), 0.05) 100%);
    border-left: 4px solid var(--kw-primary);
    border-radius: 0 var(--kw-radius-lg) var(--kw-radius-lg) 0;
    position: relative;
}

blockquote::before {
    content: '"';
    font-family: var(--kw-font-heading);
    font-size: 4rem;
    color: var(--kw-primary);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    left: 15px;
    line-height: 1;
}

blockquote p {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--kw-text);
    margin: 0;
    position: relative;
    z-index: 1;
}

blockquote cite,
blockquote footer {
    display: block;
    margin-top: var(--kw-spacing-sm);
    font-size: 0.9rem;
    font-style: normal;
    color: var(--kw-primary);
    font-weight: 600;
}

/* Article content styling */
.kw-article__content h3 {
    color: var(--kw-primary);
    font-family: var(--kw-font-heading);
    font-size: 1.4rem;
    margin-top: var(--kw-spacing-xl);
    margin-bottom: var(--kw-spacing-md);
}

.kw-article__content ul,
.kw-article__content ol {
    margin: var(--kw-spacing-md) 0;
    padding-left: var(--kw-spacing-xl);
}

.kw-article__content li {
    margin-bottom: var(--kw-spacing-sm);
    color: var(--kw-text);
    line-height: 1.7;
}

.kw-article__content li strong {
    color: var(--kw-primary-dark);
}

.kw-article__content p {
    margin-bottom: var(--kw-spacing-md);
    line-height: 1.8;
}

.kw-article__content em {
    color: var(--kw-text-light);
}

/* =========================================================
   40. VIE SCOLAIRE & FEATURES
   ========================================================= */
.kw-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kw-spacing-xl);
}

@media (max-width: 992px) {
    .kw-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kw-features-grid {
        grid-template-columns: 1fr;
    }
}

.kw-feature-card {
    background: var(--kw-white);
    padding: var(--kw-spacing-xl);
    border-radius: var(--kw-radius-xl);
    text-align: center;
    box-shadow: var(--kw-shadow-sm);
    transition: all 0.3s ease;
}

.kw-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--kw-shadow-lg);
}

.kw-feature-card__icon {
    width: 70px;
    height: 70px;
    background: var(--kw-bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--kw-spacing-md);
}

.kw-feature-card__icon i {
    font-size: 1.8rem;
    color: var(--kw-primary);
}

.kw-feature-card__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-lg);
    color: var(--kw-dark);
    margin-bottom: var(--kw-spacing-sm);
}

.kw-feature-card__text {
    color: var(--kw-dark-soft);
    line-height: 1.6;
    font-size: var(--kw-text-sm);
}

/* =========================================================
   41. INFORMATIONS PAGE
   ========================================================= */
.kw-info-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kw-spacing-lg);
}

@media (max-width: 768px) {
    .kw-info-links-grid {
        grid-template-columns: 1fr;
    }
}

.kw-info-link-card {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-md);
    padding: var(--kw-spacing-lg);
    background: var(--kw-white);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow-sm);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.kw-info-link-card:hover {
    border-color: var(--kw-primary);
    transform: translateX(5px);
}

.kw-info-link-card__icon {
    width: 60px;
    height: 60px;
    background: var(--kw-bg-primary);
    border-radius: var(--kw-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kw-info-link-card__icon i {
    font-size: 1.5rem;
    color: var(--kw-primary);
}

.kw-info-link-card__content {
    flex-grow: 1;
}

.kw-info-link-card__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-lg);
    color: var(--kw-dark);
    margin-bottom: 5px;
}

.kw-info-link-card__text {
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
    margin: 0;
}

.kw-info-link-card__arrow {
    color: var(--kw-primary);
    font-size: 1.2rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.kw-info-link-card:hover .kw-info-link-card__arrow {
    opacity: 1;
}

/* Documents Grid */
.kw-documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kw-spacing-lg);
}

@media (max-width: 768px) {
    .kw-documents-grid {
        grid-template-columns: 1fr;
    }
}

.kw-document-card {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-md);
    padding: var(--kw-spacing-lg);
    background: var(--kw-white);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow-sm);
    text-decoration: none;
    transition: all 0.3s ease;
}

.kw-document-card:hover {
    box-shadow: var(--kw-shadow-lg);
}

.kw-document-card__icon {
    width: 50px;
    height: 50px;
    background: #FEE2E2;
    border-radius: var(--kw-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kw-document-card__icon i {
    font-size: 1.5rem;
    color: #DC2626;
}

.kw-document-card__content {
    flex-grow: 1;
}

.kw-document-card__title {
    font-family: var(--kw-font-heading);
    color: var(--kw-dark);
    margin-bottom: 5px;
}

.kw-document-card__text {
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
    margin: 0;
}

.kw-document-card__download {
    background: var(--kw-primary);
    color: var(--kw-white);
    padding: var(--kw-spacing-sm) var(--kw-spacing-md);
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   42. PRATIQUES PAGE
   ========================================================= */
.kw-practical-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kw-spacing-xl);
}

@media (max-width: 768px) {
    .kw-practical-grid {
        grid-template-columns: 1fr;
    }
}

.kw-practical-card {
    background: var(--kw-white);
    padding: var(--kw-spacing-xl);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow-md);
}

.kw-practical-card__icon {
    width: 60px;
    height: 60px;
    background: var(--kw-bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--kw-spacing-md);
}

.kw-practical-card__icon i {
    font-size: 1.5rem;
    color: var(--kw-primary);
}

.kw-practical-card__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-xl);
    color: var(--kw-dark);
    margin-bottom: var(--kw-spacing-lg);
}

.kw-practical-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--kw-spacing-sm);
}

/* Schedule Items */
.kw-schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--kw-spacing-sm) 0;
    border-bottom: 1px dashed var(--kw-gray-light);
}

.kw-schedule-item:last-child {
    border-bottom: none;
}

.kw-schedule-item__label {
    color: var(--kw-dark-soft);
}

.kw-schedule-item__time {
    font-weight: 600;
    color: var(--kw-dark);
}

.kw-schedule-item--highlight {
    background: var(--kw-bg-secondary);
    padding: var(--kw-spacing-sm) var(--kw-spacing-md);
    border-radius: var(--kw-radius-md);
    border-bottom: none;
}

.kw-schedule-item--highlight .kw-schedule-item__time {
    color: var(--kw-secondary-dark);
}

/* Calendar Items */
.kw-calendar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--kw-spacing-sm) 0;
    border-bottom: 1px dashed var(--kw-gray-light);
}

.kw-calendar-item:last-child {
    border-bottom: none;
}

.kw-calendar-item__period {
    color: var(--kw-dark-soft);
}

.kw-calendar-item__date {
    font-weight: 600;
    color: var(--kw-primary);
}

/* Pricing Grid */
.kw-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kw-spacing-xl);
    align-items: start;
}

@media (max-width: 992px) {
    .kw-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kw-pricing-grid {
        grid-template-columns: 1fr;
    }
}

.kw-pricing-card {
    background: var(--kw-white);
    padding: var(--kw-spacing-xl);
    border-radius: var(--kw-radius-xl);
    box-shadow: var(--kw-shadow-md);
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.kw-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--kw-shadow-xl);
}

.kw-pricing-card--featured {
    border: 2px solid var(--kw-primary);
    transform: scale(1.05);
}

.kw-pricing-card--featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.kw-pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--kw-primary);
    color: var(--kw-white);
    padding: 5px 20px;
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-sm);
    font-weight: 600;
}

.kw-pricing-card__title {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-xl);
    color: var(--kw-dark);
    margin-bottom: 5px;
}

.kw-pricing-card__age {
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
    margin-bottom: var(--kw-spacing-md);
}

.kw-pricing-card__price {
    margin-bottom: var(--kw-spacing-lg);
}

.kw-pricing-card__amount {
    font-family: var(--kw-font-heading);
    font-size: var(--kw-text-4xl);
    color: var(--kw-primary);
    font-weight: 700;
}

.kw-pricing-card__currency {
    display: block;
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
}

.kw-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--kw-spacing-lg);
    text-align: left;
}

.kw-pricing-card__features li {
    padding: var(--kw-spacing-sm) 0;
    color: var(--kw-dark-soft);
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
}

.kw-pricing-card__features i {
    color: var(--kw-accent-green);
}

.kw-pricing-note {
    display: flex;
    align-items: flex-start;
    gap: var(--kw-spacing-md);
    background: var(--kw-bg-primary);
    padding: var(--kw-spacing-lg);
    border-radius: var(--kw-radius-xl);
    margin-top: var(--kw-spacing-xl);
}

.kw-pricing-note i {
    color: var(--kw-primary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kw-pricing-note p {
    margin: 0;
    color: var(--kw-dark-soft);
    line-height: 1.6;
}

/* Practical Split Layout */
.kw-practical-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-spacing-xxl);
    align-items: start;
}

@media (max-width: 992px) {
    .kw-practical-split {
        grid-template-columns: 1fr;
    }
}

.kw-practical-split__content {
    padding-right: var(--kw-spacing-xl);
}

/* Steps List */
.kw-steps-list {
    margin: var(--kw-spacing-xl) 0;
}

.kw-step {
    display: flex;
    gap: var(--kw-spacing-md);
    margin-bottom: var(--kw-spacing-lg);
}

.kw-step__number {
    width: 40px;
    height: 40px;
    background: var(--kw-primary);
    color: var(--kw-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.kw-step__content h4 {
    font-family: var(--kw-font-heading);
    color: var(--kw-dark);
    margin-bottom: 5px;
}

.kw-step__content p {
    color: var(--kw-dark-soft);
    font-size: var(--kw-text-sm);
    margin: 0;
}

/* Docs Split */
.kw-practical-split__docs {
    background: var(--kw-light);
    padding: var(--kw-spacing-xl);
    border-radius: var(--kw-radius-xl);
}

.kw-practical-split__docs h3 {
    font-family: var(--kw-font-heading);
    color: var(--kw-dark);
    margin-bottom: var(--kw-spacing-lg);
}

.kw-docs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--kw-spacing-xl);
}

.kw-docs-list li {
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
    padding: var(--kw-spacing-sm) 0;
    color: var(--kw-dark-soft);
}

.kw-docs-list i {
    color: var(--kw-primary);
    width: 20px;
}

.kw-download-box {
    background: var(--kw-white);
    padding: var(--kw-spacing-lg);
    border-radius: var(--kw-radius-lg);
}

.kw-download-box h4 {
    font-family: var(--kw-font-heading);
    color: var(--kw-dark);
    margin-bottom: var(--kw-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--kw-spacing-sm);
}

.kw-download-box h4 i {
    color: var(--kw-primary);
}