1#@!#!123s

: / home / forge / almahero.online / public / frontend-theme-4 / assets / scss /
Filename : _course-items.scss
back
.course-item {
  &-one {
    background-color: $white;
    border-radius: toRem(4);
    padding: toRem(11);
    height: 100%;
    .img {
      position: relative;
      max-height: toRem(218);
      min-height: toRem(218);
      overflow: hidden;
      .courseTag {
        position: absolute;
        top: toRem(20);
        left: toRem(20);
        padding: toRem(7) toRem(11);
        border-radius: toRem(3);
        @include fontFamily(12, $fw_semiBold, 16, $white);
        &.bestCourse {
          background-color: $red;
        }
        &.newCourse {
          background-color: $green;
        }
        &.upcoming {
          background-color: $yellow-1;
        }
      }
    }
    .content {
      padding: toRem(22) toRem(14) toRem(18);
      > .title {
        display: block;
        @include fontFamily(19, $fw_medium, 20, $main-color);
        padding-bottom: toRem(17);
      }
      .author {
        display: block;
        @include fontFamily(12, $fw_medium, 12, $para-text);
        padding-bottom: toRem(14);
        text-transform: uppercase;
      }
      .courseList {
        @include fontFamily(14, $fw_medium, 15, $main-color);
        padding-bottom: toRem(20);
      }
      .rating-wrap {
        display: flex;
        align-items: center;
        gap: toRem(9);
        padding-bottom: toRem(20);
        .no {
          @include fontFamily(14, $fw_medium, 14, $blue-alt);
        }
        .ratingIcon {
          display: flex;
          align-items: center;
          gap: toRem(7);
        }
        .totalRating {
          @include fontFamily(14, $fw_medium, 14, $para-text-alt);
        }
      }
      .price {
        @include fontFamily(14, $fw_semiBold, 14, $main-color);
        padding-bottom: toRem(12);
        .discountPrice {
          color: $purple !important;
        }
        .regularPrice {
          color: $purple !important;
        }
        &:has(.discountPrice) {
          .regularPrice {
            color: $para-text-alt !important;
            text-decoration: line-through;
          }
        }
      }
      .cashback {
        background-color: #f8f8f8;
        padding: toRem(4) toRem(6);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          @include fontFamily(15, $fw_regular, 16, $main-color);
        }
        .amount {
          @include fontFamily(15, $fw_regular, 16, $red);
        }
      }
    }
    &-cooking {
      .content {
        > .title {
          color: $cooking-primary;
        }
        .author {
          color: $cooking-para-text;
        }
        .rating-wrap {
          .no {
            color: $cooking-primary;
          }
          .totalRating {
            color: $cooking-para-text;
          }
        }
        .price {
          color: $cooking-primary;
          span {
            color: $cooking-red !important;
          }
        }
        .cashback {
          .title {
            color: $cooking-primary;
          }
          .amount {
            color: $cooking-red;
          }
        }
      }
    }
    &-kindergarten {
      background-color: $kindergarten-coreFeatures;
      .content {
        > .title {
          color: $kindergarten-primary;
        }
        .author {
          color: $kindergarten-para-text;
        }
        .rating-wrap {
          .no {
            color: $kindergarten-primary;
          }
          .totalRating {
            color: $kindergarten-para-text;
          }
        }
        .price {
          color: $kindergarten-primary;
          span {
            color: $kindergarten-secondary !important;
          }
        }
        .cashback {
          .title {
            color: $kindergarten-primary;
          }
          .amount {
            color: $kindergarten-secondary;
          }
        }
      }
    }
  }
  &-two {
    background-color: $white;
    padding: toRem(22);
    height: 100%;
    @media screen and (max-width: 575px) {
      padding: toRem(12);
    }
    .img {
      max-height: toRem(226);
      min-height: toRem(226);
      border-radius: toRem(4);
      overflow: hidden;
      background-color: $kindergarten-coreFeatures;
      text-align: center;
    }
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: toRem(20);
      padding: toRem(37) 0 toRem(14);
      > .title {
        display: block;
        @include fontFamily(19, $fw_medium, 20, $main-color);
        text-align: center;
      }
      .rating-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: toRem(9);
        .no {
          @include fontFamily(14, $fw_medium, 14, $blue-alt);
        }
        .ratingIcon {
          display: flex;
          align-items: center;
          gap: toRem(7);
        }
        .totalRating {
          @include fontFamily(14, $fw_medium, 14, $para-text-alt);
        }
      }
      .price {
        display: flex;
        justify-content: center;
        gap: toRem(4);
        @include fontFamily(14, $fw_semiBold, 14, $main-color);
        .discountPrice {
          color: $purple !important;
        }
        .regularPrice {
          color: $purple !important;
          padding-right: toRem(10);
        }
        &:has(.discountPrice) {
          .regularPrice {
            color: $para-text-alt !important;
            text-decoration: line-through;
          }
        }
      }
    }
    &-cooking {
      .content {
        > .title {
          color: $cooking-primary;
        }
        .rating-wrap {
          .no {
            color: $cooking-primary;
          }
          .totalRating {
            color: $cooking-para-text;
          }
        }
        .price {
          color: $cooking-primary;
          .regularPrice {
            color: $cooking-discount !important;
          }
          .discountPrice {
            color: $cooking-red;
          }
        }
      }
    }
    &-kindergarten {
      .content {
        > .title {
          color: $kindergarten-primary;
        }
        .rating-wrap {
          .no {
            color: $kindergarten-primary;
          }
          .totalRating {
            color: $kindergarten-para-text;
          }
        }
        .price {
          color: $kindergarten-primary;
          .discountPrice {
            color: $kindergarten-secondary !important;
          }
          .regularPrice {
            color: $kindergarten-disable !important;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  &-three {
    background-color: $white;
    padding: toRem(14) toRem(15);
    display: flex;
    align-items: center;
    gap: toRem(23);
    @media screen and (max-width: 1199px) {
      gap: toRem(10);
    }
    @media screen and (max-width: 991px) {
      flex-direction: column;
    }
    .img {
      flex: 1 1 auto;
      position: relative;
      max-width: toRem(331);
      width: 100%;
      overflow: hidden;
      @media screen and (max-width: 991px) {
        max-width: 100%;
        max-height: toRem(226);
      }
    }
    .content {
      flex: 1 1 auto;
      max-width: toRem(242);
      width: 100%;
      padding: 0 toRem(11);
      display: flex;
      flex-direction: column;
      gap: toRem(20);
      @media screen and (max-width: 1199px) {
        gap: toRem(10);
      }
      @media screen and (max-width: 991px) {
        max-width: 100%;
        gap: toRem(20);
      }
      > .title {
        display: block;
        @include fontFamily(19, $fw_medium, 20, $main-color);
      }
      .author {
        display: block;
        @include fontFamily(12, $fw_medium, 12, $para-text);
        text-transform: uppercase;
      }
      .rating-wrap {
        display: flex;
        align-items: center;
        gap: toRem(9);
        .no {
          @include fontFamily(14, $fw_medium, 14, $blue-alt);
        }
        .ratingIcon {
          display: flex;
          align-items: center;
          gap: toRem(7);
        }
        .totalRating {
          @include fontFamily(14, $fw_medium, 14, $para-text-alt);
        }
      }
      .price {
        @include fontFamily(14, $fw_semiBold, 14, $main-color);
        padding-top: toRem(7);
        // span {
        //   color: $purple !important;
        // }
        // .discount {
        //   color: $para-text !important;
        //   text-decoration: line-through;
        // }

        .discountPrice {
          color: $purple !important;
        }
        .regularPrice {
          color: $purple !important;
        }
        &:has(.discountPrice) {
          .regularPrice {
            color: $para-text-alt !important;
            text-decoration: line-through;
          }
        }
      }
      .cashback {
        background-color: #f8f8f8;
        padding: toRem(4) toRem(6);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          @include fontFamily(15, $fw_regular, 16, $main-color);
        }
        .amount {
          @include fontFamily(15, $fw_regular, 16, $red);
        }
      }
    }
  }
  &-four {
    background-color: $white;
    padding: toRem(14);
    border-radius: toRem(3);
    display: flex;
    align-items: center;
    gap: toRem(34);
    @media screen and (max-width: 1199px) {
      gap: toRem(10);
    }
    @media screen and (max-width: 991px) {
      flex-direction: column;
    }
    .img {
      flex: 1 1 auto;
      position: relative;
      max-width: toRem(180);
      width: 100%;
      overflow: hidden;
      @media screen and (max-width: 991px) {
        max-width: 100%;
        max-height: toRem(226);
      }
    }
    .content {
      flex: 1 1 auto;
      max-width: toRem(257);
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: toRem(15);
      @media screen and (max-width: 1199px) {
        gap: toRem(10);
      }
      @media screen and (max-width: 991px) {
        max-width: 100%;
        gap: toRem(15);
      }
      > .title {
        display: block;
        @include fontFamily(19, $fw_medium, 20, $main-color);
      }
      .author {
        display: block;
        @include fontFamily(12, $fw_medium, 12, $para-text);
        text-transform: uppercase;
      }
      .rating-wrap {
        display: flex;
        align-items: center;
        gap: toRem(9);
        .no {
          @include fontFamily(14, $fw_medium, 14, $blue-alt);
        }
        .ratingIcon {
          display: flex;
          align-items: center;
          gap: toRem(7);
        }
        .totalRating {
          @include fontFamily(14, $fw_medium, 14, $para-text-alt);
        }
      }
      .price {
        @include fontFamily(14, $fw_semiBold, 14, $main-color);
        padding-top: toRem(7);
        span {
          color: $purple !important;
        }
      }
      .cashback {
        max-width: toRem(242);
        background-color: #f8f8f8;
        padding: toRem(4) toRem(6);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          @include fontFamily(15, $fw_regular, 16, $main-color);
        }
        .amount {
          @include fontFamily(15, $fw_regular, 16, $red);
        }
        @media screen and (max-width: 575px) {
          max-width: 100%;
        }
      }
    }
  }
  &-five {
    position: relative;
    height: toRem(417);
    overflow: hidden;
    padding: toRem(20);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: toRem(20);
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgb(251, 109, 104);
      background: $meditation-overlay-default;
    }
    &-blue {
      &::before {
        background: rgb(70, 211, 255);
        background: $meditation-overlay-blue;
      }
    }
    &-yellow {
      &::before {
        background: rgb(216, 248, 127);
        background: $meditation-overlay-yellow;
      }
    }
    .priceWrap {
      position: relative;
      display: flex;
      justify-content: flex-end;
      gap: toRem(10);
      flex-wrap: wrap;
      .upcoming {
        background-color: $meditation-red;
        padding: toRem(10) toRem(12);
        @include fontFamily(12, $fw_semiBold, 12, $white);
      }
      .priceContent {
        padding: toRem(10);
        background-color: $meditation-primary;
        @include fontFamily(14, $fw_semiBold, 14, $white);
        // .regularPrice {
        //   color: $meditation-disable;
        //   text-decoration: line-through;
        // }
        // .discountPrice {
        //   color: $meditation-red;
        // }

        .discountPrice {
          color: $meditation-red !important;
        }
        .regularPrice {
          color: $meditation-red !important;
        }
        &:has(.discountPrice) {
          .regularPrice {
            color: $meditation-disable !important;
            text-decoration: line-through;
          }
        }
      }
    }
    .content {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: toRem(14);
      .degi {
        @include fontFamily(12, $fw_medium, 13, $meditation-primary !important);
        text-transform: uppercase;
        a {
          color: $meditation-primary !important;
        }
      }
      .titleLink {
        display: flex;
        align-items: center;
        gap: toRem(28);
        .title {
          @include fontFamily(19, $fw_medium, 21, $meditation-primary);
        }
      }
      .link {
        flex-shrink: 0;
        width: toRem(44);
        height: toRem(44);
        border-radius: 50%;
        background-color: $white;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $meditation-primary;
      }
    }
  }
  &-cooking {
    height: 100%;
    .course-item {
      &-one {
        .content {
          > .title {
            color: $cooking-primary;
          }
          .author {
            color: $cooking-para-text;
          }
          .rating-wrap {
            .no {
              color: $cooking-primary;
            }
            .totalRating {
              color: $cooking-para-text;
            }
          }
          .price {
            color: $cooking-primary;
            .discountPrice {
              color: $cooking-red !important;
            }
            .regularPrice {
              color: $cooking-red !important;
            }
            &:has(.discountPrice) {
              .regularPrice {
                color: $cooking-disable !important;
                text-decoration: line-through;
              }
            }
          }
          .cashback {
            .title {
              color: $cooking-primary;
            }
            .amount {
              color: $cooking-red;
            }
          }
        }
      }
      &-two {
        .content {
          > .title {
            color: $cooking-primary;
          }
          .rating-wrap {
            .no {
              color: $cooking-primary;
            }
            .totalRating {
              color: $cooking-para-text;
            }
          }
          .price {
            color: $cooking-primary;
            .discountPrice {
              color: $cooking-red !important;
            }
            .regularPrice {
              color: $cooking-red !important;
            }
            &:has(.discountPrice) {
              .regularPrice {
                color: $cooking-disable !important;
                text-decoration: line-through;
              }
            }
          }
          .btn-fill-lan {
            background-color: $cooking-red;
            border: 0.125rem solid $cooking-red;
            color: $white;
            transition: all 0.3s;
            &:hover {
              background-color: $white;
              color: $cooking-red !important;
            }
          }
        }
      }
    }
  }
  &-meditation {
    height: 100%;
    .course-item {
      &-two {
        .content {
          > .title {
            color: $meditation-primary;
          }
          .rating-wrap {
            .no {
              color: $meditation-primary;
            }
            .totalRating {
              color: $cooking-para-text;
            }
          }
          .price {
            color: $meditation-primary;
            // .regularPrice {
            //   color: $meditation-disable;
            // }
            // .discountPrice {
            //   color: $meditation-red !important;
            // }

            .discountPrice {
              color: $meditation-red !important;
            }
            .regularPrice {
              color: $meditation-red !important;
            }
            &:has(.discountPrice) {
              .regularPrice {
                color: $meditation-disable !important;
                text-decoration: line-through;
              }
            }
          }
          // .btn-fill-lan {
          //   background-color: $meditation-red;
          //   border: 0.125rem solid $meditation-red;
          //   color: $white;
          // }
        }
      }
    }
  }
  &-kindergarten {
    height: 100%;
    .course-item {
      &-one {
        background-color: $kindergarten-coreFeatures;
        .content {
          > .title {
            color: $kindergarten-primary;
          }
          .author {
            color: $kindergarten-para-text;
          }
          .rating-wrap {
            .no {
              color: $kindergarten-primary;
            }
            .totalRating {
              color: $kindergarten-para-text;
            }
          }
          .price {
            color: $kindergarten-primary;
            // .discountPrice {
            //   color: $kindergarten-secondary !important;
            // }
            // .regularPrice {
            //   color: $kindergarten-disable !important;
            //   text-decoration: line-through;
            // }

            .discountPrice {
              color: $kindergarten-secondary !important;
            }
            .regularPrice {
              color: $kindergarten-secondary !important;
            }
            &:has(.discountPrice) {
              .regularPrice {
                color: $kindergarten-disable !important;
                text-decoration: line-through;
              }
            }
          }
          .cashback {
            background-color: $white;
            .title {
              color: $kindergarten-primary;
            }
            .amount {
              color: $kindergarten-secondary;
            }
          }
        }
      }
    }
  }
}