.course-box {
  padding:24px 12px;
  background-color:var(--primary_color2);
  border-radius:7px;
  margin-top:32px;
  position:relative;
  -webkit-box-shadow: 0px 62px 17px 0px rgba(18, 18, 44, 0.00),
  0px 40px 16px 0px rgba(18, 18, 44, 0.02),
  0px 22px 13px 0px rgba(18, 18, 44, 0.07),
  0px 10px 10px 0px rgba(18, 18, 44, 0.12),
  0px 2px 5px 0px rgba(18, 18, 44, 0.14);
          box-shadow: 0px 62px 17px 0px rgba(18, 18, 44, 0.00),
  0px 40px 16px 0px rgba(18, 18, 44, 0.02),
  0px 22px 13px 0px rgba(18, 18, 44, 0.07),
  0px 10px 10px 0px rgba(18, 18, 44, 0.12),
  0px 2px 5px 0px rgba(18, 18, 44, 0.14);
  {#
    width: 23.5%;
    margin-right: 2%;
  #}
}

.course-box:nth-child(4n) {
  margin-right: 0;
}

.course-box p {
  margin: 0 0 8px;
}

.course-box .h1 {
  color: var(--secondary_colors2);
  margin: 0 0 8px;
  display: inline-block;
}

.cous-btns {
  margin: 24px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  position: relative;
}

.cous-btns a {
  text-decoration: none !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--white_color);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cous-btns a svg {
  margin-left: 8px;
}

.course-buttons ul {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
}

.course-buttons ul li {
  margin: 30px 0 0;
}

.course-mobs {
  display: none;
}

@media(max-width:1280px) {
    {#
    .course-box {
      width: 49%;
    }

    .course-box:nth-child(2n) {
      margin-right: 0;
    }
    #}
}

@media(max-width:767px) {
  .course-desk {
    display: none
  }

  .course-mobs {
    display: block;
  }

  .course-box {
    width: 100%;
    height: 100%;
    margin-right: 0;
    margin-top: 0;
  }

  .course-mobs .slick-track {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    padding-bottom: 33px;
  }

  .course-mobs .slick-slide {
    margin: 0 8px;
    height: inherit;
  }

  .course-mobs .slick-slide>div {
    height: 100%;
  }

  .course-mobs .slick-list {
    margin: 0 -8px;
    padding: 0 15% 0 0;
  }

  .cous-head.tc {
    text-align: left
  }

  .cous-head h3 {
    font-size: 19px;
  }
}