@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

@media (min-width: 1024px) {
  html {
      font-size: 12.5px
  }
}

@media (min-width: 1280px) {
  html {
      font-size: 13.5px
  }
}

@media (min-width: 1440px) {
  html {
      font-size: 14.5px
  }
}

@media (min-width: 1728px) {
  html {
      font-size: 15.5px
  }
}

@media (min-width: 2048px) {
  html {
      font-size: 16px
  }
}

html {
  overscroll-behavior-y: contain
}

.lenis-stopped section {
  opacity: 0.2 !important;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(.7,0,.3,1);
}

section {
  transition: opacity 0.4s cubic-bezier(.7,0,.3,1);
  opacity: 1;
}

#loading-message {
  width: 100%;
  color: #000000;
  font-weight: 700;
  font-size:1.2rem;
  text-align: left;
  max-width: 1920px;
  margin: 0 auto;
  padding: 1.5rem;
  z-index: 100;
  position: fixed;
  -webkit-transform: translateX(-50%) translateY(60px);
  transform: translateX(-50%) translateY(60px);
  left: 50%;
  transition: opacity 0.3s;
  box-sizing: border-box;
}
#loading-message p {
  margin: 0;
}
#loading-message.hide {
  opacity: 0;
  pointer-events: none;
}
.ellipsis {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  animation: dot 1.3s infinite;
}

.ellipsis-1 {
  -webkit-animation-delay: 0.0s;
  animation-delay: 0.0s;
}
.ellipsis-2 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.ellipsis-3 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

@-webkit-keyframes dot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.0001% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.0001% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  background: -webkit-gradient(linear, left top, left bottom, from(#00d8ff), color-stop(75%, #fff));
  background: linear-gradient(#00d8ff, #00d8ff 75%, #fff 75%, #fff);
  margin: 0;
  padding: 0;
  font-family: Host Grotesk, serif;
  overflow-x: hidden;
  overscroll-behavior-y: contain
}

body section:not(.container):not(.beach) {
  overflow-x: hidden
}

@media (min-width: 1024px) {
  body {
      overflow: hidden
  }
}

body #progress-container {
  display: none
}

@media (min-width: 1024px) {
  body #progress-container {
      z-index: 9999;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      max-width: 1920px;
      height: 3.1rem;
      margin: 0 auto;
      padding: 1rem 1.5rem;
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translate(-50%)
  }
}

body #loading-bar {
  z-index: 9999;
  background-color: #f35200;
  border-radius: 4rem;
  width: 0%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow: hidden
}

body #wrapper {
  will-change: transform;
  overflow: hidden
}

body.fullscreen {
  background: #fff;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

body.fullscreen #header {
  display: none
}

body.fullscreen #location {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0
}

body.fullscreen #location h2,
body.fullscreen #location .locations {
  height: 0;
  margin: 0;
  display: none;
}

body.fullscreen #location .map-container {
  margin-top: 0
}

body.fullscreen #location .map-container .controls {
  width: 100%;
  z-index: 99999 !important;
  position: absolute !important;
  top: 0 !important
}

@media (max-width: 767px) {
  body.fullscreen #location .map-container .controls {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      gap: .8125rem
  }
}

body.fullscreen #location #closeFullscreen .text {
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 1.8rem
}

@media (min-width: 1024px) {
  body.fullscreen #location #closeFullscreen .text {
      font-size: 4rem
  }
  body.fullscreen #location #closeFullscreen:hover .text {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg)
  }
}

body.fullscreen #location #find-nearest {
  position: absolute;
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important
}

@media (min-width: 1024px) {
  body.fullscreen #location #find-nearest {
      position: relative
  }
}

body.fullscreen #location #map {
  z-index: 999;
  height: 100vh;
  top: 0;
  left: 0;
  border-radius: 0 !important;
  width: 100vw !important;
  position: fixed !important
}

body #location .mapboxgl-popup {
  z-index: 10000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1.875rem;
  max-width: none !important;
  max-width: initial !important
}

@media (max-width: 767px) {
  body.fullscreen #location .mapboxgl-popup {
      top: auto;
      top: initial;
      width: 100%;
      position: fixed !important;
      bottom: 1.375rem !important;
      left: 50% !important;
      -webkit-transform: translateX(-50%) !important;
      transform: translate(-50%) !important
  }
}

@media (min-width: 1024px) {
  body.fullscreen #location .mapboxgl-popup {
      width: 25rem
  }
}

body #location .mapboxgl-popup-content {
  background: none;
  border-radius: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

body #location .mapboxgl-popup-content .popup-content {
  background-color: #f35200;
  border-radius: 1.25rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.375rem;
  font-family: Host Grotesk, serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

body #location .mapboxgl-popup-content .popup-content h3 {
  text-transform: uppercase;
  letter-spacing: .05625rem;
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.375rem
}

body #location .mapboxgl-popup-content .popup-content p {
  letter-spacing: .028125rem;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.0625rem
}

body #location .mapboxgl-popup-content button {
  letter-spacing: .05625rem;
  cursor: pointer;
  background-color: #fff;
  border: 0;
  border-radius: 1.25rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 2.5rem;
  font-family: Host Grotesk, serif;
  font-size: .9375rem;
  -webkit-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

body #location .mapboxgl-popup-content button:hover {
  color: #f35200
}

body #location .mapboxgl-popup-tip {
  display: none
}

input,
textarea,
button {
  outline: none
}

.container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 1rem 1.5rem
}

@media (min-width: 1024px) {
  .container {
      max-width: clamp(1200px, 84.38vw, 1620px);
      padding: 8.44rem 1.875rem
  }
}

#sky {
  width: 100%;
  height: 200vh;
  position: relative;
  overflow: hidden
}

@media (min-width: 1024px) {
  #sky {
      height: 240vh
  }
}

#header {
  z-index: 82;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 4rem;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%)
}

@media (min-width: 1024px) {
  #header {
      opacity: 1;
      z-index: 2147483647;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
      -webkit-transform: translateY(20px);
      transform: translateY(20px)
  }
}

#header .container {
  z-index: 60;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (min-width: 1024px) {
  #header>.container {
      display: none
  }
}

#header h1 {
  letter-spacing: .03rem;
  margin: 0;
  font-size: 1.0625rem
}

@media (min-width: 1024px) {
  #header h1 {
      display: none
  }
}

#header .burger-menu {
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 1.625rem;
  height: 1.1875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (min-width: 1024px) {
  #header .burger-menu {
      display: none
  }
}

#header .line {
  background-color: #f35200;
  height: 5px;
  -webkit-transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, -webkit-transform .3s;
  transition: transform .3s, opacity .3s;
  transition: transform .3s, opacity .3s, -webkit-transform .3s
}

#header .line:first-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px
}

#header .line:nth-child(3) {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px
}

#header .burger-menu.active .line:first-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg)
}

#header .burger-menu.active .line:nth-child(2) {
  opacity: 0
}

#header .burger-menu.active .line:nth-child(3) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg)
}

#menu-overlay {
  opacity: 0;
  visibility: hidden;
  z-index: 40;
  background: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  -webkit-transition: opacity .75s, visibility .75s;
  transition: opacity .75s, visibility .75s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  left: 0
}

@media (min-width: 1024px) {
  #menu-overlay {
      opacity: 1;
      visibility: visible;
      background-color: rgba(0, 0, 0, 0);
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      height: auto;
      position: relative
  }
}

#menu-overlay .container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: calc(var(--header-height) + 2rem);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}
.header-title-right {
  display: none;
}

@media (min-width: 1024px) {
  #menu-overlay .container {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      gap: .78rem;
      max-width: 1920px;
      margin-top: auto;
      padding: 1.5rem
  }

  .header-title-right {
    display: block !important;
    margin-left: auto !important;
    font-size: 1.5rem !important;
    opacity: 0;
    visibility: hidden;
  }
}

#menu-overlay.active {
  opacity: 1;
  visibility: visible
}

.menu-item {
  opacity: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: .5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  font-size: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translateY(20px);
  transform: translateY(20px)
}

@media (min-width: 1024px) {
  .menu-item {
      opacity: 1;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: auto;
      height: 2rem;
      padding: 0;
      font-size: 1.2rem;
      line-height: 1rem;
      -webkit-transition: background-color .25s ease-in-out;
      transition: background-color .25s ease-in-out;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-transform: translateY(0);
      transform: translateY(0)
  }
  .menu-item:hover {
      background-color: #fff !important
  }
}

.menu-item:first-child {
  background-color: #f35200
}

.menu-item:nth-child(2) {
  background-color: #ff8d3e;
  border-radius: 1.66rem
}

.menu-item:nth-child(3) {
  background-color: #ffd337
}

.menu-item:nth-child(4) {
  background-color: #97a475;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0
}

.menu-item:nth-child(5) {
  background-color: #385840
}

@media (min-width: 1024px) {
  .menu-item:nth-child(5) {
      border-radius: 1.66rem
  }
}

.menu-item a {
  color: #000;
  width: 100%;
  padding: 4px 1.5rem;
  font-weight: 600;
  text-decoration: none
}

#menu-illustration {
  width: 100%;
  margin-top: auto
}

@media (min-width: 1024px) {
  #menu-illustration {
      display: none
  }
}

#logo {
  z-index: 10;
  -webkit-filter: brightness(0);
  filter: brightness(0);
  width: 8rem;
  position: absolute;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translate(-50%)
}

@media (min-width: 1024px) {
  #logo {
      left: auto;
      right: 0;
      top: 3rem;
      width: 12rem
  }
}

#mosquito {
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  width: 76.8%;
  position: absolute;
  top: 70vw;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

@media (min-width: 1024px) {
  #mosquito {
      width: 29.6vw;
      top: 20%;
      left: 30%
  }
}

.cloud-container {
  pointer-events: none;
  position: absolute;
  left: 0
}

@media (min-width: 1024px) {
  .cloud-container {
      -webkit-transform: scale(1.8);
      transform: scale(1.8)
  }
}

.cloud {
  z-index: 65;
  pointer-events: none;
  opacity: 0;
  width: auto;
  position: absolute
}

@media (min-width: 1024px) {
  .cloud.bottom {
      display: none
  }
}

.leaf {
  z-index: 60;
  pointer-events: none;
  position: absolute
}

.leaf#leaf1 {
  width: 60%;
  top: 66.2%;
  right: -61%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

@media (min-width: 1024px) {
  .leaf#leaf1 {
      width: 23%;
      top: auto;
      top: initial;
      z-index: 2;
      bottom: 17.4%;
      right: -17.5%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%)
  }
}

.leaf#leaf2 {
  width: 35.5%;
  top: 60%;
  right: -30%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

@media (min-width: 1024px) {
  .leaf#leaf2 {
      z-index: 2;
      width: 13.3%;
      top: auto;
      top: initial;
      bottom: 20%;
      right: -13%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%)
  }
}

.leaf#leaf3 {
  width: 60%;
  bottom: -6.4%;
  left: 2%;
  -webkit-transform: translate(-50%, -50%) rotate(100deg);
  transform: translate(-50%, -50%) rotate(100deg)
}

@media (min-width: 1024px) {
  .leaf#leaf3 {
      width: 23%;
      top: auto;
      top: initial;
      z-index: 2;
      bottom: 9.4%;
      left: 3.5%;
      -webkit-transform: translate(-50%, -50%) rotate(92deg);
      transform: translate(-50%, -50%) rotate(92deg)
  }
}

.leaf#leaf4 {
  width: 35.5%;
  bottom: -9.4%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(20deg);
  transform: translate(-50%, -50%) rotate(20deg)
}

@media (min-width: 1024px) {
  .leaf#leaf4 {
      z-index: 2;
      width: 13.3%;
      bottom: -11.5%;
      left: 10%;
      -webkit-transform: translate(-50%, -50%) rotate(22deg);
      transform: translate(-50%, -50%) rotate(22deg)
  }
}

.leaf#leaf4bis {
  display: none
}

@media (min-width: 1024px) {
  .leaf#leaf4bis {
      z-index: 1;
      width: 13.3%;
      display: block;
      bottom: -12.6%;
      left: 3.3%;
      -webkit-transform: translate(-50%, -50%) rotate(46deg);
      transform: translate(-50%, -50%) rotate(46deg)
  }
}

.leaf#leaf5 {
  width: 35.5%;
  top: 35%;
  right: -39%;
  -webkit-transform: translate(-50%, -50%) rotate(-28deg);
  transform: translate(-50%, -50%) rotate(-28deg)
}

@media (min-width: 1024px) {
  .leaf#leaf5 {
      width: 13.3%;
      top: auto;
      top: initial;
      z-index: 2;
      bottom: -24.2%;
      right: -10.5%;
      -webkit-transform: translate(-50%, -50%) rotate(0);
      transform: translate(-50%, -50%) rotate(0)
  }
}

.leaf#leaf6 {
  width: 60%;
  top: 35%;
  right: -74%;
  -webkit-transform: translate(-50%, -50%) rotate(25deg);
  transform: translate(-50%, -50%) rotate(25deg)
}

@media (min-width: 1024px) {
  .leaf#leaf6 {
      width: 23%;
      bottom: -6%;
      top: auto;
      top: initial;
      right: -22.2%;
      -webkit-transform: translate(-50%, -50%) rotate(30deg);
      transform: translate(-50%, -50%) rotate(30deg)
  }
}

.leaf#leaf7 {
  width: 35.5%;
  top: 87%;
  left: 0%;
  -webkit-transform: translate(-50%, -50%) rotate(75deg);
  transform: translate(-50%, -50%) rotate(75deg)
}

@media (min-width: 1024px) {
  .leaf#leaf7 {
      width: 13.3%;
      top: auto;
      top: initial;
      z-index: 2;
      bottom: -2.8%;
      left: 1.5%;
      -webkit-transform: translate(-50%, -50%) rotate(63deg);
      transform: translate(-50%, -50%) rotate(63deg)
  }
}

.leaf#leaf8 {
  width: 55%;
  top: 98%;
  left: 7%;
  -webkit-transform: translate(-50%, -50%) rotate(95deg);
  transform: translate(-50%, -50%) rotate(95deg)
}

@media (min-width: 1024px) {
  .leaf#leaf8 {
      width: 23%;
      bottom: -27.2%;
      top: auto;
      top: initial;
      left: 2.5%;
      -webkit-transform: translate(-50%, -50%) rotate(98deg);
      transform: translate(-50%, -50%) rotate(98deg)
  }
}

.leaf#leaf9 {
  width: 35.5%;
  top: 97%;
  right: -30%;
  -webkit-transform: translate(-50%, -50%) rotate(0);
  transform: translate(-50%, -50%) rotate(0)
}

@media (min-width: 1024px) {
  .leaf#leaf9 {
      display: none
  }
}

#bubble-container {
  pointer-events: none;
  z-index: 60;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
  -webkit-transition: padding-top .6s ease-in-out;
  transition: padding-top .6s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: 0;
  overflow: hidden
}

@media (min-width: 1024px) {
  #bubble-container {
      width: 100%;
      max-width: clamp(1200px, 84.38vw, 1620px);
      margin: 0 auto;
      padding-top: 0
  }
}

#bubble-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-box-align .5s ease-out;
  transition: -webkit-box-align .5s ease-out;
  transition: align-items .5s ease-out;
  transition: align-items .5s ease-out, -webkit-box-align .5s ease-out, -ms-flex-align .5s ease-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.textbox {
  opacity: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  background-color: #f6dc86;
  border: 2px solid #000;
  border-radius: 1.44rem;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 1rem 1.125rem;
  -webkit-transition: width 50ms, height 50ms, border-radius 50ms, opacity .15s, -webkit-transform 50ms;
  transition: width 50ms, height 50ms, border-radius 50ms, opacity .15s, -webkit-transform 50ms;
  transition: width 50ms, height 50ms, border-radius 50ms, opacity .15s, transform 50ms;
  transition: width 50ms, height 50ms, border-radius 50ms, opacity .15s, transform 50ms, -webkit-transform 50ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  bottom: 15rem;
  right: 22rem
}

.hidden-before-load {
  opacity: 0 !important
}

@media (min-width: 1024px) {
  .textbox {
      border: 4px solid #000
  }
}

@media (max-width: 768px) {
  .textbox {
      margin: 0 auto
  }
}

.textbox p {
  letter-spacing: .028125rem;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.0625rem;
  font-weight: 500;
}

.textbox p br.mob {
  display: block
}

.textbox p br.desk {
  display: none
}

@media (min-width: 1024px) {
  .textbox p {
      font-size: clamp(20px, 1.35vw, 1.66rem) !important;
      line-height: clamp(22px, 1.43vw, 1.77rem) !important
  }
  .textbox p br.mob {
      display: none
  }
  .textbox p br.desk {
      display: block
  }
}

.textbox p img:first-of-type {
  width: 24%;
  position: absolute;
  bottom: -4.5rem;
  right: 2.4rem;
  -webkit-transform: rotate(14deg);
  transform: rotate(14deg);
  z-index: 1
}

.textbox p img:last-of-type {
  width: 25.5%;
  position: absolute;
  bottom: -3.9rem;
  right: 0;
  -webkit-transform: rotate(-4deg);
  transform: rotate(-4deg);
  z-index: 0
}

@media (min-width: 1024px) {
  .textbox p img:first-of-type {
      width: 27%;
      position: absolute;
      bottom: -5.5rem;
      right: 3.4rem
  }
  .textbox p img:last-of-type {
      width: 28.5%;
      position: absolute;
      bottom: -4.9rem
  }
}

#products {
  z-index: 81;
  background-color: #fff;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden
}

#products .container {
  padding: 2.75rem 1.875rem 2rem
}

@media (min-width: 1024px) {
  #products .container {
      max-width: clamp(1200px, 84.38vw, 1620px);
      padding: 8.44rem 1.875rem
  }
}

#products h2 {
  color: #000;
  letter-spacing: .05625rem;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 1.875rem;
  font-size: 1.875rem;
  line-height: 1.875rem
}

@media (min-width: 1024px) {
  #products h2 {
      display: none
  }
}

#products .products-tabs {
  margin: 20px;
  font-family: Arial, sans-serif
}

#products .tabs {
  color: #000;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

@media (min-width: 1024px) {
  #products .tabs {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start
  }
}

#products .tab {
  cursor: pointer;
  border-radius: .5rem;
  font-size: 18px;
  font-weight: 500;
  -webkit-transition: all .3s;
  transition: all .3s;
  overflow: hidden
}

@media (min-width: 1024px) {
  #products .tab {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: clamp(332px, 26vw, 31.2rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative
  }
  #products .tab.active {
      overflow: visible
  }
}

#products .line {
  display: none
}

@media (min-width: 1024px) {
  #products .line {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 5.66rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative
  }
  #products .line:before {
      content: "";
      border-bottom: .44rem dashed #f35200;
      width: 100%;
      height: .44rem;
      position: absolute;
      top: calc(50% - .22rem);
      left: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%)
  }
  #products .line:after {
      content: "";
      background-image: url(moustique.6b153b56.svg);
      background-position: 40%;
      background-repeat: no-repeat;
      background-size: contain;
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1)
  }
}

#products .tab-header {
  border-radius: .625rem;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 3rem;
  padding: 0 .875rem 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (min-width: 1024px) {
  #products .tab-header {
      border-radius: 1.38rem;
      height: 5.66rem;
      padding: 0 2.5rem 0 2.11rem
  }
}

#products .tab-header h3 {
  letter-spacing: .05625rem;
  margin: 0;
  font-size: 1.875rem
}

@media (min-width: 1024px) {
  #products .tab-header h3 {
      font-size: clamp(34px, 2.78vw, 3.44rem)
  }
}

#products .tab[data-target=spray-corps] .tab-header,
#products .tab[data-target=spray-corps] .product-details {
  background-color: #f35200
}

#products .tab[data-target=spray-corps] .toggle-icon {
  color: #ffd337
}

#products .tab[data-target=spray-textile] .tab-header {
  border-radius: 1.5rem
}

@media (min-width: 1024px) {
  #products .tab[data-target=spray-textile] .tab-header {
      border-radius: 2.88rem
  }
}

#products .tab[data-target=spray-textile] .tab-header,
#products .tab[data-target=spray-textile] .product-details {
  background-color: #ffd337
}

#products .tab[data-target=spray-textile] .toggle-icon {
  color: #f35200
}

#products .product-details {
  opacity: 0;
  text-align: left;
  background-color: #fff;
  border-radius: .625rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: .25rem;
  height: 0;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  display: none;
  overflow: hidden
}

#products .product-details h4 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.125rem;
  font-weight: 600;
}

@media (min-width: 1024px) {
  #products .product-details h4 {
      font-size: clamp(22px, 1.79vw, 2.22rem);
      line-height: clamp(24px, 1.88vw, 2.33rem)
  }
}

#products .product-details p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.0625rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  #products .product-details p {
      letter-spacing: .05rem;
      margin-top: .22rem;
      font-size: clamp(20px, 1.35vw, 1.66rem);
      line-height: clamp(22px, 1.43vw, 1.77rem)
  }
  #products .product-details {
      font-size: 1rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 2.5rem 2.11rem !important
  }
}

#products .product-details.visible {
  display: block
}

#products .product-image {
  border-radius: 1.38rem;
  width: 53%;
  display: none;
  position: absolute;
  top: 50%;
  overflow: hidden
}

@media (min-width: 1024px) {
  #products .product-image {
      display: block
  }
}

#products .product-image img {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#products .product-image.corps {
  left: 100%
}

#products .product-image.textile {
  right: 100%
}

#products .product-packaging {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 1.38rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 12.7rem;
  height: 16.1rem;
  padding: .5rem;
  display: none;
  position: absolute;
  top: 100%
}

@media (min-width: 1024px) {
  #products .product-packaging {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
}

#products .product-packaging img {
  width: auto;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#products .product-packaging.corps {
  background-color: #ffd337;
  left: 0
}

#products .product-packaging.corps img {
  height: 90%;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg)
}

#products .product-packaging.textile {
  background-color: #f35200;
  right: 0
}

#products .product-packaging.textile img {
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg)
}

#products .tab .toggle-icon {
  font-size: 1.875rem;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s
}

@media (min-width: 1024px) {
  #products .tab .toggle-icon {
      font-size: 4rem
  }
}

#products .container-full {
  display: none
}

/* @media (min-width: 1024px) { */
  #products .container-full {
      background-color: #f35200;
      display: block
  }
  #products .container-full .desktop-pres {
      background-color: rgba(0, 0, 0, 0);
      border-radius: 2.11rem;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      gap: 1.77rem;
      padding: 1.5rem;
      -webkit-transition: background-color .3s;
      transition: background-color .3s;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
	   -webkit-box-orient: vertical;
	  -webkit-box-direction: normal;
	  -ms-flex-direction: column;
	  flex-direction: column;
	  height: 30.585rem;
  }

  #products .container-full .desktop-pres .illustration {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative
  }
  #products .container-full .desktop-pres .illustration .spec {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      gap: 3rem;
      width: 8rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      left: 11rem;
      z-index: 3
  }
  #products .container-full .desktop-pres .illustration .spec .block {
      cursor: pointer;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
  #products .container-full .desktop-pres .illustration .spec .block span {
      color: #000;
      text-transform: uppercase;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 0.5rem;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 2rem;
    padding: .15rem .625rem;
    font-size: 1.25rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      font-weight: 700;
  }
  #products .container-full .desktop-pres .illustration .spec .block span.orange {
      background-color: #ff8d3e
  }
  #products .container-full .desktop-pres .illustration .spec .block span.yellow.one {
      background-color: #f6dc86
  }
  #products .container-full .desktop-pres .illustration .spec .block span.green {
      background-color: #385840
  }
  #products .container-full .desktop-pres .illustration .spec .block span.yellow.two {
      background-color: #ffd337
  }
  #products .container-full .desktop-pres .illustration .spec .block:first-of-type {
      position: relative;
  }
  #products .container-full .desktop-pres .illustration .spec .block:first-of-type span:first-of-type {
      left: .75rem;
    -webkit-transform: rotate(354deg);
    transform: rotate(354deg);
  }
  #products .container-full .desktop-pres .illustration .spec .block:first-of-type span:last-of-type {
          top: -.35rem;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  #products .container-full .desktop-pres .illustration .spec .block:nth-of-type(2) {
      position: relative;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
  }

  #products .container-full .desktop-pres .illustration .spec .block:last-of-type {
      -ms-flex-item-align: end;
      align-self: flex-end
  }
  #products .container-full .desktop-pres .illustration .spec .block:last-of-type span:first-of-type {
         -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  #products .container-full .desktop-pres .illustration .spec .block:last-of-type span:last-of-type {
          top: -.35rem;
    left: .75rem;
    -webkit-transform: rotate(354deg);
    transform: rotate(354deg);
  }
  #products .container-full .desktop-pres .illustration .image {
      border-radius: 1.66rem;
      width: 14rem;
      height: 23.54rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      overflow: hidden;
      position: relative
  }
  #products .container-full .desktop-pres .illustration .image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      opacity: 0;
      -webkit-transition: opacity .2s;
      transition: opacity .2s;
      z-index: 1;
      pointer-events: none
  }
  #products .container-full .desktop-pres .illustration .product-img[style*="display: block"] {
      opacity: 1;
      pointer-events: auto;
      z-index: 2
  }
  #products .container-full .desktop-pres .description {
      -webkit-box-flex: 1.1;
      -ms-flex: 1.1;
      flex: 1.1
  }
  #products .container-full .desktop-pres .description p {
      letter-spacing: .05rem;
      opacity: 0;
      margin: 0;
          font-size: .9375rem;
    line-height: 1.0625rem;
      display: none;
      font-weight: 500;
  }
  #products .container-full .desktop-pres .description p .no-break {
      white-space: nowrap
  }
/* } */

@media (min-width: 1024px) {
	  #products .container-full .desktop-pres {
      border-radius: 2.11rem;
      gap: 2.77rem;
      padding: 2.77rem;
	  -webkit-box-orient: horizontal;
	  -webkit-box-direction: normal;
	  -ms-flex-direction: row;
	  flex-direction: row;
		  -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
		  height: auto;
  }


  #products .container-full .desktop-pres .illustration .spec {
      gap: 3.5rem;
      width: 16rem;
      left: 15rem;
 
  }

  #products .container-full .desktop-pres .illustration .spec .block span {
      border-radius: clamp(12px, .99vw, 1.22rem);
      height: clamp(38px, 3.23vw, 4rem);
      padding: .15rem 1.33rem;
      font-size: clamp(1.5rem, 1.6vw, 2rem);
  }

  #products .container-full .desktop-pres .illustration .spec .block:first-of-type {
      top: 2rem;
      left: 9.5rem
  }
   #products .container-full .desktop-pres .illustration .spec .block:first-of-type span:first-of-type {
      -webkit-transform: rotate(354deg);
      transform: rotate(354deg)
  }
  #products .container-full .desktop-pres .illustration .spec .block:first-of-type span:last-of-type {
      top: -.35rem;
      left: 2rem;
      -webkit-transform: rotate(2deg);
      transform: rotate(2deg)
  }
  #products .container-full .desktop-pres .illustration .spec .block:nth-of-type(2) {
      -ms-flex-item-align: end;
      align-self: flex-end;
      left: 7.5rem;
      top: 2rem;
      position: relative;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end
  }
  #products .container-full .desktop-pres .illustration .spec .block:nth-of-type(2) span:last-of-type {
      top: -.5rem;
      left: 3rem;
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg)
  }
  #products .container-full .desktop-pres .illustration .spec .block:last-of-type {
      -ms-flex-item-align: end;
      align-self: flex-end
  }
  #products .container-full .desktop-pres .illustration .spec .block:last-of-type span:first-of-type {
      -webkit-transform: rotate(354deg);
      transform: rotate(354deg)
  }
  #products .container-full .desktop-pres .illustration .spec .block:last-of-type span:last-of-type {
      top: -.35rem;
      left: 3rem;
      -webkit-transform: rotate(2deg);
      transform: rotate(2deg)
  }
  #products .container-full .desktop-pres .illustration .image {
      border-radius: 1.66rem;
      width: 30.84rem;
      height: 35.74rem;
  }

  #products .container-full .desktop-pres .description p {
      letter-spacing: .05rem;
      font-size: clamp(20px, 1.35vw, 1.66rem);
      line-height: clamp(22px, 1.43vw, 1.77rem);
  }

}

#products .default-illustration {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: 2rem 0 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  display: none;
}

@media (min-width: 1024px) {
  #products .default-illustration {
      display: none !important;
  }
}

#products .default-illustration .image {
  border-radius: 10px;
  /* width: 12.625rem;
  height: 19.4rem; */
  margin: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  overflow: hidden
}

#products .default-illustration .image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%
}

#products #product-illustration.active {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-animation-name: levitation;
  animation-name: levitation;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#products #product-illustration.active img {
  border-radius: 10px;
  width: 13rem;
  height: auto;
  margin: 2rem auto 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

#products #spec {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: .5rem;
  width: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 11rem
}

#products #spec .block {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#products #spec .block span {
  color: #000;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: .5rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 2rem;
  padding: .15rem .625rem;
  font-size: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-weight:700;
}

#products #spec .block span.orange.one {
  background-color: #ff8d3e
}

#products #spec .block span.orange.two {
  background-color: #f35200
}

#products #spec .block span.yellow {
  background-color: #f6dc86
}

#products #spec .block span.green {
  background-color: #385840
}

#products #spec .block:first-of-type span:first-of-type {
  left: .75rem;
  -webkit-transform: rotate(354deg);
  transform: rotate(354deg)
}

#products #spec .block:first-of-type span:last-of-type {
  top: -.35rem;
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg)
}

#products #spec .block:last-of-type {
  -ms-flex-item-align: end;
  align-self: flex-end
}

#products #spec .block:last-of-type span:first-of-type {
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg)
}

#products #spec .block:last-of-type span:last-of-type {
  top: -.35rem;
  left: .75rem;
  -webkit-transform: rotate(354deg);
  transform: rotate(354deg)
}

#products #spec .plus {
  color: #ffd337;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f35200;
  border-radius: 50%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: .35rem;
  font-size: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: rotate(345deg);
  transform: rotate(345deg)
}

@-webkit-keyframes levitation {
  0% {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0)
  }
  50% {
      -webkit-transform: translateY(-8px) rotate(.5deg);
      transform: translateY(-8px) rotate(.5deg)
  }
  to {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0)
  }
}

@keyframes levitation {
  0% {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0)
  }
  50% {
      -webkit-transform: translateY(-8px) rotate(.5deg);
      transform: translateY(-8px) rotate(.5deg)
  }
  to {
      -webkit-transform: translateY(0) rotate(0);
      transform: translateY(0) rotate(0)
  }
}

#videos-top {
  z-index: 81;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 100%;
  background-color: #fff
}

@media (min-width: 1024px) {
  #videos-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

#videos-top>div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#videos-top video {
  width: 100%;
  height: auto;
  aspect-ratio: 4/2.78;
      object-fit: cover;
  -o-object-fit:cover;
}

#textile {
  background-color: #f6dc86
}

#textile .container {
  padding-top: 2.75rem;
  padding-bottom: 2.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem
}

#textile .block {
  margin-bottom: 3rem
}

#textile .spec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

#textile h3 {
  color: #000;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: .5rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 2rem;
  padding: .15rem .625rem;
  font-size: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  background-color: #ffd337;
  margin: 0 auto 1rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  font-weight: 700;
}

#textile .block:first-of-type h3 {
  background-color: #f35200;
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg)
}

#textile .block:last-of-type {
  margin-bottom: 0
}

#textile .block:last-of-type h3 {
  background-color: #385840;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg)
}

#textile p {
  letter-spacing: .05rem;
  text-align: center;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.0625rem;
  font-weight: 500;
}

#textile .illustration {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: none;
  position: relative
}

#textile .illustration .image {
  border-radius: 1.66rem;
  width: 30.7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden
}

#textile .illustration .image img {
  width: 100%;
  height: auto
}

@media (min-width: 1024px) {
  #textile p {
      text-align: left;
      font-size: clamp(20px, 1.35vw, 1.66rem);
      line-height: clamp(22px, 1.43vw, 1.77rem)
  }
  #textile .container {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      gap: 16vw;
      padding-top: 8.44rem !important;
      padding-bottom: 8.44rem !important
  }
  #textile .illustration {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
  #textile .illustration .image {
      width: 30.7rem
  }
  #textile h3 {
      color: #000;
      text-transform: uppercase;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: clamp(12px, .99vw, 1.22rem);
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: clamp(38px, 3.23vw, 4rem);
      padding: .15rem 1.33rem;
      font-size: clamp(1.5rem, 1.6vw, 2rem);
      margin: 0 0 1rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      text-align: left
  }
}

#video-bottom {
  display: none;
  overflow: hidden;
  background: #fff;
}
@media (min-width: 1024px) {
  #video-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

#video-bottom video {
  width: 100%;
  aspect-ratio: 16/9
}

#features {
  z-index: 81;
  background-color: #00d8ff;
  width: 100%;
  position: relative;
  overflow: hidden
}

#features .container-full {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding-top: 12rem;
  position: relative
}

#features .container-full #mosquito-feature-mobile {
  height: 77vw;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -15%);
  transform: translate(-50%, -15%)
}

@media (min-width: 1024px) {
  #features .container-full {
      padding-top: clamp(240px, 21.15vw, 22.55rem)
  }
  #features .container-full #mosquito-feature-mobile {
      display: none
  }
}

#features .container {
  z-index: 10;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  padding: 2.75rem 1.625rem;
  position: relative
}

@media (min-width: 1024px) {
  #features .container {
      padding-top: clamp(72px, 5.55vw, 6.66rem)
  }
}

#features h2 {
  color: #000;
  letter-spacing: .05625rem;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.875rem;
  font-weight: 800;
}

@media (min-width: 1024px) {
  #features h2 {
      font-size: clamp(50px, 3.23vw, 4rem);
      line-height: clamp(4rem, 3.85vw, 4.77rem)
  }
}

#features .sea {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow: hidden
}

@media (min-width: 1024px) {
  #features .sea {
      background: -webkit-gradient(linear, left top, left bottom, from(#00d8ff), color-stop(8%, #67e8ff));
      background: linear-gradient(#00d8ff, #00d8ff 8%, #67e8ff 8%, #67e8ff);
      height: 29rem;
      overflow: visible
  }
}

#features .sea .container {
  background-color: #67e8ff;
  width: 100%;
  padding: .625rem 2.5rem 3.375rem
}

#features .sea .container #mosquito-feature {
  display: none
}

@media (min-width: 1024px) {
  #features .sea .container {
      background-color: rgba(0, 0, 0, 0);
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 2rem;
      max-width: 1440px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      left: 50%;
      -webkit-transform: translate(-50%, -48%);
      transform: translate(-50%, -48%)
  }
  #features .sea .container #mosquito-feature {
      width: 29.6vw;
      display: block
  }
}

#features .waves {
  z-index: 5;
  pointer-events: none;
  width: 200%;
  height: 60px;
  bottom: 0;
  left: 0
}

#features .waves.mobile {
  height: 40px
}

@media (max-width: 767px) {
  #features .waves.desktop {
      display: none
  }
}

@media (min-width: 1024px) {
  #features .waves.mobile {
      display: none
  }
  #features .waves.desktop {
      width: 270%;
      height: 50px;
      display: block
  }
}

#features .swiper {
  width: 100%;
  height: 100%
}

#features .swiper .indicator-inner {
  display: none
}

@media (min-width: 1024px) {
  #features .swiper {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 33.6rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
  #features .swiper .indicator-inner {
      z-index: 10;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      top: 55%;
      right: -8%;
      -webkit-transform: scale(2) rotate(-25deg);
      transform: scale(2) rotate(-25deg)
  }
  #features .swiper .indicator-inner svg {
      position: absolute
  }
  #features .swiper .indicator-inner svg path {
      stroke-dasharray: 2 4;
      stroke-width: 2px
  }
}

#features .swiper-slide {
  background: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden
}

#features .swiper-slide .swiper-slide-shadow {
  opacity: 0 !important
}

#features .swiper-slide .title {
  background-color: #000;
  border-radius: .625rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 2.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (min-width: 1024px) {
  #features .swiper-slide .title {
      border-radius: clamp(15px, 1.2vw, 1.44rem)
  }
}

#features .swiper-slide .title h3 {
  text-align: center;
  letter-spacing: .031875rem;
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

#features .swiper-slide .content {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #000;
  border-radius: .5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 5.875rem;
  padding: .375rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (min-width: 1024px) {
  #features .swiper-slide .content {
      border-radius: 1.44rem
  }
}

#features .swiper-slide .content p {
  text-align: center;
  letter-spacing: .028125rem;
  width: 100%;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.0625rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  #features .swiper-slide .title {
      height: 4.72rem
  }
  #features .swiper-slide .content {
      border: 4px solid #000;
      height: 9.44rem
  }
  #features .swiper-slide h3 {
      font-size: clamp(22px, 1.79vw, 2.22rem) !important
  }
  #features .swiper-slide p {
      font-size: clamp(20px, 1.35vw, 1.66rem) !important;
      line-height: clamp(22px, 1.43vw, 1.77rem) !important
  }
}

#features .swiper-slide:first-child h3 {
  color: #f6dc86
}

#features .swiper-slide:first-child .content {
  background-color: #f6dc86
}

#features .swiper-slide:nth-child(2) h3 {
  color: #ffd337
}

#features .swiper-slide:nth-child(2) .content {
  background-color: #ffd337
}

#features .swiper-slide:nth-child(3) h3 {
  color: #ff8d3e
}

#features .swiper-slide:nth-child(3) .content {
  background-color: #ff8d3e
}

#features .swiper-slide:nth-child(4) h3 {
  color: #f35200
}

#features .swiper-slide:nth-child(4) .content {
  background-color: #f35200
}

#features .beach {
  background-color: #f6dc86;
  width: 100%;
  height: 100px;
  position: relative
}

@media (min-width: 1024px) {
  #features .beach {
      height: 16rem
  }
}

#features .indicator {
  z-index: 15;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  padding: .15rem .55rem .55rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: -2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translate(-50%)
}

@media (min-width: 1024px) {
  #features .indicator {
      display: none
  }
}

#features .indicator svg {
  position: absolute
}

#features .indicator img {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out
}

@-webkit-keyframes moveClouds {
  0% {
      -webkit-transform: translateX(-200%);
      transform: translate(-200%)
  }
  to {
      -webkit-transform: translateX(200%);
      transform: translate(200%)
  }
}

@keyframes moveClouds {
  0% {
      -webkit-transform: translateX(-200%);
      transform: translate(-200%)
  }
  to {
      -webkit-transform: translateX(200%);
      transform: translate(200%)
  }
}

#location {
  z-index: 81;
  background-color: #fff
}

#location .container {
  padding: 2.75rem 1.875rem 2.625rem
}

@media (min-width: 1024px) {
  #location .container {
      max-width: clamp(1200px, 84.38vw, 1620px);
      padding-bottom: clamp(92px, 7.31vw, 8.77rem)
  }
}

#location .container .map-container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: .625rem;
  width: 100%;
  margin-top: 2rem;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

@media (min-width: 1024px) {
  #location .container .map-container {
      gap: 1.66rem
  }
}

#location .container .map-container .controls {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: 0
}

#location .container .map-container .close-btn {
  color: #000;
  cursor: pointer;
  z-index: 999999999;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  aspect-ratio: 1/1;
  display: none;
  position: relative;
  top: 0;
  right: 0;
  font-weight: 700;
  width: 1.625rem;
  height: 1.625rem
}

@media (min-width: 1024px) {
  #location .container .map-container .close-btn {
      width: 3.11rem;
      height: 3.11rem;
      min-width: 3.11rem;
      min-height: 3.11rem;
      max-width: 3.11rem;
      max-height: 3.11rem
  }
}

#location .container .map-container #map {
  aspect-ratio: 1;
  border: 2px solid #000;
  border-radius: 1.875rem;
  width: 100%;
  -webkit-transition: height .3s ease-in-out;
  transition: height .3s ease-in-out;
  overflow: hidden
}

@media (min-width: 1024px) {
  #location .container .map-container #map {
      aspect-ratio: 21/9;
      border-radius: 1.1rem
  }
}

#location .container .map-container #controls {
  z-index: 10;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #000;
  border-radius: 1.875rem;
  gap: .625rem;
  width: 100%;
  height: 2.5rem;
  padding: .35rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: 0
}

@media (min-width: 1024px) {
  #location .container .map-container #controls {
      height: 3.11rem
  }
}

#location .container .map-container #search-input {
  border: none;
  -webkit-box-flex: 2.2;
  -ms-flex: 2.2;
  flex: 2.2;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder .suggestions>li>a {
  color: #000 !important;
  font-size: clamp(14px, .9vw, 1.11rem) !important;
  line-height: 1 !important
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder .suggestions>.active>a,
#location .container .map-container #search-input .mapboxgl-ctrl-geocoder .suggestions>li>a:hover {
  background-color: #ff8d3e !important
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder {
  min-width: 0;
  min-width: initial;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  max-width: 100%;
  line-height: .5rem
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--input {
  color: #000;
  font-family: Host Grotesk, serif;
  font-size: .75rem;
  font-weight: 500;
  outline: none !important;
  height: 100% !important;
  padding: 0 !important
}

@media (min-width: 1024px) {
  #location .container .map-container #search-input .mapboxgl-ctrl-geocoder--input {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--input ::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .506);
  font-weight: 300;
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--input ::-moz-placeholder {
  color: rgba(0, 0, 0, .506);
  font-weight: 300;
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--input :-ms-input-placeholder {
  color: rgba(0, 0, 0, .506);
  font-weight: 300;
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--input ::-ms-input-placeholder {
  color: rgba(0, 0, 0, .506);
  font-weight: 300;
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--input ::placeholder {
  color: rgba(0, 0, 0, .506);
  font-weight: 300;
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--suggestion-title {
  font-size: .75rem
}

@media (min-width: 1024px) {
  #location .container .map-container #search-input .mapboxgl-ctrl-geocoder--suggestion-title {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
}

#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--icon,
#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--powered-by,
#location .container .map-container #search-input .mapboxgl-ctrl-geocoder--suggestion-address {
  display: none !important
}

#location .container .map-container #find-nearest {
  color: #fff;
  cursor: pointer;
  background: #000;
  border: none;
  border-radius: .5rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding: .5rem .75rem;
  font-family: Host Grotesk, serif;
  font-size: .75rem;
  display: none;
  font-weight: 500;
}

@media (min-width: 1024px) {
  #location .container .map-container #find-nearest {
      min-width: -webkit-fit-content;
      min-width: -moz-fit-content;
      min-width: fit-content;
      height: 3.11rem;
      padding: .5rem 1.5rem;
      font-size: clamp(14px, .9vw, 1.11rem);
      -webkit-transition: color .3s ease-in-out;
      transition: color .3s ease-in-out;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
  #location .container .map-container #find-nearest:hover {
      color: #f6dc86
  }
}

#location .container .map-container .mapboxgl-ctrl-bottom-right,
#location .container .map-container .mapboxgl-ctrl-bottom-left {
  display: none
}

#location h2 {
  color: #000;
  letter-spacing: .05625rem;
  text-align: center;
  text-transform: uppercase;
  margin: 0 auto 1rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
  font-weight: 800;
}

#location .locations {
  margin: 0 auto 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1.75rem
}

#location .locations div {
  border-radius: 50%;
  aspect-ratio: 1;
  width: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #ffcd02;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  aspect-ratio: 1;
}

#location .locations div img {
  width: 65%; 
  height: 65%;
  object-fit: contain;
  -o-object-fit:contain;
  display: block;
}

@media (min-width: 1024px) {
  #location .locations {
      margin: 0 auto clamp(64px, 5vw, 6rem);
      gap: 2.75rem
  }
  #location .locations div {
      width: 5.625rem
  }
}

#location .locations div:first-of-type {
  background-color: #f6dc85
}

#location .locations div:last-of-type {
  background-color: #f35200
}

@media (min-width: 1024px) {
  #location h2 {
      letter-spacing: .125rem;
      max-width: 44rem;
      margin: clamp(84px, 6.57vw, 7.88rem) auto clamp(20px, 1.66vw, 2rem);
      font-size: clamp(50px, 3.23vw, 4rem);
      line-height: clamp(4rem, 3.85vw, 4.77rem)
  }
  #location h2 br {
      display: none
  }
}

#contact {
  z-index: 81;
  background-color: #f6dc86
}

#contact .container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 1.875rem;
  padding: 0 0 6.25rem
}

@media (min-width: 1024px) {
  #contact .container {
      max-width: clamp(1200px, 84.38vw, 1620px);
      margin: 0 auto;
      padding: 0 1.875rem 11.6rem
  }
  #contact .container #lottie-animation {
      max-width: 26.06rem;
      margin: 0 auto
  }
}

#contact #product-circle {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 19.688rem;
  margin: -6.7rem auto 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#contact #product-circle svg {
  z-index: -1;
  -webkit-animation-name: protection;
  animation-name: protection;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute
}

@media (min-width: 1024px) {
  #contact #product-circle svg {
      width: auto;
      height: 100%
  }
}

#contact #product-circle>img {
  width: 100%;
  height: auto;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg)
}

@media (min-width: 1024px) {
  #contact #product-circle>img {
      position: relative;
      bottom: 3.5rem;
      left: 50%;
      -webkit-transform: translateX(-50%) scale(1.05) rotate(14deg);
      transform: translate(-50%) scale(1.05) rotate(14deg)
  }
}

#contact #product-circle .anti {
  display: none;
  position: absolute;
  -webkit-transform: translate(-50%);
  transform: translate(-50%)
}

#contact #product-circle .anti#moustiques {
  top: -40%;
  left: -56%
}

#contact #product-circle .anti#moustiques .title span:first-of-type {
  z-index: 1;
  -webkit-transform: rotate(354deg);
  transform: rotate(354deg)
}

#contact #product-circle .anti#moustiques .title span:last-of-type {
  z-index: 1;
  top: -.25rem;
  left: 1.55rem;
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg)
}

#contact #product-circle .anti#moustiques .image {
  width: 130%;
  top: -22%;
  left: 38%
}

#contact #product-circle .anti#culicoides {
  top: 8%;
  left: -40%
}

#contact #product-circle .anti#culicoides .title span:first-of-type {
  z-index: 2;
  left: .5rem;
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg)
}

#contact #product-circle .anti#culicoides .title span:last-of-type {
  z-index: 1;
  top: -.25rem;
  -webkit-transform: rotate(356deg);
  transform: rotate(356deg)
}

#contact #product-circle .anti#culicoides .image {
  width: 55%;
  top: -1.2rem;
  left: 6.5rem
}

#contact #product-circle .anti#tiques {
  top: 0;
  right: -75%
}

#contact #product-circle .anti#tiques .title span:first-of-type {
  z-index: 2;
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg)
}

#contact #product-circle .anti#tiques .title span:last-of-type {
  z-index: 1;
  top: -.25rem;
  left: 1.44rem;
  -webkit-transform: rotate(356deg);
  transform: rotate(356deg)
}

#contact #product-circle .anti#tiques .image {
  width: 76%;
  top: -22%;
  left: 76%
}

#contact #product-circle .anti#puces {
  bottom: 30%;
  right: -30%
}

#contact #product-circle .anti#puces .title span:first-of-type {
  z-index: 1;
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg)
}

#contact #product-circle .anti#puces .title span:last-of-type {
  z-index: 2;
  top: -.25rem;
  left: 2.22rem;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg)
}

#contact #product-circle .anti#puces .image {
  width: 72%;
  top: -.9rem;
  left: 6.3rem;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg)
}

#contact #product-circle .anti .title {
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#contact #product-circle .anti .title span {
  color: #000;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: clamp(12px, .99vw, 1.22rem);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: clamp(38px, 3.23vw, 4rem);
  padding: .15rem 1.33rem;
  font-size: clamp(1.5rem, 1.6vw, 2rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-weight: 700;
}

#contact #product-circle .anti .title span.yellow {
  background-color: #ffd337
}

#contact #product-circle .anti .title span.orange.one {
  background-color: #f35200
}

#contact #product-circle .anti .title span.orange.two {
  background-color: #ffd337
}

#contact #product-circle .anti#tiques .title span.orange.two {
  background-color: #ff8d3e
}

#contact #product-circle .anti .image {
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  position: absolute
}

#contact #product-circle .anti .image img {
  width: 100%;
  height: auto
}

@media (min-width: 1024px) {
  #contact #product-circle {
      max-width: 29rem;
      margin: -4.9rem auto 10rem
  }
  #contact #product-circle .anti {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
}

@-webkit-keyframes protection {
  0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
  }
  to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}

@keyframes protection {
  0% {
      -webkit-transform: rotate(0);
      transform: rotate(0)
  }
  to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}

#contact h2 {
  text-align: center;
  letter-spacing: .05625rem;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  font-size: 1.875rem;
  line-height: 1.875rem;
  font-weight: 800;
}

@media (min-width: 1024px) {
  #contact h2 {
      letter-spacing: .125rem;
      margin: 0 0 clamp(62px, 4.89vw, 5.22rem);
      padding-top: 4rem;
      font-size: clamp(50px, 3.23vw, 4rem);
      line-height: clamp(4rem, 3.85vw, 4.77rem)
  }
}

#contact .tabs {
  color: #000;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

@media (min-width: 1024px) {
  #contact .tabs {
      width: 100%;
      max-width: none;
      max-width: initial
  }
}

#contact .tab {
  cursor: pointer;
  border-radius: .5rem;
  font-size: 18px;
  font-weight: 700;
  -webkit-transition: all .3s;
  transition: all .3s;
  overflow: hidden
}

@media (min-width: 1024px) {
  #contact .tab {
      font-size: 2.2rem
  }
}

#contact .tab-header {
  border-radius: .5rem;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 3rem;
  padding: 0 1.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (min-width: 1024px) {
  #contact .tab-header {
      z-index: 2;
      border-radius: 1.44rem;
      width: 33.6rem;
      height: 4.72rem;
      margin: 0 auto;
      padding: 0 1.77rem;
      position: relative
  }
}

#contact .tab-header h3 {
  letter-spacing: .031875rem;
  color: #f6dc86;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

@media (min-width: 1024px) {
  #contact .tab-header h3 {
      font-size: clamp(22px, 1.79vw, 2.22rem)
  }
}

#contact .tab .tab-header,
#contact .tab .contact-form {
  background-color: #000
}

#contact .tab .toggle-icon {
  color: #f6dc86;
  font-size: 1.875rem;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s
}

@media (min-width: 1024px) {
  #contact .tab .toggle-icon {
      font-size: 4.5rem
  }
  #contact .tab {
      width: 100%
  }
}

#contact #contact-form {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#contact #contact-form .block {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#contact #contact-form .block .input-container {
  width: 100%;
  margin-bottom: 1.75rem;
  position: relative
}

@media (min-width: 1024px) {
  #contact #contact-form .block .input-container {
      margin-bottom: 2rem
  }
  #contact #contact-form .block .input-container:last-of-type {
      margin-bottom: 0
  }
}

#contact #contact-form .block:last-of-type .input-container {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: .625rem
}

#contact #contact-form .block:last-of-type .input-container textarea {
  min-height: 100%
}

@media (min-width: 1024px) {
  #contact #contact-form .block:last-of-type {
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end
  }
  #contact #contact-form .block:last-of-type .input-container {
      margin-bottom: 1.75rem
  }
}

#contact #contact-form>:last-child {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%
}

#contact #contact-form input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
  letter-spacing: .0225rem;
  border: 2px solid #000;
  border-radius: 1.25rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  padding: .5rem 1rem;
  font-family: Host Grotesk, serif;
  font-size: .75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
}

#contact #contact-form input ::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#contact #contact-form input ::-moz-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#contact #contact-form input :-ms-input-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#contact #contact-form input ::-ms-input-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#contact #contact-form input ::placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#contact #contact-form input:focus {
  border-color: #f6dc86
}

#contact #contact-form input:not(:-moz-placeholder)+label {
  color: #000;
  font-size: .75rem;
  top: -.65rem;
  left: .5rem
}

#contact #contact-form input:not(:-ms-input-placeholder)+label {
  color: #000;
  font-size: .75rem;
  top: -.65rem;
  left: .5rem;
}

#contact #contact-form input:focus+label,
#contact #contact-form input:not(:placeholder-shown)+label {
  color: #000;
  font-size: .75rem;
  top: -.65rem;
  left: .5rem;
  font-weight: 700;
}

#contact #contact-form label {
  color: black;
  font-weight: 500;
  letter-spacing: .0225rem;
  pointer-events: none;
  font-family: Host Grotesk, serif;
  font-size: .75rem;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

#contact #contact-form label[for=contact-message] {
  top: 15%
}

#contact #contact-form textarea {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
  letter-spacing: .0225rem;
  border: 2px solid #000;
  border-radius: .825rem;
  width: 100%;
  padding: .5rem 1rem;
  font-family: Host Grotesk, serif;
  font-size: .75rem;
  font-weight: 500;
}

#contact #contact-form textarea:focus {
  border-color: #f6dc86
}

#contact #contact-form textarea:not(:-moz-placeholder)+label {
  color: #000;
  font-size: .75rem;
  top: -.65rem;
  left: .5rem
}

#contact #contact-form textarea:not(:-ms-input-placeholder)+label {
  color: #000;
  font-size: .75rem;
  top: -.65rem;
  left: .5rem
}

#contact #contact-form textarea:focus+label,
#contact #contact-form textarea:not(:placeholder-shown)+label {
  color: #000;
  font-size: .75rem;
  top: -.65rem;
  left: .5rem
}

#contact #contact-form button {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: .0225rem;
  color: #f6dc86;
  background-color: #000;
  border: 2px solid #000;
  border-radius: 12.5rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 2.5rem;
  margin: 0;
  font-family: Host Grotesk, serif;
  font-size: .75rem;
  -webkit-transition: background-color .3s ease-in-out;
  transition: background-color .3s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  font-weight: 700;
}

@media (min-width: 1024px) {
  #contact #contact-form button {
      width: auto
  }
}

#contact #contact-form #contact-message-feedback {
  text-align: center;
  margin-top: .5rem;
  font-size: .75rem
}

@media (min-width: 1024px) {
  #contact #contact-form #contact-message-feedback {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
  #contact #contact-form {
      -ms-flex-flow: wrap;
      flex-flow: wrap;
      gap: .5rem 3.5rem;
      width: 100%
  }
  #contact #contact-form ::-webkit-input-placeholder {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
  #contact #contact-form ::-moz-placeholder {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
  #contact #contact-form :-ms-input-placeholder {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
  #contact #contact-form ::-ms-input-placeholder {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
  #contact #contact-form ::placeholder,
  #contact #contact-form input,
  #contact #contact-form label,
  #contact #contact-form textarea,
  #contact #contact-form button {
      font-size: clamp(14px, .9vw, 1.11rem)
  }
  #contact #contact-form input {
      border-radius: clamp(14px, .9vw, 1.11rem);
      height: 4.16rem
  }
  #contact #contact-form textarea {
      border-radius: clamp(14px, .9vw, 1.11rem);
      padding: 1rem
  }
  #contact #contact-form label[for=contact-message] {
      top: 10%
  }
  #contact #contact-form button {
      cursor: pointer;
      height: clamp(40px, 2.08vw, 2.77rem);
      padding: 0 1.38rem
  }
  #contact #contact-form button:hover {
      background-color: rgba(0, 0, 0, 0)
  }
}

#contact .contact-tab {
  opacity: 0;
  text-align: left;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: .625rem;
  height: 0;
  padding: 2rem .875rem 1rem;
  font-size: 16px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  display: none;
  overflow: hidden
}

@media (min-width: 1024px) {
  #contact .contact-tab {
      z-index: 0;
      padding: 5rem 3.5rem 1rem;
      position: relative;
      -webkit-transform: translateY(-2.5rem);
      transform: translateY(-2.5rem)
  }
}

#contact-form .right-block div:last-of-type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

@media (min-width: 1024px) {
  #contact-form .right-block div:last-of-type {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row
  }
}

#contact-form .right-block div:last-of-type .rgpd-consent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: .65rem;
  position: relative !important;
  -webkit-transform: none !important;
  transform: none !important;
  left: 0 !important;
  top: auto !important;
  top: initial !important;
  font-size: clamp(14px, .9vw, 1rem) !important;
  letter-spacing: 0 !important;
  pointer-events: auto !important
}
@media (min-width: 1024px) {
  #contact-form .right-block div:last-of-type .rgpd-consent {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
}

#contact-form .right-block div:last-of-type .rgpd-consent input {
  display: none !important
}

#contact-form .right-block div:last-of-type .rgpd-consent .checkmark {
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1;
  background-color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background-color .2s ease;
  transition: background-color .2s ease;
  cursor: pointer
}

@media (min-width: 1024px) {
  #contact-form .right-block div:last-of-type .rgpd-consent .checkmark {
      width: 1.5rem;
      height: 1.5rem
  }
}

#contact-form .right-block div:last-of-type .rgpd-consent .checkmark:after {
  content: "\10102";
  color: #f6dc86;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1rem;
  padding-bottom: .4vw;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  line-height: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
@media (min-width: 1024px) {
#contact-form .right-block div:last-of-type .rgpd-consent .checkmark:after {
  font-size: 1.9rem;
}
}

#contact-form .right-block div:last-of-type .rgpd-consent input[type=checkbox]:checked+.checkmark:after {
  -webkit-transform: scale(1);
  transform: scale(1)
}

#footer {
  z-index: 81;
  background-color: #f35200;
  padding: 2.625rem 0 0
}

#footer .container-full {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  padding: 0
}

#footer .container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.875rem 1.875rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (min-width: 1024px) {
  #footer .container {
      max-width: clamp(1200px, 84.38vw, 1620px);
      padding: 3.875rem 1.875rem 2rem
  }
}

#footer p {
  text-align: center;
  letter-spacing: .031875rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.125rem
}

#footer input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid #000;
  border-radius: 1.25rem;
  width: 76.5%;
  height: 2.5rem;
  margin: 0 auto;
  padding: .5rem 1rem;
  font-size: .75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
}

@media (max-width: 768px) {
  #footer input {
      width: 100%
  }
}

#footer input:focus {
  border-color: #ffd337
}

@media (min-width: 1024px) {
  #footer input {
      border: 3px solid #000;
      border-radius: 1.1rem;
      width: 100%;
      height: clamp(6.5rem, 7.17vw, 8.88rem);
      padding: .5rem 2.5rem;
      font-size: clamp(22px, 1.79vw, 2.22rem)
  }
}

#footer label {
  letter-spacing: .125rem;
  background-color: #f35200;
  padding: 0 1.4rem .5rem 0;
  font-size: clamp(2.88rem, 3.36vw, 4.16rem);
  display: none;
  position: absolute;
  top: clamp(1.2rem, 1.32vw, 3rem);
  font-weight: 700;
}

@media (min-width: 1024px) {
  #footer label {
      display: block
  }
}

#footer ::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#footer ::-moz-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#footer :-ms-input-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#footer ::-ms-input-placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

#footer ::placeholder {
  color: rgba(0, 0, 0, .514);
  letter-spacing: .0225rem;
  font-size: .75rem
}

@media (min-width: 1024px) {
  #footer ::-webkit-input-placeholder {
      opacity: 0
  }
  #footer ::-moz-placeholder {
      opacity: 0
  }
  #footer :-ms-input-placeholder {
      opacity: 0
  }
  #footer ::-ms-input-placeholder {
      opacity: 0
  }
  #footer ::placeholder {
      opacity: 0
  }
}

#footer .logo {
  margin-top: 2rem;
  position: relative
}

@media (min-width: 1024px) {
  #footer .logo {
      width: 16.9rem;
      margin-top: 5rem
  }
}

#footer #newsletter {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#footer #newsletter p {
  width: 76.5%;
  margin: 0 auto 1rem;
  font-weight: 700;
}

@media (min-width: 1024px) {
  #footer #newsletter p {
      margin: 0 auto clamp(1.9rem, 2.42vw, 3rem)
  }
}

#footer #newsletter #newsletter-message {
  text-align: center;
  margin-top: .5rem;
  font-size:clamp(13px, 1.15vw, 1.375rem);
  letter-spacing: .028125rem;
  font-weight: 400;
  font-style: italic;
}

@media (min-width: 1024px) {
  #footer #newsletter #newsletter-message {
      font-size: clamp(14px, 1.15vw, 1.375rem)
  }
  #footer #newsletter p {
      letter-spacing: .066rem;
      text-align: left;
      width: 100%;
      font-size: clamp(22px, 1.79vw, 2.22rem)
  }
  #footer #newsletter p br {
      display: none
  }
}

#footer #copyrights {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
    flex-direction: column;
  gap: 0;
}

@media (min-width: 1024px) {
  #footer #copyrights {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
      gap: 1.5rem;
  }
}

#footer #copyrights p {
  margin: .15rem 0;
  font-size:clamp(13px, 1.15vw, 1.375rem);
  font-weight: 700;
}

@media (min-width: 1024px) {
  #footer #copyrights p {
      font-size: clamp(14px, .9vw, 1.11rem);
      margin: .5rem 0;
  }
}

#footer #copyrights a {
  color: #000;
  text-decoration: none;
  position: relative
}

/* #footer #copyrights a:after {
  content: "";
  -webkit-transform-origin: center;
  transform-origin: center;
  background-color: #000;
  width: 100%;
  height: 2px;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
  position: absolute;
  bottom: -2px;
  left: 0
} */

@media (min-width: 1024px) {
  #footer #copyrights a {
      -webkit-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out
  }
  #footer #copyrights a:hover {
      color: #ffd337
  }
  #footer #copyrights a:hover:after {
      -webkit-transform: scaleX(0);
      transform: scaleX(0)
  }
}

#footer #social {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

#footer #social p {
  margin-bottom: 1rem;
  font-weight: 700;
}

#footer #social p br {
  display: none
}

@media (min-width: 1024px) {
  #footer #social p br {
      display: block
  }
}

#footer #social .insta-post {
  aspect-ratio: 4/5;
  border-radius: .875rem;
  width: 100%;
  overflow: hidden;
  opacity: 1 !important
}

#footer #social .insta-post img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: auto
}

#footer #social .social-slider-wrapper {
  margin-left: 1.875rem
}

@media (min-width: 1024px) {
  #footer #social {
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      gap: 2.77rem;
      width: 100%;
      margin: 0 auto;
      padding: 1.875rem 0 7rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
  #footer #social .social-content {
      min-width: clamp(332px, 26vw, 32rem);
      padding-left: clamp(1.875rem, 50vw - clamp(1200px, 84.38vw, 1620px) / 2 + 1.875rem, 50vw - clamp(1200px, 84.38vw, 1620px) / 2 + 1.875rem)
  }
  #footer #social .social-content p {
      letter-spacing: .125rem;
      text-align: left;
      margin-bottom: 0;
      font-size: clamp(2.88rem, 3.36vw, 4.16rem);
      line-height: clamp(3.2rem, 3.85vw, 4.77rem);
      font-weight: 700;
  }
  #footer #social .social-slider-wrapper {
      width: calc(50vw + clamp(1200px, 84.38vw, 1620px)/2 - 27.355rem);
      max-width: none;
      margin-left: auto;
      position: relative;
      overflow: visible
  }
  #footer #social #instagramSlider {
      width: 100%
  }
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .85);
  display: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 2147483648;
}

.modal-content {
  background: #fff;
  color: #000;
  width: 100%;
  height: 100%;
  padding: 3rem 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.modal .container {
  padding: 2rem 1.875rem 0;
  height: auto;
}
@media (min-width: 1024px) {
.modal .container {
  padding: 4rem 1.875rem 0;
}
}

.close-btn-mdl {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 4rem;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  color: #000;
}

.modal-content h2 {
  font-weight: 800;
  font-size: clamp(30px, 3.23vw, 4rem);
  line-height: 2rem;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 4rem;
  position: relative;
  z-index: 0;
}

.modal-content h3 {
  margin-bottom: .5rem;
  font-size: clamp(18px, 1.6vw, 2rem);
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 600;
  text-transform: uppercase;
}

.modal-content p,
.modal-content li {
  font-size: clamp(14px, 1.15vw, 1.375rem);
  letter-spacing: .028125rem;
}

.modal-content a {
  color: #f35200;    text-underline-offset: .25rem;
}

@media (min-width: 1024px) {
.modal-content a {
 text-underline-offset: .45rem;
}
}