/*================================================
Yoga Gentle Yoga Area CSS
=================================================*/
.yoga-gentle-yoga-area {
  background-color: #fffbfb;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.yoga-gentle-yoga-area .nav-pills {
  margin-bottom: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;
}

.yoga-gentle-yoga-area .nav-pills .nav-item .nav-link {
  position: relative;
}

.yoga-gentle-yoga-area .nav-pills .nav-item .nav-link::before {
  content: "";
  position: absolute;
  bottom: -17px;
  width: 100%;
  height: 3px;
  background-color: var(--mainColor);
  left: 0;
  right: 0;
  opacity: 0;
}

.yoga-gentle-yoga-area .nav-pills .nav-item .nav-link img {
  margin-bottom: 8px;
}

.yoga-gentle-yoga-area .nav-pills .nav-item .nav-link h3 {
  color: var(--blackColor);
  font-size: 20px;
}

.yoga-gentle-yoga-area .nav-pills .nav-item .nav-link span {
  color: var(--mainColor);
  font-size: 14px;
}

.yoga-gentle-yoga-area .nav-pills .nav-item .nav-link.active {
  background-color: transparent;
}

.yoga-gentle-yoga-area .nav-pills .nav-item .nav-link.active::before {
  opacity: 1;
}

.yoga-gentle-yoga-area .gentle-yoga-content {
  position: relative;
  z-index: 1;
  padding-right: 30px;
}

.yoga-gentle-yoga-area .gentle-yoga-content h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

.yoga-gentle-yoga-area .gentle-yoga-content .yoga-default-btn {
  margin-top: 15px;
}

.yoga-gentle-yoga-area .gentle-yoga-content img {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: 0.2;
}

.yoga-gentle-yoga-area .section-left-shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.5;
}

.yoga-gentle-yoga-area .gentle-yoga-img {
  position: relative;
  padding-left: 30px;
}

.yoga-gentle-yoga-area .gentle-yoga-img .yoga-price {
  width: 120px;
  height: 120px;
  background-color: var(--mainColor);
  text-align: center;
  padding: 17px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -30px;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
}

.yoga-gentle-yoga-area .gentle-yoga-img .yoga-price span {
  display: block;
  font-family: var(--headingFontFamily);
  color: var(--whiteColor);
}

.yoga-gentle-yoga-area .gentle-yoga-img .yoga-price .price {
  font-size: 30px;
}

.yoga-gentle-yoga-area .gentle-yoga-img .yoga-price .month {
  font-size: 20px;
}

/* Max width 767px */
@media only screen and (max-width: 767px) {
   .yoga-gentle-yoga-area .nav-pills {
    margin-bottom: 30px;
  }
  .yoga-gentle-yoga-area .nav-pills .nav-item .nav-link {
    padding: 0;
    margin-bottom: 30px;
  }
  .yoga-gentle-yoga-area .nav-pills .nav-item .nav-link h3 {
    font-size: 18px;
  }
  .yoga-gentle-yoga-area .gentle-yoga-content h2 {
    font-size: 25px;
    margin-bottom: 15px;
  }
  .yoga-gentle-yoga-area .gentle-yoga-content {
    padding-right: 0;
    margin-bottom: 30px;
  }
  .yoga-gentle-yoga-area .gentle-yoga-img {
    padding-left: 0;
  }
  .yoga-gentle-yoga-area .gentle-yoga-img .yoga-price {
    left: 30px;
  }
   .yoga-gentle-yoga-area .section-left-shape {
    display: none;
  }
  .yoga-gentle-yoga-area .gentle-yoga-content img {
    display: none;
  }
}

/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .yoga-gentle-yoga-area .nav-pills {
        margin-bottom: 30px;
    }
    .yoga-gentle-yoga-area .nav-pills .nav-item .nav-link {
        padding: 0;
        margin-bottom: 30px;
    }
    .yoga-gentle-yoga-area .nav-pills .nav-item .nav-link h3 {
        font-size: 18px;
    }
    .yoga-gentle-yoga-area .gentle-yoga-content h2 {
        font-size: 25px;
        margin-bottom: 15px;
    }
    .yoga-gentle-yoga-area .gentle-yoga-content {
        padding-right: 0;
        margin-bottom: 30px;
    }
    .yoga-gentle-yoga-area .gentle-yoga-img {
        padding-left: 0;
    }
    .yoga-gentle-yoga-area .gentle-yoga-img .yoga-price {
        left: 30px;
    }
    .yoga-gentle-yoga-area .nav-pills .nav-item .nav-link {
        margin-bottom: 0;
    }
    .gentle-yoga-img.gentle-yoga-1 img {
        width: 100%;
    }
    .yoga-gentle-yoga-area .section-left-shape {
        display: none;
    }
    .yoga-gentle-yoga-area .gentle-yoga-content img {
        display: none;
    }
}