:root {
      --primary-color: #007bff; /* Blue */
      --secondary-color: #6c757d; /* Gray */
      --light-bg-color: #f8f9fa; /* Light Gray */
      --dark-text-color: #343a40; /* Dark Text */
      --white-color: #ffffff;
      --font-family: 'Vazirmatn', sans-serif;
      --primary:#7c3aed;
      --primary2:#ec4899;
      --primary3:#ec48e4;
      --cyan:#06b6d4;
      --yellow:#f59e0b;
      --bg:#f8fafc;
      
    
      --card:#ffffff;
      --border:#e2e8f0;
      --txt-btn:#ffffff;
      
      --dark:#1e1b4b;
    --p1: #7c3aed; 
    --p2: #ec4899;
    --p3: #a78bfa;
    --bg: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --radius: 20px;
    --shadow: 0 15px 35px rgba(124, 58, 237, 0.1);
    }

    body {
      font-family: "Vazirmatn", sans-serif;
      background-color: #fdfbff;
      color: var(--text);
    }

    

    /* Hero Section */
    .hero-academy {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.21) 0%, rgba(236, 72, 154, 0.218) 100%);
      padding: 80px 0 50px;
      text-align: center;
    }
    .hero-academy h1 {
        font-weight: 900; font-size: 3rem;
        background: linear-gradient(135deg, var(--p1), var(--p2));
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* Filters Area */
    .filter-card {
      background: #fff;
      border-radius: var(--radius);
      border: 1px solid rgba(124,58,237,0.1);
      padding: 25px;
      box-shadow: var(--shadow);
      margin-top: -40px;
      z-index: 10;
      position: relative;
    }

    /* Course Card */
    .course-card {
      background: #fff;
      border-radius: var(--radius);
      border: 1px solid rgba(124,58,237,0.08);
      overflow: hidden;
      transition: all 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .course-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15);
    }
    .course-img-wrapper {
      position: relative;
      aspect-ratio: 16/9;
    }
    .course-img-wrapper img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .badge-type {
      position: absolute; top: 15px; right: 15px;
      padding: 5px 15px; border-radius: 50px;
      font-size: 0.75rem; font-weight: 700;
    }
    .type-online { background: #24c85d; color: #026327; } /* on */
    .type-offline { background: #ba0505; color: #f8e2e2; } /* of */

    .course-body { padding: 20px; flex-grow: 1; }
    .course-level { font-size: 0.8rem; color: var(--p1); font-weight: 700; margin-bottom: 5px; display: block; }
    .course-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; height: 3rem; overflow: hidden; }
    .course-info { display: flex; gap: 15px; color: var(--muted); font-size: 0.85rem; margin-bottom: 15px; }
    
    .course-footer {
      padding: 15px 20px;
      border-top: 1px solid rgba(0,0,0,0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .course-price { font-weight: 900; font-size: 1.2rem; color: var(--text); }

    .btn-buy {
      background: linear-gradient(135deg, var(--p1), var(--p2));
      color: white; border: none; padding: 8px 20px; border-radius: 12px;
      font-weight: 700; transition: 0.3s;
    }

    .btn-buy:hover { opacity: 0.9; color: white; transform: scale(1.05); }

    /* Search & Filter Styles */
    .form-control, .form-select {
        border-radius: 12px;
         border: 1px solid #e5e7eb; 
         padding: 10px 15px;
    }
    .form-control:focus {
        border-color: var(--p1);
         box-shadow: none; }

    .hidden { 
        display: none !important;
    }