html {
  height: auto;
}

/* Scrollbar Styling */

::-webkit-scrollbar {
  width: 0px !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

.swiper-pagination-bullet {
  width: 0.375rem !important;
  height: 0.375rem !important;
  border-top-left-radius: 1.25rem !important;
  border-top-right-radius: 1.25rem !important;
  border-bottom-left-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
  background-color: var(--white) !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 2.5rem !important;
}

.swiper-slide.is--pimg {
  height: auto !important;
}

.line {
  overflow: hidden;
}

[data-scale-image-wrapper="true"] {
  overflow: hidden;
}

[data-parallax-element-wrapper="true"] {
  overflow: visible;
}

.loader {
  display: block;
}

[transform="matrix(1.2172131538391113,0,0,1.2172131538391113,879.6199951171875,496.75933837890625)"] {
  display: none !important;
}


@media only screen and (max-width: 991px) {
  .swiper-cover.is--review .swiper {
    overflow: visible;
  }
}

.form-wrapper.is--multistep {
  overflow: visible !important;
}

.progress-indicator {
  width: 100% !important;
}

.swiper-wrapper.is--reviews {
  padding: 0.5rem;
}

.swiper-slide.is--review {
  transition: all 275ms ease;
  scale: 0.75;
  opacity: 1;
}

.swiper-slide.is--review.is--active {
  scale: 1;
  opacity: 1;
}

@media only screen and (max-width: 600px) {
  .swiper-slide.is--review {
    scale: 1;
    opacity: 1;
  }
  .swiper-slide.is--vitm:nth-child(1) .card-content.is--vitm {
    margin-left: unset !important;
  }
}

/* New Page -- Track Sldier Styling*/

.swiper-cover.is--track .swiper {
  overflow: unset !important;
}

/* Wistia --Thumbnail Video */

.w-vulcan-v2-button:nth-child(7) {
  margin-top: 2rem;
}

/*------------------------
// ------ Cursor ------- //
------------------------- */

.mf-cursor:before {
  mix-blend-mode: difference;
  align-items: center;
  display: flex;
  background-color: transparent !important;
  justify-content: center;
  pointer-events: none;
  -webkit-transition: outline 0.15s ease-in-out !important;
  -moz-transition: outline 0.15s ease-in-out !important;
  -o-transition: outline 0.15s ease-in-out !important;
  transition: outline 0.15s ease-in-out !important;
  position: fixed;
  transform: translate(-50%, -50%);
  visibility: visible;
  z-index: 9999;
}

.mf-cursor {
  display: flex;
  mix-blend-mode: difference;
  border-radius: 50%;
  -webkit-transition: outline 0.15s ease-in-out !important;
  -moz-transition: outline 0.15s ease-in-out !important;
  -o-transition: outline 0.15s ease-in-out !important;
  transition: outline 0.15s ease-in-out !important;
  justify-content: center !important;
  align-items: center !important;
  outline: 0.06rem solid white;
  outline-offset: 0rem;
  height: 1rem;
  width: 1rem;
  top: -0.5rem !important;
  left: -0.5rem !important;
}

/* .mf-cursor:before {
  top: 0px !important;
  left: 0px !important;
  width: 3.125rem !important;
  height: 3.125rem !important;
  background: transparent !important;
} */

.-icon {
  display: flex !important;
}

.mf-cursor.-hidden::before {
  display: none !important;
}

.mf-cursor.-hidden {
  display: none !important;
}

.mf-cursor.-pointer::before {
  transform: scale(1.5) !important;
}

.mf-cursor.-pointer {
  /* outline-color: #555;
  outline-offset: 111px;
  outline-style: solid;
  outline-width: 0.5rem; */
  outline: 0.25rem solid white !important;
  outline-offset: 0rem;
}

.mf-cursor.-icon {
  display: flex !important;
  mix-blend-mode: unset !important;
  border-radius: 100% !important;
  background-color: hsla(0, 0%, 0%, 0.4) !important;
  backdrop-filter: blur(5rem) !important;
  width: 3.125rem !important;
  height: 3.125rem !important;
  top: -1.75rem !important;
  left: -1.75rem !important;
  outline: 0.1rem solid transparent !important;
  border-width: 0px !important;
}

.mf-cursor.-icon::before {
  mix-blend-mode: unset !important;
  display: none !important;
  border-radius: 100% !important;
  background-color: hsla(0, 0%, 0%, 0.4) !important;
  backdrop-filter: blur(5rem) !important;
  width: 3.125rem !important;
  height: 3.125rem !important;
  top: -1.75rem !important;
  left: -1.75rem !important;
  outline: 0.1rem solid transparent !important;
  border-width: 0px !important;
}

.my-spritesheet.-arrow-left {
  display: flex !important;
  background: transparent
    url("../images/arrow-left.svg")
    no-repeat center / cover;
  background-size: 1.875rem 1.875rem;
}

.my-spritesheet.-arrow-right {
  display: flex !important;
  background: transparent
    url("../images/arrow-right.svg")
    no-repeat center;
  background-size: 1.875rem 1.875rem;
}

.mf-cursor-text {
  position: static !important;
}

/* Wistia Logo Remove */

[data-handle="wistiaLogo"] {
  display: none !important;
}

.w-bottom-bar {
  display: none !important;
}

.w-webflow-badge {
  display: none !important;
}

/*------------------------
// ------ Date Picker ------- //
------------------------- */

/* You can apply your own color! 
    --main-light-color is the light grey, 
    --main-dark-color is the text
    --main-active-color is the highlight
    you can just add like red, or blue or any helx you like! */

/* .datepicker-top-left::before,
.datepicker-top-right::before {
  display: none !important;
}

:root {
  --main-light-color: #000d19;
  --main-dark-color: #000d19;
  --main-active-color: white;
}

.datepicker-container {
  border: 1px solid #000d19;
  position: absolute;
  width: 210px !important;
  max-width: 23rem !important;
  top: 120%;
}

.datepicker-dropdown {
  border-radius: 0px !important;
  border: 0 !important;
  box-sizing: border-box;
}

.datepicker-panel > ul[data-view="week"] > li {
  background-color: var(--main-light-color);
  color: var(--main-dark-color);
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
  height: initial;
  padding-top: 3px;
  margin-bottom: 0px;
}

.datepicker-panel > ul[data-view="week"] > li:hover {
  background-color: var(--main-light-color);
  color: var(--main-dark-color);
  border-radius: 0px;
}

.datepicker-panel > ul[data-view="week"] li:first-child {
  border-radius: 20px 0 0 20px;
}

.datepicker-panel > ul[data-view="week"] li:last-child {
  border-radius: 0 20px 20px 0;
}

.datepicker-top-left::before,
.datepicker-top-left::after {
  display: none;
}

[data-view="day picked"] {
  color: #fff !important;
}

[data-view="month picked"] {
  color: #fff !important;
}

.highlighted {
  color: #000d19 !important;
}

.datepicker-panel > ul > li.highlighted {
  background-color: rgba(0, 13, 25, 0.1) !important;
  border-radius: 4px;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
  background: var(--main-light-color);
  border-radius: 4px;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.datepicker-panel > ul > li:hover {
  background-color: rgba(0, 13, 25, 0.2) !important;
}

li[data-view="month current"],
li[data-view="year current"] {
  text-align: left;
  color: var(--main-dark-color);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  padding-left: 15px;
  border-radius: 10px;
}

.datepicker-panel > ul > li:hover {
  border-radius: 4px !important;
}

.datepicker-panel > ul > li:hover {
  background: var(--main-light-color);
  border-radius: 10px;
}

li[data-view="month current"],
li[data-view="year current"],
li[data-view="years current"] {
  margin-bottom: 4px !important;
}

@media screen and (min-width: 768px) {
  .datepicker-dropdown {
    width: 364px;
    padding: 12px;
  }

  .datepicker-panel > ul > li {
    width: 48px;
    height: 48px;
    padding-top: 10px;
  }

  li[data-view="month next"],
  li[data-view="year next"],
  li[data-view="years next"] {
    position: absolute;
    right: 18px;
  }

  li[data-view="month prev"],
  li[data-view="year prev"],
  li[data-view="years prev"] {
    position: absolute;
    right: 66px;
  }

  ul[data-view="months"] li,
  ul[data-view="years"] li {
    padding-top: 0px;
    width: 57px !important;
  }
}

.w-input[disabled]:not(.w-input-disabled),
.w-select[disabled]:not(.w-input-disabled),
.w-input[readonly],
.w-select[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input,
fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: transparent !important;
}

@media screen and (max-width: 768px) {
  .datepicker-panel {
    transform: scale(0.97);
  }
  .datepicker-container {
    border: 1px solid #000d19;
    position: absolute;
    width: 81.5vw !important;
    top: 120%;
  }
} */

.easepick-wrapper {
  z-index: 10000;
}

.w-input[readonly] {
  background-color: transparent !important;
}

[data-check="out"] {
  cursor: not-allowed !important;
}

/*------------------------
// Mea Suna HomePage Video ------ Sound Button Controller ------- //
------------------------- */

.is--vcontoller {
  &.is--active,
  &.is--active {
    .icon.is--sound {
      opacity: 0% !important;
    }
    .icon.is--sound.v2 {
      opacity: 100% !important;
    }
  }
}

.trigger-name {
  opacity: 100% !important;
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: ease;
  text-decoration: underline;
}
.trigger-name.is--v2 {
  opacity: 0% !important;
  pointer-events: none;
}

.faq-trigger.is--fstep {
  &.is-active-accordion,
  &.is-active-accordion {
    .trigger-name {
      opacity: 0% !important;
      pointer-events: none !important;
    }
    .trigger-name.is--v2 {
      opacity: 100% !important;
      pointer-events: auto !important;
    }
  }
}

.swiper-slide.is--gthumb {
  &.is--active {
    .gallery-thumb.is--exist {
      padding: 0.5rem 1rem;
      border-color: var(--white);
    }
  }
}

.hide-on-live {
  display: none !important;
}

.disabled {
  pointer-events: none !important;
  opacity: 0.4 !important;
}

.multistep-content {
  width: 100% !important;
}