  :root {
          --primary-color: #2c6bed;
          --secondary-color: #2e17e8;
          --accent-color: #00d9ff;
          --light-color: #f8f9fa;
          --dark-color: #1a1a2e;
          --success-color: #06d6a0;
          --warning-color: #ffd166;
          --danger-color: #ef476f;
        }

        .page-header {
          background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
          padding: 100px;
          margin-bottom: 50px;
          border-radius: 0 0 30px 30px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
          position: relative;
        }

        .page-header::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40px;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,64L48,80C96,96,192,128,288,144C384,160,480,160,576,144C672,128,768,96,864,90.7C960,85,1056,107,1152,117.3C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
          background-size: cover;
          background-repeat: no-repeat;
        }

        .header-content {
          text-align: center;
          color: white;
          position: relative;
          z-index: 2;
        }

        .header-content h1 {
          font-weight: 900;
          font-size: 48px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
          margin-bottom: 15px;
        }

        .header-content p {
          font-size: 18px;
          max-width: 700px;
          margin: 0 auto;
          opacity: 0.9;
        }

        .search-container {
          max-width: 700px;
          margin: 30px auto 0;
          position: relative;
        }

        .search-box {
          width: 100%;
          padding: 15px 25px;
          border: none;
          border-radius: 50px;
          font-size: 16px;
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
          padding-right: 60px;
        }

        .search-icon {
          position: absolute;
          left: 20px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--primary-color);
          font-size: 20px;
        }

        .filter-tabs {
          display: flex;
          justify-content: center;
          margin: 30px auto;
          gap: 10px;
          flex-wrap: wrap;
        }

        .filter-tab {
          padding: 10px 25px;
          background: white;
          border-radius: 30px;
          cursor: pointer;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          font-weight: 500;
        }

        .filter-tab.active {
          background: var(--primary-color);
          color: white;
          box-shadow: 0 5px 15px rgba(44, 107, 237, 0.3);
        }

        .filter-tab:hover:not(.active) {
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .course-container {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
          gap: 30px;
          padding: 0 15px;
          margin-bottom: 50px;
        }

        .course-card {
          background: white;
          border-radius: 20px;
          overflow: hidden;
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .course-card:hover {
          transform: translateY(-10px) scale(1.02);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .course-image {
          position: relative;
          height: 220px;
          overflow: hidden;
        }

        .course-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        .course-card:hover .course-image img {
          transform: scale(1.1);
        }

        .course-image .overlay {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
        }

        .course-ribbon {
          position: absolute;
          top: 20px;
          right: -35px;
          background: var(--accent-color);
          color: white;
          font-size: 14px;
          font-weight: bold;
          padding: 5px 40px;
          transform: rotate(45deg);
          z-index: 3;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        .course-title {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 100%;
          padding: 20px;
          z-index: 2;
          text-align: right;
        }

        .course-title h2 {
          color: white;
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }

        .course-title p {
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
          margin: 0;
        }

        .course-title .highlight {
          color: var(--accent-color);
          font-weight: 700;
        }

        .course-details {
          padding: 25px;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          position: relative;
        }

        .subscription-status {
          position: absolute;
          top: -15px;
          right: 25px;
          background: var(--primary-color);
          color: white;
          padding: 5px 15px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 500;
          box-shadow: 0 5px 15px rgba(44, 107, 237, 0.3);
          animation: pulse 1.5s infinite;
          display: flex;
          align-items: center;
          gap: 5px;
        }

        @keyframes pulse {
          0% {
            box-shadow: 0 0 0 0 rgba(44, 107, 237, 0.5);
          }

          70% {
            box-shadow: 0 0 0 10px rgba(44, 107, 237, 0);
          }

          100% {
            box-shadow: 0 0 0 0 rgba(44, 107, 237, 0);
          }
        }

        .course-details h3 {
          font-size: 18px;
          font-weight: bold;
          color: var(--dark-color);
          margin-bottom: 15px;
          margin-top: 5px;
        }

        .course-meta {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;
          margin-bottom: 20px;
        }

        .meta-item {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #666;
          font-size: 14px;
        }

        .meta-item i {
          color: var(--primary-color);
        }

        .course-dates {
          background: #f8f9fa;
          padding: 15px;
          border-radius: 10px;
          margin-bottom: 20px;
        }

        .date-item {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
          font-size: 14px;
          color: #555;
        }

        .date-item:last-child {
          margin-bottom: 0;
        }

        .date-item i {
          color: var(--primary-color);
          background: rgba(44, 107, 237, 0.1);
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }

        .progress-container {
          margin-bottom: 20px;
          flex-grow: 1;
        }

        .progress-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 14px;
        }

        .progress-percentage {
          font-weight: bold;
          color: var(--primary-color);
        }

        .progress-bar-container {
          height: 8px;
          background: #e0e0e0;
          border-radius: 4px;
          overflow: hidden;
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .progress-fill {
          height: 100%;
          background: linear-gradient(to right, var(--primary-color), var(--accent-color));
          border-radius: 4px;
          transition: width 1s ease;
          position: relative;
        }

        .progress-fill::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.5) 50%,
              rgba(255, 255, 255, 0) 100%);
          animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }

          100% {
            transform: translateX(100%);
          }
        }

        .course-actions {
          display: flex;
          gap: 15px;
          margin-top: auto;
        }

        .btn-enter-course {
          flex: 1;
          padding: 12px;
          border: none;
          border-radius: 10px;
          background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
          color: white;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 5px 15px rgba(44, 107, 237, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
        }

        .btn-enter-course:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 20px rgba(44, 107, 237, 0.4);
        }

        .btn-favorite,
        .btn-share {
          width: 45px;
          height: 45px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f8f9fa;
          border: none;
          color: #777;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .btn-favorite:hover,
        .btn-share:hover {
          background: white;
          color: var(--primary-color);
          transform: translateY(-3px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }

        .btn-favorite.active {
          color: var(--danger-color);
        }

        .course-badge {
          position: absolute;
          top: 20px;
          left: 20px;
          background: var(--warning-color);
          color: #333;
          font-size: 12px;
          font-weight: bold;
          padding: 5px 12px;
          border-radius: 20px;
          z-index: 3;
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        .floating-elements {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          overflow: hidden;
          z-index: 1;
        }

        .floating-element {
          position: absolute;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          animation: float 15s infinite linear;
        }

        @keyframes float {
          0% {
            transform: translateY(0) rotate(0deg);
          }

          100% {
            transform: translateY(-100vh) rotate(360deg);
          }
        }


        @media (max-width: 768px) {
          .header-content h1 {
            font-size: 32px;
            padding: 80px;
          }

          .search-box {
            padding: 12px 20px;
            font-size: 14px;
          }

          .course-container {
            grid-template-columns: 1fr;
          }

          .course-card {
            max-width: 100%;
          }

          .page-header {
            padding: 30px 0;
          }

          .filter-tabs {
            gap: 8px;
          }

          .filter-tab {
            padding: 8px 15px;
            font-size: 14px;
          }
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .fade-in {
          animation: fadeIn 0.5s ease forwards;
        }

        .fade-in-delay-1 {
          animation: fadeIn 0.5s ease 0.1s forwards;
          opacity: 0;
        }

        .fade-in-delay-2 {
          animation: fadeIn 0.5s ease 0.2s forwards;
          opacity: 0;
        }

        .fade-in-delay-3 {
          animation: fadeIn 0.5s ease 0.3s forwards;
          opacity: 0;
        }