  .single-info {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
  }

  .course-single-info .single-info i {
      width: 50px;
      height: 50px;
      line-height: 45px;
      border-radius: 100%;
      font-size: 29px;
      color: #f3811d;
      border: 2px solid #f3811d;
      font-size: 20px;
      text-align: center;
  }

  .course-single-sidebar .theme-btn {
      width: 100%;
      margin-top: 30px !important;
  }

  .widget .widget-title {
      padding-bottom: 10px;
      margin-bottom: 30px;
      position: relative;
      font-size: 22px;
      color: black;
  }

  .widget .widget-title::after {
      position: absolute;
      content: '';
      width: 30px;
      border-bottom: 3px solid var(--theme-color2);
      bottom: 0;
      left: 22px;
  }

  .widget .widget-title::before {
      position: absolute;
      content: '';
      width: 15px;
      border-bottom: 3px solid var(--theme-color2);
      bottom: 0;
      left: 0;
  }


  .theme-btn {
      font-size: 14px;
      color: white !important;
      padding: 12px 26px !important;
      transition: var(--transition);
      text-transform: uppercase;
      position: relative;
      border-radius: 50px 50px 50px 0 !important;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      text-align: center;
      overflow: hidden;
      border: none;
      background: #f3811d;
      box-shadow: gray;
      z-index: 1;
  }


  .course-single-info {
      margin-bottom: 20px;
  }

  .single-info span {
      font-size: 16px;
  }

  .btn_course {
      margin-bottom: 20px;
  }

  .hero {
      min-height: 15rem;
      margin: 0;
  }

  .heroContent {
      text-align: center !important;
  }

  .course-details img {
      border-radius: 20px;
  }

  @media only screen and (min-width: 768px) {
      .row_top {
          display: grid;
          grid-template-columns: 1.3fr 0.7fr;
          gap: 4rem;
          /* padding-bottom: 4rem; */
      }

  }


  @media(max-width:768px) {
      .hero {
          min-height: 8rem;
          margin: 0;
      }
  }