/* ------------------------- Variables -------------------------------------------------- */

:root {
  /* CSS Animations */
  --animation-default-fast: 0.3s cubic-bezier(0.625, 0.05, 0, 1);
  --animation-default: 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  --animation-default-slow: 0.9s cubic-bezier(0.625, 0.05, 0, 1);
  --animation-grow: 0.45s cubic-bezier(0.35, 1.5, 0.6, 1);
  --animation-grow-slow: 0.6s cubic-bezier(0.35, 1.2, 0.65, 1);
  --animation-ease: 0.2s ease-in-out;
}

/* ------------------------- Theme -------------------------------------------------- */

:root {

  /* Colors (not changing with Dark/Light Theme) */
  --color-ignore-black: #000;
  --color-ignore-white: #FFF;
  --color-ignore-dark: #121515;
  --color-ignore-dark-tint: #1D222C;
  --color-ignore-dark-tint-hover: #121515;
  --color-ignore-light: #EDEFF2;
  --color-ignore-light-tint: #F6F7F8;
  --color-ignore-light-tint-hover: #EDEFF2;

  /* Colors Theme */
  --color-black: var(--color-ignore-black);
  --color-white: var(--color-ignore-white);
  --color-dark: var(--color-ignore-dark);
  --color-dark-tint: var(--color-ignore-dark-tint);
  --color-dark-tint-hover: var(--color-ignore-dark-tint-hover);
  --color-light: var(--color-ignore-light);
  --color-light-tint: var(--color-ignore-light-tint);
  --color-light-tint-hover: var(--color-ignore-light-tint-hover);
}

/* Theme Dark */
[data-theme="dark"] {
  --color-black: var(--color-ignore-white);
  --color-white: var(--color-ignore-black);
  --color-dark: var(--color-ignore-light);
  --color-dark-tint: var(--color-ignore-light-tint);
  --color-dark-tint-hover: var(--color-ignore-light-tint-hover);
  --color-light: var(--color-ignore-dark);
  --color-light-tint: var(--color-ignore-dark-tint);
  --color-light-tint-hover: var(--color-ignore-dark-tint-hover);
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16;
  /* body font-size in design - no px */
  --size-container-ideal: 1440;
  /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1600px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --section-padding: 8em;
  --container-padding: 3em;
  --gap: 1.5em;
}

[data-animate="heading"]>div {
  padding-bottom: 0.0625em;
  margin-bottom: -0.0625em;
}

.home-hero_title>div,
.reviews-hero_title>div {
  padding-bottom: 0.0625em;
  margin-bottom: -0.0625em;
}

.container:has(.swiper-group) {
  padding-right: 0;
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
    --section-padding: 7em;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
    --section-padding: 5em;
    --container-padding: 1em;
    --gap: 1em;
  }

  [data-animate="heading"]>div {
    padding-bottom: 0.02em;
    margin-bottom: -0.02em;
  }

  .home-hero_title>div .reviews-hero_title>div {
    padding-bottom: 0.02em;
    margin-bottom: -0.02em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Chrome, Safari, Opera */
body {
  -ms-overflow-style: none;
}

/* IE & Edge */
html {
  scrollbar-width: none;
}

/* Firefox */

/* ------------------------- Body -------------------------------------------------- */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

li,
ul,
figure {
  padding: 0;
  margin: 0;
  list-style: none;
}

html {
  scroll-behavior: initial;
}

body {
  -webkit-font-smoothing: antialiased;
  transition: color var(--animation-ease), background-color var(--animation-ease);
}

html,
body {
  width: 100%;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

section {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-dark);
  color: var(--color-light);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-dark);
  color: var(--color-light);
  text-shadow: none;
}

/* General */
canvas,
img,
video,
picture,
figure {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  display: block;
}

img {
  width: 100%;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
}

audio,
canvas,
iframe,
img,
svg,
video,
picture,
figure {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
ul,
ol,
span,
strong,
em,
figcaption {
  padding: 0;
  margin: 0;
}

video {
  padding: 0 !important;
  outline: 0 solid transparent !important;
  box-shadow: none !important;
}

/* ------------------------- Webflow Designer -------------------------------------------------- */

:is(.wf-design-mode, .w-editor) .swiper-wrapper {
  overflow: scroll;
}

:is(.wf-design-mode, .w-editor) .page_transition_wrap {
  display: none;
}

:is(.wf-design-mode, .w-editor) .page_transition_wrap {
  display: none;
}

:is(.wf-design-mode, .w-editor) .bunny-lightbox {
  display: none;
}

/* ------------------------- Features Swiper -------------------------------------------------- */
body {
  --swiper-pagination-color: currentColor;
  --swiper-pagination-bottom: auto;
  --swiper-pagination-bullet-size: 0.5em;
  --swiper-pagination-bullet-inactive-color: currentColor;
  --swiper-pagination-bullet-inactive-opacity: 0.15;
  --swiper-pagination-bullet-horizontal-gap: 0.25em;
  --swiper-wrapper-transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
}

.swiper-slide {
  padding-right: var(--gap);
}

.swiper-slide:last-of-type {
  margin-right: calc(-1 * var(--gap));
}

.swiper-navigation__button {
  transition: opacity 0.2s ease;
}

.swiper-button-disabled {
  opacity: 0.25;
  pointer-events: none;
}

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {

  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

/*-------- Buttons ---------*/
.btn-magnetic__click .btn-magnetic__text-p {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translateY(0%) rotate(0.001deg);
}

.btn-magnetic__click:hover .btn-magnetic__text-p {
  transform: translateY(-100%) rotate(0.001deg);
}

/*-------- Phone accordion ---------*/
/* Max width of expanded pill/content */
[data-feature-pills-init] {
  --content-item-expanded: 25em;
}

@media screen and (max-width: 991px) {
  [data-feature-pills-init] {
    --content-item-expanded: calc(50% - 0.5em);
  }
}

@media screen and (max-width: 767px) {
  [data-feature-pills-init] {
    --content-item-expanded: 100%;
  }
}

/* Default state + transition */
[data-feature-pills-button] {
  opacity: 1;
  transition: opacity 400ms ease-in-out 300ms;
}

[data-feature-pills-inner] {
  opacity: 0;
  transition: opacity 300ms ease-in-out 0ms;
}

[data-feature-pills-visual] {
  opacity: 0;
  transition: opacity 350ms ease-in-out;
}

[data-feature-pills-cover] {
  opacity: 1;
  transition: opacity 350ms ease-in-out;
}

/* Active Pill */
[data-feature-pills-item][data-active="true"] [data-feature-pills-button] {
  opacity: 0;
  transition: opacity 50ms ease-in-out 0ms;
}

[data-feature-pills-item][data-active="true"] [data-feature-pills-inner] {
  opacity: 1;
}

/* Active Visual */
[data-feature-pills-visual][data-active="true"] {
  opacity: 1;
}

[data-feature-pills-cover][data-active="false"] {
  opacity: 0;
}

/* Close button */
[data-feature-pills-close] {
  transform: scale(0) rotate(135deg);
  opacity: 0;
  pointer-events: none;
  transition: all 500ms cubic-bezier(.7, 0, .3, 1);
}

[data-feature-pills-active="true"] [data-feature-pills-close] {
  transform: scale(1) rotate(45deg);
  opacity: 1;
  pointer-events: auto;
}

/* 'edit' mode where buttons are hidden and inner content is shown */
[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-collection] {
  overflow: auto;
  justify-content: start;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-button] {
  display: none;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-content] {
  position: relative;
  pointer-events: auto;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-inner] {
  opacity: 1;
  transform: translate(0px, 0em);
}

/*-------- App features ---------*/

:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__h,
[data-typo-scroll-item="active"] .typo-scroll__h {
  z-index: 2;
  color: var(--color-black);
  /*mix-blend-mode: difference;*/
}

.typo-scroll__link:hover .typo-scroll__h {
  opacity: 1;
}

.typo-scroll__link:not(:hover) .typo-scroll__h {
  opacity: .25;
  transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.typo-scroll__media {
  transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

.typo-scroll__img {
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(.9);
}

:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__media,
[data-typo-scroll-item="active"] .typo-scroll__media {
  opacity: 1;
}

:is(.wf-design-mode, .wf-editor) [data-typo-scroll-item]:hover .typo-scroll__img,
[data-typo-scroll-item="active"] .typo-scroll__img {
  transform: scale(1);
}

@media (hover: none) and (pointer: coarse) {
  [data-typo-scroll-item="active"] .typo-scroll__media {
    pointer-events: all;
  }
}

/*-------- Modal ---------*/

[data-modal-group-status] {
  transition: all 0.2s linear;
}

[data-modal-group-status="active"] {
  opacity: 1;
  visibility: visible;
}

[data-modal-name][data-modal-status="active"] {
  display: flex;
}

/*-------- About Rotating Words ---------*/

[data-rotating-words] {
  display: inline-block;
  position: relative;
}

.rotating-text__inner {
  display: inline-block;
}

.rotating-text__word {
  display: block;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
}

.rotating-line {
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  white-space: nowrap;
}

.rotating-line-mask {
  overflow-x: visible !important;
  overflow-y: clip !important;
}

/*-------- Form Validation ---------*/

/* Field: Error */
[data-validate].is--error input,
[data-validate].is--error textarea,
[data-validate].is--error select {
  border-color: #ff3939;
}

[data-validate].is--error .form-field-icon.is--error,
[data-validate].is--error .radiocheck-field-icon.is--error {
  opacity: 1;
}

/* Field: Success */
[data-validate].is--success .form-field-icon.is--success,
[data-validate].is--success .radiocheck-field-icon.is--success {
  opacity: 1;
}

/* Field: Custom Radio or Checkbox */
[data-form-validate] .radiocheck-field input:focus-visible~.radiocheck-custom {
  background-color: #FFF;
  color: #E2E1DF;
}

[data-form-validate] .radiocheck-field input:focus-visible:checked~.radiocheck-custom,
[data-form-validate] .radiocheck-field input:checked~.radiocheck-custom {
  background-color: #121515;
  color: #FFF;
}

[data-form-validate] .radiocheck-field .radiocheck-label.is--small {
  margin-top: 0.125em;
}

[data-validate].is--error .radiocheck-custom {
  border-color: #FF4C24;
}

[data-validate].is--error input:checked~.radiocheck-custom {
  border-color: #121515;
}

/* Field: Select */
[data-form-validate] select:has(option[value=""]:checked) {
  color: rgba(19, 19, 19, 0.3);
}

@media (min-width: 992px) {

  :is(.wf-design-mode, .wf-editor) .swiper.is--app .swiper-slide {
    transform: translateY(0%) rotateZ(0) scale(1);
  }

  :is(.wf-design-mode, .wf-editor) .swiper.is--app .swiper-slide .app-card_content {
    opacity: 1;
  }

  /*style slides only on live site*/
  .swiper.is--app .swiper-slide {
    transform: translateY(16%) rotateZ(0) scale(0.5);
    transition: transform .5s;
  }

  .swiper.is--app .swiper-slide .app-card_content {
    opacity: 0;
    transition: opacity .3s;
  }

  .swiper.is--app .swiper-slide.swiper-slide-active {
    transform: scale(1) translateY(0) rotate(0);
  }

  .swiper.is--app .swiper-slide.swiper-slide-active .app-card_content {
    opacity: 1;
  }

  .swiper.is--app .swiper-slide.swiper-slide-prev {
    transform: scale(.8) translateY(12%) rotate(-14deg);
  }

  .swiper.is--app .swiper-slide.swiper-slide-next {
    transform: scale(.8) translateY(12%) rotate(14deg);
  }
}

/*-------- HSL Lightbox ---------*/
[data-bunny-lightbox-status] .bunny-lightbox__calc {
  transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.3s linear, visibility 0.3s linear;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) rotate(0.001deg);
}

[data-bunny-lightbox-status="active"] .bunny-lightbox__calc {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0.001deg);
}

[data-bunny-lightbox-status] .bunny-lightbox__dark,
[data-bunny-lightbox-status] .bunny-lightbox__close {
  transition: opacity 0.3s linear, visibility 0.3s linear;
  opacity: 0;
  visibility: hidden;
}

[data-bunny-lightbox-status="active"] .bunny-lightbox__dark,
[data-bunny-lightbox-status="active"] .bunny-lightbox__close {
  opacity: 1;
  visibility: visible;
}

/* Animation */
[data-bunny-lightbox-init] :is(.bunny-lightbox-player__placeholder, .bunny-lightbox-player__dark, .bunny-lightbox-player__playpause, .bunny-lightbox-player__loading) {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

/* Placeholder */
[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__placeholder,
[data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__placeholder,
[data-bunny-lightbox-init][data-player-activated="true"][data-player-status="ready"] .bunny-lightbox-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Dark Overlay */
[data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__dark,
[data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__dark {
  opacity: 0.3;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__dark {
  opacity: 0;
}

/* Play/Pause */
[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__playpause,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__playpause {
  opacity: 0;
}

[data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__playpause {
  opacity: 1;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__play-svg,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__play-svg {
  display: none;
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__pause-svg,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__pause-svg {
  display: block;
}

/* Loading */
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__loading {
  opacity: 1;
  visibility: visible;
}

/* Interface */
.bunny-lightbox-player__interface {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__interface,
[data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__interface {
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__interface,
[data-bunny-lightbox-init][data-player-status="loading"][data-player-hover="active"] .bunny-lightbox-player__interface {
  opacity: 1;
  transform: translateY(0em) rotate(0.001deg);
}

/* Timeline */
[data-bunny-lightbox-init][data-player-status="idle"][data-player-activated="false"] .bunny-lightbox-player__timeline,
[data-bunny-lightbox-init][data-player-status="ready"][data-player-activated="false"] .bunny-lightbox-player__timeline {
  pointer-events: none;
}

/* Timeline Handle */
[data-bunny-lightbox-init] .bunny-lightbox-player__timeline-handle {
  transition: transform 0.15s ease-in-out;
}

[data-bunny-lightbox-init][data-timeline-drag="true"] .bunny-lightbox-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* Fullscreen */
[data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-shrink-svg {
  display: block;
}

[data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-scale-svg {
  display: none;
}

/* Mute */
[data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-mute-svg {
  display: block;
}

[data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-up-svg {
  display: none;
}

/* Cover Mode */
[data-bunny-lightbox-init][data-player-update-size="cover"] {
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

[data-bunny-lightbox-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-lightbox-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-lightbox-player__video {
  object-fit: cover;
}

/* Bento Quote Loop */
.bento_quote {
  animation: bentoQuoteFade 9s linear infinite;
}

.bento_quote:nth-child(1) {
  animation-delay: 0s;
}

.bento_quote:nth-child(2) {
  animation-delay: 3s;
}

.bento_quote:nth-child(3) {
  animation-delay: 6s;
}

@keyframes bentoQuoteFade {
  0% {
    opacity: 0;
  }

  4.44% {
    opacity: 1;
  }

  /* 0.4 / 9 */
  28.89% {
    opacity: 1;
  }

  /* 2.6 / 9 */
  33.33% {
    opacity: 0;
  }

  /* 3 / 9 */
  100% {
    opacity: 0;
  }
}
