* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Cairo", sans-serif;
        }

        body {
            background: #0f172a;
            color: white;
            overflow-x: hidden;
        }

        /* ===== Navbar ===== */

        nav {
            width: 100%;
            height: 80px;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 60px;
            position: fixed;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .logo {
            display: contents;
            font-size: 30px;
            font-weight: bold;
            color: #38bdf8;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        nav ul li {
            cursor: pointer;
            transition: 0.3s;
        }

        nav ul li:hover {
            color: #38bdf8;
        }

        .nav-btn {
            background: linear-gradient(45deg, #0ea5e9, #2563eb);
            padding: 12px 22px;
            border-radius: 12px;
            border: none;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }

        .nav-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(14, 165, 233, 0.4);
        }

        /* ===== Hero ===== */

        .hero {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 140px 60px 60px;
            gap: 50px;
            flex-wrap: wrap;
        }

        .hero-text {
            flex: 1;
            min-width: 300px;
        }

        .hero-text h1 {
            font-size: 65px;
            line-height: 1.3;
            margin-bottom: 25px;
        }

        .hero-text span {
            color: #38bdf8;
        }

        .hero-text p {
            color: #cbd5e1;
            line-height: 2;
            margin-bottom: 35px;
            font-size: 18px;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .btn-main {
            background: linear-gradient(45deg, #0ea5e9, #2563eb);
            border: none;
            padding: 15px 30px;
            border-radius: 15px;
            color: white;
            font-size: 17px;
            cursor: pointer;
            transition: 0.4s;
        }

        .btn-main:hover {
            transform: scale(1.05);
        }

        .btn-secondary {
            background: transparent;
            border: 2px solid #38bdf8;
            padding: 15px 30px;
            border-radius: 15px;
            color: #38bdf8;
            font-size: 17px;
            cursor: pointer;
        }

        /* ===== Dashboard Preview ===== */

        .hero-image {
            flex: 1;
            min-width: 300px;
        }

        .dashboard {
            background: #1e293b;
            border-radius: 30px;
            padding: 25px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .top-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 20px;
        }

        .card {
            background: #0f172a;
            padding: 20px;
            border-radius: 20px;
            transition: 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card h3 {
            color: #38bdf8;
            margin-bottom: 10px;
        }

        .card p {
            font-size: 28px;
            font-weight: bold;
        }

        /* ===== Features ===== */

        .features {
            padding: 80px 60px;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 45px;
            margin-bottom: 15px;
        }

        .section-title p {
            color: #94a3b8;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
        }

        .feature-box {
            background: #1e293b;
            padding: 35px;
            border-radius: 25px;
            transition: 0.4s;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .feature-box:hover {
            transform: translateY(-10px);
            border-color: #38bdf8;
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(45deg, #0ea5e9, #2563eb);
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .feature-box h3 {
            margin-bottom: 15px;
            font-size: 24px;
        }

        .feature-box p {
            color: #cbd5e1;
            line-height: 1.8;
        }

        /* ===== Teachers ===== */

        .teachers {
            padding: 80px 60px;
        }

        .teacher-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

        .teacher-card {
            background: #1e293b;
            border-radius: 25px;
            overflow: hidden;
            transition: 0.4s;
        }

        .teacher-card:hover {
            transform: translateY(-10px);
        }

        .teacher-image {
            height: 250px;
            background: linear-gradient(45deg, #0ea5e9, #2563eb);
        }

        .teacher-info {
            padding: 25px;
        }

        .teacher-info h3 {
            margin-bottom: 10px;
        }

        .teacher-info p {
            color: #94a3b8;
        }

        /* ===== Statistics ===== */

        .stats {
            padding: 80px 60px;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 25px;
        }

        .stat-box {
            background: #1e293b;
            padding: 35px;
            border-radius: 25px;
            text-align: center;
        }

        .stat-box h2 {
            font-size: 50px;
            color: #38bdf8;
            margin-bottom: 10px;
        }


        /* ===== Courses ===== */

        .courses {
            padding: 80px 60px;
        }

        .live-section {
            padding: 80px 60px;
        }

        .summaries {
            padding: 80px 60px;
        }

        .courses-grid,
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
        }



        .course-card,
        .summary-card {
            background: #1e293b;
            border-radius: 25px;
            overflow: hidden;
            transition: 0.4s;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .course-card:hover,
        .summary-card:hover {
            transform: translateY(-10px);
        }

        .course-image {
            height: 200px;
            background: linear-gradient(45deg, #2563eb, #38bdf8);
            position: relative;
        }

        .course-image.physics {
            background: linear-gradient(45deg, #9333ea, #c084fc);
        }

        .course-image.english {
            background: linear-gradient(45deg, #059669, #34d399);
        }

        .course-image span {
            position: absolute;
            top: 15px;
            right: 15px;
            background: white;
            color: #111;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }

        .course-content {
            padding: 25px;
        }

        .course-content h3 {
            margin-bottom: 15px;
        }

        .course-content p {
            color: #cbd5e1;
            line-height: 1.8;
        }

        .course-info {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            color: #94a3b8;
        }

        .watch-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 14px;
            background: linear-gradient(45deg, #0ea5e9, #2563eb);
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        /* ===== LIVE ===== */

        .live-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
        }


        .live-video {
            background: #1e293b;
            border-radius: 25px;
            padding: 40px;
            position: relative;
            min-height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .live-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: red;
            padding: 10px 18px;
            border-radius: 30px;
            font-weight: bold;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .join-live {
            margin-top: 25px;
            width: 220px;
            padding: 15px;
            border: none;
            border-radius: 15px;
            background: linear-gradient(45deg, #ef4444, #dc2626);
            color: white;
            cursor: pointer;
            font-size: 17px;
        }

        .live-chat {
            background: #1e293b;
            border-radius: 25px;
            padding: 25px;
        }

        .message {
            background: #0f172a;
            padding: 15px;
            border-radius: 14px;
            margin: 15px 0;
        }

        .live-chat input {
            width: 100%;
            margin-top: 20px;
            padding: 15px;
            border: none;
            outline: none;
            border-radius: 12px;
            background: #0f172a;
            color: white;
        }

        /* ===== Summaries ===== */

        .summary-card {
            text-align: center;
            padding: 35px;
        }

        .summary-icon {
            font-size: 55px;
            margin-bottom: 20px;
        }

        .summary-card h3 {
            margin-bottom: 15px;
        }

        .summary-card p {
            color: #cbd5e1;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .summary-card button {
            padding: 14px 25px;
            border: none;
            border-radius: 14px;
            background: linear-gradient(45deg, #0ea5e9, #2563eb);
            color: white;
            cursor: pointer;
        }

        /* ===== Footer ===== */

        /* =========================
   FOOTER
========================= */

        .main-footer {
            background:
                radial-gradient(circle at 80% 20%,
                    rgba(14, 165, 233, .12),
                    transparent 30%),
                #020617;

            margin-top: 100px;
            border-top: 1px solid rgba(255, 255, 255, .08);
        }


        /* Container */

        .footer-container {

            max-width: 1400px;

            margin: auto;

            padding: 75px 50px;

            display: grid;

            grid-template-columns:
                2fr 1fr 1fr 1fr 1fr;

            gap: 50px;
        }


        /* Brand */

        .footer-brand {
            max-width: 400px;
        }

        .footer-logo {

            display: flex;

            align-items: center;

            gap: 15px;

            margin-bottom: 25px;
        }

        .logo-icon {

            width: 55px;
            height: 55px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 17px;

            background:
                linear-gradient(135deg,
                    #0ea5e9,
                    #2563eb);

            font-size: 27px;

            box-shadow:
                0 10px 30px rgba(14, 165, 233, .25);
        }

        .footer-logo h2 {

            font-size: 25px;

            margin: 0;

            color: white;
        }

        .footer-logo span {

            color: #38bdf8;

            font-size: 12px;
        }


        .footer-brand>p {

            color: #94a3b8;

            line-height: 2;

            font-size: 14px;

            margin-bottom: 25px;
        }


        /* Social */

        .social-links {

            display: flex;

            gap: 10px;
        }

        .social-links a {

            width: 40px;
            height: 40px;

            border-radius: 12px;

            display: flex;
            align-items: center;
            justify-content: center;

            text-decoration: none;

            color: #cbd5e1;

            background: #0f172a;

            border: 1px solid rgba(255, 255, 255, .07);

            transition: .3s;
        }

        .social-links a:hover {

            background: #0ea5e9;

            color: white;

            transform:
                translateY(-5px);
        }


        /* Columns */

        .footer-column h3 {

            font-size: 17px;

            margin-bottom: 25px;

            color: white;

            position: relative;
        }

        .footer-column h3::after {

            content: "";

            display: block;

            width: 30px;

            height: 3px;

            border-radius: 10px;

            background: #0ea5e9;

            margin-top: 10px;
        }


        .footer-column ul {

            list-style: none;

            padding: 0;
        }

        .footer-column li {

            margin-bottom: 14px;
        }

        .footer-column a {

            text-decoration: none;

            color: #94a3b8;

            font-size: 14px;

            transition: .3s;
        }

        .footer-column a:hover {

            color: #38bdf8;

            padding-right: 5px;
        }


        /* Newsletter */

        .footer-newsletter {

            max-width: 1300px;

            margin: auto;

            padding:
                25px 30px;

            border-radius: 25px;

            background:
                linear-gradient(135deg,
                    rgba(14, 165, 233, .12),
                    rgba(37, 99, 235, .06));

            border:
                1px solid rgba(56, 189, 248, .12);

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 30px;
        }

        .footer-newsletter h3 {

            margin-bottom: 8px;

            font-size: 18px;
        }

        .footer-newsletter p {

            color: #94a3b8;

            font-size: 13px;
        }


        /* Newsletter Form */

        .newsletter-form {

            display: flex;

            min-width: 400px;

            background: #020617;

            border-radius: 15px;

            padding: 5px;

            border:
                1px solid rgba(255, 255, 255, .08);
        }

        .newsletter-form input {

            flex: 1;

            border: none;

            outline: none;

            background: transparent;

            color: white;

            padding:
                12px 15px;

            font-family: inherit;
        }

        .newsletter-form button {

            border: none;

            background:
                linear-gradient(135deg,
                    #0ea5e9,
                    #2563eb);

            color: white;

            border-radius: 11px;

            padding:
                0 25px;

            cursor: pointer;

            font-family: inherit;

            transition: .3s;
        }

        .newsletter-form button:hover {

            transform: scale(1.03);

            box-shadow:
                0 5px 20px rgba(14, 165, 233, .25);
        }


        /* Bottom */

        .footer-bottom {

            max-width: 1400px;

            margin: auto;

            padding:
                25px 50px;

            border-top:
                1px solid rgba(255, 255, 255, .07);

            display: flex;

            justify-content: space-between;

            align-items: center;

            color: #64748b;

            font-size: 13px;
        }

        .footer-bottom-links {

            display: flex;

            gap: 25px;
        }

        .footer-bottom-links a {

            color: #64748b;

            text-decoration: none;

            transition: .3s;
        }

        .footer-bottom-links a:hover {

            color: #38bdf8;
        }


        /* =========================
   RESPONSIVE
========================= */

        @media(max-width:1100px) {

            .footer-container {

                grid-template-columns:
                    2fr 1fr 1fr;

            }

        }


        @media(max-width:750px) {

            .footer-container {

                grid-template-columns: 1fr 1fr;

                padding: 50px 25px;

            }

            .footer-brand {

                grid-column: 1 / -1;

                max-width: none;

            }

            .footer-newsletter {

                margin:
                    0 20px;

                flex-direction: column;

                align-items: stretch;

            }

            .newsletter-form {

                min-width: 0;

                width: 100%;

            }

            .footer-bottom {

                padding:
                    25px;

                flex-direction: column;

                gap: 15px;

                text-align: center;

            }

        }


        @media(max-width:500px) {

            .footer-container {

                grid-template-columns: 1fr;

            }

            .footer-brand {

                grid-column: auto;

            }

            .newsletter-form {

                flex-direction: column;

                background: transparent;

                border: none;

                gap: 10px;

            }

            .newsletter-form input {

                background: #020617;

                border:
                    1px solid rgba(255, 255, 255, .08);

                border-radius: 12px;

                padding: 15px;
            }

            .newsletter-form button {

                padding: 14px;
            }

            .footer-bottom-links {

                flex-wrap: wrap;

                justify-content: center;

            }

        }

        /* ===== Responsive ===== */

        @media(max-width:900px) {

            nav {
                padding: 0 20px;
            }

            nav ul {
                display: none;
            }

            .hero-text h1 {
                font-size: 45px;
            }

            .section-title h2 {
                font-size: 35px;
            }



        }

        /* =========================
   AI ASSISTANT
========================= */

.ai-assistant {

    position:fixed;

    right:25px;
    bottom:25px;

    z-index:9999;

    direction:rtl;
}


/* =========================
   FLOATING BUTTON
========================= */

.ai-button {

    width:65px;
    height:65px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:white;

    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #2563eb
        );

    box-shadow:
        0 10px 35px
        rgba(14,165,233,.4);

    display:flex;

    align-items:center;
    justify-content:center;

    position:relative;

    transition:.3s;
}

.ai-button:hover {

    transform:
        translateY(-5px)
        scale(1.05);

    box-shadow:
        0 15px 45px
        rgba(14,165,233,.5);
}


.ai-button-icon {

    font-size:29px;
}


/* Notification */

.ai-notification {

    position:absolute;

    top:-3px;
    right:-3px;

    width:21px;
    height:21px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#ef4444;

    color:white;

    font-size:11px;

    border:
        2px solid #020617;
}


/* =========================
   CHAT WINDOW
========================= */

.ai-chat {

    position:absolute;

    right:0;
    bottom:80px;

    width:370px;
    height:560px;

    background:#0f172a;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:25px;

    overflow:hidden;

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.45);

    display:none;

    flex-direction:column;

    animation:
        aiOpen .3s ease;
}

.ai-chat.active {

    display:flex;
}


@keyframes aiOpen {

    from {

        opacity:0;

        transform:
            translateY(20px)
            scale(.95);

    }

    to {

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================
   HEADER
========================= */

.ai-header {

    height:75px;

    padding:
        12px 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #2563eb
        );

    color:white;
}


.ai-profile {

    display:flex;

    align-items:center;

    gap:12px;
}


.ai-avatar {

    width:45px;
    height:45px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:
        rgba(255,255,255,.18);

    font-size:23px;
}


.ai-profile strong {

    display:block;

    font-size:14px;
}


.ai-profile span {

    display:flex;

    align-items:center;

    gap:5px;

    margin-top:4px;

    font-size:11px;

    opacity:.9;
}


.ai-profile span i {

    width:7px;
    height:7px;

    border-radius:50%;

    background:#4ade80;

}


.ai-close {

    width:35px;
    height:35px;

    border:none;

    border-radius:10px;

    background:
        rgba(255,255,255,.15);

    color:white;

    font-size:24px;

    cursor:pointer;
}


/* =========================
   BODY
========================= */

.ai-body {

    flex:1;

    padding:20px;

    overflow-y:auto;

    scrollbar-width:thin;
}


.ai-message {

    display:flex;

    gap:10px;

    margin-bottom:20px;
}


.message-avatar {

    width:32px;
    height:32px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #2563eb
        );

    font-size:16px;
}


.message-content {

    max-width:85%;

    background:#1e293b;

    padding:12px 15px;

    border-radius:
        5px
        18px
        18px
        18px;

    color:#e2e8f0;

    font-size:13px;

    line-height:1.8;
}


.message-content p {

    margin-bottom:5px;
}


/* =========================
   QUICK QUESTIONS
========================= */

.quick-questions {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:15px;
}


.quick-questions button {

    border:
        1px solid
        rgba(56,189,248,.2);

    background:
        rgba(14,165,233,.08);

    color:#7dd3fc;

    padding:9px 12px;

    border-radius:12px;

    cursor:pointer;

    font-family:inherit;

    font-size:11px;

    transition:.3s;
}


.quick-questions button:hover {

    background:#0ea5e9;

    color:white;
}


/* =========================
   USER MESSAGE
========================= */

.user-message {

    display:flex;

    justify-content:flex-start;

    margin-bottom:15px;
}


.user-message div {

    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #2563eb
        );

    color:white;

    padding:11px 15px;

    border-radius:
        18px
        5px
        18px
        18px;

    max-width:80%;

    font-size:13px;

    line-height:1.7;
}


/* =========================
   INPUT
========================= */

.ai-input-area {

    display:flex;

    gap:8px;

    padding:12px;

    background:#020617;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


.ai-input-area input {

    flex:1;

    border:none;

    outline:none;

    background:#1e293b;

    color:white;

    padding:
        13px 15px;

    border-radius:14px;

    font-family:inherit;

    font-size:13px;
}


.ai-input-area button {

    width:45px;

    border:none;

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #2563eb
        );

    color:white;

    cursor:pointer;

    font-size:18px;
}

/* =========================
   COURSES
========================= */

.courses-section {

    padding:100px 60px;

    max-width:1450px;

    margin:auto;
}


/* Badge */

.section-badge {

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:
        rgba(14,165,233,.1);

    color:#38bdf8;

    border:
        1px solid
        rgba(56,189,248,.15);

    font-size:13px;

    margin-bottom:18px;
}


.section-title h2 span {

    color:#38bdf8;
}


/* Filters */

.course-filters {

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:40px;
}


.filter {

    border:none;

    background:#1e293b;

    color:#94a3b8;

    padding:11px 22px;

    border-radius:12px;

    cursor:pointer;

    font-family:inherit;

    transition:.3s;
}


.filter:hover,
.filter.active {

    background:#0ea5e9;

    color:white;
}


/* Grid */

.courses-grid {

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px,1fr)
        );

    gap:25px;
}


/* Card */

.course-card {

    background:#1e293b;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:25px;

    overflow:hidden;

    transition:.4s;
}


.course-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(56,189,248,.3);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.25);
}


/* Cover */

.course-cover {

    height:210px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;
}


.course-cover::before {

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    border-radius:50%;

    background:
        rgba(255,255,255,.12);

    top:-80px;

    left:-60px;
}


.course-cover.math {

    background:
        linear-gradient(
            135deg,
            #0284c7,
            #2563eb
        );
}


.course-cover.physics {

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );
}


.course-cover.english {

    background:
        linear-gradient(
            135deg,
            #059669,
            #0d9488
        );
}


.course-subject {

    font-size:80px;

    font-weight:bold;

    color:
        rgba(255,255,255,.9);

    z-index:1;
}


/* Labels */

.course-level,
.course-type {

    position:absolute;

    top:15px;

    padding:7px 12px;

    border-radius:20px;

    font-size:11px;

    z-index:2;
}


.course-level {

    right:15px;

    background:
        rgba(0,0,0,.25);

    color:white;
}


.course-type {

    left:15px;

    background:white;

    color:#0f172a;
}


/* Body */

.course-body {

    padding:25px;
}


.course-category {

    color:#38bdf8;

    font-size:12px;

    margin-bottom:10px;
}


.course-body h3 {

    font-size:20px;

    line-height:1.6;

    margin-bottom:10px;
}


.course-body > p {

    color:#94a3b8;

    font-size:13px;

    line-height:1.9;

    min-height:75px;
}


/* Teacher */

.course-teacher {

    display:flex;

    align-items:center;

    gap:10px;

    margin:
        20px 0;
}


.teacher-mini {

    width:42px;

    height:42px;

    border-radius:13px;

    background:#0ea5e9;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;
}


.teacher-mini.purple {

    background:#8b5cf6;
}


.teacher-mini.green {

    background:#10b981;
}


.course-teacher strong {

    display:block;

    font-size:13px;
}


.course-teacher small {

    color:#64748b;

    font-size:11px;
}


/* Stats */

.course-stats {

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    color:#64748b;

    font-size:11px;

    padding:
        15px 0;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}


/* Footer */

.course-footer {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:20px;
}


.course-price strong {

    display:block;

    color:#38bdf8;

    font-size:19px;
}


.course-price del {

    color:#64748b;

    font-size:11px;
}


.course-btn {

    text-decoration:none;

    color:white;

    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #2563eb
        );

    padding:11px 18px;

    border-radius:12px;

    font-size:12px;

    transition:.3s;
}


.course-btn:hover {

    transform:scale(1.05);
}


/* More */

.courses-more {

    text-align:center;

    margin-top:45px;
}


.courses-more a {

    color:#38bdf8;

    text-decoration:none;

    font-size:15px;
}


.courses-more span {

    margin-right:8px;
}


/* Mobile */

@media(max-width:600px) {

    .courses-section {

        padding:
            70px 20px;
    }

    .course-body h3 {

        font-size:18px;
    }

}


/* =========================
   FOOTER
========================= */

.ai-footer {

    text-align:center;

    padding:7px;

    color:#64748b;

    font-size:9px;

    background:#020617;
}


/* =========================
   MOBILE
========================= */

@media(max-width:500px) {

    .ai-assistant {

        right:15px;
        bottom:15px;
    }

    .ai-chat {

        position:fixed;

        right:10px;
        left:10px;

        bottom:90px;

        width:auto;

        height:
            calc(100vh - 120px);

        max-height:600px;

        border-radius:22px;
    }

    .ai-button {

        width:58px;
        height:58px;
    }

}