/* ZEN CLASS TAB */
.video-wrap {
   margin-bottom: 0;
}

.zen-class {
   color: black;
   border: 1px solid #FFE0D6;
   background-color: #FFE0D6;
   border-radius: 4px;
   padding: 0.2rem 0.3rem;
   margin: 1px 4px;
   font-size: 12px;
   font-weight: 600;
}

.zen-class .fas {
   color: #fff;
   background: #FF354D;
   font-size: .5rem;
   border-radius: 50%;
   margin-right: 5px;
   position: relative;
   top: -2px;
}

.fas:before:not(.module-progress-indicator) {
   content: '\f6aa';
}

.video-zenclass-tab .title {
   font-size: 1rem;
   font-weight: bold;
   line-height: 32px;
   margin-bottom: 10px;
}

.video-zenclass-tab .description {
   font-size: 0.875rem;
   color: #707070;
   margin-bottom: 10px;
}

.video-zenclass-tab .sub-title {
   font-size: 1.12rem;
   font-weight: bold;
   line-height: 28px;
   margin-bottom: 10px;
}

.highlights {
   justify-content: space-between;
}

.highlights .card {
   width: 100%;
   text-align: center;
   padding: 10px;
   font-size: 1rem;
   line-height: 28px;
   background-color: #E6F7E9;
   margin-right: 1rem;
   margin-bottom: 10px;
}

h2 {
   margin-bottom: 0;
}

.recommended-desktop {
   display: block;
}

.recommended-mobile {
   display: none;
}

.recommended .card {
   width: 100%;
   max-width: 33%;
   margin: 0;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   padding: 0.5rem;
   border: 2px solid #E3E3E3;
   border-radius: 0.75rem;
}

.recommended .card img {
   width: 100%;
}

.recommended .card .cardImg p {
   margin-bottom: 0;
}

.recommended .card-body {
   padding: 0;
   margin-top: 1rem;
   /* height: 18rem; */
}

.recommended .card-body h5 {
   font-size: 1rem;
   font-weight: 600;
}

.recommended .card-text {
   font-size: 0.875rem !important;
   font-weight: 400;
   color: #707070 !important;

   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 6; /* number of lines to show */
   -webkit-box-orient: vertical;
}

.recommended .btn {
   width: 100%;
   margin-top: auto;
   font-weight: bold;
}

.view-zenclass {
   width: 45% !important;
   font-weight: bold;
}

.video-zenclass-tab .view-all {
   color: #0DBA4B;
   text-decoration: underline;
   margin-left: 5px;
   margin-bottom: 10px;
}

.banner-title h2 {
   color: #fff;
}

.banner-title strong {
   color: #0DBA4B;
}

.alert {
   padding: 0;
}

.alert-dismissible {
   padding-right: unset;
}

.banner-containers-desktop {
   width: 100%;
   position: relative;
   overflow: hidden;
   height: 8rem;
}

.banner-containers-mobile {
   display: none;
}

.banner-containers-desktop img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   position: absolute;
}

.banner-image-desk p {
   margin-bottom: 0;
}

.content-containers {
   position: relative;
   padding: 1rem;
   margin-left: 15%;
   bottom: -28px;
}

.content-containers h2 {
   color: #fff;
   margin-bottom: 0;
   font-size: 1.5rem;
}

.content-containers strong {
   color: #0DBA4B;
}

.banner-slider {
   position: relative;
   margin-left: 10px;
   /* max-width: 30%;
   min-width: 24%; */
   margin-bottom: 1.5rem;
   font-weight: bold;
   color: #fff;
   cursor: pointer;
}

.banner-slider .sliderBtn {
   position: absolute;
   right: 5%;
   top: 2%;
   box-shadow: none;
}

.banner-slider img {
   width: 100%;
   object-fit: contain;
}

.banner-slider p {
   margin: 0;
}

.banner-slider-container {
   margin: 0 1rem;
   position: absolute;
   top: 73%;
   color: #fff;
}

.banner-slider-container .banner-title {
   margin-bottom: 10px;
   text-align: center;
}

.slider {
   margin-left: 10px;
   max-width: 30%;
   min-width: 30%;
   margin-bottom: 1.5rem;
   min-height: 20rem;
}

.new-banner-slider {
   position: relative;
   top: -1rem;
}

.new-image {
   background-image: url('https://s3.ap-south-1.amazonaws.com/guvi-2.0/zen/zen-ads/band-ds-desk.png');
   background-size: cover;
   background-repeat: no-repeat;
}

.new-container {
   width: 80%;
   margin-left: 18%;
   padding: 20px;
}

.desk {
   display: block;
}

.mob {
   display: none;
}

@media (max-width: 767px) {
   .table-of-content {
      margin-top: 1rem;
   }

   .video-wrap {
      margin-bottom: 1.5rem;
   }

   .lesson-content .nav-item .nav-link {
      font-size: 0.9rem !important;
   }

   .highlights {
      flex-direction: column;
   }

   .highlights .card {
      width: 100%;
      margin: 10px 0;
      font-weight: bold;

   }

   .recommended-desktop {
      display: none !important;
   }

   .recommended-mobile {
      display: block;
   }

   .recommended-mobile .swiper-wrapper {
      margin-bottom: 2rem;
   }

   .recommended-mobile .carousel .card {
      max-width: unset;
   }

   .view-zenclass {
      width: 100% !important;
      margin-bottom: 1rem;
   }

   .swiper .swiper-wrapper .swiper-slide .card {
      max-width: unset;
   }

   .swiper .swiper-wrapper .swiper-slide .card .card-body {
      height: 18rem;
   }

   .swiper .card-body .card-text {
      -webkit-box-orient: unset
   }

   .recommended-mobile .swiper .swiper-pagination {
      width: unset !important;
   }

   .swiper .swiper-pagination-bullet-active{
      background: #0DBA4B;
   }

   .banner-containers-desktop {
      display: none;
   }

   .banner-containers-mobile {
      display: block;
   }

   .banner-containers-mobile {
      width: 100%;
      position: relative;
      overflow: hidden;
      /* top: -1rem; */
   }

   .banner-containers-mobile img {
      width: 100%;
      height: 100%;
      object-fit: contain;
   }

   .banner-image-mobile p {
      margin-bottom: 0;
   }

   .content-containers-mobile {
      position: relative;
      padding: 1rem;
      top: -9rem;
      height: 0;
   }

   .content-containers-mobile h2 {
      color: #fff;
   }

   .banner-title strong {
      color: #0DBA4B;
   }

   .content-containers-mobile .row {
      padding: 1rem;
   }

   .content-containers-mobile .btn {
      padding: 0;
      margin-bottom: auto;
   }

   .banner-slider-show {
      flex-direction: column;
   }

   .banner-slider-show .banner-slider {
      margin-left: 0;
      width: 100%;
      max-width: none;
      top: -1rem;
   }

   .new-image {
      background-image: url('https://s3.ap-south-1.amazonaws.com/guvi-2.0/zen/zen-ads/band-ds-mob.png');
      background-size: cover;
      background-repeat: no-repeat;
   }

   .desk {
      display: none;
   }

   .mob {
      display: block;
   }
}

/* for pop-up */
.afterVideo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.afterVideo p {
   text-align: center;
   margin-bottom: 0;
}

.afterVideo img {
   width: 80%;
}

.remove-scrolling {
   height: 100%;
   overflow: hidden;
}

@media (max-width: 767px) {
   .afterVideo {
      width: 70%;
   }

   .afterVideo p {
      margin-bottom: 1rem;
   }

   .afterVideo img {
      width: 100%;
   }
}

.notification-container,
.notification-container-zenlite,
.notification-container-zenlite1 {
  width: 100%;
  margin-top: 3rem;
}

.alert-container-mobile,
.alert-container-mobile-zenlite,
.notification-container-zenlite {
  display: none;
}

.alert-container-desktop,
.alert-container-desktop-zenlite,
.alert-container-desktop-zenlite1 {
  display: block;
  padding: 1rem;
}

.alert-container-desktop,
.alert-container-desktop-zenlite,
.alert-container-desktop-zenlite1 {
  margin-bottom: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--Background-color-Border-and-Line, #E3E3E3);
  background: linear-gradient(-90deg, #E6F7E9 0%, #FFF 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;

  .download-image {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
  }

  .alert-container-text,
  .alert-container-text-zenlite,
  .alert-container-text-zenlite1 {
    color: #2A2A2A;
    font-family: "DM Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
  }

  .alert-container-text-zenlite strong {
   color: #FF354D;
  }

  .alert-container-text-zenlite1 strong {
   color: #06854D;
  }

  .alert-container-getapp {
    cursor: pointer;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    color: white !important;
    background-color: #0DBA4B;
    border-radius: 4px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);

    &:hover {
      text-decoration: none;
    }
  }

  .alert-container-closeBtn {
    font-size: 1.75rem;
    color: #000;
    font-weight: 500;
    cursor: pointer;
  }

  .alert-container-desktop-left,
  .alert-container-desktop-left-zenlite {
    flex: 1;
  }
}

.alert-container-desktop-zenlite,
.alert-container-desktop-zenlite1 {
   padding: 1rem 1.5rem;
}

.zenliteBannerUl,
.zenliteBannerUlMob {
   list-style-type: none;
   padding-inline-start: 0;
   width: 100%;
   margin-bottom: 0;
}

.alert-container-mobile-getapp-container {
   display: flex;
   margin-left: 3.5rem;
}

.close-btn {
  margin-top: 3rem;
}

@media (max-width: 576px) {
  .notification-container,
  .notification-container-zenlite,
  .notification-container-zenlite1 {
    margin-top: unset;
  }

  .alert-container-desktop,
  .alert-container-desktop-zenlite,
  .alert-container-desktop-zenlite1 {
    display: none;
  }

  .alert-container-mobile {
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--Background-color-Border-and-Line, #E3E3E3);
    background: linear-gradient(-90deg, #E6F7E9 0%, #FFF 100%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .alert-container-mobile-zenlite {
     display: block;
     margin-top: 1rem;
     margin-bottom: 1rem;
     border-radius: 1rem;
     border: 1px solid var(--Background-color-Border-and-Line, #E3E3E3);
     background: linear-gradient(-90deg, #E6F7E9 0%, #FFF 100%);
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
     padding: 0.75rem;
  }

  .alert-container-mobile-text-zenlite strong {
      color: #FF354D;
  }
  .alert-container-mobile-text-zenlite1 strong {
      color: #06854D;
  }

  .download-image {
    width: 3rem;
    height: 3rem;
    margin-right: 10px;
  }

  .alert-container-mobile-text,
  .alert-container-mobile-text-zenlite,
  .alert-container-mobile-text-zenlite1 {
    font-size: 0.875rem;
    line-height: 20px;
    font-weight: 700;
  }

  .alert-container-mobile-getapp {
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline !important;
    color: var(--Primary-Color-Primary-600-Hover-Color, #099F4E) !important;
  }

  .alert-container-closeBtn {
    font-size: 1.25rem;
    color: #000;
    font-weight: 500;
    cursor: pointer;
  }
}