:root {
            --primary-blue: #1F8FFF;
            --primary-black: #0D0D0D;
            --primary-blue-dark: #0070E0;
            --accent-cyan: #00F0FF;
            --primary-orange: #1F8FFF;
        }

        .teachers-hero-section {
            background: linear-gradient(135deg, var(--primary-black) 0%, var(--primary-blue) 100%);
            position: relative;
            overflow: hidden;
            padding-top: 80px;
            /* Account for fixed header */
        }

        .teachers-hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
            pointer-events: none;
        }

        /* Override badge color to use var */
        .badge.bg-primary {
            background-color: var(--primary-blue) !important;
        }