a {
  color: #3699ff;
  text-decoration: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}
body {
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 30px;
  color: #515659 !important;
  -webkit-text-size-adjust: 100%;
  letter-spacing: .012em;
}
.topnav-navbar-light{
  background-color: #fff;
}
.topnav-navbar-light .nav-user {
  background-color: #fafafa;
  border: 1px solid #fafafa;
}
/* Font Family */
.font-courier {
  font-family: Courier, sans-serif;
}
.profile-image-thumbnail{
  height: 96px;
  width: 96px;
}
.profile-image-thumbnail-settings{
  height: 140px;
  width: 140px;
  border-radius: 50%;
}
.color-main {
  color: #515659 !important
}
.margin-top-0 {
  margin-top: 0px !important;
}

.margin-top-5 {
  margin-top: 5px !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}
.margin-top-15{
  margin-top: 15px !important;
}
.margin-top-20 {
  margin-top: 20px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.margin-top-50 {
  margin-top: 50px !important;
}

.margin-top-60 {
  margin-top: 60px !important;
}

.margin-top-70 {
  margin-top: 70px !important;
}

.margin-top-80 {
  margin-top: 80px !important;
}

.margin-top-90 {
  margin-top: 90px !important;
}

.margin-top-100 {
  margin-top: 100px !important;
}

.margin-top-120 {
  margin-top: 120px !important;
}
.margin-top-130 {
  margin-top: 130px !important;
}
.margin-top-140 {
  margin-top: 140px !important;
}
.margin-top-150 {
  margin-top: 150px !important;
}
.margin-top-160{
  margin-top: 160px !important
}
.margin-top-170{
  margin-top: 170px !important
}
.margin-top-180{
  margin-top: 180px !important
}
.margin-top-200 {
  margin-top: 200px !important;
}
.margin-top--40{
  margin-top: -40px !important;
}

/* Margin Bottom */

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

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

.margin-bottom-80 {
  margin-bottom: 80px !important;
}

.margin-bottom-90 {
  margin-bottom: 90px !important;
}

.margin-bottom-100 {
  margin-bottom: 100px !important;
}

.margin-bottom-120 {
  margin-bottom: 120px !important;
}

.margin-bottom-150 {
  margin-bottom: 150px !important;
}

.margin-bottom-200 {
  margin-bottom: 200px !important;
}

/*margin-right*/

.margin-right-5 {
  margin-right: 5px !important;
}
.margin-right-10 {
  margin-right: 10px !important;
}

.margin-right-20 {
  margin-right: 20px !important;
}

.margin-right-30 {
  margin-right: 30px !important;
}

.margin-right-30 {
  margin-right: 30px !important;
}

.margin-right-40 {
  margin-right: 40px !important;
}

.margin-right-50 {
  margin-right: 50px !important;
}

.margin-right-60 {
  margin-right: 60px !important;
}

.margin-right-70 {
  margin-right: 70px !important;
}

.margin-right-80 {
  margin-right: 80px !important;
}

.margin-right-90 {
  margin-right: 90px !important;
}

.margin-right-100 {
  margin-right: 100px !important;
}

.margin-right-120 {
  margin-right: 120px !important;
}

.margin-right-150 {
  margin-right: 150px !important;
}

.margin-right-200 {
  margin-right: 200px !important;
}


/*margin-right*/

.margin-left-5 {
  margin-left: 5px !important;
}
.margin-left-10 {
  margin-left: 10px !important;
}

.margin-left-20 {
  margin-left: 20px !important;
}

.margin-left-30 {
  margin-left: 30px !important;
}

.margin-left-30 {
  margin-left: 30px !important;
}

.margin-left-40 {
  margin-left: 40px !important;
}

.margin-left-50 {
  margin-left: 50px !important;
}

.margin-left-60 {
  margin-left: 60px !important;
}

.margin-left-70 {
  margin-left: 70px !important;
}

.margin-left-80 {
  margin-left: 80px !important;
}

.margin-left-90 {
  margin-left: 90px !important;
}

.margin-left-100 {
  margin-left: 100px !important;
}

.margin-left-120 {
  margin-left: 120px !important;
}

.margin-left-150 {
  margin-left: 150px !important;
}

.margin-left-200 {
  margin-left: 200px !important;
}

/* Padding */

.padding-0 {
  padding: 0px !important;
}

/* Padding Top */

.padding-top-0 {
  padding-top: 0px !important;
}

.padding-top-5 {
  padding-top: 5px !important;
}

.padding-top-10 {
  padding-top: 10px !important;
}

.padding-top-20 {
  padding-top: 20px !important;
}

.padding-top-30 {
  padding-top: 30px !important;
}

.padding-top-40 {
  padding-top: 40px !important;
}

.padding-top-50 {
  padding-top: 50px !important;
}

.padding-top-60 {
  padding-top: 60px !important;
}

.padding-top-70 {
  padding-top: 70px !important;
}

.padding-top-80 {
  padding-top: 80px !important;
}

.padding-top-90 {
  padding-top: 90px !important;
}

.padding-top-100 {
  padding-top: 100px !important;
}

.padding-top-120 {
  padding-top: 120px !important;
}

.padding-top-150 {
  padding-top: 150px !important;
}

.padding-top-200 {
  padding-top: 200px !important;
}


/* Padding Bottom */

.padding-bottom-0 {
  padding-bottom: 0px !important;
}

.padding-bottom-10 {
  padding-bottom: 10px !important;
}

.padding-bottom-20 {
  padding-bottom: 20px !important;
}

.padding-bottom-30 {
  padding-bottom: 30px !important;
}

.padding-bottom-40 {
  padding-bottom: 40px !important;
}

.padding-bottom-50 {
  padding-bottom: 50px !important;
}

.padding-bottom-60 {
  padding-bottom: 60px !important;
}

.padding-bottom-70 {
  padding-bottom: 70px !important;
}

.padding-bottom-80 {
  padding-bottom: 80px !important;
}

.padding-bottom-90 {
  padding-bottom: 90px !important;
}

.padding-bottom-100 {
  padding-bottom: 100px !important;
}

.padding-bottom-120 {
  padding-bottom: 120px !important;
}

.padding-bottom-150 {
  padding-bottom: 150px !important;
}

.padding-bottom-200 {
  padding-bottom: 200px !important;
}


/* Padding right */
.padding-right-0 {
  padding-right: 0px !important;
}

.padding-right-10 {
  padding-right: 10px !important;
}

.padding-right-20 {
  padding-right: 20px !important;
}

.padding-right-30 {
  padding-right: 30px !important;
}

.padding-right-40 {
  padding-right: 40px !important;
}

.padding-right-50 {
  padding-right: 50px !important;
}

.padding-right-60 {
  padding-right: 60px !important;
}

.padding-right-70 {
  padding-right: 70px !important;
}

.padding-right-80 {
  padding-right: 80px !important;
}

.padding-right-90 {
  padding-right: 90px !important;
}

.padding-right-100 {
  padding-right: 100px !important;
}

.padding-right-120 {
  padding-right: 120px !important;
}

.padding-right-150 {
  padding-right: 150px !important;
}

.padding-right-200 {
  padding-right: 200px !important;
}

/* Padding left */
.padding-left-0 {
  padding-left: 0px !important;
}

.padding-left-10 {
  padding-left: 10px !important;
}

.padding-left-20 {
  padding-left: 20px !important;
}

.padding-left-30 {
  padding-left: 30px !important;
}

.padding-left-40 {
  padding-left: 40px !important;
}

.padding-left-50 {
  padding-left: 50px !important;
}

.padding-left-60 {
  padding-left: 60px !important;
}

.padding-left-70 {
  padding-left: 70px !important;
}

.padding-left-80 {
  padding-left: 80px !important;
}

.padding-left-90 {
  padding-left: 90px !important;
}

.padding-left-100 {
  padding-left: 100px !important;
}

.padding-left-120 {
  padding-left: 120px !important;
}

.padding-left-150 {
  padding-left: 150px !important;
}

.padding-left-200 {
  padding-left: 200px !important;
}
/**************************************/

/* Primary Colors */

.btn.btn-primary {
  color: #fff;
  background-color: #4481e5  !important;
  border-color:  #4481e5 !important;
}
.btn-outline-primary {
  color: #3699ff;
  border-color: #3699ff;
}
.border-primary {
  border-color: #3699ff !important;
}
.badge-primary-lighten {
    color: #3699ff !important;
    background-color: rgba(116, 144, 252, 0.18) !important;
}
.btn-outline-primary:hover {
  color: #fff;
  background: #3699ff;
}
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
  color: #fff;
  background-color: #3699ff;
  border-color: #3699ff;
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    -webkit-box-shadow: 0 0 0 .2rem rgba(93, 148, 254, 0.5);
    box-shadow: 0 0 0 .2rem rgba(93, 148, 254, 0.5);
}
.btn.btn-primary.focus:not(.btn-text), .btn.btn-primary:focus:not(.btn-text), .btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
  color: #fff;
  background-color: #187de4 !important;
  border-color: #187de4 !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #3699ff !important;
}
.breadcrumb-item a:hover {
  color: #3699ff  !important;
}
.bg-primary{
    background: #3699ff !important;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: #187de4 !important;
  border-color: #5b63c4;
  -webkit-box-shadow: 0 0 0 .2rem rgba(135, 205, 247, 0.5);
  box-shadow: 0 0 0 .2rem rgba(135, 205, 247, 0.5);
}
.horizontal-steps .horizontal-steps-content .step-item {
  color: #187de4 !important;
}
.horizontal-steps .horizontal-steps-content .step-item.current span {
  color: #187de4 !important;
}
.horizontal-steps .process-line {
  background-color: #187de4 !important;
}
.horizontal-steps .horizontal-steps-content .step-item:last-child {
  margin-right: 0;
  color: #0acf97 !important;
}
.swal2-popup .swal2-styled:focus {
  outline: 0;
  box-shadow: 0 0 0 2px #fff,0 0 0 4px rgba(56, 144, 232, 0.4) !important;
}
.swal2-styled.swal2-confirm {
  background-color: #3699ff !important;
  color: #fff;
}
.notification-list .notify-item .notify-details {
  font-size: 13.5px !important;
}
.order-item-tbl tr td a {
  color: #6c757d !important;
}
.text-white{
  color: #dce2f0 !important;
}
.text-primary{
  color: #3699ff !important;
}
.tilebox-one i {
  position: relative;
  /* right: 1.5rem; */
  font-size: 1.3rem;
  opacity: 1;
  /* top: 23px !important; */
}
/* End primary colors */

/* Success Colors*/
.widget-icon {
  color: #05cb62  !important;
  font-size: 20px;
  background-color: rgba(255, 251, 21, 0.18) !important;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  display: inline-block;
}
.check-cart{
  background: #05cb62 !important;
  color: #fff !important;
  display: block;
  width: 100%;
  padding: .675rem 1.5rem !important;
  clear: both;
  font-weight: 400;
  text-align: inherit;
  white-space: nowrap;
  border: 0;
  margin: 15px 0px -10px 0px !important;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  }
.check-cart:hover{
  background: #05cb62 !important;
  color: #fff !important;
}
.ribbon-box .ribbon-success {
    background: #05cb62 !important;
}
.btn-success {
  background: #05cb62 !important;
  border-color: #05cb62 !important;
  color: #fff;
}
.btn-success {
  -webkit-box-shadow: 0 2px 6px 0 rgba(10, 207, 96, 0.5) !important;
  box-shadow: 0 2px 6px 0 rgba(10, 207, 96, 0.5) !important;
}
.bg-success {
  background-color: #05cb62 !important;
}
.text-success {
  color: #05cb62 !important;
}
.bg-success {
  background: #05cb62 !important;
}
.jq-icon-success{
  background-color: #05cb62 !important;
  color: #fff;
  border-color: #05cb62 !important;
}
.btn-outline-success {
  color: #05cb62 !important;
  border-color: #05cb62 !important;
}
.btn-outline-success:hover {
  background: #05cb62 !important;
  color: #fff !important;
}
.breadcrumb-item a{
  color: #3699ff  !important;
}
.breadcrumb-item a:hover{
  color: #3699ff !important;
}

.product-category{
  margin-top: -10px;
  font-weight: 300;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.st-block{
  display: block;
}

/*Social media icon*/
.facebook {
   background-color: #3b5998;
}
.twitter {
   background-color: #1da1f2;
}
.fb-messenger {
   background-color: #009aff;
}
.telegram {
   background-color: #34abe0;
}
.google-plus {
   background-color: #dd4b39;
}
.medium {
   background-color: #000;
}
.instagram {
   background-color: #464545;
}
.linkedin {
   background-color: #0077b5;
}
.pinterest {
   background-color: #bd081c;
}
.youtube {
   background-color: #cd201f;
}
.vimeo {
   background-color: #1ab7ea;
}
.dribbble {
   background-color: #ea4c89;
}
.behance {
   background-color: #1769ff;
}
.flickr {
   background-color: #ff0084;
}
.tumblr {
   background-color: #35465c;
}
.foursquare {
   background-color: #f94877;
}
.github {
   background-color: #333333;
}
.skype {
   background-color: #00aff0;
}
.facebook-color {
   color: #3b5998;
}
.twitter-color {
  color: #1da1f2;
}
.fb-messenger-color {
  color: #009aff;
}
.telegram-color {
  color: #34abe0;
}
.google-plus-color {
  color: #dd4b39;
}
.medium-color {
  color: #000;
}
.instagram-color {
  color: #464545;
}
.linkedin-color {
  color: #0077b5;
}
.pinterest-color {
  color: #bd081c;
}
.youtube-color {
  color: #cd201f;
}
.vimeo-color {
  color: #1ab7ea;
}
.dribbble-color {
  color: #ea4c89;
}
.behance-color {
  color: #1769ff;
}
.flickr-color {
  color: #ff0084;
}
.tumblr-color {
  color: #35465c;
}
.foursquare-color {
  color: #f94877;
}
.github-color {
  color: #333333;
}
.skype-color {
  color: #00aff0;
}
.facebook-c:hover {
   color: #3b5998;
}
.twitter-c:hover {
  color: #1da1f2;
}
.instagram-c:hover {
  color: #5851db;
}

/* font weight */
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}
/* bacground colors */
.bg-white{
  background: #fff !important;
}
.bg-black{
  background: #000 !important;
}
.bg-black-opactiy{
  background: rgba(0,0,0,.5) !important;
}
/* colors */
.c-title2{
    color: #426aa7;
}
.c-title{
  color: #4481e5 !important;
}
.c-dwhite{
  color: #C9D1D9 !important;
}
.c-dev{
  color: #8188a1 !important;
}
.c-white{
  color: #dce2f0 !important;
}
.c-black {
  color: #000 !important;
}
.c-gray {
  color: #515659 !important;
}
.c-light-gray{
  color: #9d9d9d !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: #dce2f0 !important;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: #3b82f6 !important;
}
.navbar-dark .navbar-nav .donate-link{
  color: #3699ff !important;
}
.font-14{
  font-size: 14px !important;
}
.font-15 {
  font-size: 15px !important;
}
.font-16 {
  font-size: 16px !important;
}
.font-17 {
  font-size: 17px !important;
}
.font-18 {
  font-size: 18px !important;
}
.font-19 {
  font-size: 19px !important;
}
.font-20 {
  font-size: 20px !important;
}
.font-21 {
  font-size: 21px !important;
}
.font-22 {
  font-size: 22px !important;
}
.font-23 {
  font-size: 23px !important;
}
.font-24 {
  font-size: 24px !important;
}
.font-25 {
  font-size: 25px !important;
}
.font-26 {
  font-size: 26px !important;
}
.font-27 {
  font-size: 27px !important;
}
.font-28 {
  font-size: 28px !important;
}
.font-29 {
  font-size: 29px !important;
}
.font-30 {
  font-size: 30px !important;
}
.font-31 {
  font-size: 31px !important;
}
.font-32 {
  font-size: 32px !important;
}
.font-33 {
  font-size: 33px !important;
}
.font-34 {
  font-size: 34px !important;
}
.font-35 {
  font-size: 35px !important;
}
.font-36 {
  font-size: 36px !important;
}
.font-37 {
  font-size: 37px !important;
}
.font-38 {
  font-size: 38px !important;
}
.font-39 {
  font-size: 39px !important;
}
.font-40 {
  font-size: 40px !important;
}
.font-60 {
  font-size: 60px !important;
}
.pointer-cursor{
  cursor: pointer;
}

.form-check-input:checked {
    background-color: #0acf97 !important;
    border-color: #0acf97 !important;
}

/* Sweetalert */
.swal-footer {
  text-align: center;
}
.notification-list .cart-icon-badge {
  display: inline-block;
  position: absolute;
  top: 22.5px;
  right: 1px;
  border-radius: 50%;
  height: 7px;
  width: 7px;
  background-color: #fa5c7c;
}
.notification-list .noti-icon-badge {
  right: 4px;
}
@media only screen and (min-width: 769px) {
  .navbar-toggler{
    border: none !important;
    font-size: 28px !important; 
  }
  .search-product-panel {
    left: 370px !important;
  }
  .product-title-home{
    font-size: 30px;
  }
  .product-sub-home{
    font-size: 15px;
  }
  .rounded-modal{
    border-radius: 20px !important;
  }
  /* Navbar */

  .app-search .form-control{
    height: 45px;
  }
  .app-search span.search-icon {
    position: absolute;
    z-index: 9;
    font-size: 20px;
    line-height: 38px;
    left: 15px;
    top: 3px;
  }
  .navbar-custom .app-search form {
    max-width: 600px !important;
    margin-left: 30px !important;
    max-height: 80px;
    padding: 25px 10px;
  }
  .navbar-custom{
    padding: 0 34px !important;
    min-height: 80px !important;
  }
  .navbar-custom .topbar-menu li {
    max-height: 80px;
    padding: 0px 5px 11px 5px;
  }
  .navbar-home .app-search form {
    max-width: 600px !important;
    margin-left: 30px !important;
    max-height: 80px;
    padding: 25px 10px;
  }
  .navbar-home{
    padding: 0 34px !important;
    min-height: 90px !important;
  }
  .navbar-home .topbar-menu li {
    max-height: 80px;
    padding: 11px 5px 11px 5px;
  }
  .search_wrapper_home{display: none;}
  .product_section{
    margin-top: -60px !important;
  }
  .hh-logo{
    height: 42px !important;
  }
  .home-logo{
    display: show;
    z-index: 999 !important;
  }
  .home-logo img{
    padding-top: 10px !important;
    height: 70px;
    z-index: 999 !important;
  }
  .nav-user {
    padding: calc(31px * .5) 20px calc(31px * .5) 57px !important;
    text-align: left !important;
    position: relative;
    min-height: 80px !important;
  }
  .loader-wrapper{
    position: fixed;
    left: 47%;
    top: 35%;
    z-index: 1000;
    height: 30px;
  }
  .herbal-section {
    position: relative;
    padding: 80px 0 20px 0;
    width: 100%;
    margin-top: -220px !important;
  }
  .--carousel-text{
    position: absolute;
    top: -890%;
    left: 35%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    font-weight: 600;
  }
  .carousel-item img {
    margin: 0;
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover;
    background-size: 100% 100%;
  }
  #web-view{
    display: show;
  }
  #mobile-view{
    display: none;
  }
  .mobile-view{
    display: none;
  }
}
@media only screen and (max-width: 801px) {
  
  .txt-editor-div {
    margin-top: 40px;
  }
  .navbar-toggler{
    border: none !important;
    font-size: 28px !important; 
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  /* The side navigation menu */
  .sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 6; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: rgba(0,0,0,.85); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }

  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    display: block;
    transition: 0.3s;
  }

  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #f1f1f1;
  }

  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .--carousel-text{
    position: absolute;
    top: -440%;
    left: 35%;
    transform: translate(-50%, -50%);
    font-size: 27px;
  }
}
@media only screen and (max-width: 769px) {

  .home-title-join{
    color: #fff;
  }
  .product-title-home{
    font-size: 26px;
  }
  .product-sub-home{
    font-size: 14px;
  }
  .search-result-wrapper{
    -webkit-animation-name: DropDownSlide;
    animation-name: DropDownSlide;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    margin: 0;
    margin-top: 0px;
    z-index: 1000;
    box-shadow: 0px 2px 8px 0px rgba(90, 91, 95, 0.095);
    width: 700px;
    padding: .25rem 0;
    margin: 0;
    font-size: .9rem;
    color: #6c757d;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #fff;
    border-radius: .25rem;
  }
  .search-result-wrapper .header {
    padding: 20px 10px;
  }

  .product_top_menu{
    border-radius: 10px;
    background: #fff ;
    height: 180px;
    margin-bottom: 30px;
    box-shadow: 0px 2px 8px 0px rgba(90, 91, 95, 0.095);
  }
  .cart-nav-mobile{
    margin-right: -60px !important; 
  }
  .mobile-nav{
    background: rgba(0,0,0,.8) !important
  }
  .product_section{
    margin-top: 30px !important;
  }
  .hh-logo{
    height: 50px !important;
  }
  .home-logo{
    display: none;
  }

  .loader-wrapper{
    position: fixed;
    left: 40%;
    top: 25%;
    z-index: 1000;
    height: 20px;
  }
  .--carousel-text{
    position: absolute;
    top: -440%;
    left: 35%;
    transform: translate(-50%, -50%);
    font-size: 27px;
  }
  .carousel-item img {
    margin: 0;
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover;
    background-size: 100% 100%;
  }
  .herbal-section {
    position: relative;
    padding: 80px 0 50px 0;
    width: 100%;
    margin-top: -210px !important;
  }
  .mobile-view{
    display: show;
  }
  #mobile-view{
    display: show;
  }
  .web-view{
    display: none;
  }
  #web-view{
    display: none;
  }
}
@media only screen and (max-width: 515px) {
  /*.registration-section::after {
    top: -60px !important;
  }
  .membership-section::after {
    top: -60px !important;
  }
  .hero-section::after {
    top: -60px !important;
  }*/
}
@media only screen and (max-width: 415px) {
  .navbar-toggler{
    border: none !important;
    font-size: 28px !important; 
    color:  #e9e8e9 !important;
  }
  .txt-editor-div {
    margin-top: 40px;
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }
  .profile-image-thumbnail{
    height: 96px;
    width: 96px;
  }
 /* .registration-section::after {
    top: -60px !important;
  }
  .membership-section::after {
    top: -60px !important;
  }
  .hero-section::after {
    top: -60px !important;
  }*/
  .product-title-home{
    font-size: 23px;
  }
  .product-sub-home{
    font-size: 14px;
  }
  .rounded-modal{
    border-radius: 15px !important;
  }
  .search-result-wrapper{
    width: 390px;
  }
  .product_cat_top_menu{
    border-radius: 20px;
    background: #fff;
    height: 150px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px !important;
    box-shadow: 0px 2px 8px 0px rgba(90, 91, 95, 0.095);
  }
  .product_top_menu{
    border-radius: 20px;
    background: #fff ;
    height: 160px;
    margin-bottom: 10px !important;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    padding-bottom: 30px !important;
    padding-top: 20px !important;
  }
  .product_section{
    margin-top: -50px !important;
  }
  .--carousel-text{
    position: absolute;
    top: -90%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    font-weight: 600;
  }
  .herbal-section {
    position: relative;
    padding: 80px 0 50px 0;
    width: 100%;
    margin-top: -216px !important;
  }
  .txt-editor-div {
    margin-top: 40px;
  }
  .navbar-toggler{
    border: none !important;
    font-size: 28px !important; 
  }
  .hh-logo{
    height: 40px !important;
  }
  .home-logo{
    display: none;
  }
  .loader-wrapper{
    position: fixed;
    left: 35%;
    top: 25%;
    z-index: 1000;
    height: 20px;
  }
  #mobile-view{
    display: show;
  }
  .mobile-view{
    display: show;
  }
}
@media only screen and (max-width: 385px) {
  .product-title-home{
    font-size: 20px;
  }
  .product-sub-home{
    font-size: 13px;
  }
  .search-result-wrapper{
    width: 360px;
  }
  .product_section{
    margin-top: -50px !important;
  }
  .--carousel-text{
    position: absolute;
    top: -90%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    font-weight: 600;
  }
  .herbal-section {
    position: relative;
    padding: 80px 0 50px 0;
    width: 100%;
    margin-top: -190px !important;
  }
  .hh-logo{
    height: 51px !important;
  }
  .home-logo{
    display: none;
  }
  .loader-wrapper{
    position: fixed;
    left: 35%;
    top: 25%;
    z-index: 1000;
    height: 20px;
  }
  #mobile-view{
    display: show;
  }
  .mobile-view{
    display: show;
  }
}
@media only screen and (max-width: 376px) {
  .search-result-wrapper{
    width: 350px;
  }
  .product_section{
    margin-top: -50px !important;
  }
  .--carousel-text{
    position: absolute;
    top: -90%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    font-weight: 600;
  }
  .herbal-section {
    position: relative;
    padding: 80px 0 50px 0;
    width: 100%;
    margin-top: -210px !important;
  }
  .txt-editor-div {
    margin-top: 40px;
  }

  .hh-logo{
    height: 51px !important;
  }
  .home-logo{
    display: none;
  }
  .loader-wrapper{
    position: fixed;
    left: 35%;
    top: 25%;
    z-index: 1000;
    height: 20px;
  }
  #mobile-view{
    display: show;
  }
  .mobile-view{
    display: show;
  }
}
@media only screen and (max-width: 361px) {
  .herbal-section {
    position: relative;
    padding: 80px 0 50px 0;
    width: 100%;
    margin-top: -235px !important;
  }
  .txt-editor-div {
    margin-top: 40px;
  }
  .navbar-toggler{
    border: none !important;
    font-size: 23px !important; 
  }
  .hh-logo{
    height: 51px !important;
  }
  #mobile-view{
    display: show;
  }
  .mobile-view{
    display: show;
  }
}
@media only screen and (max-width: 321px) {
   .search-result-wrapper{
    width: 300px;
  }
  .notification-list .noti-icon {
    font-size: 19px !important;
    vertical-align: middle;
    line-height: 70px;
  }
  .herbal-section {
    position: relative;
    padding: 80px 0 50px 0;
    width: 100%;
    margin-top: -220px !important;
  }
  .hh-logo{
    height: 30px !important;
  }
}
@media only screen and (min-width: 1400px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1120px !important;
  }
}
.loader-div{
  background-color: rgba(255,255,255,.8);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  /*background-color:#000;*/
}
body{
  height:100%

}

.carousel-caption{
  position: relative;
  text-align: center;
  color: white;
}

.white-bg{
  background: #fff !important;
}
#products_wrapper_home .card {
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 10px;
}
#products_wrapper_ .card {
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 10px;
}
#products_wrapper_  .card .card-body {
  padding: 1.5rem .7rem !important;
}


.search-product-panel{
  left: 210px;
}
.search-user-dropdown .dropdown-item{
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-prod-name{
  margin-bottom: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media only screen and (max-width: 768px) {
  .registration-section::after {
    top: 0 !important;
  }
  .membership-section::after {
    top: 0 !important;
  }
  .pay-now-section::after {
    top: 0 !important;
  }
  /* mobile menu */
  .mobile-bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:1000;
    display:flex; 
    height:70px;
    box-shadow: 0 -2px 10px -2px rgba(0,0,0,.1);
    background-color:#fff;
  }
  .mobile-nav-btn{
    text-align: center;
    padding: 10px 20px;
    font-size: 30px;
    cursor: pointer;
    position: relative;
  }
  .mobile-nav-btn .active{
    color: #05cb62  ;
  }
}
@media only screen and (max-width: 415px) {
  /* mobile menu */
  .mobile-bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:1000;
    display:flex; 
    height:70px;
    box-shadow: 0 -2px 10px -2px rgba(0,0,0,.1);
    background-color:#fff;
  }
  .mobile-nav-btn{
    text-align: center;
    padding: 12px 5px;
    font-size: 30px;
    cursor: pointer;
  }
  .mobile-nav-btn .active{
    color: #05cb62  ;
  }
}
.badge {
  font-weight: 600 !important;
}
.table thead th{
  font-weight: 600 !important;
}
.table tbody td{
  font-weight: 400 !important;
}
.fw-bold {
    font-weight: 600 !important;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #414656 ;
  border-color: #414656 ;
}
.page-link {
  background-color: #d8dbde;
}
.page-link:focus {
  z-index: 3;
  color: #414656;
  background-color: #d8dbde;
  outline: 0;
  -webkit-box-shadow: 0 0 0 .2rem rgba(114, 177, 245, 0.25);
  box-shadow: 0 0 0 .2rem rgba(114, 177, 245, 0.25);
}
.flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.alert-light {
  background: #f7f8fd  !important;
  border-color: #f7f8fd  !important;
}
#open_product_img .modal-header{
  border-bottom: none !important;
}

/* animation */
.circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: whiteSmoke;
  box-shadow: 4px -40px 60px 5px rgb(26, 206, 71) inset;
}
.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.shake {
  animation: shake 2s ease infinite;
}
@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.category-section {
  content: ' ';
  background-image: linear-gradient(to bottom,#8669ed,#727cf5);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  border-radius: 0;
  top: 0;
  -webkit-transform: skewY(0deg);
  transform: skewY(0deg);
}
.category-section {
  top: 20px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  height: 85%;
}
.category-section {
  position: relative;
  padding: 80px 0 120px 0;
}
.index-section::after {
  content: ' ';
  background-image: linear-gradient(to bottom,#8669ed,#727cf5);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  border-radius: 0;
  top: 0;
  -webkit-transform: skewY(0deg);
  transform: skewY(0deg);
}
.index-section::after {
  top: -120px;
  background: linear-gradient(0deg, rgba(33, 37, 41,.5), rgba(33, 37, 41,.8)), url('../images/gallery/membership.webp') no-repeat center;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  height: 100%;
}
.index-section {
  position: relative;
  padding: 80px 0 120px 0;
}
.registration-section::after {
  content: ' ';
  background-image: linear-gradient(to bottom,#8669ed,#727cf5);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  border-radius: 0;
  top: 0;
  -webkit-transform: skewY(0deg);
  transform: skewY(0deg);
}
.registration-section::after {
  top: 20px;
  background: linear-gradient(rgba(33, 37, 41,.5), rgba(33, 37, 41,.8)), url('../images/gallery/registration.webp') no-repeat center;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  height: 90%;
}
.registration-section {
  position: relative;
  padding: 80px 0 120px 0;
}
.team-leader-section {
  width: 100%;
  min-width: 320px;
}
.account-pages{
  background:#fff;
  padding-top: 50px;
  /*-webkit-transform: skewY(-2deg);*/
  /*transform: skewY(-2deg);*/
}
.index-pages{
  background:#fafbfe;
  padding-top: 50px;
  padding-bottom: 50px;
  /*-webkit-transform: skewY(-2deg);*/
  /*transform: skewY(-2deg);*/
}

.abt-img-shadow{
  box-shadow: .5rem .5rem 0 rgba(233,236,239,.5);
}
.k-btn{
  padding: 1rem 1.875rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .5rem;
}
.rounded{
  border-radius: .35em !important;
}
.btn-social {
  width: 1.75rem;
  height: 1.75rem;
  /*border-radius: .75rem;*/
  /*font-size: 1rem;*/
  display: inline-block;
  /*padding: 8px 7px;*/
  /*transition: border-color 0.25s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;*/
  color: #fff;
  /*text-align: center;*/
  text-decoration: none !important;
}

.btn-social-outline{
  /*border-color: rgba(255,255,255,0.14);*/
  background-color: transparent;
}
.footer-bt{
  border-top: 1px solid rgba(152,166,173,.2);
  bottom: 0;
}
.footer-links a{
  color: #98a6ad;
  margin-left: 1.5rem;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.text-md-end{
  text-align: right !important;
}
.d-md-block {
  display: block !important;
}
.profile-image-upload > input {
  display: none;
}
.profile-user-box{
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('../images/gallery/planet-earth-space.webp') ;
  padding-top: 20px;
  padding-bottom: 20px;
}
.profile-user-box::after {
  background: rgba(0,0,0,.5);
}
.transfer-amount-label{
  left: 10px !important;
}
.prod_buy_btn{
  font-size:85%;
}
.text-error {
  color: #fa5c7c !important;
  text-shadow: rgba(245, 114, 114, 0.3) 5px 1px,rgba(245, 114, 114, 0.2) 10px 3px !important;
}
.footer-below-3rd{
  background-color: #fafafa;
}

.signup-alert{
  background: rgba(114, 255, 215, 0.18);
  color: #00ae7c;
  border-radius: 20px;
}
.pr-1 {
  padding-right: .375rem !important;
}
.pl-1 {
  padding-left: .375rem !important;
}
.br-15{
  border-radius: 15px !important;
}
.br-10{
  border-radius: 10px !important;
}
.br-8{
  border-radius: 8px !important;
}
.home-navbar{
  background-color: #fff !important;
  color: #515659 !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.home-navbar .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show > .nav-link {
  color: #515659 !important;
  text-transform: uppercase;
  font-weight: 500;
}
.navbar{
  padding-top: 0.95rem;
  padding-bottom: .95rem;
}
.nav-top-header{
  height: 33px;
  border-bottom: #808080;
  padding:  5px 0px;
}
.navbar-home{
  background-color: #fff !important;
  color: #515659 !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.navbar-home .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show > .nav-link {
  color: #515659 !important;
  text-transform: uppercase;
  font-weight: 500;
}
.navbar-home .nav-user {
  background-color: #fff;
  color: #515659;
}
.home-index-default .nav-user {
  background-color: transparent;
  border:  none;
}
.home-index-default .nav-user .account-user-name{
  color: #fff;
}
.home-index-default .nav-user .account-position{
  color: #fff;
}
.home-index-default .nav-user .account-user-avatar{
  color: #fff;
}
.nav-user {
  background-color: #fafbfd;
  border: 1px solid #f1f3fa;
  border-width: 0 1px;
}
.nav-user .account-user-name{
  color: #6c757d ;
}
.nav-user .account-position {
  font-size: .9em;
  margin-top: 6px;
}
.nav-user .account-user-avatar{
  color: #6c757d !important;
}
.disabledClick{
  pointer-events: none;
}
.side-nav .side-nav-link{
  font-weight: 500;
}
.account-user-avatar i {
  position: absolute;
  top: calc(0px / .5);
  left: 0px;
  color: #6c757d !important;
}
.mt--28{
  margin-top: -28px;
}
#_products_tbl .disabled {
    background-color: transparent;
    opacity: 1;
    border: none;
}
.cursor-pointer{
  cursor: pointer;
}

/* developer website  */
.introduction-div{
  position:  relative;
}
.txt-editor-div{
  background-image: linear-gradient(#2e365b, #1c213d);
  border-radius: 5px;
  padding: 10px 20px;
  position: absolute;
  left: 10px;
  top: 130px;
  font-family: courier, sans-serif;
  color: #a6e22b !important;
}
.txt-editor-div .bracket{
  color: #fff !important;
}
.txt-editor-div .attribute {
  margin-left: 20px;
  color: #67d8d8 !important;
}
.attribute .text-1{
  color: #67d8d8 !important;
}
.attribute .text-2{
  color: #ac80ff !important;
}

/**/
@keyframes cursor-blink {
  0% {
    opacity: 0;
  }
}
/* body{ */
  /* background: rgb(28,41,55); */
  /* background: radial-gradient(circle, rgba(28,41,55,1) 0%, rgba(30,51,70,1) 96%); */
  /* background: rgb(28,41,55); */
  /* background: linear-gradient(180deg, rgba(28,41,55,1) 0%, rgba(24,24,25,1) 100%); */
  /* color: #cccfd8 !important; */
/* } */

.body-container{
  background: rgb(28,41,55);
  /* background: linear-gradient(180deg, rgba(28,41,55,1) 0%, rgba(24,24,25,1) 100%); */
  background: linear-gradient(135deg, rgba(28, 41, 55,1) 0%, rgba(15, 23, 31,1) 100%);

  /*border-top-right-radius: 50px;*/
  /*border-top-left-radius: 50px;*/
}
.work-container{
  background-color: #252734 !important;
  background: #252734 !important;
  height:  100%;
}
.contact-container{
  background-color: #1d212d !important;
  background: #1d212d !important;
  height:  100%;
}

.footer-div{
  background-color: #0f141d !important;
}
.container-hr{
  border-top:  1px solid #454755;
}
.dev-nav-bg-div{
  position: relative;
}
.contact-title{
  line-height: 1.4;
}
.img-scale-animate {
  overflow: hidden;
}
.img-overlay {
  position: relative;
  border-radius: 6px;
}
.img-overlay::after {
  background: linear-gradient(0deg, rgba(33, 37, 41,.4), rgba(33, 37, 41,.3));
  background-position: center;
   background-attachment: relative;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.img-overlay::hover {
  background: linear-gradient(135deg, rgba(54, 153, 255,.9), rgba(89, 170, 254,.8));
  background-position: center;
   background-attachment: relative;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}
.navbar-custom .topbar-menu .nav-link {
  padding: 0;
  color: #98a6ad;
  min-width: 32px;
  display: block;
  text-align: center;
  margin: 0 0;
  position: relative;
}
.position-relative{
  position:relative;
}
.hr{
  border: 0;
  border-top: 1.5px dashed rgba(213, 213, 213, 0.15);
}
.card-title{
  letter-spacing: .02em;
  font-size: 1rem;
  margin-top: 0;
}
.card {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom: 24px;
}
.card-anchor {
	border: none;
	margin-bottom: 24px;
  background: linear-gradient(135deg, #1e293b, #0f172a);  
	border-radius: 16px;
	color: #fff;
	/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	/* gap: 12px; */
}

.card-fees {
  border: none;
  box-shadow: 10px 10px 5px 1px rgba(1,6,14,0.2);
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(30,58,138,0.05));
  margin-bottom: 24px;
  border-radius: .3em;
}
.menu.active {
  background: #111c25 !important;
}
.menu.active .menu_container a, .menu_close{
  color: #fff ;
}
.btn-dev{
  background-color: #28445d;
  color: #fff;
  border-color: #28445d;
}
.btn-dev:hover{
  background-color: #21374a;
  color: #fff;
  border-color: #21374a;
}
.dark-theme{
  background: #0f172a;
  /* background: linear-gradient(160deg, #0f172a, #1e293b, #0a0f1a); */
  background: linear-gradient(135deg, #19212c 0%, #0d1117 100%);

  background-size: 400% 400%; 
  color: #dce2f0 !important;
  background-size: 400% 400%; 
  animation: gradientFlow 18s ease infinite;
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.dark-theme .form-control{
  border-color: rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  color: #cccfd8;
}
.dark-theme .form-control:active{
  border-color: rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 255, 255, 0.07);
}
.dark-theme .form-control:focus{
  border-color: rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 255, 255, 0.07);
}
a:hover {
  color: rgb(88, 166, 255);
}
code {
    background-color: #161B22;
    color: #7EE787;
    padding: 4px 5px 5px 5px;
    white-space: nowrap;
}

pre {
  background-color: #161B22;
  padding: 5px;
  border-radius: 0.3em;
  font-size: .8em;
}

pre code {
  white-space: inherit;
}
.bg-pink{
  background-color:#E17B72;
}
.bg-purple{
  background-color:#7d69cb;
}
.bg-teal{
  background-color:#1c90b4;
}
.bg-green{
  background-color:#59a210;
}
.bg-blue{
  background-color:#A5D6FF;
}
.text-pink{
  color:#E17B72;
}
.text-purple{
  color:#7d69cb;
}
.text-teal{
  color:#1c90b4;
}
.text-green{
  color:#59a210;
}
.text-blue{
  color:#A5D6FF;
}
.float-left{
  float: left;
}
.float-right{
  float: right;
}
.sponsor-link{
  color: #3699ff !important;
}