section.allcoursesBanner {
  display: flex;
  width: 100%;
}

.allCourseBannerImg {
  width: 57%;
  background-color: #55220a;
  overflow: hidden;
  display: flex;
  align-items: end;
}

.allCourseBannerText {
  width: 43%;
  background-color: #ff671f;
  align-items: center;
  display: flex;
  padding-top: 40px;
  padding-bottom: 40px;
  justify-content: center;
}

.allCourseBannerTitle {
  padding: 0px 18px 0px !important;
}

.allCourseBannerTitle h1 {
  font-family: var(--vulf-regular);
  margin: 0 auto;
  max-width: 465px;
  font-size: 48px;
  color: #fff;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.96px;
}

.allCourseBannerTitle p {
  font-family: var(--public-regular);
  margin: 0 auto;
  max-width: 465px;
  padding-top: 14px;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.96px;
}

.allCourseBannerImg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-10%);
}

/* Desktop/Mobile images */
.allCourseBannerImg img:nth-child(1) {
  display: block;
}

.allCourseBannerImg img:nth-child(2) {
  display: none;
}

/* Responsive font sizes for H1 */

/* 1280px and below */
@media (max-width: 1280px) {
  .allCourseBannerTitle h1 {
    font-size: 44px;
  }
}

/* 1024px and below */
@media (max-width: 1024px) {
  .allCourseBannerTitle h1 {
    font-size: 40px;
  }
}

/* 992px and below */
@media (max-width: 992px) {
  section.allcoursesBanner {
    display: block;
  }

  .allCourseBannerText {
    width: 100%;
    justify-content: start;
  }

  .allCourseBannerImg {
    width: 100%;
  }

  .allCourseBannerTitle h1 {
    margin: 0;
    font-size: 48px;
    max-width: 90%;
  }

  .allCourseBannerImg img:nth-child(1) {
    display: none;
  }

  .allCourseBannerImg img:nth-child(2) {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .allCourseBannerTitle {
    padding: 0px 18px 0px !important;
  }
}

/* 762px and below (tablets/small devices) */
@media (max-width: 762px) {
  .allCourseBannerTitle h1 {
    font-size: 48px;
  }
}

/* 392px and below (small phones) */
@media (max-width: 392px) {
  .allCourseBannerTitle h1 {
    font-size: 32px;
  }
}

/* Display Course */
.courseTabbing {
  padding-top: 60px;
}

.courseTabLink svg {
  margin: 0px 5px;
}

.courseTabLinkActiveButton {
  color: #ff8044 !important;
  background-color: #55220a !important;
}

.courseTabLink h2 > button {
  font-family: var(--public-regular);
  font-size: 32.505px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  color: #4f4a48;
  background-color: transparent;
  border-radius: 0;
  border: none;
  padding: 3px 15px;
  box-shadow: none;
  text-transform: capitalize;
}

.tags-buttons h2 {
  margin: 0;
  display: inline-flex;
}

.courseTabLink svg:last-of-type {
  display: none;
}

.dsplyAllCourse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 60px;
  padding: 90px 0 100px;
}

/* Search */

.product-fiters {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.product-searchBar {
  width: 50%;
}

.product-filter-by-category-and-duration {
  width: 40%;
  display: flex;
  align-items: center;
}

/* filter dropdown */
.filter-byCategory {
  width: 50%;
  margin: 0px 15px;
}

.filter-by-duration {
  width: 50%;
}

select#categorySelect {
  background: #d6e5f9;
  padding: 6px 19px;
  height: 42px;
  color: #184071;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  font-family: var(--public-regular);

  appearance: none;
  /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2219%22 height=%2212%22 viewBox=%220 0 19 12%22 fill=%22none%22%3E%3Cpath d=%22M1.18311 1.77979L9.265 9.86184L17.347 1.77979%22 stroke=%22%23184071%22 stroke-width=%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select#tagSelectChange {
  background: #ddf3e3;
  padding: 6px 19px;
  height: 42px;

  color: #184071;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  font-family: var(--public-regular);

  appearance: none;
  /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2219%22 height=%2212%22 viewBox=%220 0 19 12%22 fill=%22none%22%3E%3Cpath d=%22M1.18311 1.77979L9.265 9.86184L17.347 1.77979%22 stroke=%22%23184071%22 stroke-width=%223%22/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
}

.categorySelect select {
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
}

@media (max-width: 393px) {
  select#tagSelectChange {
    font-size: 14px;
    padding: 6px 10px;
  }

  select#categorySelect {
    font-size: 14px;
    padding: 6px 10px;
  }
}

@media (max-width: 992px) {
  .dsplyAllCourse {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 0 100px;
  }

  .allCourseBannerTitle {
    padding: 70px 18px 56px;
  }

  .courseTabLink h2 > button {
    font-size: 16px;
    padding: 3px 6px;
  }

  /* Product Filter */
  .product-fiters {
    display: block;
    padding-top: 40px;
  }

  .product-searchBar {
    width: 100%;
  }

  .product-filter-by-category-and-duration {
    width: 100%;
    margin-top: 22px;
  }

  .filter-byCategory {
    margin: 0px 15px 0 0;
  }

  .courseTabbing {
    padding-top: 57px;
  }

  .tags-buttons {
    display: flex;
    align-items: center;
    padding: 0px 0px 0px 0px;
  }
}

@media (max-width: 834px) {
  .dsplyAllCourse {
    grid-template-columns: repeat(1, 1fr);
  }
}