/* Panamerican Taekwondo Academy - Combined Professional Landing Page */

:root {
    --bg: #fcf9f9da;
    --text: #ffffff;
    --accent: #cc1f2b;
    --accent-light: #ff2d3d;
    --muted: #6b7280;
    --max-width: flex;
    --gap: 1.5rem;
    --radius: 12px;
    --gradient-bg: linear-gradient(to bottom, #383636, #000000);
    --card-bg: rgba(40, 15, 184, 0.527);
    --card-border: rgba(218, 8, 8, 0.2);
    --belt-divider-spacing: 48px;
}


/* Responsive Schedule Table */
        .schedule-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin: 20px 0;
        }

        .schedule-table {
            width: 100%;
            border-collapse: collapse;
            min-width: flex;
            background: rgba(255, 255, 255, 0.336);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .schedule-table th,
        .schedule-table td {
            padding: 12px;
            text-align: center;
            border: 1px solid #dddddd6b;
        }

        .schedule-table th {
            background: #1a472a;
            color: rgba(255, 255, 255, 0.425);
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .schedule-table .time-col {
            background: #0a5cad79;
            font-weight: bold;
            white-space: nowrap;
        }

        /* Mobile Responsive - Stack Schedule Vertically */
        @media screen and (max-width: 768px) {
            .schedule-table {
                min-width: 100%;
                font-size: 14px;
            }

            .schedule-table th,
            .schedule-table td {
                padding: 8px 4px;
                font-size: 12px;
            }

            .schedule-wrapper {
                margin: 10px -15px;
            }
        }

        @media screen and (max-width: 480px) {
            .schedule-table {
                display: block;
                overflow-x: auto;
            }

            .schedule-table thead {
                display: block;
            }

            .schedule-table tbody {
                display: block;
            }

            .schedule-table tr {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 10px;
                border: 1px solid #ddd;
                background: rgba(41, 2, 214, 0.445);
            }

            .schedule-table th,
            .schedule-table td {
                flex: 1 1 45%;
                min-width: 45%;
                padding: 10px;
                border: 1px solid #eeeeee73;
                text-align: left;
            }

            .schedule-table th:first-child {
                flex: 1 1 100%;
                background: #1a472a;
                color: rgba(107, 7, 7, 0.363);
            }

            .schedule-table .time-col {
                flex: 1 1 100%;
                background: #2d5f3d;
                color: rgba(255, 255, 255, 0.342);
                font-size: 14px;
                font-weight: bold;
            }

            .schedule-table td::before {
                content: attr(data-label);
                font-weight: bold;
                display: block;
                margin-bottom: 5px;
                color: #1a472a;
            }
        }

        /* Class color coding */
        .class-power-up { background: #afa40d98; }
        .class-little-ninjas { background: #13d13f70; }
        .class-dragons-advanced { background: #0651a17c; }
        .class-adult { background: #96091579; }
        .class-blackbelt { background: #107f9256; }
        .class-adult-advanced { background: #41098f52; }
        .class-family { background: #96750973; }
        .class-competition { background: #8503036b; }
        .class-open { background: #06509b5d; }
        /* Login */
         .login-btn, .logout-btn {
            background: rgba(0,0,0,0.6);
            color: #fff;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .login-btn:hover, .logout-btn:hover {
            opacity: 0.9;
        }

        /* Login Modal */
        .login-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            backdrop-filter: blur(5px);
        }

        .login-modal .modal-content {
            background: linear-gradient(135deg, #1a472a 0%, #2d5f3d 100%);
            padding: 2.5rem;
            border-radius: 16px;
            width: 90%;
            max-width: 420px;
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            animation: modalSlideIn 0.3s ease;
        }

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

        .login-modal .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .login-modal .modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(90deg);
        }

        .login-modal h2 {
            color: #fff;
            margin: 0 0 1.5rem 0;
            font-size: 1.8rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .login-modal .form-group {
            margin-bottom: 1.5rem;
        }

        .login-modal .form-group label {
            display: block;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 0.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .login-modal .form-group input {
            width: 100%;
            padding: 0.9rem;
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .login-modal .form-group input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .login-modal .form-group input:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.15);
        }

        .login-modal .error-message {
            color: #ff6b6b;
            background: rgba(255, 107, 107, 0.1);
            padding: 0.7rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            text-align: center;
            font-size: 0.9rem;
            display: none;
        }

        .login-modal .error-message:not(:empty) {
            display: block;
        }

        .login-modal .btn-submit {
            width: 100%;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.9);
            color: #1a472a;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .login-modal .btn-submit:hover {
            background: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .login-modal .btn-submit:active {
            transform: translateY(0);
        }

        /* Modal */
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .modal {
            background: #fff;
            width: 360px;
            max-width: calc(100% - 32px);
            border-radius: 8px;
            padding: 18px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        }

        .modal h3 {
            margin-top: 0;
        }

        .form-group { margin-bottom: 12px; }
        .form-group label { display:block; font-weight:600; margin-bottom:6px; }
        .form-group input, .form-group select {
            width:100%;
            padding:8px 10px;
            border-radius:6px;
            border:1px solid #ccc;
        }

        .btn-primary {
            background:#1a472a;
            color:#fff;
            padding:8px 12px;
            border-radius:6px;
            border:none;
            cursor:pointer;
            font-weight:700;
        }

        .btn-secondary {
            background:#ddd;
            color:#222;
            padding:8px 12px;
            border-radius:6px;
            border:none;
            cursor:pointer;
            margin-left:8px;
        }

        /* Dashboard containers */
        .dashboard {
            display: none;
            margin: 20px auto;
            max-width: 1000px;
            background: rgba(255,255,255,0.92);
            padding: 18px;
            border-radius: 8px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        }

        .dashboard h3 { margin-top: 0; }

        .user-welcome { display:flex; justify-content:space-between; align-items:center; gap:12px; }

        .user-list { margin-top: 12px; }
        .user-item { display:flex; justify-content:space-between; padding:8px; border-bottom:1px solid #eee; align-items:center; }

        .small { font-size: 0.9rem; color:#555; }

        @media (max-width:600px) {
            .header-actions { margin-left: 8px; }
            .modal { width: 92%; }
        }
/*LOGIN FINISH HERE*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: grid;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--gradient-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

/* ===== HEADER ===== */
header {
    background: rgba(218, 39, 33, 0.801);
    padding: 2rem 1rem;
    text-align: center;
    border-bottom: 2px solid rgba(204, 31, 43, 0.87);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(27, 27, 27, 0.5);
}

.header-logo {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.884));
}

/* Quick Navigation Bar */
.quick-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.9);
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(204, 31, 43, 0.8), rgba(255, 45, 61, 0.8));
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(204, 31, 43, 0.3);
}

.nav-btn:hover {
    background: linear-gradient(135deg, rgba(255, 45, 61, 1), rgba(204, 31, 43, 1));
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(204, 31, 43, 0.6);
}

.nav-btn:active {
    transform: translateY(0);
}

.nav-btn i {
    font-size: 16px;
}

.admin-login-btn,
#loginBtn {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

.admin-login-btn:hover,
#loginBtn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* ===== BELT DIVIDER ===== */
.belt-divider {
    width: 100%;
    height: 80px;
    background: #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 1);
    position: relative;
    overflow: inherit;
}

/* Belt texture - fabric weave pattern */
.belt-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 0px,
            transparent 0px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.015) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Belt stitching along edges */
.belt-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgb(185, 178, 178) 8px,
            rgb(200, 200, 200) 9px,
            transparent 9px,
            transparent 17px,
            rgba(200, 200, 200, 0.589) 17px,
            rgba(200, 200, 200, 0.726) 18px,
            transparent 18px,
            transparent 26px,
            rgb(200, 200, 200) 26px,
            rgb(200, 200, 200) 27px,
            transparent 27px,
            transparent 35px,
            rgba(200, 200, 200, 0.534) 35px,
            rgba(200, 200, 200, 0.692) 36px,
            transparent 36px,
            transparent 44px,
            rgb(200, 200, 200) 44px,
            rgb(200, 200, 200) 45px,
            transparent 45px,
            transparent 53px,
            rgba(200, 200, 200, 0.4) 53px,
            rgba(200, 200, 200, 0.4) 54px,
            transparent 54px,
            transparent 62px,
            rgb(200, 200, 200) 62px,
            rgb(200, 200, 200) 63px,
            transparent 63px,
            transparent 71px,
            rgba(200, 200, 200, 0.4) 71px,
            rgba(200, 200, 200, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* Shared spacing for all belt dividers *//* Individual spacing for white and black belts */
.belt-divider {
    margin-top: 4px;
    margin-bottom: 0px;
}
.belt-divider-yellow {
    margin-top: -100px;
    margin-bottom: 10px;
}
.belt-divider-orange {
    margin-top: 0rem;
    margin-bottom: 0px;
}
.belt-divider-orangestripe {
    margin-top: 0px;
    margin-bottom: 0;
}
.belt-divider-green {
    margin-top: -5px;
    margin-bottom: 0cm;
}

.belt-divider-greenstripe {
    margin-top: -5px;
    margin-bottom: 0;
}
.belt-divider-blue {
    margin-top: var(--belt-divider-spacing, 7rem);
    margin-bottom: none;
}
.belt-divider-bluestripe {
    margin-top: var(--belt-divider-spacing, 7rem);
    margin-bottom: none;
}
.belt-divider-red {
    margin-top: var(--belt-divider-spacing, 7rem);
    margin-bottom: none;
}
.belt-divider-redstripe {
    margin-top: var(--belt-divider-spacing, 7rem);
    margin-bottom: none;
}
.belt-divider-redblack {
    margin-top: var(--belt-divider-spacing, 7rem);
    margin-bottom: none;
}
.belt-divider-black {
    margin-top: none;
    margin-bottom: 14px;
}

/* ===== YELLOW BELT DIVIDER ===== */
.belt-divider-yellow {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: #e8c547;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Yellow belt texture - fabric weave pattern */
.belt-divider-yellow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Yellow belt stitching along edges */
.belt-divider-yellow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(150, 100, 0, 0.3) 8px,
            rgba(150, 100, 0, 0.3) 9px,
            transparent 9px,
            transparent 17px,
            rgba(150, 100, 0, 0.3) 17px,
            rgba(150, 100, 0, 0.3) 18px,
            transparent 18px,
            transparent 26px,
            rgba(150, 100, 0, 0.3) 26px,
            rgba(150, 100, 0, 0.3) 27px,
            transparent 27px,
            transparent 35px,
            rgba(150, 100, 0, 0.3) 35px,
            rgba(150, 100, 0, 0.3) 36px,
            transparent 36px,
            transparent 44px,
            rgba(150, 100, 0, 0.3) 44px,
            rgba(150, 100, 0, 0.3) 45px,
            transparent 45px,
            transparent 53px,
            rgba(150, 100, 0, 0.3) 53px,
            rgba(150, 100, 0, 0.3) 54px,
            transparent 54px,
            transparent 62px,
            rgba(150, 100, 0, 0.3) 62px,
            rgba(150, 100, 0, 0.3) 63px,
            transparent 63px,
            transparent 71px,
            rgba(150, 100, 0, 0.3) 71px,
            rgba(150, 100, 0, 0.3) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== ORANGE BELT DIVIDER ===== */
.belt-divider-orange {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: #e64a0d;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Orange belt texture - fabric weave pattern */
.belt-divider-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Orange belt stitching along edges */
.belt-divider-orange::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(120, 40, 0, 0.3) 8px,
            rgba(120, 40, 0, 0.3) 9px,
            transparent 9px,
            transparent 17px,
            rgba(120, 40, 0, 0.3) 17px,
            rgba(120, 40, 0, 0.3) 18px,
            transparent 18px,
            transparent 26px,
            rgba(120, 40, 0, 0.3) 26px,
            rgba(120, 40, 0, 0.3) 27px,
            transparent 27px,
            transparent 35px,
            rgba(120, 40, 0, 0.3) 35px,
            rgba(120, 40, 0, 0.3) 36px,
            transparent 36px,
            transparent 44px,
            rgba(120, 40, 0, 0.3) 44px,
            rgba(120, 40, 0, 0.3) 45px,
            transparent 45px,
            transparent 53px,
            rgba(120, 40, 0, 0.3) 53px,
            rgba(120, 40, 0, 0.3) 54px,
            transparent 54px,
            transparent 62px,
            rgba(120, 40, 0, 0.3) 62px,
            rgba(120, 40, 0, 0.3) 63px,
            transparent 63px,
            transparent 71px,
            rgba(120, 40, 0, 0.3) 71px,
            rgba(120, 40, 0, 0.3) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== ORANGE BELT WITH GREEN STRIPE ===== */
.belt-divider-orangestripe {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: linear-gradient(to bottom, 
        #e64a0d 0%, 
        #e64a0d 35%, 
        #014e01 40%, 
        #014e01 60%, 
        #e64a0d 65%, 
        #e64a0d 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Orange stripe belt texture - fabric weave pattern */
.belt-divider-orangestripe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Orange stripe belt stitching along edges */
.belt-divider-orangestripe::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(120, 40, 0, 0.3) 8px,
            rgba(120, 40, 0, 0.3) 9px,
            transparent 9px,
            transparent 17px,
            rgba(120, 40, 0, 0.3) 17px,
            rgba(120, 40, 0, 0.3) 18px,
            transparent 18px,
            transparent 26px,
            rgba(120, 40, 0, 0.3) 26px,
            rgba(120, 40, 0, 0.3) 27px,
            transparent 27px,
            transparent 35px,
            rgba(10, 50, 10, 0.4) 35px,
            rgba(10, 50, 10, 0.4) 36px,
            transparent 36px,
            transparent 44px,
            rgba(10, 50, 10, 0.4) 44px,
            rgba(10, 50, 10, 0.4) 45px,
            transparent 45px,
            transparent 53px,
            rgba(10, 50, 10, 0.4) 53px,
            rgba(10, 50, 10, 0.4) 54px,
            transparent 54px,
            transparent 62px,
            rgba(10, 50, 10, 0.4) 62px,
            rgba(10, 50, 10, 0.4) 63px,
            transparent 63px,
            transparent 71px,
            rgba(10, 50, 10, 0.4) 71px,
            rgba(10, 50, 10, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== GREEN BELT DIVIDER ===== */
.belt-divider-green {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: #014e01;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Green belt texture - fabric weave pattern */
.belt-divider-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Green belt stitching along edges */
.belt-divider-green::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(10, 50, 10, 0.4) 8px,
            rgba(10, 50, 10, 0.4) 9px,
            transparent 9px,
            transparent 17px,
            rgba(10, 50, 10, 0.4) 17px,
            rgba(10, 50, 10, 0.4) 18px,
            transparent 18px,
            transparent 26px,
            rgba(10, 50, 10, 0.4) 26px,
            rgba(10, 50, 10, 0.4) 27px,
            transparent 27px,
            transparent 35px,
            rgba(10, 50, 10, 0.4) 35px,
            rgba(10, 50, 10, 0.4) 36px,
            transparent 36px,
            transparent 44px,
            rgba(10, 50, 10, 0.4) 44px,
            rgba(10, 50, 10, 0.4) 45px,
            transparent 45px,
            transparent 53px,
            rgba(10, 50, 10, 0.4) 53px,
            rgba(10, 50, 10, 0.4) 54px,
            transparent 54px,
            transparent 62px,
            rgba(10, 50, 10, 0.4) 62px,
            rgba(10, 50, 10, 0.4) 63px,
            transparent 63px,
            transparent 71px,
            rgba(10, 50, 10, 0.4) 71px,
            rgba(10, 50, 10, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== GREEN BELT WITH BLUE STRIPE ===== */
.belt-divider-greenstripe {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: linear-gradient(to bottom, 
        #014e01 0%, 
        #014e01 35%, 
        #0a017c 40%, 
        #0a017c 60%, 
        #014e01 65%, 
        #014e01 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Green stripe belt texture - fabric weave pattern */
.belt-divider-greenstripe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Green stripe belt stitching along edges */
.belt-divider-greenstripe::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(10, 50, 10, 0.4) 8px,
            rgba(10, 50, 10, 0.4) 9px,
            transparent 9px,
            transparent 17px,
            rgba(10, 50, 10, 0.4) 17px,
            rgba(10, 50, 10, 0.4) 18px,
            transparent 18px,
            transparent 26px,
            rgba(10, 50, 10, 0.4) 26px,
            rgba(10, 50, 10, 0.4) 27px,
            transparent 27px,
            transparent 35px,
            rgba(0, 20, 60, 0.4) 35px,
            rgba(0, 20, 60, 0.4) 36px,
            transparent 36px,
            transparent 44px,
            rgba(0, 20, 60, 0.4) 44px,
            rgba(0, 20, 60, 0.4) 45px,
            transparent 45px,
            transparent 53px,
            rgba(0, 20, 60, 0.4) 53px,
            rgba(0, 20, 60, 0.4) 54px,
            transparent 54px,
            transparent 62px,
            rgba(0, 20, 60, 0.4) 62px,
            rgba(0, 20, 60, 0.4) 63px,
            transparent 63px,
            transparent 71px,
            rgba(0, 20, 60, 0.4) 71px,
            rgba(0, 20, 60, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== BLUE BELT DIVIDER ===== */
.belt-divider-blue {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: #0a017c;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Blue belt texture - fabric weave pattern */
.belt-divider-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Blue belt stitching along edges */
.belt-divider-blue::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(0, 20, 60, 0.4) 8px,
            rgba(0, 20, 60, 0.4) 9px,
            transparent 9px,
            transparent 17px,
            rgba(0, 20, 60, 0.4) 17px,
            rgba(0, 20, 60, 0.4) 18px,
            transparent 18px,
            transparent 26px,
            rgba(0, 20, 60, 0.4) 26px,
            rgba(0, 20, 60, 0.4) 27px,
            transparent 27px,
            transparent 35px,
            rgba(0, 20, 60, 0.4) 35px,
            rgba(0, 20, 60, 0.4) 36px,
            transparent 36px,
            transparent 44px,
            rgba(0, 20, 60, 0.4) 44px,
            rgba(0, 20, 60, 0.4) 45px,
            transparent 45px,
            transparent 53px,
            rgba(0, 20, 60, 0.4) 53px,
            rgba(0, 20, 60, 0.4) 54px,
            transparent 54px,
            transparent 62px,
            rgba(0, 20, 60, 0.4) 62px,
            rgba(0, 20, 60, 0.4) 63px,
            transparent 63px,
            transparent 71px,
            rgba(0, 20, 60, 0.4) 71px,
            rgba(0, 20, 60, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== BLUE BELT WITH RED STRIPE ===== */
.belt-divider-bluestripe {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: linear-gradient(to bottom, 
        #0a017c 0%, 
        #0a017c 35%, 
        #a01a1a 40%, 
        #a01a1a 60%, 
        #0a017c 65%, 
        #0a017c 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Blue stripe belt texture - fabric weave pattern */
.belt-divider-bluestripe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Blue stripe belt stitching along edges */
.belt-divider-bluestripe::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(0, 20, 60, 0.4) 8px,
            rgba(0, 20, 60, 0.4) 9px,
            transparent 9px,
            transparent 17px,
            rgba(0, 20, 60, 0.4) 17px,
            rgba(0, 20, 60, 0.4) 18px,
            transparent 18px,
            transparent 26px,
            rgba(0, 20, 60, 0.4) 26px,
            rgba(0, 20, 60, 0.4) 27px,
            transparent 27px,
            transparent 35px,
            rgba(60, 0, 0, 0.4) 35px,
            rgba(60, 0, 0, 0.4) 36px,
            transparent 36px,
            transparent 44px,
            rgba(60, 0, 0, 0.4) 44px,
            rgba(60, 0, 0, 0.4) 45px,
            transparent 45px,
            transparent 53px,
            rgba(60, 0, 0, 0.4) 53px,
            rgba(60, 0, 0, 0.4) 54px,
            transparent 54px,
            transparent 62px,
            rgba(0, 20, 60, 0.4) 62px,
            rgba(0, 20, 60, 0.4) 63px,
            transparent 63px,
            transparent 71px,
            rgba(0, 20, 60, 0.4) 71px,
            rgba(0, 20, 60, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== RED BELT DIVIDER ===== */
.belt-divider-red {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: #a01a1a;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

/* Red belt texture - fabric weave pattern */
.belt-divider-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Red belt stitching along edges */
.belt-divider-red::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(60, 0, 0, 0.4) 8px,
            rgba(60, 0, 0, 0.4) 9px,
            transparent 9px,
            transparent 17px,
            rgba(60, 0, 0, 0.4) 17px,
            rgba(60, 0, 0, 0.4) 18px,
            transparent 18px,
            transparent 26px,
            rgba(60, 0, 0, 0.4) 26px,
            rgba(60, 0, 0, 0.4) 27px,
            transparent 27px,
            transparent 35px,
            rgba(60, 0, 0, 0.4) 35px,
            rgba(60, 0, 0, 0.4) 36px,
            transparent 36px,
            transparent 44px,
            rgba(60, 0, 0, 0.4) 44px,
            rgba(60, 0, 0, 0.4) 45px,
            transparent 45px,
            transparent 53px,
            rgba(60, 0, 0, 0.4) 53px,
            rgba(60, 0, 0, 0.4) 54px,
            transparent 54px,
            transparent 62px,
            rgba(60, 0, 0, 0.4) 62px,
            rgba(60, 0, 0, 0.4) 63px,
            transparent 63px,
            transparent 71px,
            rgba(60, 0, 0, 0.4) 71px,
            rgba(60, 0, 0, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== RED BELT WITH BLACK STRIPE ===== */
.belt-divider-redstripe {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: linear-gradient(to bottom, 
        #a01a1a 0%, 
        #a01a1a 35%, 
        #0a0a0a 40%, 
        #0a0a0a 60%, 
        #a01a1a 65%, 
        #a01a1a 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

/* Red stripe belt texture - fabric weave pattern */
.belt-divider-redstripe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Red stripe belt stitching along edges */
.belt-divider-redstripe::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(60, 0, 0, 0.4) 8px,
            rgba(60, 0, 0, 0.4) 9px,
            transparent 9px,
            transparent 17px,
            rgba(60, 0, 0, 0.4) 17px,
            rgba(60, 0, 0, 0.4) 18px,
            transparent 18px,
            transparent 26px,
            rgba(60, 0, 0, 0.4) 26px,
            rgba(60, 0, 0, 0.4) 27px,
            transparent 27px,
            transparent 35px,
            rgba(30, 30, 30, 0.5) 35px,
            rgba(30, 30, 30, 0.5) 36px,
            transparent 36px,
            transparent 44px,
            rgba(30, 30, 30, 0.5) 44px,
            rgba(30, 30, 30, 0.5) 45px,
            transparent 45px,
            transparent 53px,
            rgba(30, 30, 30, 0.5) 53px,
            rgba(30, 30, 30, 0.5) 54px,
            transparent 54px,
            transparent 62px,
            rgba(60, 0, 0, 0.4) 62px,
            rgba(60, 0, 0, 0.4) 63px,
            transparent 63px,
            transparent 71px,
            rgba(60, 0, 0, 0.4) 71px,
            rgba(60, 0, 0, 0.4) 72px,
            transparent 72px,
            transparent 80px
        );
    pointer-events: none;
}

/* ===== RED-BLACK BELT DIVIDER ===== */
.belt-divider-redblack {
    width: 100%;
    height: 80px;
    margin-top: 100px;
    background: linear-gradient(to bottom, 
        #a01a1a 0%, 
        #a01a1a 50%, 
        #0a0a0a 50%, 
        #0a0a0a 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.05),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Red-black belt texture - horizontal fabric thread pattern */
.belt-divider-redblack::before {
    content: '';
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
}

/* Red-black belt horizontal stitching lines */
.belt-divider-redblack::after {
    content: '태권도';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 12px;
    color: transparent;
    background: linear-gradient(135deg, 
        #D4AF37 0%, 
        #F4E5A3 25%, 
        #FFD700 50%, 
        #F4E5A3 75%, 
        #D4AF37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 
        0 0 8px rgba(212, 175, 55, 0.25),
        1px 1px 2px rgba(0, 0, 0, 0.6),
        0 2px 3px rgba(212, 175, 55, 0.15);
    font-family: 'Noto Sans KR', 'Malgun Gothic', 'Gulim', sans-serif;
    pointer-events: none;
    z-index: 2;
}

/* Red-black belt stitching layer */
.belt-divider-redblack {
    position: relative;
}

.belt-divider-redblack::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(60, 0, 0, 0.4) 8px,
            rgba(60, 0, 0, 0.4) 9px,
            transparent 9px,
            transparent 17px,
            rgba(60, 0, 0, 0.4) 17px,
            rgba(60, 0, 0, 0.4) 18px,
            transparent 18px,
            transparent 26px,
            rgba(60, 0, 0, 0.4) 26px,
            rgba(60, 0, 0, 0.4) 27px,
            transparent 27px,
            transparent 35px,
            rgba(60, 0, 0, 0.4) 35px,
            rgba(60, 0, 0, 0.4) 36px,
            transparent 36px,
            transparent 44px,
            rgba(40, 0, 0, 0.5) 44px,
            rgba(40, 0, 0, 0.5) 45px,
            transparent 45px,
            transparent 53px,
            rgba(30, 30, 30, 0.5) 53px,
            rgba(30, 30, 30, 0.5) 54px,
            transparent 54px,
            transparent 62px,
            rgba(30, 30, 30, 0.5) 62px,
            rgba(30, 30, 30, 0.5) 63px,
            transparent 63px,
            transparent 71px,
            rgba(30, 30, 30, 0.5) 71px,
            rgba(30, 30, 30, 0.5) 72px,
            transparent 72px,
            transparent 80px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.301) 1px,
            transparent 2px,
            transparent 3px
        );
    opacity: 0.6;
    pointer-events: none;
}

/* ===== BLACK BELT DIVIDER ===== */
.belt-divider-black {
    width: 100%;
    height: 80px;
    margin-bottom: 5px;
    background: linerar-gradient(to bottom, 
        #0a0a0a1e 0%, 
        #0a0a0a 50%,
        #0a0a0a41 50%,
        #0a0a0a21 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.212),
        inset 0 1px 2px rgba(17, 11, 11, 0.199),
        inset 0 -1px 2px rgba(0, 0, 0, 0.151);
    position: relative;
    overflow: hidden;
}

/* Black belt texture - matte fabric weave pattern */
.belt-divider-black::before {
    content: '';
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.973) 1px,
            transparent 2px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgb(0, 0, 0) 1px,
            transparent 2px,
            transparent 4px
        );
    opacity: 0.7;
}

/* Black belt golden Korean embroidery */
.belt-divider-black::after {
    content: '태권도';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 12px;
    color: rgba(0, 0, 0, 0.041);
    background: linear-gradient(135deg, 
        #D4AF37 0%, 
        #F4E5A3 25%, 
        #FFD700 50%, 
        #F4E5A3 75%, 
        #D4AF37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 
        0 0 8px rgba(212, 175, 55, 0.25),
        1px 1px 2px rgba(0, 0, 0, 0.6),
        0 2px 3px rgba(212, 175, 55, 0.15);
    font-family: 'Noto Sans KR', 'Malgun Gothic', 'Gulim', sans-serif;
    pointer-events: none;
}

/* ===== SECTIONS ===== */
section {
    padding: 3rem 1rem;
    text-align: center;
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 100;
}

section h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 0 0 20px rgb(255, 2, 19);
    font-weight: 700;
    position: relative;
    z-index: 1000;
}

section p {
    font-size: 1.2rem;
    color: rgb(255, 255, 255);
    max-width: 700px;
    margin: 0 auto 1.5rem;
    line-height: 1.8;
    z-index: 1000;
}

/* ===== HERO SECTION ===== */
.hero-section {
    padding: 1rem 1rem 1rem;
}

.hero-title {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1.5rem 3rem;
    border-radius: 15px;
    border: 2px solid rgba(204, 31, 43, 0.4);
    display: inline-block;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    animation: textGlow 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin-bottom: 2rem;
    z-index: 1000;
}

.hero-title::before,
.hero-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 50% 50%, rgba(255, 220, 100, 1) 0%, rgba(255, 140, 60, 0.95) 12%, rgba(255, 80, 40, 0.85) 25%, rgba(180, 40, 20, 0.6) 40%, rgba(40, 10, 5, 0.3) 55%, transparent 70%);
    z-index: 1000;
    filter: blur(0.5px) contrast(1.6) saturate(1.5) brightness(1.15);
    mix-blend-mode: screen;
    pointer-events: none;
}

.hero-title::before {
    animation: fireFromLeft 5s cubic-bezier(0.4, 0, 0.2, 1) infinite, modernFlicker 0.2s ease-in-out infinite alternate;
}

.hero-title::after {
    animation: fireFromRight 5s cubic-bezier(0.4, 0, 0.2, 1) infinite, modernFlicker 0.2s ease-in-out infinite alternate;
}

.hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1rem;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    z-index: 1000;
}

.tagline {
    font-style: italic;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.95);
}

.centered-tagline {
    text-align: center;
    margin: 0 auto;
}

.centered-tagline p {
    margin: 0.5em 0;
}

/* ===== FIRE ANIMATIONS ===== */
@keyframes fireFromLeft {
    0% { clip-path: circle(0% at 0% 50%); opacity: 0; }
    8% { clip-path: circle(8% at 0% 50%); opacity: 0.9; }
    30% { clip-path: circle(15% at 25% 50%); opacity: 1; }
    48% { clip-path: circle(25% at 50% 50%); opacity: 1; }
    52% { clip-path: circle(30% at 50% 50%); opacity: 1; }
    58% { clip-path: circle(20% at 50% 50%); opacity: 1; }
    76% { clip-path: circle(6% at 50% 50%); opacity: 0.5; }
    100% { clip-path: circle(0% at 50% 50%); opacity: 0; }
}

@keyframes fireFromRight {
    0% { clip-path: circle(0% at 100% 50%); opacity: 0; }
    8% { clip-path: circle(8% at 100% 50%); opacity: 0.9; }
    30% { clip-path: circle(15% at 75% 50%); opacity: 1; }
    48% { clip-path: circle(25% at 50% 50%); opacity: 1; }
    52% { clip-path: circle(30% at 50% 50%); opacity: 1; }
    58% { clip-path: circle(20% at 50% 50%); opacity: 1; }
    76% { clip-path: circle(6% at 50% 50%); opacity: 0.5; }
    100% { clip-path: circle(0% at 50% 50%); opacity: 0; }
}

@keyframes modernFlicker {
    0% { opacity: 0.92; }
    50% { opacity: 0.98; }
    100% { opacity: 1; }
}

@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); }
    30% { text-shadow: 0 0 8px rgba(255, 100, 0, 0.3); }
    48% { text-shadow: 0 0 25px rgba(255, 180, 80, 0.7), 0 0 40px rgba(255, 140, 60, 0.6); }
    52% { text-shadow: 0 0 40px rgba(255, 220, 120, 0.9), 0 0 60px rgba(255, 180, 80, 0.8); }
    58% { text-shadow: 0 0 50px rgba(255, 240, 150, 1), 0 0 70px rgba(255, 200, 100, 0.9); }
    76% { text-shadow: 0 0 15px rgba(255, 140, 60, 0.4); }
}

/* ===== BUTTONS ===== */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.glassy-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fefeff;
    text-decoration: none;
    background: rgba(45, 9, 175, 0.788);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
}

.glassy-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.glassy-button:hover::before {
    left: 100%;
}

.glassy-button:hover {
    transform: translateY(-4px) scale(1.05);
    background: rgba(204, 31, 43, 0.3);
    border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(204, 31, 43, 0.4), 0 0 20px rgba(204, 31, 43, 0.3);
}

.glassy-button:active {
    transform: translateY(-2px) scale(1.02);
}

.glassy-button i {
    font-size: 1.3rem;
}

/* ===== ABOUT SECTION ===== */
.about-section {
    background: rgba(0, 0, 0, 0.082);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.about-content {
    text-align: center;
}

.about-text {
    margin-bottom: 3rem;
}

.about-text p {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
}

.achievements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.achievement-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--radius);
    padding: 2rem 1rem;
    transition: all 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(204, 31, 43, 0.3);
    border-color: var(--accent);
}

.achievement-card i {
    font-size: 3rem;
    color: var(--accent-light);
    margin-bottom: 1rem;
}

.achievement-card h4 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.achievement-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ===== PROGRAMS SECTION ===== */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.program-card {
    background: #222;
    color: #fff;
    border: 2px solid var(--card-border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
}

.program-card.featured {
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(204, 31, 43, 0.3);
}

.program-card.featured::before {
    content: 'POPULAR';
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.program-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-light);
}

.program-icon {
    background: rgba(204, 31, 43, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.program-icon i {
    font-size: 2.5rem;
    color: var(--accent-light);
}

.program-card h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.age-range {
    color: var(--accent-light);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.program-description {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.program-features {
    list-style: none;
    padding: 0;
}

.program-features li {
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.program-features i {
    color: var(--accent-light);
    font-size: 1rem;
}

/* ===== SCHEDULE SECTION ===== */
.schedule-section {
    background: rgba(0, 0, 0, 0.2);
}

.schedule-wrapper {
    overflow-x: auto;
    margin-top: 2rem;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--card-border);
}

.schedule-table thead {
    background: rgba(31, 34, 204, 0.733);
}

.schedule-table th,
.schedule-table td {
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-table th {
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.schedule-table td {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.time-col {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
}

.class-power-up { background: rgba(255, 200, 100, 0.1); }
.class-little-ninjas { background: rgba(100, 150, 255, 0.1); }
.class-dragons-advanced { background: rgba(150, 100, 255, 0.1); }
.class-core { background: rgba(255, 100, 100, 0.1); }
.class-dragons { background: rgba(255, 50, 50, 0.1); }
.class-blackbelt { background: rgba(0, 0, 0, 0.2); font-weight: 600; }
.class-family { background: rgba(100, 255, 150, 0.1); }
.class-competition { background: rgba(255, 215, 0, 0.1); font-weight: 600; }
.class-open { background: rgba(200, 200, 200, 0.1); }

/* ===== CONTACT SECTION ===== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 2rem;
    text-align: left;
}

.contact-info h3,
.contact-form h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.contact-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.contact-item i {
    font-size: 1.5rem;
    color: var(--accent-light);
    margin-top: 0.25rem;
}

.contact-item p {
    margin: 0;
    font-size: 1rem;
}

.contact-item strong {
    display: relative;
    margin-bottom: 0.25rem;
}

.contact-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--accent-light);
}

.social-links {
    display: relative;
    gap: 1rem;
    margin-top: 2rem;
}

.social-links a {
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-3px);
}

/* ===== CONTACT FORM ===== */
.contact-form form {
    background: darkblue;
    border: 2px solid var(--card-border);
    border-radius: var(--radius);
    padding: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 2px;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(204, 31, 43, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btn-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-submit:hover {
    background: var(--accent-light);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(204, 31, 43, 0.4);
}

.btn-submit:active {
    transform: translateY(-1px);
}

/* ===== FOOTER ===== */
footer {
    background: rgba(0, 0, 0, 0.5);
    padding: 2rem 1rem;
    text-align: center;
    border-top: 2px solid rgba(204, 31, 43, 0.3);
    margin-top: 3rem;
}

footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

footer p {
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
}

.footer-tagline {
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .header-logo {
        max-width: relative;
        background-color: rgba(255, 255, 255, 0.692);
        padding: 0.5rem;
        border-radius: 5px;
    }

    .quick-nav {
        padding: 8px 10px;
        gap: 6px;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 12px;
        gap: 4px;
    }

    .nav-btn i {
        font-size: 14px;
    }

    /* Hide text on very small screens, show only icons */
    @media (max-width: 480px) {
        .nav-btn {
            padding: 10px;
            font-size: 0;
        }

        .nav-btn i {
            font-size: 18px;
            margin: 0;
        }
    }

    section {
        padding: 2rem 1rem;
        position: relative;
    }

    section h2 {
        font-size: 1.8rem;
        position: relative;
    }

    .hero-title {
        padding: 1rem 1.5rem;
        position: relative;
    }

    .button-group {
        flex-direction: column;
        gap: 1rem;
    }

    .glassy-button {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .programs-grid,
    .achievements {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .schedule-wrapper {
        -webkit-overflow-scrolling: touch;
    }

    .schedule-table {
        font-size: 0.85rem;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 480px) {
    header {
        padding: 1.5rem 0.5rem;
    }

    section p {
        font-size: 1rem;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .tagline {
        font-size: 1.1rem;
    }

    .achievement-card {
        padding: 1.5rem 1rem;
    }

    .program-card {
        padding: 1.5rem;
    }

    .contact-form form {
        padding: 1.5rem;
    }
}

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ===== ACCESSIBILITY ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border-width: 0;
}

/* ===== CHAT WIDGET ===== */
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.chat-widget-button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5a0e6d 0%, #3a1b83 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.795);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: chatBounce 2s infinite ease-in-out;
}

.chat-widget-button:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(12, 14, 13, 0.712);
}

.chat-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    color: rgb(255, 183, 2);
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.chat-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.4);
    animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff3b30;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 3px solid rgba(255, 255, 255, 0.3);
    animation: badgePop 0.5s ease-forward;
    pointer-events: none;
}

.chat-widget-popup {
    display: none;
    position: absolute;
    bottom: 90px;
    right: 0;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: rgb(255, 254, 254);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-widget-popup.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.chat-header {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    padding: 1.25rem;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    background: rgb(255, 255, 255);
}

.chat-header-text {
    flex: 1;
}

.chat-header h4 {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.chat-status {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
}

.chat-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.chat-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.chat-body {
    padding: 1.25rem;
    max-height: 350px;
    overflow-y: auto;
    background: #f0f2f5;
}

.chat-message {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    animation: messageSlide 0.3s ease;
}

.message-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: white;
    border: 2px solid #25D366;
}

.message-content {
    background: white;
    padding: 10px 14px;
    border-radius: 8px 8px 8px 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    max-width: 75%;
}

.message-content p {
    margin: 0;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
}

.user-message {
    display: flex;
    justify-content: flex-end;
    margin: 10 px 0;
    flex-direction: row-reverse;
}

.user-message .message-content {
    background: #1a472a;
    color: white;
    padding: 10px 15px;
    border-radius: 18px 18px 0 18px;
    max-width: 70%;
}

.user-message .message-time {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    display: block;
    margin-top: 5px;
}

.user-content {
    background: #25D366;
    color: white;
    border-radius: 8px 8px 2px 8px;
}

.user-content p {
    color: white;
}

.user-content .message-time {
    color: rgba(255, 255, 255, 0.8);
}

.typing-dots {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: #999;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-8px);
    }
}

.message-time {
    font-size: 0.75rem;
    color: #999;
    margin-top: 4px;
    display: block;
}

.chat-footer {
    padding: 1rem;
    background: white;
    border-radius: 0 0 16px 16px;
    border-top: 1px solid #e5e7eb;
}

.quick-replies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 1rem;
}

.quick-reply-btn {
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.3);
    color: #128C7E;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-weight: 500;
}

.quick-reply-btn:hover {
    background: rgba(37, 211, 102, 0.2);
    border-color: #25D366;
    transform: translateY(-2px);
}

.quick-reply-btn i {
    font-size: 1rem;
}

.chat-input-wrapper {
    display: flex;
    gap: 8px;
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s ease;
}

.chat-input:focus {
    border-color: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
}

.chat-send-btn {
    width: 48px;
    height: 48px;
    background: #25D366;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.5rem;
}

.chat-send-btn:hover {
    background: #128C7E;
    transform: scale(1.1);
}

/* Chat Animations */
@keyframes chatBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes badgePop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

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

/* Mobile Responsive */
@media (max-width: 480px) {
    .chat-widget {
        bottom: 15px;
        right: 15px;
    }
    
    .chat-widget-button {
        width: 60px;
        height: 60px;
    }
    
    .chat-icon {
        width: 35px;
        height: 35px;
    }
    
    .chat-widget-popup {
        right: 0;
    }
    
    .quick-replies {
        grid-template-columns: 1fr;
    }
    
    .admin-login-btn,
    #loginBtn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
        right: 0.5rem;
    }
    
    .admin-login-btn i,
    #loginBtn i {
        font-size: 0.9rem;
    }
}

/* ===== SMOOTH SCROLL BEHAVIOR ===== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}