@import "variable";
@import "mixin";

// header default
.header {
   .navbar-container {
      .navbar-light {
         padding: 0px;

         .main-menu {
            >li {
               padding: 0 19px;
               position: relative;

               >a {
                  font-weight: 700;
                  line-height: 95px;
                  position: relative;
                  padding: 0;

                  &:before {
                     position: absolute;
                     right: 0px;
                     content: "";
                     width: 5px;
                     height: 5px;
                     @include border-radius(50%);
                     background: $primary-color;
                     bottom: 25px;
                     margin: auto;
                     left: 0;
                     @include transition();
                     @include transform(scale(0));
                  }
               }
            }

            li {
               a {
                  font-weight: 700;
                  color: $title-color;
                  text-transform: uppercase;
                  font-size: 14px;

                  &:hover {
                     color: $primary-color;

                     &:before {
                        @media (min-width: 992px) {
                           @include transform(scale(1));
                        }
                     }
                  }
               }

               &.active {
                  >a {
                     color: $primary-color;

                     @media (min-width: 992px) {
                        &:before {
                           @include transform(scale(1));
                        }
                     }
                  }
               }

               // dropdown-menu
               ul.dropdown-menu {
                  padding: 10px 0px;
                  min-width: 230px;
                  border-radius: 0;
                  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
                  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
                  border: none;
                  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
                  margin: 0;
                  @include border-radius(6px);

                  @media (min-width: 992px) {
                     display: block;
                     opacity: 0;
                     visibility: hidden;
                     @include transform(translateY(20px));
                  }

                  li {
                     a {
                        font-size: 12px;
                        border-top: 1px solid #f5f5f5;
                        line-height: 40px;
                     }

                     &:first-child {
                        >a {
                           border-top: none;
                        }
                     }

                     .dropdown-menu {
                        left: 100%;
                        top: 0;
                     }

                     @media (max-width: 991px) {
                        .dropdown-menu {
                           padding-left: 20px;
                        }
                     }

                     .dropdown-item.active,
                     .dropdown-item:hover {
                        background: transparent;
                     }

                     &.dropdown {
                        position: relative;

                        &:after {
                           content: "\f107";
                           font-family: "Font Awesome 5 Free";
                           font-weight: 900;
                           border: 0;
                           vertical-align: 0;
                           position: absolute;
                           right: 10px;
                           top: 13px;
                           font-size: 14px;
                        }

                        @media (min-width: 991px) {
                           &::after {
                              transform: rotate(-90deg);
                           }
                        }
                     }

                  }
               }

               @media (min-width: 992px) {
                  &:hover {
                     >.dropdown-menu {
                        opacity: 1;
                        visibility: visible;
                        @include transform(translateY(0));
                     }
                  }
               }
            }
         }

         .dropdown-toggle::after {
            content: "\f107";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            border: 0;
            vertical-align: 0;
            float: right;
         }

         .navbar-brand {
            padding: 15px 0;
            max-width: 230px;
         }
      }
   }

   .navbar-light .navbar-toggler {
      background: $primary-color;
      color: #fff;
      margin-left: auto;

      .navbar-toggler-icon {
         background-image: none;
         font-size: 25px;
         height: auto;
         width: auto;
      }
   }

   &.header-default {
      .navbar-collapse {
         justify-content: flex-end;
      }
   }
}

.header-course-search {
   .courselog-search-course-form {
      margin-bottom: 0;
   }

   form[name="search-course"] {
      .search-course-button {
         padding: 0;
      }
   }
}

.category-menu .elementskit-navbar-nav-default .elementskit-navbar-nav>li {
   width: 100%;

   >a {
      position: relative;

      &::before {
         position: absolute;
         content: "\e904";
         font-family: "iconfont" !important;
         left: 20px;
         top: 6px;
         font-size: 13px;
      }
   }
}

.cartbtn {
   display: inline-block;
   list-style-type: none;
   margin: 0 10px;

   a {
      width: 35px;
      height: 35px;
      @include border-radius(50%);
      border: 1px solid #4e5c77;
      text-align: center;
      line-height: 35px;
      position: relative;
      color: #fff;
      display: inline-block;
      font-size: 12px;

      sup {
         position: absolute;
         background-color: $primary-color;
         padding: 10px 5px;
         border-radius: 50%;
      }

      &:hover {
         border-color: $primary-color;
         background: $primary-color;
         color: #fff;
      }
   }
}

.learn-press-message.success {
   display: none;
}

.login-user {
   position: relative;

   i {
      width: 35px;
      height: 35px;
      @include border-radius(50%);
      border: 1px solid $border-color;
      text-align: center;
      line-height: 30px;
      position: relative;
      display: inline-block;
      font-size: 12px;
   }

   >a {
      color: $title-color;

      &:hover {
         color: $secondary-color;

         i {
            border-color: $secondary-color;
         }
      }
   }

   .menu-list {
      width: 250px;
      opacity: 0;
      transform: translateY(5px);
      pointer-events: none;
      max-height: none;
      box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
      position: absolute;
      top: 100%;
      right: 0;
      z-index: 2;
      background: $white-color;
      border-radius: 8px;
      transition: all 150ms ease-in-out;
      padding: 30px 0;

      a {
         padding: 8px 30px;
         display: block;
         color: #333;
         height: auto;
         transition: all ease 0.4s;

         &:hover {
            padding-left: 30px;
         }
      }

      >a {
         &:hover {
            background: rgba(51, 51, 51, 0.04);
         }
      }

      ul {
         margin: 0;
         padding: 0;

         li {
            &:hover {
               a {
                  box-shadow: 0 0 0 $secondary-color;
                  padding-left: 35px;
                  background: rgba(51, 51, 51, 0.04);
               }
            }
         }
      }
   }

   &:hover {
      .menu-list {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
         pointer-events: auto;
         transition-delay: 100ms;
      }
   }
}

// cart button
.cartbtn .cart-link .cart-contents i,
.header-login-user a i {
   font-size: 14px;
}

.cartbtn a sup {
   padding: 8px 5px;
}



// sticky header

@media (min-width: 1200px) {
   .header-wrapper {
      min-height: 95px;
   }

   .navbar-sticky {
      &.sticky {
         position: fixed;
         left: 0;
         top: 0;
         width: 100%;
         z-index: 99;
         -webkit-animation-name: fadeInDown;
         animation-name: fadeInDown;
         -webkit-animation-duration: 1s;
         animation-duration: 1s;
         -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
         -webkit-animation-delay: 0.1s;
         animation-delay: 0.1s;

         &.header-default {
            background: #fff;
         }
      }
   }
}

.sticky-header {
   transition: all ease 0.5s;

   &.ekit-sticky--active {
      background: #1e2f50;
      box-shadow: 0px 30px 50px 0px rgba(51, 51, 51, 0.08);
   }
}

/* ====================================
// Shortcode: Main Slider
======================================= */

// Slider animation

.ts-animate {
   position: relative;
   top: 30px;
   transition: all ease 0.5s;
   opacity: 0;
}

.main-slider {
   .owl-item {
      &.active {
         .ts-animate {
            top: 0px;
            opacity: 1;
         }

         .slider-content {
            .sub-title {
               top: 0;
               transition-delay: 0.4s;
            }

            .main-title {
               transition-delay: 0.5s;
            }

            .slider-desc {
               transition-delay: 0.6s;
            }

            .btn-wrapper {
               transition-delay: 0.8s;
            }
         }
      }
   }
}

// Slider style

.main-slider {
   .banner-item {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;

      &::before {
         position: absolute;
         content: "";
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         background: rgba(#273c66, 0.4);
      }
   }

   .owl-dots {
      position: absolute;
      bottom: 50px;
      margin: 0 auto;
      width: 100%;

      .owl-dot {
         background: #fff;
         width: 10px;
         height: 10px;
         opacity: 1;

         &.active {
            background-color: $primary-color;
         }
      }
   }

   .slider-content {
      .sub-title {
         font-size: 18px;
         line-height: 28px;
         color: #fff;
         font-weight: 600;
         margin-bottom: 8px;
      }

      .main-title {
         font-size: 54px;
         letter-spacing: 0;
         color: #fff;
         line-height: 66px;
         margin-bottom: 20px;

         span {
            color: #F5AC00;
         }
      }

      .slider-desc {
         color: #fff;
         margin-bottom: 35px;
      }

      .btn {
         background: $primary-color;
         color: #fff;
         font-size: 14px;
         padding: 14px 30px 13px;
         border: 1px solid $primary-color;
         font-weight: 700;

         &:hover {
            background: transparent;
            border-color: #fff;
         }

         .icon {
            margin-right: 5px;
         }

         &.btn-border {
            background: transparent;
            border-color: #fff;

            &:hover {
               background: $primary-color;
               border-color: $primary-color;
            }
         }

         &+.btn {
            margin-left: 15px;
         }
      }
   }

   &-style2 {
      .slider-content {
         padding: 80px;
         position: relative;

         .btn {
            i {
               margin: 0;
            }
         }

         .boxed {
            position: absolute;
            left: 0;
            top: 0;
            width: 80%;
            height: 100%;
            border: 18px solid #f0a108;
            border-right: 0;

            &::after,
            &::before {
               position: absolute;
               content: "";
               right: 0;
               top: -10px;
               height: 60px;
               width: 18px;
               background: #f0a108;
            }

            &::after {
               bottom: -10px;
               top: auto;
            }
         }
      }
   }

   &-style3 {
      .slider-content {
         .btn-wrapper {
            .btn {
               position: relative;
               border: none;
            }
         }
      }

      .slider-image {
         display: flex;
         align-items: end !important;
         justify-content: flex-end;

         .image-box {
            &.image-one {
               margin-right: -100px;
               z-index: 1;
            }
         }
      }

      &.dotstyle2 {
         .owl-dots {
            .owl-dot {
               &.active {
                  border-color: #ff6666 !important;

                  span {
                     background: #ff6666 !important;
                  }
               }
            }
         }
      }
   }

   &.dotstyle2 {
      .owl-dots {
         position: absolute;
         bottom: 50px;
         margin: 0 auto;
         width: 100%;
         width: auto;
         height: 100%;
         left: 30px;
         top: 50%;

         .owl-dot {
            background: #fbfbfb;
            width: 6px;
            height: 6px;
            opacity: 1;
            display: block;
            margin-bottom: 10px;
            text-align: center;
            margin-left: 0;
            margin-right: 0;

            &.active {
               width: 17px;
               height: 17px;
               background: transparent;
               left: -5px;
               border: 1px solid #fff;
               margin-bottom: 15px;
               position: relative;

               span {
                  width: 5px;
                  height: 5px;
                  background: #fff;
                  position: absolute;
                  z-index: 99999;
                  left: 5px;
                  border-radius: 50%;
                  top: 5px;
               }
            }
         }
      }
   }
}

/* social icon */

.social-list {
   margin-bottom: 40px;
   padding-left: 0;

   li {
      display: inline-block;

      a {
         color: #ffffff;
         font-size: 0.70176rem;
         width: 35px;
         height: 35px;
         line-height: 35px;
         border: 0px;
         display: block;
         text-align: center;
         background: $primary-color;
         @include border-radius(50%);
      }

      &.ts-facebook {
         a {
            background-color: #4969a8;
         }
      }

      &.ts-twitter {
         a {
            background-color: #2aa3ef;
         }
      }

      &.ts-linkedin {
         a {
            background-color: #1178b3;
         }
      }

      &.ts-instagram {
         a {
            background-color: #e8715c;
         }
      }

      &.ts-vimeo {
         a {
            background-color: #1ab7ea;
         }
      }
   }
}

/*================================
      banner blog
 ==================================*/

.banner-area {
   padding: 120px 0;
   position: relative;
   @include background-content();
   background-color: #f4f4fc;

   &:before {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      content: "";
      background-image: linear-gradient(to right, #f4f4fc, rgba(249, 249, 253, 0.2));
   }

   .banner-title {
      font-size: 36px;
      line-height: 44px;
      font-weight: 700;
      margin-bottom: 0;
      margin-left: 10px;

      span {
         color: $primary-color;
      }
   }

   .image {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1600px;
      height: 5011px;
      z-index: 250;
   }

   .breadcrumb {
      background: none;
      display: inline-block;
      padding: 0;
      margin-bottom: 5px;

      li {
         display: inline-block;
         text-transform: capitalize;
         margin: 0 10px;
         font-size: 17px;

         a {
            color: $title-color;
         }
      }

      i {
         font-size: 12px;
      }
   }

   &.banner-solid {
      padding-top: 50px;
      padding-bottom: 50px;
      background: #f4f4fc;

      &:before {
         display: none;
      }

      .banner-title {
         font-size: 48px;
         line-height: 55px;
      }
   }

   &.single-event-banner {
      padding: 55px 0 65px 0;

      .banner-title-des {
         border-right: 2px solid #DADADE;
         padding-right: 20px;
      }

      .banner-title {
         font-weight: 800;
         margin-bottom: 20px;
         font-size: 39px;
         line-height: 48px;
      }

      .breadcrumb {
         margin-bottom: 30px;

         li {
            font-size: 14px;
         }
      }

      .event-categories {
         padding-left: 10px;
         margin-bottom: 10px;

         li {
            display: inline-block;

            &:last-child {
               a {
                  span {
                     display: none;
                  }
               }
            }

            a {
               color: $primary-color;
               font-size: 18px;
            }
         }
      }

      .date-location {
         margin-left: 12px;

         span {
            font-size: 14px;
            margin-right: 30px;

            i {
               margin-right: 5px;
            }
         }
      }
   }
}

// banner: sub pages

.banner-area {
   .banner-title {
      position: relative;

      span {
         color: #333333;
      }
   }
}

/*================================
      latest blog
 ==================================*/
.latest-blog {
   .post {
      border: 1px dashed #e8e8e8;
      @include border-radius(8px);
      overflow: hidden;
      @include transition();

      .post-meta {
         margin-bottom: 12px;

         span {
            position: relative;
            padding-left: 15px;
            margin-right: 15px;

            &:last-of-type {
               margin-right: 0;
            }

            &:before {
               position: absolute;
               left: 0;
               top: 9px;
               width: 6px;
               height: 6px;
               @include border-radius(50%);
               content: "";
               background: $primary-color;
            }
         }
      }

      .post-body {
         border: none;
      }

      .post-media {
         width: 100%;
         height: 100%;
         overflow: hidden;

         img {
            width: 100%;
            height: auto;
            @include transform(scale(1));
            @include transition();
         }
      }

      .post-footer {
         .btn-link {
            i {
               margin-left: 0;
               margin-right: 5px;
               vertical-align: inherit;
            }
         }
      }

      &:hover {
         box-shadow: 0px 30px 50px 0px rgba(51, 51, 51, 0.08);

         .post-media {
            img {
               @include transform(scale(1.1));
            }
         }
      }
   }
}

/*================================
   shortcode: Course Category 
 ==============================*/

.ts-course-category {
   .single-course-category {
      padding: 40px 30px 30px;
      @include border-radius(5px);
      overflow: hidden;
      @include transition();
      margin-top: 50px;
      margin-bottom: 15px;
      background: #fff;
      text-align: center;
      position: relative;
      min-height: 250px;
      box-shadow: 0px 0px 30px rgba(29, 23, 77, 0.06);

      .course-media {
         margin-bottom: 25px;

         img {
            @include transition();
            width: 50px;
            margin: auto;
         }
      }

      .course-category-title {
         font-size: 22px;
         font-weight: 700;

         a {
            color: $title-color;

            &:hover {
               color: $primary-color;
            }
         }
      }

      .course-count {
         @include transition();
         margin-bottom: 0;
      }

      .hover-content {
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         width: 100%;
         height: 100%;
         padding: 40px 30px 30px;
         opacity: 0;
         visibility: hidden;
         transition: all ease 0.4s;
         background: $secondary-color;

         .course-category-title {
            a {
               color: $white-color;

               &:hover {
                  color: $white-color;
               }
            }
         }

         .btn-wrap {
            margin-top: 50px;
         }

         .course-button {
            font-size: 16px;
            width: 50px;
            height: 50px;
            @include border-radius(8px);
            background: rgba($white-color, 0.1);
            display: inline-block;
            padding: 12px;
            color: $white-color;

            &:hover {
               background: $primary-color;
            }
         }
      }

      &:hover {
         box-shadow: 0px 15px 40px rgba(40, 120, 235, 0.25);

         .hover-content {
            opacity: 1;
            visibility: visible;
         }
      }
   }

   &.grid-style3 {
      .single-course-category {
         min-height: 170px;

         .course-media {
            margin-bottom: 0;
            margin-right: 25px;
         }
      }
   }

   &.category-slider {
      .single-course-category {
         margin-bottom: 50px;
      }

      .owl-nav {

         .owl-prev,
         .owl-next {
            left: -80px;

            &:hover {
               background: $secondary-color;
               border-color: $secondary-color;
            }

            @media (max-width: 1300px) {
               display: none;
            }
         }

         .owl-next {
            right: -80px;
            left: auto;
         }
      }
   }
}

// /* shortcode: feature course
// ================================================== */

// Courselog tab course category
.tab-course-category {
   margin-bottom: 20px;

   ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: inline-block;

      li {
         display: inline-block;
         font-size: 18px;
         color: #120f2d;
         line-height: 28px;
         cursor: pointer;
         position: relative;
         margin-right: 20px;
         padding: 8px 15px 8px 30px;
         margin-bottom: 20px;
         transition: all 0.5s;
         border-radius: 0;
         @include border-radius(4px);
         font-weight: 500;

         .course-tab-a {
            transition: all 0.5s;

            &:hover,
            &.active {
               color: $white-color;
               background: #2878eb;
               box-shadow: 0px 10px 30px rgba(40, 120, 235, 0.25);

               &:before {
                  content: "";
                  position: absolute;
                  left: 17px;
                  top: 19px;
                  width: 6px;
                  height: 6px;
                  background: #f5ac00;
                  @include border-radius(20px);
               }
            }
         }

         &:last-child {
            margin-right: 0;
         }
      }
   }

   &.product-tab {
      ul {
         li {
            border-bottom: 2px solid transparent;

            &:hover,
            &.active {
               background: none;
               border-color: #2878eb;
               box-shadow: none;
               border-radius: 0;
               color: #2878eb;
               background: transparent;

               &:before {
                  left: 0;
                  background: #2878eb;
               }
            }

            &:before {
               left: 0;
               background: #2878eb;
            }
         }
      }

   }

   &.product-tab-style2 {
      background: #F8F8FC;
      padding: 30px 0;

      ul {
         li {
            padding: 10px 30px 10px 30px;
            border-radius: 8px;

            &:hover,
            &.active {
               background: #2878EB;
               border: 0;
               color: $white-color;
               border-radius: 8px;
            }

            &::before {
               display: none;
            }
         }
      }
   }
}

.courses-tabs,
.products-tabs {
   transition: opacity 1s linear;

   .fade.active {
      opacity: 1;
      transition: opacity 1s linear;
   }

   .nav-tabs {
      border: none;
   }

   .tab-course-category {
      margin-bottom: 40px;

      ul {
         li {
            padding: 0;
         }
      }
   }

   .course-tab-a,
   .product-tab-a {
      padding: 8px 15px 8px 30px;
      @include border-radius(4px);
   }

   .course-tab-a:hover,
   .course-tab-a.active,
   .product-tab-a:hover,
   .product-tab-a.active {
      color: $white-color;
      background: #2878eb;
      box-shadow: 0px 10px 30px rgba(40, 120, 235, 0.25);
      transition: all ease-in-out 2s;

      &:before {
         content: "";
         position: absolute;
         left: 17px;
         top: 19px;
         width: 6px;
         height: 6px;
         background: #f5ac00;
         @include border-radius(20px);
      }
   }
}

// Single course css
.single-course {
   background: $white-color;
   @include border-radius(8px);
   overflow: hidden;
   position: relative;
   @include transition();
   margin-bottom: 30px;

   .lp-course-buttons {
      display: inline-block;
   }

   .course-thumb {
      position: relative;
      z-index: 1;
      @include transition(all, 0.5s, ease);

      img {
         border-radius: 8px;
      }

      .course-link {
         display: block;
         width: 100%;
         height: 100%;
         z-index: -1;
         position: relative;
      }

      .course-price-item {
         .course-price {
            display: inline-block;
            @include border-radius(100px);
            font-size: 18px;
            font-weight: 700;
            line-height: 70px;
            text-align: center;
            background: $primary-color;
            color: $white-color;
            box-shadow: 0px 5px 15px rgba($primary-color, 0.41);
            position: absolute;
            right: 25px;
            bottom: -15px;
            min-width: 70px;
            min-height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      }

      .meta-list {
         position: absolute;
         left: 15px;
         top: 15px;
      }
   }

   .content-area {
      padding: 35px 30px 30px;

      .ts-course-el-title {
         font-size: 20px;
         font-weight: 700;
         line-height: 28px;

         a {
            color: $title-color;
            @include transition();

            &:hover {
               color: #2878eb;
            }
         }
      }

      .content-top {
         ul {
            display: flex;
            justify-content: space-between;
            margin-bottom: 13px;

            li {
               display: inline-block;
               text-transform: capitalize;

               i {
                  color: $primary-color;
                  padding-right: 5px;
               }
            }
         }
      }

      .author-area {
         padding-bottom: 30px;

         .instructor {
            display: flex;
            align-items: center;

            .instructor-thumb {
               width: 34px;
               height: 34px;
               @include border-radius(50%);
               display: inline-block;
               margin-right: 15px;
               background: #defff6;
               overflow: hidden;

               img {
                  width: 100%;
               }
            }

            a {
               font-size: 14px;
               font-weight: 400;
               color: #706f81;
            }
         }
      }

      .xs-ratting-content {
         .xs-review-rattting {
            display: inline-block;
            vertical-align: middle;

            .xs-star {
               line-height: 12px;
            }
         }
      }

      .course-footer {
         border-top: 1px solid #e3e3e8;
         padding-top: 25px;
         position: relative;
         transition: all 0.5s ease-in-out;
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;

         .lessons {
            font-size: 14px;
            color: #706f81;

            i {
               color: $primary-color;
               margin-right: 7px;
            }
         }

         .cl-button {
            .btn-link {
               font-size: 15px;
               color: $primary-color;
               text-decoration: none;
               text-transform: capitalize;
               border-bottom: 2px solid $primary-color;
               font-weight: 700;
               transition: all ease 0.4s;

               i {
                  margin-left: 6px;
                  font-size: 13px;
               }

               &:hover {
                  color: $secondary-color;
                  border-color: $secondary-color;
               }
            }
         }

      }

      .lessons {
         .no-rating-icon {
            i {
               color: #b7b7b7;
               margin-right: 4px;
               font-size: 11px;
               vertical-align: middle;
            }
         }
      }
   }

   &:hover {
      box-shadow: 0px 15px 30px rgba(29, 23, 77, 0.08);

      .course-footer {
         .cl-button {
            .btn-link {
               color: $primary-color;
               border-bottom-color: $primary-color;
            }
         }
      }

   }

   .course-style2 & {
      .course-thumb {
         background-size: cover;
         height: 100%;
         width: 100%;
         min-height: 250px;
         background-repeat: no-repeat;
         background-position: center;
      }

      .content-area {
         padding: 15px 25px;

         .ts-course-el-title {
            margin-bottom: 10px;
         }

         .author-area {
            padding-bottom: 15px;

            span {
               margin-right: 30px;

               &:last-child {
                  margin-right: 0;
               }
            }
         }

         .course-footer {
            padding-top: 15px;

            .course-price {
               font-size: 20px;
               font-weight: 700;
               color: $primary-color;
            }

            .readmore-area {
               .btn-details {
                  margin-right: 10px;
               }
            }
         }
      }
   }

   .course-style3 & {
      .course-thumb {
         width: 200px;
         height: 200px;
         border-radius: 50%;
         flex-shrink: 0;
         background: no-repeat center center / cover;
      }

      .author-area {
         display: flex;
         justify-content: space-between;
      }

      .content-area {
         .course-footer {
            padding-top: 0;
            border: 0;

            .course-price {
               font-size: 25px;
               font-weight: 700;
               color: $primary-color;
            }

            .readmore-area {
               .btn-details {
                  margin-right: 10px;
               }
            }
         }
      }

      .label {
         color: #706F81;
         text-transform: capitalize;

         i {
            color: $primary-color;
         }
      }
   }

   .wp-ratting-vote {
      vertical-align: middle;
   }

   .woo-rate {
      span {
         font-weight: 600;

         i {
            color: #FCB040;
            margin-right: 7px;
         }
      }

      &.star-0 {
         span {
            i {
               color: #bbb;
            }
         }
      }
   }

   &.toltip-style {
      box-shadow: 0px 7px 20px rgba($secondary-color, 0.03);
      position: relative;
      overflow: initial;

      .course-thumb img {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
      }

      .instructor-thumb {
         position: relative;
         z-index: 1;
         margin-top: -30px;

         img {
            border-radius: 50%;
            width: 55px;
            height: 55px;
            border: 5px solid $white-color;
         }
      }

      .list {
         color: #706F81;
         align-self: flex-end;

         i {
            color: $primary-color;
            margin-right: 5px;
         }
      }

      .no-rating-icon {
         i {
            font-size: 13px;
         }
      }

      .course-price {
         .price {
            color: $secondary-color;
            font-size: 20px;
            font-weight: 600;
         }
      }

      .content-area {
         padding-top: 0;
      }

      .author-area {
         display: flex;
         justify-content: space-between;
      }

      .course-footer {
         border: none;
         padding-top: 0;
      }

      .toltip-hover {
         position: absolute;
         top: 0px;
         left: -20px;
         right: -20px;
         padding-top: 35px;
         background: $white-color;
         box-shadow: 0 10px 30px 11px rgba(0, 0, 0, 25%);
         visibility: hidden;
         opacity: 0;
         transform: scale(0.8);
         z-index: 100;
         border-radius: 8px;
         max-height: 500px;
         overflow: hidden;
         height: 100%;
         transition: all ease 0.3s;

         &::-webkit-scrollbar {
            width: 5px;
         }

         &::-webkit-scrollbar-track {
            background: #f1f1f1;
         }

         &::-webkit-scrollbar-thumb {
            background: $text_dark_light;
            transition: 0.3s;
         }

         &::-webkit-scrollbar-thumb:hover {
            background: $dark_border;
         }

         .course-footer {
            padding: 20px 0;
         }
      }

      &:hover {
         .toltip-hover {
            visibility: visible;
            opacity: 1;
            transform: scale(1);
         }
      }
   }
}

.single-academic {
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.06);

   &:hover {
      box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.14);
   }

   .post-thumb {
      height: 300px;
      background-size: cover;
      background-position: center;
      border-radius: 8px;
      position: relative;
   }

   .post-footer {
      .readmore-btn {
         color: #EE8C1C;
         font-weight: 700;

         i {
            vertical-align: middle;
            margin-left: 5px;
         }

         &:hover {
            color: $secondary-color;
         }
      }
   }
}

.learn-press-wishlist-courses {
   .course {
      .wishlist-button {
         display: none;
      }
   }
}

/*Academic style */

.ts-academic {
   &.style-2 {
      .single-academic {
         .content-area {
            position: relative;
            padding: 15px 35px 30px 35px;

            .academic-meta {
               list-style: none;
               display: flex;
               justify-content: space-between;
               margin: -10px 0 15px 0;
               padding: 0;

               li {
                  display: inline-block;
                  color: #fff;

                  span {
                     margin-left: 5px;
                  }
               }
            }
         }

         .course-shap {
            position: absolute;
            left: -2px;
            bottom: -40px;
            width: 101%;
            display: none;

            path {
               fill: #1178b3;
            }

            @media(min-width: 1024px) {
               display: block;
            }
         }
      }

      $programColor: #65B337, #FF6951, #7669DF, #40C4B7, #9A00F2, #F33D8A, #ff9c00, #00c8ff;

      @for $i from 1 through length($programColor) {
         div[class^="col-"] {
            &:nth-child(#{$i}) {
               .single-academic {
                  .course-shap {
                     path {
                        fill: nth($programColor, $i);
                        ;
                     }
                  }

                  .content-area {
                     background-color: nth($programColor , $i);
                  }
               }
            }
         }
      }
   }
}


/* ===================================
// Shortcode: Feature Box
====================================== */

.ts-feature-standard {
   .single-intro-text {
      box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.06);

      .intro-content {
         padding: 40px 40px 15px 40px;
         background: #fff;

         .ts-title {
            font-weight: 900;
            color: #f26522;
         }
      }
   }

   .feature-img {
      img {
         width: 100%;
      }
   }

   // feature style 2
   &.style2 {
      position: relative;

      &:hover {
         .featured-content {
            padding: 45px 40px 40px;

            p {
               transform: scale(1);
               opacity: 1;
               height: auto;
               margin-bottom: 115px;
            }

            .feature-btn {
               opacity: 1;
               transform: scale(1);
               bottom: 50px;
               height: auto;
            }
         }
      }

      .featured-content {
         position: absolute;
         left: 0;
         background: rgba(#333, 0.95);
         width: calc(100% - 60px);
         color: #ffffff;
         right: 0;
         margin: 0 auto;
         padding: 32px 40px 14px 40px;
         bottom: -50px;
         border-bottom: 5px solid #f26522;
         transition: all ease 0.5s;
         overflow: hidden;
         height: auto;

         .ts-title {
            color: #ffffff;
            font-size: 22px;
            line-height: 28px;
            font-weight: 700;
            padding: 0 10px;
         }

         p {
            font-size: 16px;
            line-height: 26px;
            opacity: 0;
            height: 0;
            margin-bottom: 0;
            transition: all ease 0.5s;
         }
      }

      .feature-btn {
         position: static;
         margin: 0;
         height: 0;
         opacity: 0;
         transition: all ease 0.5s;

         .btn {
            position: static;

            &.btn-outline {
               border: 2px solid #fff;
               border-radius: 0;
               color: #fff;
            }
         }
      }
   }
}

/* ===================================
// Shortcode: Instructor
====================================== */

.instructor-list-wrap {
   position: relative;
   @include transition(all, 0.5s, ease);
   margin-bottom: 50px;
}

.single-instructor-item {
   text-align: center;
   @include transition(all, 0.5s, ease);
   position: relative;
   overflow: hidden;
   @include border-radius(8px);
   box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.03);

   .insturctor-img-area {
      @include transition(all, 0.5s, ease);
   }

   .instructor-profile-pic {
      position: relative;

      &::before {
         position: absolute;
         content: "";
         left: 0;
         right: 0;
         width: 100%;
         height: 100%;
         opacity: 0;
         visibility: hidden;
         transition: all ease 0.4s;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
      }

      img {
         width: 100%;
      }
   }

   .instructor-profile-content {
      @include transition(all, 0.5s, ease);
      padding: 20px 40px;
      background: #fff;
   }

   .instructor-name {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 0;
      letter-spacing: -0.24px;

      a {
         color: $title-color;
      }
   }

   p {
      font-size: 14px;
      margin-bottom: 10px;
      letter-spacing: -0.14px;
   }

   .instructor-social {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 0;
      opacity: 0;
      visibility: hidden;
      transition: all ease 0.5s;

      a {
         display: inline-block;
         font-size: 16px;
         margin: 0 10px;

         i {
            background: #fff;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            line-height: 36px;

            &.fa-facebook {
               color: #3b5998;
            }

            &.fa-twitter {
               color: #1da1f2;
            }

            &.fa-linkedin {
               color: #0077b5;
            }
         }
      }
   }

   &:hover {
      .instructor-social {
         bottom: 25px;
         opacity: 1;
         visibility: visible;
      }

      .instructor-profile-pic {
         &::before {
            opacity: 1;
            visibility: visible;
         }
      }
   }
}


/* ===================================
// Shortcode: Login & Register
====================================== */
.login-from {
   .form-fields {
      padding: 0;
   }

   .rwmb-field,
   .form-field {
      list-style: none;
      margin-bottom: 15px;

      label {
         font-size: 16px;
         font-weight: 500;
         color: #120F2D;
         margin-bottom: 8px !important;
         letter-spacing: 0.24px;
         display: block;
      }

      input {
         color: $title-color;
         padding-left: 20px !important;
         width: 100%;
         padding: 15px;

         &::placeholder {
            color: $title-color;
         }

         &[type="text"],
         &[type="email"],
         &[type="password"] {
            background: #F4F4F6 !important;
            border-radius: 8px;
            color: #B8B7C0;

            &::placeholder {
               color: #B8B7C0;
            }
         }
      }
   }

   .password-field {
      flex-wrap: wrap;

      @media (max-width: 1024px) {
         p {
            margin-bottom: 10px;
         }
      }

      label {
         color: $title-color;
      }

      .lost-pas {
         text-decoration: underline;
         color: $title-color;
      }
   }

   button[type="submit"] {
      cursor: pointer;
      display: block;
      width: 100%;
      background: #1DC295;
      border: none;
      font-size: 16px;
      color: #fff;
      padding: 15px;

      i {
         margin-left: 6px;
         font-size: 13px;
      }

      &:hover {
         background: $secondary-color;
         border-color: $secondary-color;
      }
   }

   &.learn-press-form-login,
   &.learn-press-form-register {
      button[type="submit"] {
         cursor: pointer;
         display: block;
         width: 100%;
         background: $primary-color;
         border: 1px solid $primary-color;
         font-size: 16px;

         i {
            margin-left: 6px;
            font-size: 13px;
         }

         &:hover {
            background: $secondary-color;
            border-color: $secondary-color;
         }
      }
   }
}

.user-dashboard {
   #learn-press-profile {
      &.lp-user-profile.guest {
         padding-bottom: 0;
      }

      #profile-content {
         padding-top: 0;
      }

      #profile-nav {
         .lp-profile-nav-tabs {
            li {
               &.avatar {
                  width: auto;
                  height: auto;
               }

               >a {
                  >i {
                     color: $primary-color;
                  }
               }

               &.active,
               &:hover {
                  background: $primary-color;
               }
            }

         }
      }

      #profile-sidebar {
         margin-top: 0;
      }

      .dashboard-general-statistic__row {
         .statistic-box {
            width: 235px;
         }
      }
   }

   .wrapper-profile-header {
      &.wrap-fullwidth {
         display: none;
      }
   }
}

#popup-course {
   z-index: 9999 !important;
}

form[name="search-course"] {
   .search-course-button {
      position: absolute;
      line-height: 54px;
   }
}


/* Social Login Style */

.ts-social-login {
   .xs-login-global {
      margin-left: 0 !important;

      ul {
         padding-left: 0;

         li {
            a {
               border-radius: 6px;
               background: #2878EB;

               .login-button-text {
                  color: #fff;
               }

               .social-icon {
                  background: rgba(255, 255, 255, 0.1);
                  border-radius: 6px;
               }
            }

            &.facebook {
               a {
                  background: #3B5998;
               }
            }

            &.google {
               a {
                  background: #EA4335;
               }
            }

            &.linkedin {
               a {
                  background: #0077B5;
               }
            }

            &.twitter {
               a {
                  background: #1DA1F2;
               }
            }

            &:hover {
               a {
                  .social-icon {
                     background: rgba(255, 255, 255, 0.1);
                     border-radius: 6px;
                  }
               }
            }
         }
      }
   }
}


/*==============================
// Shortcode: Team
===============================*/

.single-team-item {
   &.style-2 {
      margin-bottom: 30px;
      position: relative;

      .team-thumb-wrap {
         overflow: hidden;
         border-radius: 8px;
         position: relative;

         .team-thumb {
            @include transition(all, 0.5s, ease);
            position: relative;

            img {
               width: 100%;
            }

            &:hover {
               transform: scale(1.1);
            }
         }
      }

      .team-footer {
         margin-top: 20px;

         h4 {
            font-weight: 700;
            margin-bottom: 0px;
         }

         p {
            font-size: 14px;
         }
      }
   }
}


// archive page / course category page

/*=============================
   archive tranding course
===============================*/

.tranding-course-slider {
   padding: 100px 0;
}

.trending_course {
   .owl-nav {
      .owl-prev {
         @media (min-width: 1600px) {
            left: -100px;
         }

         border: 1px solid #dedfe2;
      }

      .owl-next {
         @media (min-width: 1600px) {
            right: -100px;
         }

         border: 1px solid #dedfe2;
      }
   }

   .owl-dots {
      margin-top: 50px;
   }
}

.archive-course-container {
   .course-archive {
      margin-bottom: 50px;
   }

   .course-archive-list {
      .filter-item {
         margin-bottom: 25px;
         align-items: center;

         p {
            font-size: 15px;
            color: $title-color;
            font-weight: 500;
            margin-bottom: 0;
            line-height: 25px;
         }

         .courselog-course-order {
            select {
               border: none;
               padding-left: 10px;
               color: $secondary-color;
            }
         }
      }

      &.style2 {
         .filter-item {
            .courselog-course-order {
               select {
                  border: 1px solid #DADADE;
                  border-radius: 4px;
                  font-weight: 500;
                  padding: 8px 20px;
                  margin-left: 15px;
               }
            }
         }
      }
   }

   // archive search filter
   .archive-course-filter {
      padding: 30px 30px;

      .filter-content {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;

         .filter {
            color: $title-color;

            i {
               color: $secondary-color;
               margin-right: 10px;
            }

            @media (max-width: 1100px) {
               width: 100%;
               text-align: center;
            }
         }
      }

      .text-index-result {
         margin-bottom: 0;
         font-size: 18px;
         font-weight: 500;
         line-height: 23px;
      }

      .courselog-course-category-dropdown,
      .courselog-course-order {
         display: inline-block;
         margin-left: 20px;

         @media (min-width: 1600px) {
            min-width: 16%;
         }

         select {
            font-size: 16px;
            line-height: 26px;
            max-width: 100%;
            height: 50px;
            background: #fff;
            display: inline-block;
            padding: 0 60px 0 30px;
            border-radius: 6px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url('../images/down_arrow.png');
            background-repeat: no-repeat;
            background-position: 95% 20px;
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.02);
            width: 100%;
            border: 0;
         }
      }

      &.archive-course-standard {
         background: #F8F8FC;

         .text-index-result {
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 500;
            line-height: 23px;
         }
      }
   }

   .pagination {
      margin-top: 40px;
   }

   &.archive-course-standard {
      padding-top: 0;
   }

   &.archive-course-solid {
      padding: 0;

      .course-archive-list {
         .filter-item {
            .courselog-course-order {
               select {
                  background: transparent;
                  color: $title-color;
               }
            }
         }
      }

      .course-style2 {
         .single-course {
            .content-area {
               padding: 30px 40px;
            }
         }
      }

      .archive-style-solid {
         background: #F8F8FC;
         padding: 100px 0;
      }
   }

   &.archive-course-advanced {
      .single-course {
         margin-bottom: 0;
         border-radius: 0;
         box-shadow: none;
         border-bottom: 1px solid #E3E3E8;

         .course-thumb {
            margin-left: 30px;
         }
      }

      .course-style3 {
         .row {
            .single-item {
               &:last-child {
                  .single-course {
                     border-color: transparent;
                  }
               }
            }
         }
      }
   }
}


// archive search
.courselog-search-course-form {
   .search-course-input {
      width: 100%;
      border: 1px dashed #dedfe2;
      @include border-radius(6px);
   }

   .search-course-button {
      border: none;
      background-color: $primary-color;
      color: #fff;
      cursor: pointer;
      height: 100% !important;
      right: 0 !important;
      top: 0 !important;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
   }
}

// archive category filter

.archive-widgets {
   border: 1px dashed #dedfe2;
   @include border-radius(6px);
   margin-bottom: 40px;
   padding: 40px;

   .widget-title {
      i {
         float: right;
         font-size: 18px;
      }
   }

   ul {
      padding: 0;
      list-style-type: none;

      li {
         position: relative;

         a {
            font-size: 16px;
            line-height: 26px;
            color: $title-color;
            font-weight: 500;
            padding: 10px 30px;
            display: block;
            @include transition();
            position: relative;
            padding-right: 0;
         }

         &.active,
         &:hover {
            a {
               color: $secondary-color;

               &:after {
                  opacity: 1;
               }
            }
         }

         &:last-child {
            &:before {
               display: none;
            }
         }
      }
   }

   .course-list-widget {
      li {
         a {
            position: relative;

            &:hover {
               background: transparent;
               color: $secondary-color;
            }

            &::before,
            &::after {
               position: absolute;
               content: '';
               width: 18px;
               height: 18px;
               border-radius: 50%;
               background: transparent;
               border: 1px solid $secondary-color;
               bottom: 0;
               top: 0;
               left: 0;
               margin: auto;
               @include transition();
            }

            &::after {
               width: 6px;
               height: 6px;
               background: $secondary-color;
               left: 6px;
               transition: all ease 0.3s;
               opacity: 0;
            }
         }

         // display: none;
         &.display {
            display: block;
         }

         &.active {
            a {
               &::after {
                  opacity: 1;
               }
            }
         }
      }
   }
}

.show-more-list-wrap {
   .show-more-wraper {
      position: relative;
   }

   .gradient_shade_area {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 95px;
      background: #041a57;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 26, 87, 0)), to(white));
      background: -o-linear-gradient(top, rgba(4, 26, 87, 0) 0%, white 100%);
      background: linear-gradient(180deg, rgba(4, 26, 87, 0) 0%, white 100%);
      z-index: 2;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }

   .show-more-list {
      overflow: hidden;
      height: 230px;
      -webkit-transition: all ease 0.4s;
      -o-transition: all ease 0.4s;
      transition: all ease 0.4s;
   }

   .show-more {
      color: $secondary-color;
      font-weight: 600;
      text-transform: capitalize;
      cursor: pointer;

      i {
         margin-left: 10px;
         font-size: 14px;
      }
   }
}


// user dashboard
.user-dashboard {
   padding: 80px 15px;

   #learn-press-profile-nav {
      background: transparent;
      border: 1px dashed #dedfe2;
      padding-top: 0;
      margin-top: 180px;

      &:before {
         background: transparent;
      }

      .learn-press-tabs.tabs {
         list-style-type: none;
         margin: 0;

         li {
            position: relative;

            &:before {
               position: absolute;
               bottom: 0;
               width: 70%;
               height: 1px;
               background-color: #ececec;
               content: "";
               left: 0;
               right: 0;
               margin: auto;
            }

            .avatar {
               width: 100%;
            }

            a {
               font-size: 16px;
               line-height: 26px;
               color: #555;
               letter-spacing: -0.16px;
               padding: 10px 40px;
               display: block;
               @include transition();
               position: relative;

               &:after {
                  right: 0px;
                  content: "\e90a";
                  font-family: "iconfont";
                  font-size: 11px;
                  float: right;
                  opacity: 0;
                  @include transition();
                  color: #fff;
               }
            }

            &.active,
            &:hover {
               >a {
                  background-color: $primary-color;
                  color: #fff;
                  border-color: transparent;

                  &:after {
                     opacity: 1;
                  }
               }

               ul {
                  border: 1px dashed #dedfe2;
                  background: #fff;
               }
            }

            &:last-child {
               &:before {
                  display: none;
               }
            }
         }
      }
   }

   #learn-press-profile-header {
      background: transparent;
      // width: 200px;

      .lp-profile-avatar {
         position: relative;
         bottom: 0;
         left: 0;

         img {
            width: 200px;
            height: 200px;
            @include border-radius(50%);
            background: #c1f3e6;
            margin-bottom: 20px;
            object-fit: cover;
            margin: auto auto 20px;
         }

         .profile-name {
            font-size: 24px;
            position: relative;
            font-weight: 700;
            text-align: center;
            margin: 0 0 40px !important;

         }
      }
   }

   .lp-profile-content {
      .lp-tab-sections {
         background: $secondary-color;
         border-radius: 6px;
         -webkit-border-radius: 6px;
         -ms-border-radius: 6px;
         margin-bottom: 40px;
         padding: 0 20px;

         li {

            a,
            span {
               color: #fff;
               font-size: 17px;
               letter-spacing: -0.17px;
               line-height: 40px;
               display: block;
            }

            &.active {
               span {
                  border-bottom: 4px solid $primary-color;
               }
            }
         }
      }

      .learn-press-subtab-content {
         .lp-sub-menu {
            padding: 0;
            margin-bottom: 25px;
         }
      }

      .avatar {
         width: auto;
      }

      table,
      .lp-list-table {

         td,
         th {
            border: none;
            text-align: left;
            border: 1px dashed #dedfe2;
            font-size: 15px;
            color: #555;

            a {
               color: #555;

               &:hover {
                  color: $primary-color;
               }
            }
         }

         th {
            color: $title-color;
            background: #fff !important;
         }
      }
   }

   // recover
   .order-recover {
      input[type="text"] {
         height: 45px;
         padding: 0 20px;
         border: 1px solid #eaeaea;
         @include border-radius(5px);
      }

      .button-recover-order {
         display: inline-block;
         text-align: center;
         white-space: nowrap;
         vertical-align: middle;
         font-size: 14px;
         line-height: 1.5;
         text-transform: uppercase;
         border-radius: 0px;
         padding: 12px 40px;
         font-weight: 600;
         background: $primary-color;
         color: #fff;
         @include border-radius(5px);
         border: none;
         cursor: pointer;
      }
   }

   .delete-btn {
      padding: 7px 23px;
      font-size: 12px;
      line-height: 20px;
   }

   .form-fields {

      input[type="text"],
      input[type="password"],
      textarea {
         border: 1px solid #eaeaea;
         @include border-radius(6px);
         padding: 10px 25px !important;
      }

      textarea {
         resize: none;
      }

      select {
         max-width: 100%;
         padding: 0 30px;
         height: 40px;
         border: 1px solid #eaeaea;
         border-radius: 6px;
      }
   }

   input.add-btn {
      margin-top: 20px;
   }
}

.archive-skill-title,
.archive-cat-title {
   cursor: pointer;
}

#learn-press-profile .lp-user-profile-socials {
   margin: 0 !important;
}

/*=============================
   Course Single Page
===============================*/

.course-entry-content {

   .header-meta {
      padding: 0;
      margin-bottom: 20px;

      li {
         display: inline-block;
         margin-right: 35px;
         list-style: none;
         font-size: 14px;
         margin-bottom: 15px;

         &:first-child {
            padding-left: 0;
         }

         i {
            margin-right: 6px;
            vertical-align: middle;

            &.tsicon-students {
               font-size: 18px;
            }
         }

         &:last-child {
            margin-right: 0;
         }

         .xs-review-rattting {
            display: inline-block;

            .xs-star {
               &:before {
                  line-height: 22px;
               }
            }
         }
      }
   }

   .feature-image {
      margin-bottom: 40px;

      img {
         max-width: 100%;
      }
   }

   .public-xs-review-box,
   .view-review-list {
      box-shadow: none;
      padding: 0;
      border: none;
   }

   #xs-review-box .write-reivew-headding,
   #xs-review-box .total-reivew-headding,
   .xs-review-overview-list.custom-rat .overview-summary h2 {
      font-weight: 700;
      font-size: 24px;
      line-height: 28px;
   }

   .public-xs-review-box .xs-save-button button {
      box-shadow: none;
      @include border-radius(5px);
      background: $primary-color;
      font-weight: 500;
      transition: all ease 0.4s;

      &:hover {
         background: $secondary-color;
      }
   }

   .view-review-list .xs-reviewer-author-image>img {
      width: 60px;
      height: 60px;
      object-fit: cover;
   }

   .view-review-list .xs-reviewer-author {
      font-size: 20px;
      color: #120f2d;
      font-weight: 700;
   }

   .xs-review-box {
      .xs-review-title {
         font-size: 17px;
         font-weight: 700;
         margin-bottom: 15px;
      }

      .xs-reviewer-details {
         .review-reviwer-info-section {
            padding-left: 20px;
         }
      }
   }

   .course-students-list .students li .user-info a {
      position: relative;
   }

   .course-students-list .students li .user-info img {
      display: inline-block;
   }

   .filter-students {
      text-align: right;
   }

   .students-list-filter {
      border: 1px solid #eaeaea;
      padding: 6px 20px;
      border-radius: 36px;
   }
}

// insturctor tabs
.co-single-instructor {
   padding-bottom: 8px;
   margin-bottom: 35px;
   border-bottom: 1px solid #eaeaea;

   &:last-of-type {
      margin-bottom: 0;
      padding: 0;
      border-bottom: none;
   }

   .co-instructor-head {
      margin-bottom: 25px;
   }

   .co-instructor-thumb {
      margin-right: 30px;
      width: 100px;
      height: 100px;
      @include border-radius(50%);
      overflow: hidden;
      background: #defff6;

      img {
         width: 100%;
      }
   }

   .co-instructor-title {
      margin-bottom: 5px;
      font-size: 24px;

      a {
         color: $title-color;

         &:hover {
            color: $primary-color;
         }
      }
   }

   .co-instructor-designation {
      margin-bottom: 0;
   }

   .co-instructors-socials {
      padding: 0;
      text-align: right;
      list-style-type: none;

      li {
         display: inline-block;
         margin-right: 6px;

         &:last-child {
            margin-right: 0;
         }

         a {
            width: 30px;
            height: 30px;
            @include border-radius(50%);
            display: block;
            border: 1px solid #eaeaea;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: $title-color;

            &:hover {
               background: $primary-color;
               color: #fff;
            }
         }
      }
   }
}


.user-meta-summery-single {
   padding: 0;

   li {
      list-style: none;
      border-right: 1px solid #eaeaea;

      &:last-child {
         border-right: none;
      }

      span {
         font-size: 14px;
      }
   }
}

.banner-course {
   padding: 50px 0;
   background: #f8f8fc;
   position: relative;

   &::before {
      background: url("../images/banner-overlay.png") no-repeat right center/cover;
      position: absolute;
      content: "";
      right: 0;
      top: 0;
      width: 38%;
      height: 100%;
      display: none;

      @media (min-width: 992px) {
         display: block;
      }
   }

   .banner-title {
      font-size: 31px;
      font-weight: 700;
      letter-spacing: -0.62px;
      margin-bottom: 20px;
   }

   .header-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      list-style-type: none;

      li {
         padding: 0 15px;
         margin-bottom: 15px;

         &:not(:last-child) {
            border-right: 1px solid #dadade;
         }

         &:first-child {
            padding-left: 0;
         }
      }

      .course-review {
         .xs-ratting-content {
            display: flex;
            align-items: center;

            .xs-review-rattting {
               line-height: 1;
               margin-right: 5px;
            }
         }
      }
   }

   .course-instructor {
      .course-instructor-thumb {
         margin-right: 10px;

         img {
            width: 36px;
            height: 36px;
         }
      }

      .media-body {
         h3 {
            font-size: 14px;
            margin-bottom: 0;
            text-transform: capitalize;
         }
      }
   }

}

.feature-image {
   position: relative;

   .ts-video-popup {
      width: 70px;
      height: 70px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      background: $white-color;
      color: $primary-color;
      font-size: 20px;
      line-height: 70px;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      transition: all ease 0.5s;
      padding: 2px 30px;

      &:hover {
         width: 60px;
         height: 60px;
         padding: 2px 24px;
         line-height: 60px;
      }
   }

   .thumbnail {
      img {
         @include border-radius(8px);
      }
   }
}

.course-breadcumb {
   .breadcrumb {
      padding: 0;
      background: transparent;
      margin-bottom: 40px;
      align-items: center;

      i {
         font-size: 12px;
      }

      li {
         margin: 0 10px;
         color: #120f2d;
         font-size: 14px;

         a {
            color: #120f2d;
         }

         &:last-child {
            margin-right: 0px;
         }

         &:first-child {
            margin-left: 0px;
         }
      }
   }
}

// single content course css
.course-content-area {
   padding-top: 70px;

   .course-entry-content {
      .content-block {
         margin-bottom: 55px;

         .content-heading {
            .ts-title {
               font-size: 28px;
               color: #120f2d;
               margin-bottom: 30px;
            }
         }

         // overview tabs
         .overview-content {
            margin-bottom: 65px;
         }

         // curriculum tabs
         .curriculum-content {
            border: 1px solid #e3e3e8;
            margin-bottom: -1px;

            .curriculmn-title {
               font-size: 18px;
               font-weight: 400;
               letter-spacing: -0.2px;
               display: block;
               color: #120f2d;
               padding: 22px 30px;
               transition: all 0.5s ease-in-out;
               border-left: 5px solid transparent;

               &:after {
                  content: "\f078";
                  font-family: "Font Awesome 5 Free";
                  font-weight: 900;
                  margin-left: 15px;
                  color: #120f2d;
                  float: right;
                  font-size: 18px;
               }

               &[aria-expanded="true"] {
                  color: #2878eb;
                  background-color: #f8f8fc;
                  border-bottom: 1px solid #e3e3e8;
                  border-left: 5px solid #2878eb;

                  .dark-mode & {
                     border-bottom-color: #2F3540;
                  }

                  &:after {
                     content: "\f077";
                     color: #2878eb;
                  }
               }
            }

            .curricolumn-list {
               padding: 25px 30px;
               margin-bottom: 0;

               li {
                  display: block;
                  width: 100%;
                  position: relative;
                  list-style: none;
                  margin-bottom: 20px;

                  &:last-child {
                     margin-bottom: 0;
                  }

                  a {
                     font-size: 16px;
                     color: #58566b;
                     line-height: 26px;

                     &:hover {
                        color: $primary-color;
                     }

                     i {
                        margin-right: 6px;
                        color: #a09fab;
                     }

                     .curricolumn-preview {
                        background: $primary-color;
                        color: #fff;
                        padding: 2px 5px;
                        @include border-radius(12px);
                        font-size: 12px;
                        margin-left: 10px;
                     }
                  }

                  .curricolumn-duration {
                     float: right;
                     color: $primary-color;
                  }
               }
            }
         }

         // insturctor tabs
         .course-co-instructors {
            background: #f8f8fc;
            padding: 55px 60px 25px;
            border-radius: 8px;

            .co-single-instructor {
               padding-bottom: 8px;
               margin-bottom: 35px;
               border-bottom: 1px solid #eaeaea;

               &:last-of-type {
                  margin-bottom: 0;
                  padding: 0;
                  border-bottom: none;
               }

               .co-instructor-head {
                  margin-bottom: 25px;
               }

               .co-instructor-thumb-and-details {
                  overflow: hidden;
                  display: flex;
                  align-items: center;

                  .co-instructor-thumb {
                     margin-right: 30px;
                     width: 160px;
                     height: 160px;
                     @include border-radius(50%);
                     overflow: hidden;
                     background: #defff6;

                     img {
                        width: 100%;
                     }
                  }
               }

               .co-instructor-title {
                  margin-bottom: 5px;
                  font-size: 25px;
                  text-transform: capitalize;

                  a {
                     color: #120f2d;

                     &:hover {
                        color: #2878eb;
                     }
                  }
               }

               .co-instructor-designation {
                  margin-bottom: 20px;
               }

               .co-instructors-socials {
                  padding: 0;
                  list-style-type: none;
                  text-align: left;
                  display: none;

                  li {
                     display: inline-block;
                     margin-right: 6px;

                     &:last-child {
                        margin-right: 0;
                     }

                     a {
                        width: 30px;
                        height: 30px;
                        @include border-radius(50%);
                        display: block;
                        border: 1px solid #eaeaea;
                        text-align: center;
                        line-height: 30px;
                        font-size: 14px;
                        color: $title-color;

                        &:hover {
                           background: $primary-color;
                           color: #fff;
                        }
                     }
                  }
               }
            }

            .user-meta-summery-single {
               h4 {
                  margin-bottom: 0;
                  line-height: 1;
                  font-size: 21px;
               }
            }
         }
      }
   }
}

// course sidebar
.course-sidebar {
   .course-widget {
      box-shadow: 0px 10px 50px rgba(54, 54, 126, 0.05);
      padding: 40px;
      margin-bottom: 50px;
      @include border-radius(16px);
   }

   .course-single-info {
      @include border-radius(15px);

      .course-preview-video {
         @include transform(translateY(-75px));
         @include border-radius(16px);
         margin-bottom: -40px;
      }
   }

   .course-price-details {
      display: flex;
      padding-bottom: 28px;
      flex-wrap: wrap;
      margin-bottom: 8px;
      justify-content: space-between;

      .course-price {
         display: flex;
         margin-right: 25px;

         del {
            font-size: 22px;
            color: #b8b7c0;
            padding-right: 5px;
         }

         .price {
            font-size: 28px;
            font-weight: 700;
            color: $primary-color;
         }
      }

      .price-offer {
         font-size: 14px;
         color: #58566b;

         i {
            color: $primary-color;
         }
      }
   }

   .course-intro {
      ul {
         padding: 0;

         li {
            list-style: none;
            font-size: 14px;
            line-height: 22px;
            color: #555;
            display: block;
            border-bottom: 1px solid #f2f2f9;
            clear: both;
            overflow: hidden;
            padding: 15px 0;

            span {
               float: right;
            }

            i {
               color: #120f2d;
               margin-right: 6px;
            }

            &:last-child {
               border-bottom: none;
            }
         }
      }
   }

   .meta-block {
      margin-bottom: 50px;

      h4 {
         font-size: 16px;
         font-weight: 700;
         margin-bottom: 20px;
      }
   }

   .social-share {
      ul {
         li {
            margin-right: 10px;

            a {
               background: transparent;
               border: 1px solid #e3e3e8;
               border-radius: 50%;

               &:hover {
                  background: $secondary-color;
               }
            }
         }
      }
   }

   .course-enroll {
      display: flex;
      flex-wrap: wrap;

      .button.lp-button {
         background: $primary-color;
         font-size: 16px;
         color: #ffffff;
         padding: 15px 45px !important;
         border-radius: 5px;
         cursor: pointer;
         box-shadow: 0px 8px 20px rgba(241, 77, 93, 0.15);
         transition: all .5s;
         border: 1px solid $primary-color;
         margin-right: 15px;
         line-height: inherit;

         i {
            padding-left: 8px;
         }

         &:hover {
            border: 1px solid $primary-color;
            background: #ffffff;
            color: $primary-color;
         }
      }

      .wishlist-button {
         height: 60px;
         width: 60px;
         background: #ffffff;
         border: 2px solid #2878EB;
         @include border-radius(100px);
         color: #2878EB;
         font-size: 18px;
         cursor: pointer;
         text-indent: -9999px;
         overflow: hidden;
         position: relative;

         &::after {
            content: "\e829";
            font-family: 'iconfont';
            width: 50px;
            height: 50px;
            position: absolute;
            text-indent: 1px;
            left: 0;
            top: 5px;
            right: 0;
            margin: auto;
            line-height: 50px;
         }

         &.on {
            background-color: $secondary-color;
            color: #fff;

            &:after {
               content: "\f02e";
               font-family: "fontawesome";
            }
         }
      }
   }

   //sidebar for advance style
   &.archive-sidebar-course-advance,
   &.archive-sidebar-course-solid {
      border: 20px solid #F8F8FC;

      .archive-widgets {
         border: 0;
         padding: 0;
         margin: 25px 30px;
         border-bottom: 1px solid #DADADE;
         border-radius: 0;
         margin-bottom: 35px;
         padding-bottom: 30px;

         &:last-child {
            border-color: transparent;
            margin-bottom: 0;
         }
      }
   }

   &.archive-sidebar-course-solid {
      border: 0;
   }
}

/*=============================
   instuctor single page
===============================*/

.courselog-instructor-profile {
   width: 255px;
   height: 255px;
   @include border-radius(50%);
   background: $primary-color;
   overflow: hidden;
   margin-bottom: 30px;

   img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &.avatar-default {
         height: 100%;
      }
   }
}

.instructor-sidebar {
   .instructor-title {
      margin-bottom: 10px;
   }

   .instructor-designation {
      font-size: 14px;
      margin-bottom: 10px;
   }

   .instructor-follow {
      padding: 0;
      margin-bottom: 25px;

      li {
         display: inline-block;
         font-size: 14px;
         list-style-type: none;
         letter-spacing: -0.14px;
         margin: 0 10px;

         i {
            margin-right: 6px;
            font-size: 18px;
            vertical-align: middle;
         }
      }
   }

   .btn.ts-follow-instructor {
      color: #fff;
      display: inline-block;
      margin-bottom: 30px;
      padding: 12px 24px 10px 18px;

      i {
         margin-right: 5px;
      }

      &:hover {
         color: #fff;
      }
   }
}

.instructor-profile-header {
   align-items: center;
   border-right: 1px solid #E3E3E8;
   margin-bottom: 53px;

   .ts-instructor-info {
      margin-bottom: 20px;

      &-wrap {
         padding-right: 30px;
      }

      .ts-title {
         margin-bottom: 0px;
         font-size: 31px;
         font-weight: 700;
         color: #120F2D;
         line-height: 38px;
         text-transform: capitalize;
      }

      .instructor-designation {
         color: #58566B;
         font-weight: 400;
         font-size: 16px;
         margin-bottom: 0;
      }
   }
}

.ts-instructor-profile-info {
   padding-left: 30px;

   .instructor-follow {
      padding: 0;
      margin-bottom: 28px;

      li {
         display: inline-block;
         font-size: 16px;
         color: #58566B;
         margin-right: 15px;

         i {
            vertical-align: middle;
            margin-right: 5px;
         }

         &:last-child {
            margin-right: 0;
         }
      }
   }

   .ts-follow-instructor {
      &.btn {
         background: #ffffff;
         border: 2px solid #2878EB;
         color: #2878EB;
         font-size: 16px;
         padding: 10px 30px;

         &:hover {
            background: $primary-color;
            color: #ffffff;
            border-color: $primary-color;
         }
      }
   }
}

.user-meta-summery {
   padding: 40px;
   background: #2878EB;
   list-style: none;
   margin: 0px 0 40px;
   border-radius: 15px;
   position: relative;

   &::after {
      position: absolute;
      content: url(../images/instructor-shape.png);
      right: -45px;
      bottom: -15px;
      background: no-repeat center center/cover;
      height: 100%;
   }

   &::before {
      position: absolute;
      content: url(../images/dot-shape.png);
      left: -60px;
      bottom: 15px;
      background: no-repeat center center/cover;
   }

   li {
      padding: 0px 0 0 85px;
      position: relative;
      border-right: 1px solid #3E86ED;

      &:last-child {
         border-right: 1px solid transparent;
      }

      h4 {
         font-size: 36px;
         margin-bottom: 20px;
         position: relative;
         color: #ffffff;
      }

      span {
         position: relative;
         color: #ffffff;
         font-size: 20px;
      }
   }
}

.insturctor-course-list {
   .ts-title {
      margin-bottom: 25px;
   }
}

@media (min-width: 1025px) {
   .course-sidebar {
      &.fixed {
         position: fixed;
         top: 65px;
         max-width: 350px;
      }
   }
}

/*=============================
  Lession page
===============================*/

#learn-press-content-item {
   #course-item-content-header {
      background: $secondary-color;

      .course-item-search {
         input {
            color: #fff;

            &::placeholder {
               color: #fff;
            }
         }

         button {
            color: #fff;
         }
      }

      .course-title {
         padding: 0 15px 0 30px;

         a {
            color: #fff;
         }
      }

      .toggle-content-item {
         background: $primary-color;
         color: #fff;
         border-left: none;
         width: 80px;
      }

      .lp-button {
         background: transparent;
         color: #fff;
         border: 1px solid #45587d;
         padding: 0 35px;
         border-radius: 5px;
         cursor: pointer;
         @include transition();

         &:hover {
            background: $primary-color;
         }
      }
   }
}

#learn-press-course-curriculum {
   &.course-curriculum ul.curriculum-sections {
      padding: 20px 0 20px 20px;

      .section {
         &:first-child {
            .section-header {
               border-top-right-radius: 10px;
               border-top-left-radius: 10px;
            }
         }
      }

      .section-header {
         background: #eff3f6;
         border-bottom: none;

         .section-title {
            font-size: 20px;
            font-weight: 700;
            padding: 20px 0;
            position: relative;

            &:after {
               content: "\f107";
               font-family: "Font Awesome 5 Free";
               font-weight: 900;
               float: right;
            }
         }
      }

      .section-content {
         margin-bottom: 0;

         .course-item {
            border: 1px solid #eaeaea;
            border-top: none;
            font-size: 16px;

            .course-item-meta {

               span,
               i {
                  font-size: 10px;
                  border-radius: 36px;
               }

               span {
                  background: $primary-color;
               }
            }

            .section-item-link {
               color: #555;

               &:hover {
                  color: $primary-color;
               }
            }

            &.current {
               &:before {
                  background: $primary-color;
               }

               background: $primary-color;

               .section-item-link {
                  color: #fff;
               }

               .course-item-status {
                  color: $white-color;
               }
            }
         }

         .course-item.item-preview .course-item-status {
            background: $secondary-color;

            &:before {
               font-size: 10px;
            }
         }
      }
   }
}

.scrollbar-light>.scroll-element.scroll-y .scroll-bar {
   background: #273c66 !important;
}

body.course-item-popup #learn-press-course-curriculum {
   border-right-color: transparent !important;
}

/* ============================================
//   Shortcode: Pricing Table / Elementskit 
============================================= */

.ts-price {
   transition: all ease 0.4s;

   .ekit-wid-con .elementskit-pricing-header {
      background: #ecf0f4;
   }

   .elementskit-pricing-price-wraper {
      position: relative;

      &::after {
         position: absolute;
         content: "";
         width: 70px;
         height: 3px;
         background: #0eb582;
         left: 0;
         right: 0;
         margin: auto;
         bottom: 0;
      }
   }

   .elementskit-pricing-content {
      position: relative;
      z-index: 9;
      background: #fff;
      border-radius: 10px;

      .elementskit-pricing-lists>li>i {
         font-size: 16px !important;
      }
   }

   .elementskit-pricing-btn-wraper .elementskit-pricing-btn {
      opacity: 1;
      display: block !important;
      transition: all ease 0.5s;
   }

   &.ts-featured .elementskit-pricing-btn-wraper .elementskit-pricing-btn,
   &:hover .elementskit-pricing-btn-wraper .elementskit-pricing-btn {
      display: block;
   }

   &.ts-featured {
      margin-bottom: 0px;
   }

   .ekit-wid-con .elementskit-single-pricing {
      position: static;
   }

   .elementor-widget {
      position: static;
   }

   .elementskit-pricing-btn-wraper {
      position: absolute;
      bottom: -55px;
      width: 100%;
      z-index: 1;
      opacity: 0;
      transition: all ease 0.5s;
      visibility: hidden;
   }

   .featured-price {
      .elementskit-pricing-btn-wraper {
         opacity: 1;
         visibility: visible;
      }
   }

   .elementskit-pricing-content {
      min-height: 275px;
   }

   .elementor-widget-container:hover {
      .elementskit-pricing-btn-wraper {
         opacity: 1;
         visibility: visible;
      }
   }
}

@media (min-width: 1600px) {
   .ts-price {
      .elementskit-pricing-content {
         min-height: 317px;
      }
   }
}

@media (max-width: 767px) {
   .ts-price .elementskit-pricing-btn-wraper .elementskit-pricing-btn {
      display: block;
   }
}

/*=============================
   checkout
===============================*/

.learn-press-checkout {
   .checkout-review-order {
      h4 {
         margin-bottom: 35px;
      }

      .lp-list-table {
         border: 1px solid #eaeaea;
         border-radius: 5px;
         margin-bottom: 55px;

         thead tr th {
            background: $primary-color;
         }

         tr {
            border-bottom: 1px solid #eaeaea;

            &:last-child {
               border-bottom-left-radius: 5px;
               border-bottom-right-radius: 5px;
            }
         }
      }
   }

   .learn-press-checkout-comment {
      h4 {
         margin-bottom: 35px;
      }

      .order-comments {
         padding: 15px;
         border: 1px solid #eaeaea;
         resize: none;
         border-radius: 5px;
      }
   }

   .place-order-action .lp-button {
      padding: 0 30px !important;
      margin-bottom: 15px;
      cursor: pointer;
   }
}

.learn-press-form .form-fields .form-field input[type="text"],
.learn-press-form .form-fields .form-field input[type="email"],
.learn-press-form .form-fields .form-field input[type="number"],
.learn-press-form .form-fields .form-field input[type="password"],
input[type="email"],
.learn-press-form .form-fields .form-field textarea {
   border: 1px solid #eaeaea;
   @include border-radius(6px);
   font-size: 14px;
   background: #fff;
}


// footer

.footer-widget {
   margin-bottom: 40px;

   .widget-title {
      font-size: 18px;
      line-height: 26px;
      color: #fff;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -0.18px;
   }

   ul {
      padding: 0;

      li {
         font-size: 16px;
         line-height: 36px;
         letter-spacing: -0.16px;
         color: #a5b7d9;
         display: block;
         list-style: none;
         padding-left: 20px;
         position: relative;

         &:before {
            position: absolute;
            left: 0;
            top: 15px;
            width: 6px;
            height: 2px;
            background: #384f7d;
            content: "";
         }

         a {
            color: #a5b7d9;

            &:hover {
               color: $primary-color;
            }
         }
      }
   }
}

.ts-footer {
   background: #273c66;

   .footer-bar {
      width: 100%;
      height: 1px;
      background: #2d436f;
   }

   .copyright {
      padding: 30px 0;
   }

   .footer-menu {
      padding: 0;
      margin: 0;
      text-align: right;

      li {
         display: inline-block;
         list-style-type: none;

         a {
            font-size: 16px;
            line-height: 36px;
            color: #fff;

            &:hover {
               color: $primary-color;
            }
         }
      }
   }

   .footer-logo {
      img {
         max-width: 125px;

         @media (min-width: 992px) {
            margin-top: -10px;
         }
      }
   }

   .copyright-text {
      margin-bottom: 0;
      color: #fff;
   }
}


// Shortcode: Backto Top

.BackTo {
   background: $primary-color none repeat scroll 0 0;
   border-radius: 50%;
   bottom: 75px;
   color: #979797;
   cursor: pointer;
   height: 44px;
   position: fixed;
   right: 14px;
   text-align: center;
   width: 44px;
   z-index: 9;
   display: block;
   padding: 8px 0;

   a {
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      margin-top: 2px;
   }
}


.ts-scroll-box {
   position: relative;

   .BackTo {
      position: absolute;
      right: 0;
      bottom: 0;
      transition: all ease 0.4s;

      a {
         color: inherit;
      }
   }
}


/* ============================
// Error page
=============================== */

.error-page {
   .error-code {
      h2 {
         display: block;
         font-size: 200px;
         line-height: 200px;
         color: #303030;
         margin-bottom: 20px;

         @media (max-width: 767px) {
            font-size: 150px;
         }
      }
   }

   .error-body .btn {
      margin-top: 30px;
      font-weight: 700;
   }
}

/* ============================
// Preloader
=============================== */

#preloader {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 99999999999999;
   overflow: hidden;
   background: $primary-color;
   -webkit-transition: all 1.5s ease-out;
   -o-transition: all 1.5s ease-out;
   transition: all 1.5s ease-out;

   &.loaded {
      top: -200%;

      .preloader-cancel-btn-wraper {
         bottom: 200%;
      }
   }
}

.preloader-cancel-btn-wraper {
   position: fixed;
   bottom: 0;
   right: 0;
   padding: 30px;
   transition: all 1.5s ease-out;

   .preloader-cancel-btn {
      border-radius: 36px;
      font-size: 11px;
      background: #000;
      color: #fff;
   }
}

.spinner {
   width: 40px;
   height: 40px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.double-bounce1 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: #ffffff;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-animation: sk-bounce 2s infinite ease-in-out;
   animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: #ffffff;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-animation: sk-bounce 2s infinite ease-in-out;
   animation: sk-bounce 2s infinite ease-in-out;
   -webkit-animation-delay: -1s;
   animation-delay: -1s;
}

.preloader-logo {
   max-width: 250px;
   width: 180px;
   height: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

@-webkit-keyframes sk-bounce {

   0%,
   100% {
      transform: scale(0);
      -webkit-transform: scale(0);
   }

   50% {
      transform: scale(1);
      -webkit-transform: scale(1);
   }
}

@keyframes sk-bounce {

   0%,
   100% {
      transform: scale(0);
      -webkit-transform: scale(0);
   }

   50% {
      transform: scale(1);
      -webkit-transform: scale(1);
   }
}


// Customizer css

.ts-scroll-box {
   .BackTo {
      a {
         font-size: 16px;
      }
   }
}



.cl-main-header {
   box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.03);
}

.ts-cat-menu {
   .sub-menu {
      position: absolute;
      left: 28px;
      top: 30px;
      list-style: none;
      background: #fff;
      min-width: 150px;
      padding: 0;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
      border: none;
      transition: transform 0.4s ease, -webkit-transform 0.4s ease;
      margin: 0;
      z-index: 11;
      transform: translateY(20px);
      display: block;
      border-radius: 6px;
      opacity: 0;
      visibility: hidden;
   }

   .menu {
      li {
         .sub-menu {
            li {
               a {
                  border-bottom: 0px solid #2878eb;

                  &:after {
                     display: none;
                  }
               }
            }
         }
      }

      .sub-menu {
         li {
            border-style: solid;
            border-width: 0px 0px 1px 0px;
            border-color: #f0f0f0;
            background-color: #ffffff;
            border-radius: 0px;
            padding: 15px 30px 15px 15px;
         }
      }

      .menu-item {
         &:hover {
            .sub-menu {
               transform: translateY(5px);
               opacity: 1;
               visibility: visible;
            }
         }
      }
   }
}


@media (max-width: 1600px) {
   .ekit-section-parallax-layer {
      display: none;
   }
}

.section-related-course {
   padding-bottom: 80px;
}

.products {
   float: left;
   width: 100%;
}

.woocommerce-pagination {
   float: left;
   width: 100%;
}

.woocommerce {
   div {
      &.product {
         .single-course {
            border: 1px solid #f5f5f5;

            .course-thumb {
               .course-price-item {
                  .course-price {
                     border-radius: 5px;
                     min-height: 42px;
                     padding: 0 15px;
                     bottom: -20px;
                     line-height: 42px;
                     background: $secondary-color;
                  }
               }
            }

            .content-area {
               .course-footer {
                  border: none;
                  padding-top: 0;

                  .lessons {
                     float: left;
                  }

                  .lession-and-rating {
                     float: left;
                     width: 100%;
                  }

                  .xs-ratting-content {
                     float: right;
                     padding-top: 10px;
                  }

                  .star-rating {
                     display: inline-block;
                     margin-bottom: 0;
                  }

                  a {
                     &.button {
                        background: none;
                        border: 2px solid rgba(241, 77, 93, 0.2);
                        color: $primary-color;
                     }

                     &.added_to_cart {
                        &.wc-forward {
                           position: absolute;
                           left: 0;
                           border-radius: 5px;
                           font-weight: 700;
                           background: $primary-color;
                           font-size: 14px;
                           color: #fff;
                           text-transform: uppercase;
                           padding: 10px 37px 10px;
                        }
                     }

                     &.ajax_add_to_cart {
                        &.loading {
                           &:after {
                              top: 15px;
                           }
                        }
                     }
                  }
               }
            }

            &:hover {
               .content-area {
                  .course-footer {
                     a {
                        &.button {
                           background: $primary-color;
                           border: 2px solid $primary-color;
                           color: #fff;
                        }
                     }
                  }
               }

            }

            &.style2 {
               border: 0;
               box-shadow: 0px 8px 15px rgba(19, 14, 57, 0.04);

               .content-area {
                  .course-footer {
                     border-top: 1px solid #e3e3e8;
                     padding-top: 25px;

                     .xs-ratting-content {
                        padding-top: 0;

                        span {
                           font-weight: 600;

                           i {
                              color: #FCB040;
                           }
                        }

                        &.star-0 {
                           span {
                              i {
                                 color: #bbb;
                              }
                           }
                        }
                     }

                     .course-price-item {
                        float: right;

                        .product-price {
                           del {
                              .woocommerce-Price-amount {
                                 font-size: 16px;
                                 font-weight: 600;
                                 line-height: 28px;
                                 color: #9F9EAC;
                                 margin-right: 10px;
                              }
                           }

                           .woocommerce-Price-amount {
                              font-size: 23px;
                              font-weight: 700;
                              line-height: 28px;
                              color: $primary-color;
                           }
                        }
                     }
                  }

                  .single-course-wrap {
                     .content-area {
                        padding-top: 30px;

                        .product-cat {
                           i {
                              margin-right: 5px;
                              color: #FCB040;
                           }

                           a {
                              font-size: 14px;
                              font-weight: 600;
                              color: #706F81;
                              padding: 0 5px;
                           }
                        }

                        .ts-course-el-title {
                           margin: 10px 0px 30px 0px;
                        }
                     }
                  }
               }

               &:hover {
                  .content-area {
                     .course-footer {
                        a {
                           &.button {
                              background: $primary-color;
                              border: 2px solid $primary-color;
                              color: #fff;
                           }
                        }
                     }
                  }

               }
            }
         }
      }

      .product-category {
         border: 1px solid #f5f5f5;
         margin-bottom: 30px;
         border-radius: 5px;
         @include transition();

         img {
            margin-bottom: 15px;
         }

         .woocommerce-loop-category__title {
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
            text-align: center;
            padding: 0 10px;
         }

         &:hover {
            box-shadow: 0px 8px 15px rgba(19, 14, 57, 0.04);
         }
      }
   }
}

.single-product {
   div {
      &.product {
         .product-single-description {
            padding-left: 30px;
         }

         .product_title {
            font-size: 30px;
            line-height: 40px;
         }

         .woocommerce-product-rating {
            display: none;
         }

         p.price {
            color: $primary-color;
            font-weight: 900;
            font-size: 24px;
            line-height: 28px;
            margin-bottom: 25px;

            ins {
               text-decoration: none;
            }
         }

         .product-meta-list {
            padding: 0;
            margin: 0 0 10px 0;

            li {
               display: inline-block;

               a {
                  color: #17212E;
                  padding-right: 10px;
               }
            }
         }

         .woocommerce-product-details__short-description {
            p {
               margin-bottom: 20px;
            }
         }

         .xs_social_share_widget {
            &.xs_share_url {
               &.wslu-share-horizontal {
                  display: inline-block;
               }
            }
         }

         .product-meta-list,
         .meta-block.social-share {
            margin-bottom: 10px;

            span {
               &.label-span {
                  min-width: 100px;
                  font-weight: 600;
                  display: inline-block;
                  color: #17212E;
               }
            }
         }

         form.cart {
            margin-top: 20px;

            .button {
               padding: 17px 35px;
               text-transform: inherit;
               font-weight: 700;
               letter-spacing: 0.3px;
               font-size: 16px;
            }

            .quantity {
               margin-right: 25px;
               position: relative;
               margin-right: 50px !important;

               .qty {
                  width: 82px;
                  height: 50px;
                  border-radius: 4px;
                  border: 1px solid #CFCFCF;
                  margin-right: 0px;
               }

               .qty_button {
                  position: absolute;
                  right: -25px;
                  padding: 0px 3px 0px 3px;
                  height: 24px;
                  min-width: 20px;
                  border: 1px solid #CFCFCF;
                  border-radius: 3px;

                  &.minus {
                     bottom: 0;
                  }

                  &.plus {
                     top: 0;
                  }
               }
            }
         }

         .xs_social_share_widget.xs_share_url {
            ul {
               li {
                  >a {
                     background: none;
                     box-shadow: none;

                     .xs-social-icon {
                        padding: 6px 20px 6px 0;

                        span {
                           color: #17212E;
                        }
                     }
                  }
               }
            }
         }

         .woocommerce-tabs {
            ul.tabs {
               &:before {
                  border: none;
               }

               li {
                  border: 1px solid #CFCFCF;
                  margin: 0 20px 0 0;
                  padding: 0;
                  border-radius: 4px;

                  &.active,
                  &:hover {
                     border-color: $primary-color;

                     a {
                        background: $primary-color;
                        color: #fff;

                        &:hover {
                           background: $primary-color;
                           color: #fff;
                        }
                     }
                  }

                  a {
                     padding: 20px 35px;
                     border-radius: 4px;

                     &:hover {
                        background: $primary-color;
                        color: #fff;
                     }
                  }
               }
            }
         }
      }
   }
}

.related.products {
   h2 {
      font-size: 39px;
      margin-bottom: 30px;
   }
}

.woocommerce-tabs {
   width: 100%;
   margin-top: 70px;

   h2 {
      font-size: 28px;
   }

   .panel {
      margin-bottom: 70px !important;

      table.shop_attributes {
         border: none;
         margin: 0;

         th,
         td {
            text-align: left;
            border: none;
            padding: 10px 0;
            font-style: normal;
         }

         th {
            color: #17212E;
         }

         tr {
            border: none;

            &:nth-child(even) {

               td,
               th {
                  background: none;
               }
            }
         }
      }
   }
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
   width: 100%;
}

.woocommerce div.product div.images .flex-control-thumbs li {
   width: 33.33%;
   margin-bottom: 30px;
}

.woocommerce div.product div.images .flex-control-thumbs {
   margin-left: -15px;
   margin-right: -15px;
}

.woocommerce .woocommerce-Reviews #review_form #respond .form-submit input {
   border-radius: 4px;
}

.single-product {
   .elementor-lightbox {
      display: none !important;
   }
}

// Mixin scss



.elementor-widget-elementskit-blog-posts {
   .meta-date {
      i {
         vertical-align: middle;
         color: #3478F6;
      }
   }

   &.post-cat {
      i {
         vertical-align: middle;
         color: #0ACC86;
      }
   }

   .btn-wraper {
      a {
         position: relative;

         i {
            margin-right: 5px;
            vertical-align: middle;
         }

         &:after {
            position: absolute;
            content: "";
            right: 0px;
            border-bottom: 2px solid #333333;
            width: 80%;
            bottom: -3px;
            transition: all ease .4s;
         }
      }

      &:hover {
         a {
            &:after {
               opacity: 0;
               visibility: hidden;
            }
         }
      }
   }
}

.ts-scroll-box {
   .BackTo {
      a {
         font-size: 16px;
      }
   }
}

.cl-main-header {
   box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.03);
}

.ts-cat-menu {
   .menu {
      li {
         .sub-menu {
            position: absolute;
            left: 28px;
            top: 30px;
            list-style: none;
            background: #fff;
            min-width: 150px;
            padding: 0;
            -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
            box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
            border: none;
            transition: transform .4s ease, -webkit-transform .4s ease;
            margin: 0;
            z-index: 11;
            transform: translateY(20px);
            display: block;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -ms-border-radius: 6px;
            opacity: 0;
            visibility: hidden;

            li {
               border-style: solid;
               border-width: 0px 0px 1px 0px;
               border-color: #F0F0F0;
               background-color: #FFFFFF;
               border-radius: 0px;
               padding: 15px 30px 15px 15px;

               a {
                  border-bottom: 0px solid #2878EB;

                  &:after {
                     display: none;
                  }
               }
            }
         }
      }

      .menu-item {
         &:hover {
            .sub-menu {
               transform: translateY(5px);
               opacity: 1;
               visibility: visible;
            }
         }
      }
   }
}


@media (max-width: 992px) {
   .elementor-widget-turitor-userlogin {
      display: block !important;
   }
}

@media(max-width:1600px) {
   .ekit-section-parallax-layer {
      display: none;
   }
}

@media (max-width:768px) {
   .elementskit-navbar-nav-default {
      .elementskit-dropdown-has {
         >a {
            .elementskit-submenu-indicator {
               margin-left: auto !important;
               border-color: transparent;
            }
         }
      }
   }
}

@media (max-width:1550px) {
   .woo--parallax-shape {
      display: none;
   }
}

.single-course-wrap {
   .meta-list {
      a {
         margin-right: 5px;
      }
   }
}

.woocommerce {
   &div {
      &.product {
         .single-course {
            .course-thumb {
               .course-price-item {
                  .course-price {
                     .woocommerce-Price-amount {
                        padding-right: 8px;
                     }

                     del {
                        .woocommerce-Price-amount {
                           color: rgba(255, 255, 255, .80);
                           font-weight: 500;
                        }
                     }
                  }
               }
            }
         }
      }
   }
}

// Course tab style 2

.ts-mix-tab-course {
   &.woocommerce {
      .product {
         .single-course {
            &.style2 {
               .single-course-wrap {
                  .content-area {
                     padding-top: 30px;

                     .product-cat {
                        i {
                           margin-right: 5px;
                           color: $primary-color;
                        }

                        a {
                           font-size: 14px;
                           font-weight: 600;
                           color: #706F81;
                           padding: 0 5px;
                        }
                     }

                     .ts-course-el-title {
                        margin: 10px 0px 30px 0px;
                     }
                  }
               }
            }
         }
      }
   }
}

// Woo Course Category
.product-category-slider {
   .slider-item {
      .single-course-category {
         display: inline-flex;
         padding: 30px;
         border-radius: 8px;
         margin-bottom: 30px;
         background: var(--cat-color);
         box-shadow: 0px 15px 30px rgba(var(--cat-color), 0.25);

         .course-media {
            position: relative;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 86px;
            height: 86px;
            background: rgba(255, 255, 255, 0.15);
            padding: 25px;
            border-radius: 50%;
            margin-right: 20px;
         }

         .course-content {
            position: relative;
            top: 0;
            bottom: 0;
            margin: auto;

            .course-category-title {
               margin-bottom: 0;

               a {
                  font-size: 20px;
                  font-weight: 700;
                  line-height: 33px;
                  color: #fff;
                  margin: 0;
               }
            }

            .course-count {
               font-size: 15px;
               line-height: 26px;
               color: #fff;
               margin-bottom: 5px;
            }
         }
      }
   }

   .owl-nav {
      position: absolute;
      top: -80px;
      right: 0;

      .owl-prev {
         left: -110px;
      }

      .owl-next {
         right: 0;
      }

      .owl-next,
      .owl-prev {
         background: #E8E8EC;

         &:hover {
            background: $secondary-color;
            color: #fff;
            border-color: $secondary-color;
         }
      }
   }
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
   width: 150px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
   padding: 8px 20px !important;
   border-radius: 5px;
   margin-right: -30px;
}

// Woo commerce quantity button

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
   display: none;
   margin: 0;
}

.quantity {
   position: relative;
   text-align: left;

   input.qty {
      appearance: textfield;
      -webkit-appearance: none;
      -moz-appearance: textfield;
   }

   .qty_button {
      position: absolute;
      right: 0;
      opacity: 1;
      visibility: visible;
      cursor: pointer;
      background: transparent;
      transition: all ease .5s;

      &.minus {
         bottom: 0;
      }
   }
}

.woocommerce {
   td {
      &.product-quantity {
         min-width: 160px;
      }
   }

   .quantity {
      .qty {
         border-radius: 5px;
         border: 1px solid #CFCFCF;
         width: 100px;
      }

      .qty_button {
         border: 1px solid #CFCFCF;
         border-radius: 3px;
         height: 20px;
         padding: 0px;
         width: 20px;
         line-height: 20px;

         &:hover {
            background: $primary-color;
            border: 1px solid transparent;
            color: #fff;
         }
      }
   }
}



/*==================================
// Event Sinlge 
================================== */

.single-etn {
   .etn-es-events-page-container {
      padding-top: 0;
   }

   .etn-attendee-widget-holder {
      padding-bottom: 50px;
   }

   .etn-event-attendee-single {
      box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.04);
      padding: 25px;
      border-radius: 6px;
      text-align: center;
      margin-bottom: 20px;

      .etn-attendee-avatar-wrap {
         max-width: 110px;
         margin: 0 auto 20px;

         img {
            border-radius: 50%;
         }
      }

      .etn-attendee-title {
         font-size: 16px;
         color: $title-color;
         margin-bottom: 0;
         text-transform: capitalize;
      }

      .attende-meta {
         font-size: 14px;
         margin-bottom: 0;
      }
   }
}


.courselog-archive-events {
   .course-archive-list.style2 {
      .filter-item {
         align-items: center;
         margin-bottom: 30px;

         p {
            margin: 0;
            color: #120F2D;
            font-weight: 500;
            text-align: left;
         }
      }

      .courselog-course-order {
         select {
            border: 1px solid #DADADE;
            border-radius: 4px;
            font-weight: 500;
            padding: 8px 20px;
            margin-left: 15px;
            color: #2878EB;
            font-weight: 700;
         }
      }
   }

   .archive-widgets {
      border-width: 0 0 1px 0;
      border-bottom: 1px solid #e3e3e8;
      padding: 0 0 40px 0;
      border-radius: 0;
      position: relative;

      .courselog-search-course-form {
         position: relative;
      }

      .search-event-input {
         width: 100%;
         padding: 11px 50px 11px 20px;
         border: none;
         border-radius: 5px;
         background: #F5F5F6;
      }

      .search-event-button {
         background: transparent;
         padding: 10px 20px;
         border: none;
         color: $secondary-color;
         text-indent: 0;
         position: absolute;
         cursor: pointer;
         right: 0;
         top: 0;
      }
   }

   .etn-event-thumb {
      @media (max-width: 768px) {
         margin-bottom: 30px;
      }

      span {
         position: absolute;
         top: 10px;
         left: 10px;
         background: #2878EB;
         border-radius: 4px;
         color: #fff;
         font-size: 12px;
         line-height: 16px;
         padding: 5px 8px;
         letter-spacing: 0.2px;

         i {
            margin-right: 5px;
         }
      }
   }

   .single-course {
      margin-bottom: 40px;

      .content-area {
         .event-readmore {
            a {
               width: 40px;
               height: 40px;
               line-height: 40px;
               text-align: center;
               color: #fff;
               background: $secondary-color;
               border-radius: 50%;
               display: inline-block;
               font-size: 12px;
            }
         }
      }

      &:hover {
         box-shadow: none;
      }
   }
}

.etn-event-single-wrap {
   padding-top: 80px;
}

/*==================================
   countdown style
================================== */

.etn-event-countdown-wrap {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   margin-top: 55px;

   .etn-count-item {
      font-size: 26px;
      line-height: 25px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 18px 0;
      margin: 0px 10px;
      background-image: url(../images/countdown_shape1.png);
      background-repeat: no-repeat;
      background-size: cover;
      height: 80px;
      width: 80px;
      text-align: center;

      &.etn-hours {
         background-image: url(../images/countdown_shape2.png);
      }

      &.etn-minutes {
         background-image: url(../images/countdown_shape3.png);
      }

      &.etn-seconds {
         background-image: url(../images/countdown_shape4.png);
      }

      @media (max-width: 767px) {
         margin-bottom: 15px;
      }

      .text {
         display: block;
         font-size: 13px;
         font-weight: 400;
         line-height: 17px;
      }
   }

   .date-seperate {
      font-size: 36px;
      font-weight: 700;
   }
}

.sinlge-event-registration {
   padding: 50px 0;
   background: $secondary-color;

   .etn-variable-total-price {
      display: none;

      .etn-sidebar & {
         display: block;
      }
   }

   .etn-widget {

      text-align: center;

      .etn-title {
         font-size: 26px;
         color: $white-color;
      }

      .etn-single-ticket-item {
         background-color: transparent;

         .ticket-header,
         .etn-ticket-divider {
            display: none;
         }

         .ticket-price-item {
            color: $white-color;

            input,
            .qt-btn {
               background-color: transparent;
               color: $white-color;
            }

            input {
               border: 1px solid rgba($white-color, 0.1);
            }
         }
      }

      .etn-event-form-parent {

         label,
         .etn-total-price {
            font-size: 15px;
            font-weight: 400;
            text-transform: capitalize;
            color: rgba($white-color, 0.8);
         }

         .etn-form-ticket-text {
            color: $white-color
         }

         .etn-total-price {
            margin-bottom: 6px;
         }

         .attr-form-control {
            background: transparent;
            color: $white-color;
            border: 1px solid rgba($white-color, 0.1);
            line-height: 52px;
            height: 52px;
            padding-left: 15px;
            padding-right: 0;
            outline: none;
            -moz-appearance: textfield;

            &::placeholder {
               color: $white-color;
            }
         }

         .etn-btn {
            background: #FFA217;
            padding: 8px 30px;

            &:hover {
               background: $primary-color;
            }
         }
      }

      .etn-zoom-event-notice {
         color: $white-color;
      }
   }
}


@media (min-width: 1024px) {
   .sinlge-event-registration {
      .etn-widget {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         justify-content: center;

         .etn-title {
            margin-right: 30px;
            margin-bottom: 0;
         }

         .etn-event-form-parent {
            display: flex;
            align-items: center;
            width: 50%;

            .etn-add-to-cart-block {
               width: auto;
            }

            .variations_0 {
               width: 100%;

               .variation_0 {
                  padding-right: 50px;
               }
            }
         }

         .etn-single-ticket-item {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
         }
      }
   }
}

/************* Kindergarten team css ************/
.kindergarten-team {
   .single-team-item {
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.06);
      transition: all .5s;
      border-radius: 7px;

      .team-footer {
         text-align: center;
         padding: 7px 0 21px 0;
         position: relative;
         border-radius: 7px;
         margin-top: 0px !important;
         background: $white-color;

         &::before {
            content: '';
            position: absolute;
            left: 0;
            top: -35px;
            background: url(../images/teacher_bg_1.png);
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-size: contain;
         }

         h4 {
            position: relative;
            z-index: 9;
         }

         p {
            margin-bottom: 0;
         }
      }
   }
}

#learn-press-checkout {
   padding: 60px 0;
}

// edit with elementor 
.ab-item {
   display: flex !important;
   align-items: center;
}

.learnpress-page {

   .lp-button.search-course-button,
   #lp-button.search-course-button {
      border: none;
      padding: 0;
   }
}

.dialog-type-lightbox {
   .dialog-widget-content {
      width: 100% !important;
   }
}

.course-extra-box {
   border-radius: 0 !important;

   .course-extra-box__title {
      color: $secondary-color;
      background-color: #fff;
      border-left: 5px solid #fff;

   }

   &.active {
      .course-extra-box__title {
         background-color: #f8f8fc;
         border-left: 5px solid $secondary-color;
      }
   }

   .course-extra-box__content {
      li {
         &:before {
            color: $title-color;
         }
      }
   }
}

.course-faqs-box__title {
   color: $secondary-color;
}

// Animation

.courses-tabs {
   .tab-pane {
      &.active {
         animation: fadeIn 3s;
         -webkit-animation: fadeIn 3s;
         -moz-animation: fadeIn 3s;
         -o-animation: fadeIn 3s;
         -ms-animation: fadeIn 3s;
      }
   }

   .tab-content {
      &.woocommerce {
         .single-product-box {
            .author-area {
               display: none;
            }
         }

      }
   }

}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@-moz-keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@-webkit-keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@-o-keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@-ms-keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}