@media (min-width: 1200px) {
  .container {
    max-width: 1320px;
  }
}

@media all and (min-width: 992px) {
  body {
    font-size: 1em;
  }
  .navbar-brand.logo img {
    height: 100px !important;
  }
  .dropdown-item {
    padding: 1rem 1.5rem;
  }
  .nav-container {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    /* -webkit-box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.09); */
    border-radius: 0px;
    border: none;
    background-color: #f5f5f5;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu:not(.megamenu)::before {
    top: -15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    content: "";
    background: transparent;
    -webkit-transition: width 0.5s ease, background-color 0.5s ease;
    transition: width 0.5s ease, background-color 0.5s ease;
    position: absolute;
    left: 5%;
    filter: drop-shadow(0px -1px 8px rgba(0, 0, 0, 0.03));
  }
  .btn-main {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .btn-main:hover {
    color: #fff;
    -webkit-box-shadow: 0px 12px 12px -10px rgb(0, 130, 70, 0.5);
    -moz-box-shadow: 0px 12px 12px -10px rgb(0, 130, 70, 0.5);
    box-shadow: 0px 12px 12px -10px rgb(0, 130, 70, 0.5);
  }
  @media only screen and (max-width: 768px) {
    .get-in-touch-btn.btn-main {
      display: none;
    }
  }
  @media only screen and (max-width: 768px) {
    .bsa-logo {
      margin-right: 39px;
      height: 51px;
    }
    .bsa-logo img {
      height: 45px;
    }
    .category-bg {
      height: 227px;
    }
    .category-bg img {
      height: 227px;
      object-fit: cover;
    }
  }
  /*elements*/
  .about-tile {
    position: relative;
    overflow: hidden;
  }
  /* .tile-data {
    background-color: rgba(255, 255, 255, 0.98);
    position: absolute;
    top: -260px;
    height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none;
    
    scrollbar-width: none;
    
    -webkit-transition: all 0.7s cubic-bezier(0, 1.03, .92, 1);
    -moz-transition: all 0.7s cubic-bezier(0, 1.03, .92, 1);
    -o-transition: all 0.7s cubic-bezier(0, 1.03, .92, 1);
    transition: all 0.7s cubic-bezier(0, 1.03, .92, 1);
  } */
  .tile-data::-webkit-scrollbar {
    display: none;
  }
  .about-tile:hover .tile-data {
    top: 0;
  }
  .category-tabs {
    max-width: max-content;
    margin-left: auto;
  }
  .category-tabs ul li {
    margin-right: 15px;
  }
  .blog-image {
    height: 15em;
  }
  .blog-small-tiles .blog-data p {
    display: none;
  }
  .blog-small-tiles .blog-image {
    height: 145px;
  }
  .blog-small-tiles .blog-data {
    padding-bottom: 10px;
  }
  .find-right-product {
    background-size: contain !important;
  }
  .btn-outline,
  .btn-outline-pink {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .btn-outline:hover {
    background-color: #fff;
    color: var(--dark-pink);
  }
  .btn-outline-pink:hover {
    background-color: var(--dark-pink);
    border: 2px solid var(--dark-pink);
    color: var(--light);
    text-decoration: none;
  }
  .btn-outline-pink.disabled:hover {
    background-color: transparent;
    border: 2px solid var(--light-gray);
    color: var(--light-gray);
  }
  .btn-outline-pink:hover svg {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(298deg)
      brightness(302%) contrast(102%);
  }
  .btn-outline:hover svg {
    filter: invert(0.34) sepia(1) saturate(20) hue-rotate(298.8deg)
      brightness(0.5);
  }
  .social-icons a svg {
    transform: scale(1.5);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .social-icons a:hover svg {
    transform: scale(1.8);
  }
  .category-bg {
    background: rgb(163, 216, 109);
    background: -moz-linear-gradient(90deg, rgba(0 104 47) 0%, #578a08 100%);
    background: -webkit-linear-gradient(90deg, rgba(0 104 47) 0%, #578a08 100%);
    background: linear-gradient(90deg, rgba(0 104 47) 0%, #578a08 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#a3d86d", endColorstr="#6ba431", GradientType=1);
  }
  .category-bg img {
    -webkit-mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) 95%
    );
    mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) 95%
    );
  }
  .category-bg .category-img {
    -webkit-mask-image: linear-gradient(
      268deg,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) 95%
    ) !important;
    mask-image: linear-gradient(
      268deg,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) 95%
    ) !important;
  }
  .category-wrapper {
    background: transparent !important;
  }
  /*
.slider-products .swiper-slide{
  max-width: 230px !important;
}*/
  .slider-products {
    overflow: visible;
    padding-left: 15px;
    padding-right: 15px;
  }
  .products-container {
    overflow: hidden;
    padding-top: 65px;
  }
  .dark-triangle {
    width: 171px !important;
    height: 429px !important;
  }
  .dark-triangle-right {
    width: 171px !important;
    height: 429px !important;
  }
  /* .swiper-button-next.product-nav-next,
  .swiper-button-prev.product-nav-prev,
  .swiper-button-next.blogs-nav-next,
  .swiper-button-prev.blogs-nav-prev {
    top: -40px;
    color: #fff;
    background-color: var(--dark-pink);
    height: 40px;
    padding-left: 17px;
    border-radius: 50%;
    padding-top: 6px;
    width: 40px;
  } */
  .swiper-button-next.product-nav-next::after,
  .swiper-button-prev.product-nav-prev::after,
  .swiper-button-next.blogs-nav-next::after,
  .swiper-button-prev.blogs-nav-prev::after {
    font-size: 15px;
  }
  .swiper-button-next.product-nav-next,
  .swiper-button-next.blogs-nav-next {
    right: 10px;
  }
  .swiper-button-prev.product-nav-prev,
  .swiper-button-prev.blogs-nav-prev {
    right: 70px;
    left: auto;
  }
  .product-wrapper {
    position: relative;
    padding-bottom: 10px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .buy-btn {
    position: absolute;
    opacity: 0;
    bottom: -30px;
    left: 0;
    margin-left: auto;
    right: 0;
    margin-right: auto;
    width: 165px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .slider-products .swiper-slide,
  .product-container .product-wrapper-single {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .slider-products .swiper-slide:hover,
  .product-container .product-wrapper-single:hover {
    transform: scale(1.05);
  }
  .slider-products .swiper-slide:hover .buy-btn,
  .product-container .product-wrapper-single:hover .buy-btn {
    opacity: 1;
    bottom: -20px;
  }
  .know-your-fix a.hair-fix,
  .know-your-fix a.dental-fix,
  .know-your-fix a.skin-fix {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .know-your-fix a.hair-fix:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .know-your-fix a.dental-fix:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .know-your-fix a.skin-fix:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .modal-dialog {
    max-width: 660px;
    margin-top: 18vh;
  }
  .modal a.problem-wrapper {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  .modal a.problem-wrapper:hover {
    text-decoration: none;
    -webkit-box-shadow: 3px 3px 24px 0px rgba(214, 69, 88, 0.5);
    -moz-box-shadow: 3px 3px 24px 0px rgba(214, 69, 88, 0.5);
    box-shadow: 3px 3px 24px 0px rgba(214, 69, 88, 0.5);
  }
  a.blog-tile {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  a.blog-tile:hover {
    text-decoration: none;
    -webkit-box-shadow: 0px 3px 24px 0px rgba(108, 108, 108, 0.4);
    -moz-box-shadow: 0px 3px 24px 0px rgba(108, 108, 108, 0.4);
    box-shadow: 0px 3px 24px 0px rgba(108, 108, 108, 0.4);
  }
  a.blog-tile {
    transform: scale(0.9);
  }
  a.blog-tile:hover {
    transform: scale(1);
  }
  a.megamenu-item {
    border-radius: 10px;
    min-height: 160px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fff;
  }
  a.megamenu-item:hover {
    text-decoration: none;
    background-color: var(--light-green);
    /*
  -webkit-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.1);
  */
  }
  a.megamenu-item:hover .megamenu-content p,
  a.megamenu-item:hover .megamenu-content .section-title {
    color: var(--light);
  }
  @media all and (min-width: 991px) {
    .dropdown.has-megamenu:after {
      content: "";
      top: 150px;
      right: 0;
      bottom: 0;
      left: 0;
      transition: opacity 0.15s ease-in-out;
      opacity: 0;
      visibility: hidden;
      background-color: rgba(0, 0, 0, 0.7);
      pointer-events: none;
    }
    .dropdown.show .nav-link {
      position: relative;
      z-index: 12;
    }
    .dropdown.show:after {
      z-index: 10;
      opacity: 1;
      visibility: visible;
      position: fixed;
    }
  }
  .timeline-grass {
    left: 23vw;
  }
  .timeline-title {
    float: right;
    margin-right: 0;
  }
  .timeline-wrapper,
  .timeline-header {
    padding-left: 25vw;
    padding-right: 25vw;
  }
  .timeline-wrapper {
    background: rgb(214, 69, 88),
      url("../image/47416732f6.jpg") no-repeat center center/cover fixed;
    background: -moz-linear-gradient(
        180deg,
        rgba(163, 216, 109, 58%) 0%,
        rgba(0 70 31) 100%
      ),
      url("../image/47416732f6.jpg") no-repeat center center/cover fixed;
    background: -webkit-linear-gradient(
        180deg,
        rgba(163, 216, 109, 58%) 0%,
        rgba(0 70 31) 100%
      ),
      url("../image/47416732f6.jpg") no-repeat center center/cover fixed;
    background: linear-gradient(
        180deg,
        rgba(163, 216, 109, 58%) 0%,
        rgba(163, 216, 109, 58%) 100%
      ),
      url("../image/47416732f6.jpg") no-repeat center center/cover fixed;
  }
  .timeline-header {
    position: relative;
    overflow: visible;
  }
  .timeline-tree {
    left: calc(25vw - 80px);
    bottom: 5px;
    position: absolute;
    float: left;
    width: auto;
    height: auto;
  }
  .timeline-event {
    padding-top: 10%;
    padding-bottom: 2%;
  }
}

/*
.hero-slider video{
  height: 100%;
  width: auto;
}*/

.hero-slider {
  max-height: 750px;
}

a.blog-tile.pink-shadow:hover {
  box-shadow: 0px 3px 48px 0px rgb(255 103 103 / 25%);
  -webkit-box-shadow: 0px 3px 48px 0px rgb(255 103 103 / 25%);
  -moz-box-shadow: 0px 3px 48px 0px rgb(255 103 103 / 25%);
}

.slider-product-thumb .swiper-slide:hover {
  cursor: pointer;
}

.category-bg,
.bg-about {
  background: rgb(163, 216, 109);
  background: -moz-linear-gradient(
    90deg,
    rgba(0 104 47) 0%,
    rgba(0 70 31) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(0 104 47) 0%,
    rgba(0 70 31) 100%
  );
  background: linear-gradient(90deg, #00682f 0%, #578a08 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#00682f", endColorstr="#00461f", GradientType=1);
}

/*
#################
DARK MODE STYLES
#################
*/

body.dark-mode .dropdown-menu {
  background: #2b2b2b;
}

body.dark-mode .dropdown-item {
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .dropdown-menu,
body.dark-mode a.blog-tile:hover {
  box-shadow: unset;
}

body.dark-mode .dropdown-item:focus,
body.dark-mode .dropdown-item:hover,
body.dark-mode a.megamenu-item:hover {
  background: #3b3b3b;
}

body.dark-mode a.blog-tile:hover {
  background: #1d1d1d;
}

body.dark-mode
  .navbar-expand-lg
  .navbar-nav
  .dropdown-menu:not(.megamenu)::before,
body.dark-mode .dropdown-menu.megamenu::before {
  border-bottom-color: #2b2b2b;
}

body.dark-mode .find-right-product-mega-menu {
  filter: grayscale(20%);
}

body.dark-mode .timeline-header {
  filter: grayscale(50%);
}

body.dark-mode .top-bar {
  background: #47731a;
}

body.dark-mode .category-bg {
  background: rgba(0 104 47);
  background: -moz-linear-gradient(90deg, #232323 0%, #232323 100%);
  background: -webkit-linear-gradient(90deg, #232323 0%, #232323 100%);
  background: linear-gradient(90deg, #232323 0%, #232323 100%);
}