.course-header {

          background: linear-gradient(135deg, #0f2431, #183d2d);

          color: #fff;

      }

      .course-banner {

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

          border-radius: 25px;

          padding: 50px;

      }

      .course-tag {

          display: inline-block;

          background: #84c341;

          color: #fff;

          padding: 8px 18px;

          border-radius: 30px;

          font-size: 14px;

      }

      .course-title {

          font-size: 48px;

          font-weight: 700;

      }

      .course-title span {

          color: #84c341;

      }

      .course-desc {

          font-size: 17px;

          color: #ddd;

          margin-top: 20px;

          line-height: 1.8;

      }

      .course-meta {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 40px;
          margin-top: 25px;
          flex-wrap: wrap;
      }

      .course-meta .meta-item {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 18px;
          color: #ddd;
      }

      .course-meta .meta-item i {
          color: #84c341;
          font-size: 22px;
          min-width: 22px;
      }

      .course-meta .meta-item strong {
          color: #fff;
          margin-right: 5px;
      }

      .price {
          color: #fff;
          font-weight: 600;
      }

      .old-price {
          color: #999;
          text-decoration: line-through;
          font-size: 15px;
          margin-left: 6px;
      }

      @media(max-width:768px) {
          .course-meta {
              flex-direction: column;
              align-items: flex-start;
              gap: 15px;
          }
      }

      .course-image {

          background: #fff;

          border-radius: 20px;

          padding: 15px;

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

      }

      .course-image img {

          width: 100%;

          border-radius: 15px;

      }

      .topic-box {

          background: #fff;

          padding: 18px;

          border-radius: 12px;

          font-size: 17px;

          font-weight: 500;

          box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

          transition: .3s;

      }

      .topic-box:hover {

          background: #84c341;

          color: #fff;

          transform: translateY(-5px);

      }

      @media(max-width:991px) {

          .course-title {

              font-size: 34px;

          }

          .course-banner {

              padding: 30px;

          }

          .course-image {

              margin-top: 30px;

          }

      }