@charset "utf-8";

@font-face {
    font-family: 'Gotham Pro Narrow';
    src: url('./fonts/GothamProNarrow-Medium.woff2') format('woff2'),
        url('./fonts/GothamProNarrow-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Pro';
    src: url('./fonts/GothamPro-Black.woff2') format('woff2'),
        url('./fonts/GothamPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Pro';
    src: url('./fonts/GothamPro.woff2') format('woff2'),
        url('./fonts/GothamPro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Pro';
    src: url('./fonts/GothamPro-Bold.woff2') format('woff2'),
        url('./fonts/GothamPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Pro';
    src: url('./fonts/GothamPro-Light.woff2') format('woff2'),
        url('./fonts/GothamPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Pro';
    src: url('./fonts/GothamPro-Medium.woff2') format('woff2'),
        url('./fonts/GothamPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Pro Narrow';
    src: url('./fonts/GothamProNarrow-Bold.woff2') format('woff2'),
        url('./fonts/GothamProNarrow-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ---------- common start ---------- */

:root{
  --dark-blue-color: #08245D;
  --blue-color: #417EC4;
  --blue-button-color: #2CB5EF;
  --grey-color: #535E74;
  --pink-color-300: #F9A4D2;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 10px;
  /*font-size: 8px;*/
  color: var(--dark-blue-color);
  font-family: 'Gotham Pro';
  background-color: #FFFFFF;
  overflow-x: clip;
}
body{
  overflow-x: clip;
}
html.is-lock,
html.is-lock body{
  overflow: visible;
  touch-action: none;
  -ms-touch-action: none
}
img,
picture{
  pointer-events: none;
}
.no_highlights,
img,
picture,
button,
a{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a *,
button *{
  pointer-events: none;
}
.ot_section{
  width: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.ot_h3{
  font-size: 3rem;
  line-height: 1em;
  font-weight: 300;
  text-align: center;
}
.ot_h4{
  font-size: 2.4rem;
  line-height: 1.2em;
  text-align: center;
  font-weight: 400;
}
.ot_text{
  font-size: 1.6rem;
  line-height: 1.3em;
  text-align: center;
}
sup{
  font-size: .5em;
  line-height: .1em;
}
.bold_green{
  color: #41C47C;
  font-weight: 700;
}

@keyframes intro_button_gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes intro_message_pop {
  0% {
    opacity: 0;
    transform: translateY(1.2rem) scale(.88);
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes intro_message_pulse {
  0%, 100% {
    transform: translateZ(0) scale(1);
  }
  50% {
    transform: translateZ(0) scale(1.025);
  }
}
@keyframes intro_mosquito_approach {
  0% {
    opacity: 0;
    transform:
            translate(-22rem, -12rem)
            rotate(-35deg)
            scale(.18);
    animation-timing-function: ease-out;
  }

  18% {
    opacity: 1;
    transform:
            translate(10rem, -8rem)
            rotate(12deg)
            scale(.35);
    animation-timing-function: cubic-bezier(.2,.8,.4,1);
  }

  36% {
    transform:
            translate(-3rem, 3rem)
            rotate(-20deg)
            scale(.58);
  }

  52% {
    transform:
            translate(7rem, 1rem)
            rotate(16deg)
            scale(.72);
  }

  68% {
    transform:
            translate(-2rem, -2rem)
            rotate(-12deg)
            scale(.88);
  }

  82% {
    transform:
            translate(.9rem, .8rem)
            rotate(8deg)
            scale(1.02);
  }

  92% {
    transform:
            translate(-.4rem, -.3rem)
            rotate(-3deg)
            scale(.99);
  }

  100% {
    opacity: 1;
    transform:
            translate(0,0)
            rotate(0)
            scale(1);
  }
}
@keyframes hand_mosquito_approach {
  0% {
    opacity: 0;
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 7rem))
      translate(16rem, -7rem)
      scaleX(-1)
      rotate(-28deg)
      scale(.24);
    animation-timing-function: cubic-bezier(.35, 0, .65, 1);
  }
  24% {
    opacity: 1;
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 7rem))
      translate(7rem, 4rem)
      scaleX(-1)
      rotate(10deg)
      scale(.48);
  }
  48% {
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 7rem))
      translate(-3rem, -2rem)
      scaleX(-1)
      rotate(-18deg)
      scale(.72);
  }
  70% {
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 7rem))
      translate(2.2rem, 1.3rem)
      scaleX(-1)
      rotate(6deg)
      scale(.92);
    animation-timing-function: cubic-bezier(.12, .78, .2, 1);
  }
  88% {
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 7rem))
      translate(-.6rem, -.4rem)
      scaleX(-1)
      rotate(-11deg)
      scale(1.04);
  }
  100% {
    opacity: 1;
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 7rem))
      scaleX(-1)
      rotate(-8deg)
      scale(1);
  }
}
@keyframes drop_mosquito_approach {
  0% {
    opacity: 0;
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 5rem))
      translate(-10rem, 5rem)
      rotate(-30deg)
      scale(.35);
  }
  34% {
    opacity: 1;
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 5rem))
      translate(4rem, -3rem)
      rotate(8deg)
      scale(.72);
  }
  66% {
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 5rem))
      translate(-1.6rem, 1.4rem)
      rotate(-18deg)
      scale(1.08);
  }
  100% {
    opacity: 1;
    transform:
      translateY(calc(var(--scroll-reveal-inverse) * 5rem))
      rotate(-12deg)
      scale(1);
  }
}
@keyframes sphere_soft_pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
  }
  18% {
    opacity: .55;
  }
  78% {
    opacity: .18;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18);
  }
}
@keyframes sphere_effect_pulse {
  0%, 100% {
    opacity: .82;
    transform: translate(-50%, -50%) scale(.98);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}
@keyframes sphere_arrow_rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes drop_item_reveal {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------- common end ---------- */

/* ---------- header start ---------- */

.ot_header{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6.6rem;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  z-index: 10;
  transition: opacity .3s ease, transform .3s ease;
}
.is-project-header-visible .ot_header{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.header_inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: calc(100% - 4.4rem);
  max-width: 139.6rem;
  height: 100%;
  margin: 0 auto;
}
.header_burger{
  display: none;
}
.header_mobile_menu{
  display: none;
}

.header_nav{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .8rem;
}

.header_nav_link,
.header_portal_button{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  height: 3.6rem;
  border-radius: .4rem;
  padding: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Verdana, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity .3s ease;
}

.header_nav_link:hover,
.header_portal_button:hover{
  opacity: .75;
}
.header_nav_link_disabled{
  cursor: default;
}
.header_nav_link_disabled:hover{
  opacity: 1;
}

.header_nav_link{
  min-width: 8.1rem;
  color: #000000;
  background-color: #F7F7F7;
}

.header_nav_link img,
.header_portal_button img{
  display: block;
  width: .6rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.header_logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_logo img{
  display: block;
  width: 22.8rem;
  height: auto;
}

.header_portal_button{
  justify-self: flex-end;
  width: 18.7rem;
  color: #FFFFFF;
  background-color: #000000;
}

.header_portal_button img{
  filter: invert(1);
}

.project_fixed_header{
  display: flex;
  justify-content: center;
  width: 100%;
  height: 11.5rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  border-radius: 0 0 3rem 3rem;
  background-color: rgba(255, 250, 244, .8);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .24);
  backdrop-filter: blur(.8rem);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .3s ease, transform .3s ease;
}
.is-project-header-visible .project_fixed_header{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.project_fixed_header_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 8rem);
  max-width: 136rem;
  height: 100%;
  padding: 0;
}
.project_fixed_logo{
  display: block;
  width: auto;
  height: 7rem;
}
.project_fixed_logo img{
  display: block;
  width: auto;
  height: 100%;
}
.project_fixed_actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}
.project_fixed_messages_button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  height: 5rem;
  padding: 0 .8rem 0 2.5rem;
  border: none;
  border-radius: 4rem;
  outline: none;
  text-decoration: none;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  color: #FFFFFF;
  box-shadow: 0 .6rem 1.6rem rgba(0, 94, 171, .18);
  animation: intro_button_gradient 6s ease-in-out infinite;
  cursor: pointer;
  transition: background-position .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
.project_fixed_messages_button:hover{
  background-position: 100% 50%;
  box-shadow: 0 1rem 2.4rem rgba(0, 94, 171, .28);
  filter: saturate(1.08);
  transform: translateY(-.2rem);
}
.project_fixed_messages_button:active,
.project_fixed_icon_button:active{
  transform: scale(.96);
}
.project_fixed_messages_button span{
  font-family: 'Gotham Pro';
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #FFFFFF;
  white-space: nowrap;
}
.project_fixed_messages_button img{
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  margin-right: -.1rem;
}
.project_fixed_icon_button{
  display: block;
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  transition: transform .25s ease;
}
.project_fixed_icon_button:hover{
  transform: scale(1.06);
}
.project_fixed_icon_button img{
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- header end ---------- */

/* ---------- main start ---------- */

.ot_main{
  width: 100%;
  position: relative;
  padding-top: 6.6rem;
}
.intro_section{
  min-height: max(calc(100vh - 6.6rem), calc(100vw * 1862 / 2884));
  background-color: #FFF3E8;
  background-image: url(./img/intro-bg.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  border-radius: 4rem 4rem 0 0;
  overflow: hidden;
}
.intro_container{
  width: calc(100% - 4.4rem);
  max-width: 139.6rem;
  min-height: calc(100vh - 6.6rem);
  margin: 0 auto;
  position: relative;
}
.intro_item{
  display: block;
  position: absolute;
  z-index: 2;
  height: auto;
  opacity: 0;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  image-rendering: -webkit-optimize-contrast;
}
.intro_section.ot_section_active .intro_item{
  animation: intro_message_pop .85s cubic-bezier(.2, .8, .2, 1) both,
    intro_message_pulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--intro-item-delay, 0s) + .2s), calc(var(--intro-item-delay, 0s) + 1.2s);
}
.intro_item_1{
  --intro-item-delay: .15s;
  width: 34rem;
  top: 8rem;
  left: 8rem;
}
.intro_item_2{
  --intro-item-delay: .6s;
  width: 35rem;
  top: 7rem;
  right: 10rem;
}
.intro_item_3{
  --intro-item-delay: 1.05s;
  width: 38rem;
  top: 40.2rem;
  right: -18rem;
}
.intro_item_4{
  --intro-item-delay: 1.5s;
  width: 40rem;
  top: 50.6rem;
  left: -13rem;
}
.intro_item_5{
  --intro-item-delay: 1.95s;
  width: 40rem;
  bottom: 6rem;
  left: 34.8rem;
}
.intro_item_6{
  --intro-item-delay: 2.4s;
  width: 38rem;
  right: 7.5rem;
  bottom: 1.6rem;
}
.intro_mosquito{
  display: block;
  position: absolute;
  z-index: 2;
  height: auto;
}
.intro_mosquito_1{
  width: 13rem;
  top: 4rem;
  left: 69.6rem;
  transform-origin: center;
}
.intro_section.ot_section_active .intro_mosquito_1{
  animation: intro_mosquito_approach 1.8s linear 3.05s both;
}
.intro_mosquito_2{
  width: 7.6rem;
  top: 26rem;
  right: -14rem;
  transform: scaleX(-1) rotate(-8deg);
}
.intro_mosquito_3{
  width: 20rem;
  right: 5rem;
  bottom: 14.4rem;
  transform: scaleX(-1)  rotate(-5deg);
}
.intro_actions{
  display: flex;
  align-items: center;
  gap: 2rem;
  position: absolute;
  top: 2.1rem;
  right: 0;
  z-index: 3;
}
.intro_icon_button,
.intro_messages_button{
  border: none;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease;
}
.intro_icon_button:hover{
  transform: scale(1.06);
}
.intro_icon_button:active,
.intro_messages_button:active{
  transform: scale(.96);
}
.intro_icon_button{
  display: block;
  width: 5rem;
  height: 5rem;
  padding: 0;
  background-color: transparent;
}
.intro_icon_button img{
  display: block;
  width: 100%;
  height: 100%;
}
.intro_content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70rem;
  margin: 0 auto;
  padding-top: 18.5rem;
}
.intro_logo{
  display: block;
  width: 54.3rem;
  height: auto;
  margin-bottom: 1.5rem;
}
.intro_text{
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #2D2D2D;
}
.intro_text_mobile{
  display: none;
}
.intro_text + .intro_text{
  margin-top: 1.2rem;
}
.intro_messages_button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 28rem;
  min-width: 28rem;
  height: 5.8rem;
  margin-top: 2rem;
  padding: 4.2rem 2rem 4.2rem 3.4rem;
  border-radius: 4rem;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  color: #FFFFFF;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  animation: intro_button_gradient 6s ease-in-out infinite;
  box-shadow: 0 .6rem 1.6rem rgba(0, 94, 171, .18);
  transition: background-position .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
.intro_messages_button:hover{
  background-position: 100% 50%;
  box-shadow: 0 1rem 2.4rem rgba(0, 94, 171, .28);
  filter: saturate(1.08);
  transform: translateY(-.2rem);
}
.intro_messages_button span{
  font-family: 'Gotham Pro';
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}
.intro_messages_button img{
  display: block;
  width: 6rem;
  height: 6rem;
  margin-right: -.1rem;
}
.intro_messages_button picture,
.drop_button picture,
.hand_button picture,
.materials_button picture{
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}
.sphere_section{
  --sphere-scroll-progress: 0;
  min-height: 70rem;
  margin-top: -22rem;
  padding: 8rem 0 10rem;
  border-radius: 4em 4em 0 0;
  background-color: #FFF6EE;
  overflow: visible;
  z-index: 3;
  transform: translateY(calc((1 - var(--sphere-scroll-progress)) * 4rem));
  transform-origin: center top;
  transition: transform .12s linear;
  will-change: transform;
}
.sphere_section_inner{
  width: calc(100% - 4.4rem);
  max-width: 139.6rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.sphere_intro_text{
  max-width: 112rem;
  margin: 0 auto;
  font-family: 'Gotham Pro';
  font-size: 2.8rem;
  line-height: 1.3;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.sphere_intro_text_mobile{
  display: none;
}
.sphere_intro_text strong{
  font-weight: 500;
}
.sphere_intro_text span{
  color: #FF2C17;
  font-weight: 700;
}
.sphere_intro_text sup{
  color: #FF2C17;
}
.sphere_decor{
  display: block;
  position: absolute;
  z-index: 1;
  height: auto;
}
.sphere_decor img{
  display: block;
  width: 100%;
  height: auto;
}
.sphere_decor_1,
.sphere_decor_2,
.sphere_decor_5{
  --scroll-reveal-progress: 0;
  --scroll-reveal-inverse: calc(1 - var(--scroll-reveal-progress));
  opacity: 1;
  transform-origin: center;
  transform: translateY(calc(var(--scroll-reveal-y, 3rem) * var(--scroll-reveal-inverse)));
  will-change: transform, opacity;
}
.sphere_decor_1{
  width: 25.5rem;
  top: 0;
  right: 0;
  --scroll-reveal-y: -4rem;
}
.sphere_decor_2{
  width: 21.6rem;
  top: 13rem;
  left: 0;
  --scroll-reveal-y: 5rem;
}
.sphere_decor_3{
  width: 21.6rem;
  left: 0;
  bottom: 10rem;
}
.sphere_decor_5{
  width: 17.8rem;
  top: 40rem;
  right: 0;
  --scroll-reveal-y: 5rem;
}
.sphere_visual{
  width: 145rem;
  height: 105rem;
  margin: -6em auto 0;
  position: relative;
}
.sphere_circle,
.sphere_effect,
.sphere_image{
  display: block;
  position: absolute;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sphere_circle{
  z-index: 1;
}
.sphere_section.ot_section_active .sphere_circle{
  animation: sphere_soft_pulse 4.8s linear .2s infinite;
}
.sphere_circle_1{
  width: 74rem;
}
.sphere_circle_2{
  width: 119rem;
}
.sphere_circle_3{
  width: 92rem;
}
.sphere_effect{
  width: 121rem;
  z-index: 2;
}
.sphere_section.ot_section_active .sphere_effect{
  animation: sphere_effect_pulse 4s ease-in-out .2s infinite;
}
.sphere_image{
  width: 91rem;
  z-index: 3;
}
.sphere_image img{
  display: block;
  width: 100%;
  height: auto;
}
.sphere_labels{
  width: 95rem;
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.sphere_label{
  position: absolute;
  margin: 0;
  font-family: 'Gotham Pro';
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
  transform: translate(-50%, -50%);
}
.sphere_label_bold{
  font-size: clamp(24px, 1.78vw, 32px);
  line-height: 130%;
  font-weight: 700;
}
.sphere_label_regular{
  font-size: clamp(16px, 1.16vw, 20px);
  line-height: 120%;
  font-weight: 400;
}
.sphere_label_itch{
  left: 50%;
  top: 26.5%;
}
.sphere_label_damage_text{
  left: 30.5%;
  top: 39.7%;
}
.sphere_label_itch_text{
  left: 70%;
  top: 39.7%;
}
.sphere_label_damage{
  left: 29%;
  top: 59.5%;
}
.sphere_label_scratches{
  left: 72%;
  top: 60.5%;
}
.sphere_label_scratches_text{
  left: 50%;
  top: 74.5%;
}
.sphere_arrow{
  display: block;
  width: 16.4rem;
  height: 16.4rem;
  position: absolute;
  left: 50.1%;
  top: 49.5%;
  z-index: 4;
  transform-origin: center;
}
.sphere_section.ot_section_active .sphere_arrow{
  animation: sphere_arrow_rotate 8s linear .2s infinite;
}

.percent_section{
  margin-top: -20rem;
  padding: 0;
  background-color: #FEF5ED;
  overflow: visible;
  z-index: auto;
}
.percent_decor{
  display: block;
  height: auto;
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.percent_decor_3{
  width: 32.2rem;
  right: 24rem;
  top: -28rem;
}
.percent_image{
  display: block;
  width: 126rem;
  max-width: calc(100% - 4.4rem);
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 6;
}
.percent_image img{
  display: block;
  width: 100%;
  height: auto;
}

.drop_section{
  min-height: 70rem;
  padding: 7rem 0 12rem;
  background-color: #FFF6EE;
  overflow: hidden;
  border-radius: 0 0 4em 4em;
  z-index: 5;
}
.drop_section_inner{
  width: calc(100% - 4.4rem);
  max-width: 139.6rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.drop_title{
  margin: 0 auto;
  font-family: 'Gotham Pro';
  font-size: 4.8rem;
  line-height: 1;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.drop_title span{
  display: block;
}
.drop_title span:last-child{
  background: linear-gradient(90deg, #FF2100 32.69%, #FF9B00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.drop_title sup{
  font-size: .55em;
  line-height: 0;
}
.drop_mosquito{
  --scroll-reveal-progress: 0;
  --scroll-reveal-inverse: calc(1 - var(--scroll-reveal-progress));
  display: block;
  width: 9rem;
  height: auto;
  position: absolute;
  top: 6.5rem;
  left: 11rem;
  z-index: 3;
  transform: translateY(calc(var(--scroll-reveal-inverse) * 5rem)) rotate(-12deg);
  will-change: transform;
}
.drop_section.ot_section_active .drop_mosquito{
  animation: drop_mosquito_approach 1.5s cubic-bezier(.2, .8, .2, 1) .35s both;
}
.drop_content{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  margin-left: -5rem;
}
.drop_left,
.drop_separator,
.drop_item{
  display: block;
  height: auto;
}
.drop_left img,
.drop_item img{
  display: block;
  width: 100%;
  height: auto;
}
.drop_left{
  width: 67.5rem;
}
.drop_separator{
  width: 1.1rem;
  margin-top: -9rem;
  transform: translateX(-1.5rem);
}
.drop_items{
  margin-top: -3rem;
  display: flex;
  flex-direction: column;
}
.drop_item + .drop_item{
  margin-top: 1.2rem;
}
.drop_item{
  width: 48rem;
  filter: drop-shadow(0px 0px 100px #0000001F);
  opacity: 0;
  transform: translateY(-4rem);
}
.drop_section.ot_section_active .drop_item{
  animation: drop_item_reveal .8s cubic-bezier(.2, .8, .2, 1) both;
}
.drop_section.ot_section_active .drop_item_1{
  animation-delay: .65s;
}
.drop_section.ot_section_active .drop_item_2{
  animation-delay: .95s;
}
.drop_section.ot_section_active .drop_item_3{
  animation-delay: 1.25s;
}
.drop_button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  min-width: 18.6rem;
  height: 5.8rem;
  margin: -4rem auto 0;
  padding: 4.2rem 1rem 4.2rem 3.4rem;
  border: none;
  border-radius: 4rem;
  outline: none;
  text-decoration: none;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  color: #FFFFFF;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 .6rem 1.6rem rgba(0, 94, 171, .18);
  animation: intro_button_gradient 6s ease-in-out infinite;
  cursor: pointer;
  transition: background-position .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
.drop_button:hover{
  background-position: 100% 50%;
  box-shadow: 0 1rem 2.4rem rgba(0, 94, 171, .28);
  filter: saturate(1.08);
  transform: translateY(-.2rem);
}
.drop_button:active{
  transform: scale(.96);
}
.drop_button span{
  font-family: 'Gotham Pro';
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: right;
}
.drop_button img{
  display: block;
  width: 6rem;
  height: 6rem;
  margin-right: -.1rem;
}
.hand_section{
  min-height: 82rem;
  margin-top: -3rem;
  padding: 7.5rem 0 0;
  background: none;
  overflow: visible;
}
.hand_section:before{
  content: '';
  display: block;
  width: 100%;
  height: calc(100% + 8rem);
  background-color: #FDE7CC;
  background-image: url(./img/hand-bg.webp);
  background-repeat: no-repeat;
  background-position: center -9rem;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}
.hand_section_inner{
  width: calc(100% - 4.4rem);
  max-width: 139.6rem;
  min-height: 82rem;
  margin: 5.2rem auto 0;
  position: relative;
  z-index: 2;
}
.hand_title{
  margin: 0 auto 2.2rem;
  font-family: 'Gotham Pro';
  font-size: 4.8rem;
  line-height: 1;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.hand_title span{
  color: #FF4C0B;
}
.hand_text{
  margin: 0 auto;
  max-width: 80rem;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.hand_text_mobile{
  display: none;
}
.hand_button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 28rem;
  min-width: 28rem;
  height: 5.8rem;
  margin: 3rem auto 0;
  padding: 4.2rem 1rem 4.2rem 3.4rem;
  border: none;
  border-radius: 4rem;
  outline: none;
  text-decoration: none;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  color: #FFFFFF;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 .6rem 1.6rem rgba(0, 94, 171, .18);
  animation: intro_button_gradient 6s ease-in-out infinite;
  cursor: pointer;
  transition: background-position .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
.hand_button:hover{
  background-position: 100% 50%;
  box-shadow: 0 1rem 2.4rem rgba(0, 94, 171, .28);
  filter: saturate(1.08);
  transform: translateY(-.2rem);
}
.hand_button:active{
  transform: scale(.96);
}
.hand_button span{
  font-family: 'Gotham Pro';
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: right;
  color: inherit;
}
.hand_button img{
  display: block;
  width: 6rem;
  height: 6rem;
  margin-right: -.1rem;
}
.hand_visual{
  width: 74.7rem;
  height: 59.3rem;
  margin: 3rem auto 0;
  position: relative;
  transform: translateX(14rem);
}
.hand_phone{
  display: block;
  width: 74.7rem;
  height: auto;
  position: relative;
  z-index: 2;
}
.hand_item,
.hand_mosquito{
  display: block;
  height: auto;
  position: absolute;
  z-index: 3;
}
.hand_item img{
  display: block;
  width: 100%;
  height: auto;
}
.hand_item{
  opacity: 0;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  image-rendering: -webkit-optimize-contrast;
}
.hand_section.ot_section_active .hand_item{
  animation: intro_message_pop .85s cubic-bezier(.2, .8, .2, 1) both,
    intro_message_pulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--hand-item-delay, 0s) + .2s), calc(var(--hand-item-delay, 0s) + 1.2s);
}
.hand_item_1{
  --hand-item-delay: .25s;
  width: 35.6rem;
  left: -15.5rem;
  top: 3.5rem;
}
.hand_item_2{
  --hand-item-delay: .65s;
  width: 25rem;
  right: 20rem;
  top: 9rem;
}
.hand_item_3{
  --hand-item-delay: 1.05s;
  width: 30.3rem;
  left: -17rem;
  top: 25.5rem;
}
.hand_item_4{
  --hand-item-delay: 1.45s;
  width: 27.8rem;
  right: 18rem;
  top: 33rem;
}
.hand_mosquito_1{
  width: 7.2rem;
  left: 40rem;
  top: 15rem;
  --scroll-reveal-progress: 0;
  --scroll-reveal-inverse: calc(1 - var(--scroll-reveal-progress));
  opacity: 1;
  transform-origin: center;
  transform: translateY(calc(var(--scroll-reveal-inverse) * 5.5rem)) rotate(-12deg);
  will-change: transform, opacity;
}
.hand_mosquito_2{
  width: 20rem;
  right: 34rem;
  top: 39rem;
  --scroll-reveal-progress: 0;
  --scroll-reveal-inverse: calc(1 - var(--scroll-reveal-progress));
  opacity: 0;
  transform-origin: center;
  transform: translateY(calc(var(--scroll-reveal-inverse) * 7rem)) scaleX(-1) rotate(-8deg);
  will-change: transform, opacity;
}
.hand_section.ot_section_active .hand_mosquito_2{
  animation: hand_mosquito_approach 1.7s linear 1.15s both;
}

.materials_section{
  margin-top: -1px;
  padding: calc(8rem + 1px) 0 9rem;
  background-color: #FFF6EE;
  border-radius: 4em 4em 0 0;
  overflow: hidden;
}
.materials_section_inner{
  width: calc(100% - 4.4rem);
  max-width: 139.6rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.materials_title{
  margin: 0 auto 4rem;
  font-family: 'Gotham Pro';
  font-size: 4rem;
  line-height: 1.2;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.materials_title span{
  display: block;
}
.materials_title span:last-child{
  background: linear-gradient(90deg, #FF2100 32.69%, #FF9B00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.materials_decor{
  display: block;
  height: auto;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  --scroll-reveal-progress: 0;
  --scroll-reveal-inverse: calc(1 - var(--scroll-reveal-progress));
  transform: translateY(calc(var(--scroll-reveal-y, 5rem) * var(--scroll-reveal-inverse)));
  will-change: transform;
}
.materials_decor_left{
  width: 22.2rem;
  left: 0;
  top: 22rem;
  --scroll-reveal-y: 5rem;
}
.materials_decor_right{
  width: 20.2rem;
  right: 0;
  top: 28rem;
  --scroll-reveal-y: 5rem;
}

.chat_main{
  padding-top: 6.6rem;
}
.chat_section{
  min-height: calc(100vh - 6.6rem);
  background-color: #F7EAD1;
  background-image: url(./img/chat-bg.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  border-radius: 4rem 4rem 0 0;
  padding-bottom: 8rem;
  margin-bottom: -8rem;
  overflow: hidden;
}
.chat_container{
  width: calc(100% - 4.4rem);
  max-width: 139.6rem;
  min-height: calc(100vh - 6.6rem);
  margin: 0 auto;
  position: relative;
}
.chat_fenistil_logo{
  display: block;
  width: 24rem;
  height: auto;
  position: absolute;
  left: 2rem;
  top: 4rem;
  z-index: 32;
}
.chat_fenistil_logo img{
  display: block;
  width: 100%;
  height: auto;
}
.chat_actions{
  display: flex;
  align-items: center;
  gap: 2rem;
  position: absolute;
  top: 5rem;
  right: 1.8rem;
  z-index: 32;
}
@keyframes chat_popup_backdrop_appear {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@keyframes chat_popup_card_appear {
  from {
    opacity: 0;
    transform: translateY(2rem) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat_start_popup {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;

  transition:
          opacity .7s ease,
          visibility 0s linear 0s;

  animation:
          chat_popup_backdrop_appear
          .9s ease backwards;
}

.chat_start_popup.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, .7s;
}

.chat_start_popup_card {
  width: 54rem;
  height: 61.4rem;
  padding: 2rem;
  position: relative;
  border-radius: 4rem;
  background-color: #FFFFFF;
  box-shadow: 0 1.8rem 4.4rem rgba(0, 0, 0, .22);

  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: center;

  transition:
          opacity .65s ease,
          transform .8s cubic-bezier(.22, .61, .36, 1);

  animation:
          chat_popup_card_appear
          1.1s cubic-bezier(.22, .61, .36, 1)
          .15s backwards;

  will-change: opacity, transform;
}

.chat_start_popup.is-hidden .chat_start_popup_card {
  opacity: 0;
  transform: translateY(1.5rem) scale(.98);
}

@media (prefers-reduced-motion: reduce) {
  .chat_start_popup,
  .chat_start_popup_card {
    animation: none;
    transition-duration: .01ms;
  }
}
.chat_start_popup_close{
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: none;
  outline: none;
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.chat_start_popup_close img{
  display: block;
  width: 100%;
  height: 100%;
}
.chat_start_popup_content{
  width: 50rem;
  height: 46.035rem;
  border-radius: 2.4rem;
  overflow: hidden;
  background: linear-gradient(0deg, #FFEEDF, #FFEEDF), linear-gradient(180deg, #FFEEDF 40%, #FFFFFF 100%);
}
.chat_start_popup_slides{
  position: relative;
  height: calc(100% - 7.2rem);
}
.chat_start_popup_slide{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(1.6rem);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.chat_start_popup_slide.is-active{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.chat_start_popup_steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  padding-top: 3.2rem;
}
.chat_start_popup_steps span{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: .2rem solid #F0522A;
  font-family: 'Gotham Pro';
  font-size: 2.317rem;
  line-height: 1;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: #F0522A;
  padding-top: .2rem;
}
.chat_start_popup_steps span.is-active{
  border: none;
  background: linear-gradient(83.61deg, #F0522A 15.45%, #FBB459 99.95%);
  color: #FFFFFF;
}
.chat_start_popup_title{
  margin-top: 2.5rem;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.chat_start_popup_text{
  margin-top: .5rem;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.chat_start_popup_text strong{
  font-weight: 700;
}
.chat_start_popup_text_choice{
  margin-top: 2.7rem;
}
.chat_start_popup_text_final{
  margin-top: 2.8rem;
}
.chat_start_popup_image{
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  margin-bottom: 8rem;
}
.chat_start_popup_text_choice + .chat_start_popup_image{
  margin-top: auto;
}
.chat_start_popup_text_final + .chat_start_popup_image{
  margin-top: auto;
}
.chat_start_popup_next{
  width: 50rem;
  height: 9.4rem;
  margin-top: 2rem;
  border: none;
  outline: none;
  border-radius: 10rem;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: #FFFFFF;
  cursor: pointer;
  transition: transform .25s ease;
}
.chat_start_popup_next:hover{
  transform: translateY(-.2rem);
}
.chat_start_popup_next:active{
  transform: scale(.96);
}
.chat_mosquito{
  display: block;
  height: auto;
  position: absolute;
  pointer-events: none;
  z-index: 6;
}
.chat_mosquito_left{
  width: 28rem;
  left: 0;
  top: 25rem;
}
.chat_mosquito_right{
  width: 8rem;
  right: 8rem;
  top: 53rem;
  transform: scaleX(-1) rotate(-12deg);
}
.chat_final_content{
  width: 170rem;
  max-width: 100%;
  position: absolute;
  left: 50%;
  top: 16rem;
  transform: translate(-50%, 2rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.4s ease .7s, transform 1.4s cubic-bezier(.16, 1, .3, 1) .7s, visibility 0s linear 2.1s;
}
.chat_container.is-chat-complete .chat_final_content{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: .7s, .7s, 0s;
}
.chat_final_title{
  font-family: 'Gotham Pro';
  font-size: 4rem;
  line-height: 1.2;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.chat_final_text{
  width: 64rem;
  max-width: 100%;
  margin-top: 2rem;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
}
.chat_final_mobile_break{
  display: none;
}
.chat_final_button{
  width: 29.4rem;
  height: 8.4rem;
  margin-top: 2rem;
  padding: 0 1rem 0 2.4rem;
  border: none;
  outline: none;
  text-decoration: none;
  border-radius: 8.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  color: #FFFFFF;
  box-shadow: 0 .6rem 1.6rem rgba(0, 94, 171, .18);
  animation: intro_button_gradient 6s ease-in-out infinite;
  cursor: pointer;
  transition: transform .25s ease;
}
.chat_final_button:hover{
  transform: translateY(-.2rem);
}
.chat_final_button:active{
  transform: scale(.96);
}
.chat_final_button span{
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: inherit;
  white-space: nowrap;
}
.chat_final_button img{
  display: block;
  width: 6.4rem;
  height: 6.4rem;
}
.chat_final_decoration_wrap{
  width: 100%;
  position: relative;
  margin-top: 5rem;
}
.chat_final_decoration{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.chat_final_mosquito{
  display: block;
  width: 11rem;
  height: auto;
  position: absolute;
  left: 4rem;
  top: 4rem;
  pointer-events: none;
}
.chat_phone_wrap{
  width: 80rem;
  max-width: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  right: auto;
  bottom: -16rem;
  transform: translateX(calc(-50% + 6rem));
  z-index: 2;
  transition: transform 1.8s cubic-bezier(.16, 1, .3, 1), opacity 1.4s ease;
}
.chat_phone_wrap.is-chat-finished{
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(-50% + 6rem)) translateY(120%);
}
.chat_hand{
  display: block;
  width: 100%;
  height: auto;
  transform: scaleY(1.08);
  transform-origin: center top;
}
.chat_screen{
  width: 52rem;
  height: 70rem;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 7.8rem;
  top: 5.9rem;
  z-index: 4;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chat_screen.chat_screen_wrong,
.chat_screen.chat_screen_correct{
  height: 65rem;
}
.chat_screen::-webkit-scrollbar{
  display: none;
}
.chat_screen:not(.chat_screen_step_2) .chat_progress_2,
.chat_screen:not(.chat_screen_step_2) .chat_question_2,
.chat_screen:not(.chat_screen_step_2) .chat_answers_2{
  display: none;
}
.chat_screen:not(.chat_screen_step_3) .chat_progress_3,
.chat_screen:not(.chat_screen_step_3) .chat_question_3,
.chat_screen:not(.chat_screen_step_3) .chat_answers_3{
  display: none;
}
.chat_screen:not(.chat_screen_step_4) .chat_progress_4,
.chat_screen:not(.chat_screen_step_4) .chat_question_4,
.chat_screen:not(.chat_screen_step_4) .chat_answers_4{
  display: none;
}
.chat_screen_step_2 .chat_progress_1,
.chat_screen_step_2 .chat_question_1,
.chat_screen_step_2 .chat_answers_1,
.chat_screen_step_2 .chat_wrong_answer_1,
.chat_screen_step_2 .chat_correct_answer_1{
  display: none;
}
.chat_screen_step_2 .chat_progress_2{
  display: flex;
}
.chat_screen_step_2 .chat_question_2{
  display: flex;
}
.chat_screen_step_2 .chat_answers_2{
  display: flex;
}
.chat_screen_step_3 .chat_progress_1,
.chat_screen_step_3 .chat_question_1,
.chat_screen_step_3 .chat_answers_1,
.chat_screen_step_3 .chat_progress_2,
.chat_screen_step_3 .chat_question_2,
.chat_screen_step_3 .chat_answers_2,
.chat_screen_step_3 .chat_wrong_answer_1,
.chat_screen_step_3 .chat_wrong_answer_2,
.chat_screen_step_3 .chat_correct_answer_1,
.chat_screen_step_3 .chat_correct_answer_2{
  display: none;
}
.chat_screen_step_3 .chat_progress_3{
  display: flex;
}
.chat_screen_step_3 .chat_question_3{
  display: flex;
}
.chat_screen_step_3 .chat_answers_3{
  display: flex;
}
.chat_screen_step_4 .chat_progress_1,
.chat_screen_step_4 .chat_question_1,
.chat_screen_step_4 .chat_answers_1,
.chat_screen_step_4 .chat_progress_2,
.chat_screen_step_4 .chat_question_2,
.chat_screen_step_4 .chat_answers_2,
.chat_screen_step_4 .chat_progress_3,
.chat_screen_step_4 .chat_question_3,
.chat_screen_step_4 .chat_answers_3,
.chat_screen_step_4 .chat_wrong_answer_1,
.chat_screen_step_4 .chat_wrong_answer_2,
.chat_screen_step_4 .chat_wrong_answer_3,
.chat_screen_step_4 .chat_correct_answer_1,
.chat_screen_step_4 .chat_correct_answer_2,
.chat_screen_step_4 .chat_correct_answer_3{
  display: none;
}
.chat_screen_step_4 .chat_progress_4{
  display: flex;
}
.chat_screen_step_4 .chat_question_4{
  display: flex;
}
.chat_screen_step_4 .chat_answers_4{
  display: flex;
}
.chat_screen_wrong .chat_question,
.chat_screen_wrong .chat_answers,
.chat_screen_correct .chat_question,
.chat_screen_correct .chat_answers{
  display: none;
}
.chat_screen_wrong:not(.chat_screen_step_2):not(.chat_screen_step_3):not(.chat_screen_step_4) .chat_wrong_answer_1,
.chat_screen_wrong.chat_screen_step_2 .chat_wrong_answer_2,
.chat_screen_wrong.chat_screen_step_3 .chat_wrong_answer_3,
.chat_screen_wrong.chat_screen_step_4 .chat_wrong_answer_4{
  display: flex;
}
.chat_screen_correct:not(.chat_screen_step_2):not(.chat_screen_step_3):not(.chat_screen_step_4) .chat_correct_answer_1,
.chat_screen_correct.chat_screen_step_2 .chat_correct_answer_2,
.chat_screen_correct.chat_screen_step_3 .chat_correct_answer_3,
.chat_screen_correct.chat_screen_step_4 .chat_correct_answer_4{
  display: flex;
}
.chat_progress{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.2rem;
  flex: 0 0 auto;
  opacity: 0;
  translate: 0 1.8rem;
  position: relative;
  z-index: 15;
  padding: 1rem 0 .8rem;
  animation: chat_content_in .7s ease forwards;
  animation-delay: .15s;
}
.chat_progress_text{
  font-family: 'Gotham Pro';
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: #F4763B;
}
.chat_progress_dots{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.chat_progress_dots img{
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}
.chat_question{
  display: flex;
  align-items: flex-start;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 3.2rem;
  margin-left: 2.7rem;
  position: relative;
  opacity: 0;
  translate: 0 2.4rem;
  animation: chat_content_in .8s ease forwards;
  animation-delay: .45s;
}
.chat_question_avatar{
  width: 4.8rem;
  height: 4.8rem;
  display: block;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.chat_question_bubble{
  width: 43.8rem;
  min-height: 17.2rem;
  margin-left: -1.1rem;
  margin-top: -0.5rem;
  padding: 3rem 2.5rem 4rem 5.5rem;
  display: flex;
  align-items: center;
  background-image: url(./img/chat-message-bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.chat_question_bubble p{
  font-family: 'Gotham Pro';
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #000000;
}
.chat_question_bubble span{
  color: #FF2100;
}
.chat_mobile_break{
  display: none;
}
.chat_answers{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 1rem;
  overflow-x: visible;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1rem;
}
.chat_answers::-webkit-scrollbar{
  display: none;
}
.chat_answer{
  -webkit-appearance: none;
  appearance: none;
  width: 42rem;
  min-height: 10rem;
  flex: 0 0 auto;
  padding: 2rem 2.4rem 3rem 3.2rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  border: none;
  outline: none;
  box-shadow: none;
  position: relative;
  background-color: transparent;
  background-image: url(./img/chat-answer-bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: 0;
  translate: 0 2.4rem;
  animation: chat_content_in .75s ease forwards;
  transition: transform .25s ease;
}
.chat_answer_big{
  background-image: url(./img/chat-answer-bg-big.webp);
}
.chat_answer:hover{
  transform: translateY(-.3rem);
}
.chat_answer:nth-child(1){
  animation-delay: .9s;
}
.chat_answer:nth-child(2){
  animation-delay: 1.1s;
}
.chat_answer:nth-child(3){
  animation-delay: 1.3s;
}
.chat_answer+.chat_answer{
  margin-top: -1.2rem;
}
.chat_answers_2 .chat_answer+.chat_answer{
  margin-top: -1.2rem;
}
.chat_answers_3 .chat_answer+.chat_answer{
  margin-top: -1rem;
}
.chat_answers_4 .chat_answer+.chat_answer{
  margin-top: -1rem;
}
.chat_question_2,
.chat_question_3,
.chat_question_4{
  margin-top: 1.2rem;
}
.chat_answers_2,
.chat_answers_3,
.chat_answers_4{
  margin-top: .6rem;
}
.chat_answers_2 .chat_answer,
.chat_answers_3 .chat_answer,
.chat_answers_4 .chat_answer{
  padding-top: 1.6rem;
  padding-bottom: 2.4rem;
}
.chat_answers_3 .chat_answer:last-child{
  padding-top: 2.4rem;
  padding-bottom: 3.4rem;
  background-image: url(./img/chat-answer-bg-big.webp);
}
.chat_answer_letter{
  width: 5.2rem;
  height: 5.2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 5.2rem;
  border: .31rem solid #FDCA8C;
  border-radius: 5.6rem;
  font-family: 'Gotham Pro';
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #000000;
}
.chat_answer_text{
  max-width: 29rem;
  font-family: 'Gotham Pro';
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: left;
  color: #000000;
}
.chat_answer_text br{
  display: none;
}
.chat_wrong_answer,
.chat_correct_answer{
  display: none;
  width: 48.7rem;
  height: calc(100% - 5.8rem);
  margin: 1rem auto 0;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  opacity: 0;
  translate: 0 2.4rem;
  animation: chat_content_in .35s ease forwards;
}
.chat_wrong_answer:before,
.chat_wrong_answer:after,
.chat_correct_answer:before,
.chat_correct_answer:after{
  content: "";
  position: absolute;
  left: 0;
  width: 48.7rem;
  height: 4rem;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .25s ease;
}
.chat_wrong_answer:before,
.chat_correct_answer:before{
  display: none;
}
.chat_wrong_answer:after,
.chat_correct_answer:after{
  bottom: 6.4rem;
  border-radius: 0 0 4rem 4rem;
  height: 12rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .18) 22%, rgba(255, 255, 255, .48) 48%, rgba(255, 255, 255, .78) 72%, #FFFFFF 100%);
}
.chat_wrong_answer.has-card-scroll-top:before,
.chat_correct_answer.has-card-scroll-top:before{
  opacity: 1;
}
.chat_wrong_answer.has-card-scroll-bottom:after,
.chat_correct_answer.has-card-scroll-bottom:after{
  opacity: var(--result-fade-opacity, 1);
}
.chat_wrong_answer_2 .chat_wrong_answer_image{
  width: 38rem;
  margin-top: 4.2rem;
}
.chat_wrong_answer_3 .chat_wrong_answer_image{
  width: 45rem;
  margin-top: 5.2rem;
}
.chat_wrong_answer_4 .chat_wrong_answer_image{
  width: 45rem;
  margin-top: 4rem;
}
.chat_wrong_answer_card,
.chat_correct_answer_card{
  width: 48.7rem;
  height: 52.6rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2.5rem;
  border-radius: 4rem;
  background-color: #FFFFFF;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}
.chat_wrong_answer_card::-webkit-scrollbar,
.chat_correct_answer_card::-webkit-scrollbar{
  display: none;
}
.chat_wrong_answer_label,
.chat_correct_answer_label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.6rem;
  padding: 0 3rem;
  border-radius: 3.6rem;
  background-color: #FF2100;
  font-family: 'Gotham Pro';
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: #FFFFFF;
}
.chat_correct_answer_label{
  background-color: #09AF00;
}
.chat_wrong_answer_text,
.chat_correct_answer_text{
  margin: 1.4rem 0 0;
  font-family: 'Gotham Pro';
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #000000;
}
.chat_correct_answer_text{
  font-size: 1.9rem;
}
.chat_wrong_answer_label + .chat_wrong_answer_text,
.chat_correct_answer_label + .chat_correct_answer_text{
  margin-top: 2rem;
}
.chat_wrong_answer_text sup,
.chat_correct_answer_text sup{
  font-size: .7em;
  line-height: 0;
}
.chat_correct_answer_orange{
  color: #FF9B00;
}
.chat_correct_answer_red{
  color: #FF2100;
}
.chat_correct_answer_gradient{
  background: linear-gradient(90deg, #FF2100 10%, #FF9B00 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chat_correct_answer_text_bullet{
  position: relative;
  padding-left: 2.6rem;
}
.chat_correct_answer_text_bullet span{
  position: absolute;
  left: .4rem;
}
.chat_correct_answer_text_bullet_next{
  margin-top: .4rem;
}
.chat_wrong_answer_image,
.chat_correct_answer_image{
  display: block;
  width: 45rem;
  height: auto;
  margin: 2rem auto 0;
}
.chat_correct_answer_image{
  width: 38.8rem;
  margin-top: 1.5rem;
}
.chat_correct_answer_card{
  height: 52.6rem;
}
.chat_correct_answer_1 .chat_correct_answer_label + .chat_correct_answer_text{
  margin-top: 1.6rem;
}
.chat_correct_answer_1 .chat_correct_answer_text{
  font-size: 1.6rem;
  line-height: 1.2;
}
.chat_correct_answer_1 .chat_correct_answer_text_bullet{
  margin-top: 1.2rem;
  padding-left: 2.2rem;
}
.chat_correct_answer_1 .chat_correct_answer_text_bullet span{
  left: .5rem;
}
.chat_correct_answer_1 .chat_correct_answer_image{
  margin-top: 1.2rem;
}
.chat_correct_answer_2 .chat_correct_answer_image{
  width: 38rem;
  margin-top: 1.5rem;
}
.chat_correct_answer_2 .chat_correct_answer_text{
  font-size: 1.6rem;
  line-height: 1.2;
}
.chat_correct_answer_2 .chat_correct_answer_label + .chat_correct_answer_text{
  margin-top: 1.6rem;
}
.chat_correct_answer_2 .chat_correct_answer_text_bullet{
  margin-top: 1.2rem;
  padding-left: 2.2rem;
}
.chat_correct_answer_2 .chat_correct_answer_text_bullet span{
  left: .5rem;
}
.chat_correct_answer_2 .chat_correct_answer_text_bullet_next{
  margin-top: .2rem;
}
.chat_correct_answer_3 .chat_correct_answer_text{
  font-size: 1.72rem;
  line-height: 1.2;
}
.chat_correct_answer_3 .chat_correct_answer_image{
  width: 38rem;
  margin-top: 3rem;
}
.chat_correct_answer_4 .chat_correct_answer_text{
  font-size: 1.6rem;
  line-height: 1.2;
}
.chat_correct_answer_4 .chat_correct_answer_label + .chat_correct_answer_text{
  margin-top: 2.8rem;
}
.chat_correct_answer_4 .chat_correct_answer_image{
  width: 38rem;
  margin-top: 3rem;
}
.chat_wrong_answer_actions,
.chat_correct_answer_actions{
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex: 0 0 auto;
  margin-top: -2rem;
  position: sticky;
  bottom: 0;
  z-index: 16;
}
.chat_wrong_answer_back,
.chat_wrong_answer_next,
.chat_correct_answer_back,
.chat_correct_answer_next{
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform .25s ease;
}
.chat_wrong_answer_back:hover,
.chat_wrong_answer_next:hover,
.chat_correct_answer_back:hover,
.chat_correct_answer_next:hover{
  transform: translateY(-.2rem);
}
.chat_wrong_answer_back:active,
.chat_wrong_answer_next:active,
.chat_correct_answer_back:active,
.chat_correct_answer_next:active{
  transform: scale(.96);
}
.chat_wrong_answer_back,
.chat_correct_answer_back{
  width: 8.4rem;
  height: 8.4rem;
  padding: 1.2rem;
  border-radius: 50%;
  background-color: #FEE9C8;
}
.chat_wrong_answer_back img,
.chat_correct_answer_back img{
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}
.chat_wrong_answer_next,
.chat_correct_answer_next{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 37.6rem;
  height: 8.4rem;
  padding: 0 1rem 0 3rem;
  border-radius: 8.4rem;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  color: #FFFFFF;
  animation: intro_button_gradient 6s ease-in-out infinite;
}
.chat_wrong_answer_next span,
.chat_correct_answer_next span{
  font-family: 'Gotham Pro';
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: inherit;
  white-space: nowrap;
}
.chat_wrong_answer_next img,
.chat_correct_answer_next img{
  display: block;
  width: 6rem;
  height: 6rem;
  flex: 0 0 auto;
}
@media screen and (min-width: 769px) {
  .chat_download_button{
    width: 29.4rem;
    margin-left: auto;
    padding-left: 2.4rem;
  }
}
@keyframes chat_content_in{
  0%{
    opacity: 0;
    translate: 0 2.4rem;
  }
  100%{
    opacity: 1;
    translate: 0 0;
  }
}
.materials_cards{
  display: flex;
  justify-content: center;
  gap: 2.4rem;
}
.materials_card{
  width: 42rem;
  height: 50.5rem;
  padding: 2rem;
  border-radius: 4rem;
  background-color: #FFFFFF;
  position: relative;
}
.materials_photo_wrap{
  position: relative;
  margin-bottom: 1.6rem;
}
.materials_photo{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2rem;
}
.materials_bookmark{
  display: block;
  width: 5rem;
  height: 6rem;
  position: absolute;
  top: -2rem;
  right: 2.2rem;
}
.materials_card_title{
  margin: 0 0 1.6rem;
  font-family: 'Gotham Pro';
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: #000000;
}
.materials_card_text{
  margin: 0;
  font-family: 'Gotham Pro';
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #000000;
}
.mobile_only_break{
  display: none;
}
.materials_button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.333rem;
  width: 25.5rem;
  height: 6rem;
  padding: 1rem 1rem 1rem 1.667rem;
  border: none;
  border-radius: 7.5rem;
  outline: none;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  color: #FFFFFF;
  box-shadow: 0 .6rem 1.6rem rgba(0, 94, 171, .18);
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  animation: intro_button_gradient 6s ease-in-out infinite;
  cursor: pointer;
  transition: background-position .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
.materials_button:hover{
  background-position: 100% 50%;
  box-shadow: 0 1rem 2.4rem rgba(0, 94, 171, .28);
  filter: saturate(1.08);
  transform: translateY(-.2rem);
}
.materials_button:active{
  transform: scale(.96);
}
.materials_button span{
  font-family: 'Gotham Pro';
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #FFFFFF;
  white-space: nowrap;
}
.materials_button img{
  display: block;
  width: 4.6rem;
  height: 4.6rem;
  flex: 0 0 auto;
}
/* ---------- main end ---------- */

/* ---------- footer start ---------- */

.ot_footer{
  width: 116rem;
  margin: 2rem auto 0;
  padding-bottom: 3rem;
  background-color: #FFF6EE;
  position: relative;
  isolation: isolate;
}
.ot_footer:before{
  content: '';
  display: block;
  width: 100%;
  height: calc(100% + 2rem);
  background-color: #FFF6EE;
  position: absolute;
  top: -2rem;
  left: 0;
  z-index: -1;
  transform: none;
  box-shadow: 0 0 0 100vmax #FFF6EE;
  clip-path: inset(0 -100vmax);
}
.chat_main + .ot_footer{
  width: 100%;
  margin-top: 0;
  padding: 3rem;
  border-radius: 4rem;
  background-color: #FFFFFF;
  position: relative;
  z-index: 5;
}
.chat_main + .ot_footer > *{
  width: 116rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.chat_main + .ot_footer:before{
  display: none;
}
.sources_section{
  width: 100%;
  padding: 1.8rem 2.4rem;
  background-color: #fff;
  border-radius: 1.6rem;
  margin-top: 1.2rem;
}
.sources_title{
  display: block;
  width: 100%;
  font-family: 'Gotham Pro Narrow';
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  color: #000F26;
  cursor: pointer;
  position: relative;
  text-align: left;
}
.sources_title:before{
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  right: 0;
  background-image: url(./img/arrow-down.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform .6s ease;
  transform: translateY(-50%);
}
.open_sources.sources_title:before{
  transform: translateY(-50%) rotate(180deg);
}
.sources_container{
  display: block;
  width: 100%;
  overflow: hidden;
  height: 0;
  transition: height .6s ease;
}
.sources_wrapper{
  display: block;
  width: 100%;
}
.sources{
  display: block;
  padding-top: 1.2rem;
}
.source{
  display: block;
  margin-top: .4rem;
  font-family: Roboto, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #616B79;
  vertical-align: middle;
  text-align: left;
  padding-left: 0;
  position: relative;
}
.source span{
  position: absolute;
  top: 0;
  left: 0;
}
.source a{
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.source a:hover{
  text-decoration: none;
}
.footer_info_text{
  color: var(--grey-color);
  margin-top: 3.4rem;
  text-align: left;
}
.disclaimer_container{
  width: 100%;
  margin-top: 0;
}
.disclaimer_container picture{
  display: block;
  width: 100%;
}
.disclaimer_image{
  display: block;
  width: 100%;
}
.haleon_section{
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  padding: 2.4rem 2.8rem 2.4rem;
  background-color: #FFFFFF;
  border-radius: 1.6rem;
  margin-top: 1.2rem;
  position: relative;
  z-index: 2;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);
}
.haleon_section:before{
  content: '';
  display: block;
  height: 1px;
  background-color: rgba(0, 0, 0, .16);
  position: absolute;
  left: 2.8rem;
  right: 2.8rem;
  top: 7.2rem;
}
.logo_haleon_footer{
  display: block;
  width: 28.8rem;
}
.logo_haleon_image{
  display: block;
  width: 100%;
}
.haleon_section_text{
  display: block;
  grid-column: 1 / -1;
  font-size: 1.6rem;
  line-height: 1.2em;
  font-family: Verdana;
  margin-top: 1.8rem;
  color: #444444;
}
.haleon_section_text_bottom_line{
  grid-column: 2;
  align-self: center;
  padding-bottom: 0;
  border-bottom: none;
  margin-top: 0;
  text-align: right;
}
.haleon_section_text_bottom_line + .haleon_section_text{
  margin-top: 4.4rem;
}
.haleon_section_text a{
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.haleon_section_text a:hover{
  text-decoration: none;
}
.haleon_section_black{
  width: 100%;
  padding: 4.4rem 2.4rem 2.4rem;
  background-color: #000000;
  border-radius: 0 0 1.6rem 1.6rem;
  margin-top: -2rem;
}
.haleon_section_black_title{
  display: block;
  font-size: 1.6rem;
  line-height: 1.2em;
  color: #FFFFFF;
  font-weight: 700;
  font-family: Verdana;
}
.haleon_section_black_text{
  display: block;
  font-size: 1.6rem;
  line-height: 1.2em;
  color: #FFFFFF;
  font-weight: 400;
  font-family: Verdana;
  margin-top: 2rem;
}
.haleon_section_black .footer_info_text{
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ---------- footer end ---------- */

.back_to_top_button{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  width: 7rem;
  height: 7rem;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  background-size: 220% 100%;
  border-radius: 50%;
  position: fixed;
  right: 4rem;
  bottom: 4rem;
  z-index: -100;
  transition: opacity .6s ease, background-position .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
  border: none;
  outline: none;
  cursor: pointer;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
}
.back_to_top_button svg{
  width: 55%;
  fill: #FFFFFF;
  transition: transform .6s ease;
}
.back_to_top_button.active{
  z-index: 18;
  opacity: 1;
}
.back_to_top_button.active:hover{
  background-position: 100% 50%;
  box-shadow: 0 1rem 2.4rem rgba(0, 94, 171, .28);
  filter: saturate(1.08);
  transform: translateY(-.2rem);
}
.back_to_top_button:hover svg{
  transform: translateY(-.5rem);
}

@media screen and (min-width: 769px) and (max-width: 1800px) {
  .intro_item_5{
    display: block;
    bottom: -2rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1600px) {
  .intro_item_5,
  .intro_item_3,
  .intro_item_4{
    display: none;
  }
  .hand_mosquito_1{
    left: 8rem;
  }
  .hand_mosquito_2{
    right: 6rem;
  }
  .materials_section{
    margin-top: -.6rem;
    padding-top: 8.6rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1440px) {
  .chat_phone_wrap{
    bottom: -22rem;
  }
}

@media screen and (min-width: 1025px) and (max-height: 950px) {
  .chat_page .chat_section,
  .chat_page .chat_container{
    min-height: max(calc(100vh - 6.6rem), 76rem);
    min-height: max(calc(100dvh - 6.6rem), 76rem);
  }
  .chat_page .chat_phone_wrap{
    top: 2rem;
    bottom: auto;
    scale: .92;
    transform-origin: top center;
  }
}

@media screen and (max-width: 1280px) {
  html{
    font-size: 8px;
  }
}

@media screen and (max-width: 1024px) {
  html{
    font-size: .7vw;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .chat_start_popup_card{
    scale: .9;
  }
  .chat_page .chat_main{
    padding-top: 8.4rem;
  }
  .chat_page .chat_section{
    min-height: calc(100vh - 8.4rem);
    padding-bottom: 6rem;
    margin-bottom: -6rem;
  }
  .chat_page .chat_container{
    min-height: calc(100vh - 8.4rem);
  }
  .chat_page .chat_fenistil_logo{
    width: 22rem;
    left: 2rem;
    top: 3rem;
  }
  .chat_page .chat_actions{
    top: 3rem;
    right: 2rem;
  }
  .chat_page .chat_phone_wrap{
    width: 80rem;
    max-width: 92vw;
    bottom: -12rem;
    transform: translateX(-50%);
  }
  .chat_page .chat_phone_wrap.is-chat-finished{
    transform: translateX(-50%) translateY(120%);
  }
  .chat_page .chat_mosquito_left{
    width: 22rem;
    top: 22rem;
  }
  .chat_page .chat_mosquito_right{
    right: 3rem;
    top: 44rem;
  }
  .chat_page .chat_final_content{
    width: calc(100% - 8rem);
    top: 12rem;
  }
  .chat_page .chat_final_title{
    font-size: 4.6rem;
  }
  .chat_page .chat_final_text{
    font-size: 2.3rem;
  }
  .chat_page .chat_wrong_answer_label,
  .chat_page .chat_correct_answer_label{
    height: 4.8rem;
    min-width: 20rem;
    padding: 0 3.6rem;
    border-radius: 4.8rem;
    font-size: 2.2rem;
  }
  .chat_page .chat_wrong_answer_back img,
  .chat_page .chat_correct_answer_back img,
  .chat_page .chat_wrong_answer_next img,
  .chat_page .chat_correct_answer_next img{
    width: 5.8rem;
    height: 5.8rem;
  }
  .chat_page .chat_final_decoration_wrap{
    margin-top: 3rem;
  }
  .ot_header{
    height: 8.4rem;
  }
  .header_nav_link,
  .header_portal_button{
    height: 4.8rem;
    gap: 1.4rem;
    padding: 1.2rem 1.4rem;
    font-size: 1.6rem;
    line-height: 1.2;
  }
  .header_nav_link{
    min-width: 10.8rem;
  }
  .header_portal_button{
    width: 24rem;
  }
  .header_nav_link img,
  .header_portal_button img{
    width: .8rem;
    height: 1.8rem;
  }
  .header_logo img{
    width: 29rem;
  }
  .ot_main:not(.chat_main){
    padding-top: 8.4rem;
  }
  .ot_main:not(.chat_main) .intro_section,
  .ot_main:not(.chat_main) .intro_container{
    min-height: 88rem;
  }
  .ot_main:not(.chat_main) .intro_content{
    padding-top: 13rem;
  }
  .ot_main:not(.chat_main) .intro_logo{
    width: 48rem;
  }
  .ot_main:not(.chat_main) .intro_text{
    font-size: 2.4rem;
  }
  .ot_main:not(.chat_main) .intro_messages_button,
  .ot_main:not(.chat_main) .hand_button{
    min-width: 34rem;
    width: 34rem;
    height: 9rem;
  }
  .ot_main:not(.chat_main) .intro_messages_button span,
  .ot_main:not(.chat_main) .hand_button span{
    font-size: 2.6rem;
  }
  .ot_main:not(.chat_main) .intro_messages_button img,
  .ot_main:not(.chat_main) .hand_button img{
    width: 6.8rem;
    height: 6.8rem;
  }
  .ot_main:not(.chat_main) .intro_item_5,
  .ot_main:not(.chat_main) .intro_item_6{
    display: none;
  }
  .ot_main:not(.chat_main) .intro_item_2{
    top: auto;
    bottom: 4rem;
    left: 4rem;
    right: auto;
  }
  .ot_main:not(.chat_main) .intro_section{
    background-size: cover;
    background-position: center top;
  }
  .ot_main:not(.chat_main) .intro_mosquito_1{
    left: 78rem;
  }
  .ot_main:not(.chat_main) .intro_mosquito_3{
    right: -2rem;
  }
  .ot_main:not(.chat_main) .sphere_section{
    min-height: 86rem;
    margin-top: -10rem;
    padding-top: 9rem;
  }
  .ot_main:not(.chat_main) .sphere_intro_text{
    max-width: 80rem;
    font-size: 3rem;
  }
  .ot_main:not(.chat_main) .sphere_visual{
    width: 114rem;
    height: 85rem;
  }
  .ot_main:not(.chat_main) .sphere_circle_1{
    width: 98rem;
  }
  .ot_main:not(.chat_main) .sphere_circle_2{
    width: 82rem;
  }
  .ot_main:not(.chat_main) .sphere_circle_3{
    width: 65rem;
  }
  .ot_main:not(.chat_main) .sphere_effect{
    width: 98rem;
    max-width: none;
  }
  .ot_main:not(.chat_main) .sphere_image{
    width: 76rem;
  }
  .ot_main:not(.chat_main) .sphere_labels{
    width: 79rem;
  }
  .ot_main:not(.chat_main) .sphere_arrow{
    width: 12rem;
    height: 12rem;
  }
  .ot_main:not(.chat_main) .sphere_label_bold{
    font-size: 2.6rem;
  }
  .ot_main:not(.chat_main) .sphere_label_regular{
    font-size: 1.7rem;
  }
  .ot_main:not(.chat_main) .sphere_decor_3{
    display: none;
  }
  .ot_main:not(.chat_main) .percent_section{
    margin-top: -12rem;
    background-color: #FEF5ED;
  }
  .ot_main:not(.chat_main) .percent_image{
    width: 94rem;
  }
  .ot_main:not(.chat_main) .drop_section{
    min-height: 82rem;
    padding-bottom: 10rem;
  }
  .ot_main:not(.chat_main) .drop_title{
    font-size: 4.4rem;
  }
  .ot_main:not(.chat_main) .drop_left{
    width: 43rem;
  }
  .ot_main:not(.chat_main) .drop_item{
    width: 34rem;
  }
  .ot_main:not(.chat_main) .hand_section{
    min-height: 90rem;
    padding-bottom: 12rem;
  }
  .ot_main:not(.chat_main) .hand_section_inner{
    min-height: 82rem;
  }
  .ot_main:not(.chat_main) .hand_title{
    font-size: 5.2rem;
  }
  .ot_main:not(.chat_main) .hand_text{
    font-size: 2.8rem;
  }
  .ot_main:not(.chat_main) .hand_visual{
    width: 92rem;
    height: 60rem;
    margin-top: 4rem;
  }
  .ot_main:not(.chat_main) .hand_phone{
    width: 94rem;
  }
  .ot_main:not(.chat_main) .materials_section{
    padding-top: 10rem;
  }
  .ot_main:not(.chat_main) .materials_title{
    max-width: 84rem;
    font-size: 5rem;
  }
  .ot_main:not(.chat_main) .materials_cards{
    gap: 3.2rem;
  }
  .ot_main:not(.chat_main) .materials_card{
    width: 48rem;
    height: 62rem;
    padding: 2.2rem;
  }
  .ot_main:not(.chat_main) .materials_photo{
    height: 25rem;
    object-fit: cover;
  }
  .ot_main:not(.chat_main) .materials_card_title{
    font-size: 2.9rem;
  }
  .ot_main:not(.chat_main) .materials_card_text{
    font-size: 2.35rem;
  }
  .ot_main:not(.chat_main) .materials_button{
    width: 31rem;
    height: 7rem;
  }
  .ot_main:not(.chat_main) .materials_button span{
    font-size: 2.2rem;
  }
  .ot_main:not(.chat_main) .materials_button img{
    width: 5.2rem;
    height: 5.2rem;
  }
}

@media screen and (min-width: 2000px) {
  html{
    font-size: .52vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro_item,
.intro_mosquito_1,
.sphere_circle,
.sphere_effect,
.sphere_arrow,
.sphere_decor_1,
.sphere_decor_2,
.sphere_decor_5,
.drop_mosquito,
.drop_item,
.hand_item,
.hand_mosquito_1,
.hand_mosquito_2,
.materials_decor_left,
.materials_decor_right{
    opacity: 1;
    animation: none;
    transform: none;
  }
  .sphere_section{
    transform: none;
    transition: none;
  }
  .hand_mosquito_2{
    transform: scaleX(-1) rotate(-8deg);
  }
  .hand_mosquito_1{
    transform: rotate(-12deg);
  }
  .drop_mosquito{
    transform: rotate(-12deg);
  }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  html{
    font-size: .7vw;
  }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  html{
    font-size: 1vw;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .ot_h3{
    font-size: 6rem;
    line-height: 1em;
  }
  .ot_h4{
    font-size: 4.4rem;
    line-height: 1.15em;
  }
  .ot_text{
    font-size: 3rem;
    line-height: 1.4em;
  }
  sup{
    font-size: .7em;
    line-height: .1em;
  }
  br.desktop{
    display: none;
  }

  /* ---------- common end ---------- */

  /* ---------- header start ---------- */

  .ot_header{
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100vw;
    height: 56px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: visible;
    background-color: #FFFFFF;
    z-index: 10;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .is-project-header-visible .ot_header{
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .header_inner{
    width: calc(100% - 4rem);
    min-width: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 10;
  }
  .header_burger{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
  }
  .header_burger:before{
    content: '';
    position: absolute;
    inset: -10px;
  }
  .header_burger img{
    display: block;
    width: 36px;
    height: 36px;
  }
  .header_nav,
  .header_portal_button{
    display: none;
  }
  .header_logo{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100vw - 66px);
    margin-left: auto;
    overflow: hidden;
  }
  .header_logo img{
    width: min(220px, 100%);
    max-width: 100%;
  }
  .header_mobile_menu{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 66vw;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    padding: 5.8vw 4.4vw;
    gap: 3.8vw;
    position: absolute;
    left: 0;
    top: 56px;
    z-index: 9;
    background-color: rgba(255, 255, 255, .96);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform .35s ease, opacity .35s ease;
  }
  .ot_header.is-mobile-menu-open .header_mobile_menu{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
  .header_mobile_menu_link{
    display: inline-flex;
    align-items: center;
    min-height: 4.27vw;
    font-family: Verdana, sans-serif;
    font-size: 3.2vw;
    line-height: 4.27vw;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-transform: uppercase;
    vertical-align: middle;
    color: #000000;
    text-decoration: none;
  }
  .header_mobile_menu_link + .header_mobile_menu_link{
    margin-top: 2.4vw;
  }
  .header_mobile_messages_button{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4vw;
    width: 53.33vw;
    height: 13.33vw;
    margin-top: 5.6vw;
    padding: 0 1.4vw 0 6vw;
    border: none;
    border-radius: 13.33vw;
    outline: none;
    text-decoration: none;
    background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
    background-size: 220% 100%;
    color: #FFFFFF;
    box-shadow: 0 .6rem 1.6rem rgba(0, 94, 171, .18);
    animation: intro_button_gradient 6s ease-in-out infinite;
    cursor: pointer;
  }
  .header_mobile_messages_button span{
    font-family: 'Gotham Pro';
    font-size: 4.1vw;
    line-height: 1.2;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .header_mobile_messages_button picture{
    display: block;
    flex: 0 0 auto;
    width: 9.8vw;
    height: 9.8vw;
    line-height: 0;
  }
  .header_mobile_messages_button img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .chat_page .header_mobile_messages_button{
    display: none;
  }
  .header_mobile_portal_link{
    margin-top: 5.6vw;
  }
  .chat_page .header_mobile_portal_link{
    margin-top: 2.4vw;
  }

  .project_fixed_header_inner{
    width: calc(100% - 4rem);
    height: 100%;
  }
  .project_fixed_header{
    display: none;
  }
  .project_fixed_logo{
    width: 34rem;
  }
  .project_fixed_actions{
    gap: 2rem;
  }
  .project_fixed_messages_button{
    min-width: 31rem;
    height: 9rem;
    border-radius: 4.5rem;
    padding-left: 4rem;
  }
  .project_fixed_messages_button span{
    font-size: 3.2rem;
  }
  .project_fixed_messages_button img{
    width: 3.6rem;
    height: 3.6rem;
  }
  .project_fixed_icon_button{
    width: 8rem;
    height: 8rem;
  }

  /* ---------- header end ---------- */

  /* ---------- main start ---------- */

  .ot_main{
    padding-top: 56px;
    overflow-x: clip;
  }

  .intro_section,
.intro_container{
    min-height: 182rem;
  }
  .intro_section{
    background-image: url(./img/intro-bg-mobile.webp);
    background-size: 100% 100%;
    background-position: center top;
    border-radius: 0;
  }
  .intro_container{
    width: calc(100% - 4rem);
  }
  .intro_item_1{
    --intro-item-delay: .15s;
    width: 42rem;
    top: -4rem;
    left: 2.6rem;
    rotate: 20deg;
  }
  .intro_item_2{
    --intro-item-delay: .55s;
    width: 44rem;
    top: 11rem;
    right: -1rem;
    rotate: 8deg;
  }
  .intro_item_3{
    display: none;
  }
  .intro_item_4{
    display: none;
  }
  .intro_item_5{
    --intro-item-delay: .95s;
    width: 58rem;
    left: 6rem;
    bottom: 40rem;
  }
  .intro_item_6{
    --intro-item-delay: 1.35s;
    width: 55rem;
    right: 1rem;
    bottom: 25rem;
  }
  .intro_mosquito_1{
    width: 14rem;
    top: 1rem;
    left: 55rem;
  }
  .intro_section.ot_section_active .intro_mosquito_1{
    animation-delay: 1.35s;
  }
  .intro_mosquito_2{
    width: 15rem;
    top: 31rem;
    right: -6rem;
  }
  .intro_mosquito_3{
    display: none;
    width: 24rem;
    right: 15rem;
    bottom: 32rem;
  }
  .intro_actions{
    top: 3.5rem;
    margin-right: 5rem;
    gap: 3rem;
  }
  .intro_icon_button{
    width: 9rem;
    height: 9rem;
  }
  .intro_content{
    width: 100%;
    padding-top: 37rem;
  }
  .intro_logo{
    width: 70rem;
    margin-bottom: 2rem;
  }
  .intro_text{
    width: 90rem;
    max-width: 100%;
    font-size: 4rem;
    line-height: 1.18;
  }
  .intro_text_desktop{
    display: none;
  }
  .intro_text_mobile{
    display: block;
  }
  .intro_text_mobile + .intro_text_mobile{
    margin-top: 3.2rem;
  }
  .intro_messages_button{
    min-width: 56rem;
    height: 14rem;
    margin-top: 4.6rem;
    border-radius: 10rem;
    padding-right: 0;
  }

  .intro_messages_button span{
    font-size: 4rem;
  }
  .intro_messages_button img{
    width: 9rem;
    height: 9rem;
    transform: translateX(1.6rem);
  }

  .sphere_section{
    min-height: 126rem;
    margin-top: -10rem;
    margin-bottom: 12rem;
    padding: 15rem 0 8rem;
    border-radius: 12.5rem 12.5rem 0 0;
    overflow: visible;
  }
  .sphere_section_inner{
    width: calc(100% - 4rem);
  }
  .sphere_intro_text{
    max-width: 82rem;
    font-family: 'Gotham Pro';
    font-size: 4rem;
    line-height: 1.2;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
  }
  .sphere_intro_text_desktop{
    display: none;
  }
  .sphere_intro_text_mobile{
    display: block;
  }
  .sphere_intro_text strong{
    font-weight: 500;
  }
  .sphere_decor_1{
    display: none;
  }
  .sphere_decor_2{
    width: 18rem;
    top: 24rem;
    left: -9rem;
  }
    .sphere_decor_3{
      display: none;
    }
  .sphere_decor_5{
    width: 25rem;
    top: 48rem;
    right: -2rem;
    --scroll-reveal-y: 14rem;
  }
  .sphere_visual{
    width: 172rem;
    max-width: 100%;
    height: 131rem;
    margin-top: -6rem;
  }
  .sphere_circle_1{
    width: 168rem;
    animation-delay: 0s;
  }
  .sphere_circle_2{
    display: block;
    width: 137rem;
    animation-delay: 1.6s;
  }
  .sphere_circle_3{
    display: block;
    width: 106rem;
    animation-delay: 3.2s;
  }
  .sphere_effect{
    width: 118rem;
    max-width: none;
  }
  .sphere_image{
    width: 104rem;
  }
  .sphere_labels{
    display: none;
  }
  .sphere_arrow{
    width: 26rem;
    height: 26rem;
  }

  .percent_image{
    width: 100%;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .percent_decor_3{
    display: none;
  }

  .drop_section{
    min-height: 128rem;
    padding: 9rem 0 24rem;
    overflow: visible;
  }
  .drop_section_inner{
    width: calc(100% - 4rem);
  }
  .drop_title{
    font-size: 6.2rem;
  }
  .drop_mosquito{
    width: 12rem;
    top: 17rem;
    left: 5rem;
  }
  .drop_content{
    display: flex;
    flex-direction: column;
    gap: 8rem;
    margin-top: 6rem;
  }
  .drop_left{
    width: 76rem;
    max-width: 100%;
  }
  .drop_separator{
    display: none;
  }
  .drop_items{
    gap: 0;
  }
  .drop_item + .drop_item{
    margin-top: 3rem;
  }
  .drop_item{
    width: 86rem;
    max-width: 100%;
  }
  .drop_button{
    min-width: 56rem;
    height: 14rem;
    margin-top: 6rem;
    border-radius: 10rem;
    padding-left: 4rem;
    padding-right: 0;
    font-size: 4rem;
  }
  .drop_button span{
    font-size: 4rem;
  }
  .drop_button img{
    width: 9rem;
    height: 9rem;
    transform: translateX(.3rem);
  }

  .hand_section{
    min-height: 158rem;
    margin-top: -12rem;
    padding-top: 10rem;
    padding-bottom: 24rem;
    overflow: hidden;
    border-radius: 12.5rem 12.5rem 0 0;
    z-index: 6;
  }
  .hand_section:before{
    height: calc(100% + 24rem);
    background-image: url(./img/hand-bg-mobile.webp);
    background-position: center 0;
  }
  .hand_section_inner{
    width: calc(100% - 4rem);
    min-height: 148rem;
  }
  .hand_title{
    font-family: 'Gotham Pro';
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
  }
  .hand_title span{
    display: block;
    font-weight: 700;
  }
  .hand_text{
    max-width: 88rem;
    font-family: 'Gotham Pro';
    font-size: 3.8rem;
    line-height: 1.2;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
  }
  .hand_text_desktop{
    display: none;
  }
  .hand_text_mobile{
    display: block;
  }
  .hand_button{
    width: 56rem;
    min-width: 56rem;
    height: 14rem;
    margin-top: 4rem;
    border-radius: 10rem;
    padding-left: 4rem;
    padding-right: 0;
    font-size: 4rem;
  }
  .hand_button span{
    font-size: 4rem;
  }
  .hand_button img{
    width: 9rem;
    height: 9rem;
    transform: translateX(1.6rem);
  }
  .hand_visual{
    width: 112rem;
    height: 96rem;
    margin: 8rem auto 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .hand_phone{
    width: 140rem;
    transform: translateX(15rem);
  }
  .hand_item_1{
    width: 58rem;
    left: 10rem;
    top: 10rem;
  }
  .hand_item_2{
    width: 36rem;
    right: 12rem;
    top: 48rem;
  }
  .hand_item_3{
    width: 44rem;
    left: 10rem;
    top: 62rem;
  }
  .hand_item_4{
    width: 40rem;
    right: 18rem;
    top: 80rem;
  }
  .hand_mosquito_1{
    width: 12rem;
    left: 8rem;
    top: 80rem;
  }
  .hand_mosquito_2{
    display: none;
  }

  .materials_section{
    margin-top: -16.5rem;
    padding: 16rem 0 4rem;
    border-radius: 12.5rem 12.5rem 0 0;
    z-index: 7;
  }
  .materials_section_inner{
    width: calc(100% - 4rem);
  }
  .materials_title{
    max-width: 88rem;
    margin-bottom: 6rem;
    font-family: 'Gotham Pro';
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
  }
  .materials_cards{
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  .materials_card{
    width: 275px;
    max-width: 100%;
    height: 419.55px;
    min-height: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 20px;
  }
  .materials_photo_wrap{
    flex: 0 0 auto;
  }
  .materials_photo{
    width: 247px;
    height: 160.55px;
    object-fit: cover;
    border-radius: 13.84px;
  }
  .materials_bookmark{
    width: 7.5rem;
    height: 9rem;
    top: -3rem;
    right: 4rem;
  }
  .materials_card_title{
    font-family: 'Gotham Pro';
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    margin-bottom: 0;
  }
  .materials_card_text{
    font-family: 'Gotham Pro';
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    margin-bottom: 0;
  }
  .mobile_only_break{
    display: block;
  }
  .materials_button{
    width: 100%;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    position: static;
    margin-top: auto;
    border-radius: 40px;
    padding-left: 18px;
    padding-right: 10px;
    justify-content: space-between;
    flex: 0 0 52px;
  }
  .materials_button span{
    font-size: 16px;
  }
  .materials_button picture{
    width: 36px;
    height: 36px;
  }
  .materials_button img{
    width: 100%;
    height: 100%;
  }
  .materials_decor_left{
    display: none;
  }
  .materials_decor_right{
    display: none;
  }

  @media screen and (min-width: 600px) {
    .chat_start_popup{
      padding: 0;
    }
    .chat_start_popup_card{
      scale: .78;
    }
    .ot_header,
    .header_inner{
      height: 72px;
    }
    .header_burger,
    .header_burger img{
      width: 46px;
      height: 46px;
    }
    .header_logo img{
      width: min(300px, 100%);
    }
    .header_mobile_menu{
      top: 72px;
      height: calc(100vh - 72px);
      height: calc(100dvh - 72px);
    }
    .ot_main{
      padding-top: 72px;
    }
    .intro_section,
    .intro_container{
      min-height: 142rem;
    }
    .intro_content{
      padding-top: 24rem;
    }
    .intro_logo{
      width: 58rem;
    }
    .intro_text{
      width: 78rem;
      font-size: 3.3rem;
    }
    .intro_messages_button,
    .hand_button{
      min-width: 46rem;
      width: 46rem;
      height: 11rem;
    }
    .intro_messages_button span,
    .hand_button span{
      font-size: 3.4rem;
    }
    .intro_messages_button img,
    .hand_button img{
      width: 7.6rem;
      height: 7.6rem;
    }
    .intro_item_5,
    .intro_item_6{
      display: none;
    }
    .intro_item_2{
      top: auto;
      bottom: 23rem;
      right: 0;
    }
    .intro_section{
      background-size: cover;
      background-position: center top;
    }
    .intro_mosquito_1{
      left: 68rem;
    }
    .intro_mosquito_2{
      right: -7rem;
    }
    .intro_mosquito_3{
      right: 4rem;
    }
    .sphere_section{
      min-height: 108rem;
      margin-top: -18rem;
      margin-bottom: 4rem;
    }
    .sphere_intro_text{
      max-width: 80rem;
      font-size: 3.9rem;
    }
    .sphere_visual{
      width: 154rem;
      height: 116rem;
      margin-top: -4rem;
    }
    .sphere_circle_1{
      width: 132rem;
    }
    .sphere_circle_2{
      width: 109rem;
    }
    .sphere_circle_3{
      width: 86rem;
    }
    .sphere_effect{
      width: 111rem;
      max-width: none;
    }
    .sphere_image{
      width: 97rem;
    }
    .sphere_labels{
      display: block;
      width: 101rem;
    }
    .sphere_arrow{
      width: 18rem;
      height: 18rem;
    }
    .sphere_label_bold{
      font-size: 3.4rem;
    }
    .sphere_label_regular{
      font-size: 2.1rem;
    }
    .percent_image{
      width: 78%;
    }
    .percent_section{
      background-color: #FEF5ED;
    }
    .drop_section{
      min-height: 104rem;
      padding-bottom: 16rem;
    }
    .drop_title{
      font-size: 5rem;
    }
    .drop_content{
      gap: 5rem;
    }
    .drop_left{
      width: 62rem;
    }
    .drop_item{
      width: 70rem;
    }
    .hand_section{
      min-height: 126rem;
      padding-bottom: 16rem;
    }
    .hand_section_inner{
      min-height: 116rem;
    }
    .hand_title{
      font-size: 4.8rem;
    }
    .hand_text{
      max-width: 82rem;
      font-size: 3.8rem;
    }
    .hand_visual{
      width: 92rem;
      height: 76rem;
      margin-top: 5rem;
    }
    .hand_phone{
      width: 112rem;
      transform: translateX(12rem);
    }
    .hand_item_1{
      width: 46rem;
    }
    .hand_item_2{
      width: 29rem;
      top: 38rem;
    }
    .hand_item_3{
      width: 36rem;
      top: 50rem;
    }
    .hand_item_4{
      width: 32rem;
      top: 64rem;
    }
    .materials_title{
      max-width: 86rem;
      margin-bottom: 5rem;
      font-size: 4.8rem;
    }
    .materials_cards{
      flex-direction: row;
      align-items: stretch;
      gap: 3rem;
    }
    .materials_card{
      width: 42rem;
      height: 62rem;
      padding: 2rem;
      gap: 1.4rem;
      border-radius: 2.8rem;
    }
    .materials_photo{
      width: 100%;
      height: 23.8rem;
      border-radius: 2rem;
    }
    .materials_bookmark{
      width: 7rem;
      height: 8.4rem;
      top: -2.4rem;
      right: 4rem;
    }
    .materials_card_title{
      font-size: 2.8rem;
    }
    .materials_card_text{
      font-size: 2.3rem;
    }
    .materials_button{
      height: 6.8rem;
      min-height: 6.8rem;
      max-height: 6.8rem;
      flex-basis: 6.8rem;
      padding-left: 2.2rem;
      padding-right: 1.1rem;
    }
    .materials_button span{
      font-size: 2.1rem;
    }
    .materials_button picture{
      width: 5rem;
      height: 5rem;
    }
  }

  .chat_main{
    padding-top: 56px;
  }
  .chat_section{
    min-height: calc(100vh - 56px);
    border-radius: 6rem 6rem 0 0;
    background: #F7EAD1;
    padding-bottom: 8rem;
    margin-bottom: -8rem;
    overflow: visible;
  }
  .chat_container{
    width: 100%;
    min-height: calc(100vh - 56px);
    padding: 1rem 1rem 0;
    margin-left: auto;
    margin-right: auto;
  }
  .chat_fenistil_logo{
    width: 36rem;
    left: 3rem;
    top: 3rem;
  }
  .chat_actions{
    top: 3rem;
    right: 2.2rem;
    gap: 2rem;
  }
  .chat_actions .intro_icon_button{
    width: 9rem;
    height: 9rem;
  }
  .chat_start_popup{
    align-items: center;
    padding: 4rem 0;
  }
  .chat_start_popup_card{
    width: 91.73rem;
    height: 132.58rem;
    min-height: 0;
    padding: 3.73rem;
    border-radius: 11.73rem;
  }
  .chat_start_popup_close{
    width: 9.6rem;
    height: 9.6rem;
    right: -2rem;
    top: -2rem;
  }
  .chat_start_popup_content{
    width: 84.27rem;
    height: 101.91rem;
    min-height: 0;
    border-radius: 6.4rem;
  }
  .chat_start_popup_steps{
    gap: 5.2rem;
    padding-top: 8rem;
  }
  .chat_start_popup_steps span{
    width: 10.67rem;
    height: 10.67rem;
    font-size: 6.18rem;
    border-width: .53rem;
  }
  .chat_start_popup_title{
    margin-top: 5.8rem;
    font-size: 4.27rem;
  }
  .chat_start_popup_text{
    margin-top: 1.3rem;
    font-size: 4.27rem;
    line-height: 1.2;
  }
  .chat_start_popup_text br{
    display: none;
  }
  .chat_start_popup_text_choice,
  .chat_start_popup_text_final{
    margin-top: 5.8rem;
  }
  .chat_start_popup_image{
    margin-top: auto;
  }
  .chat_start_popup_next{
    width: 84.27rem;
    height: 17.87rem;
    margin-top: 5.33rem;
    border-radius: 26.67rem;
    font-size: 5.33rem;
  }
  .chat_mosquito_left{
    display: none;
  }
  .chat_mosquito_right{
    width: 11rem;
    right: 7rem;
    top: 13.4rem;
  }
  .chat_final_content{
    width: calc(100% - 8rem);
    top: 27rem;
  }
  .chat_container.is-chat-complete{
    min-height: 0;
    padding-top: 27rem;
    padding-bottom: 0;
  }
  .chat_section:has(.chat_container.is-chat-complete){
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .chat_main:has(.chat_container.is-chat-complete) + .ot_footer{
    margin-top: -12rem;
  }
  .chat_container.is-chat-complete .chat_final_content{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
  }
  .chat_final_title{
    font-size: 8rem;
    line-height: 1.2;
  }
  .chat_final_text{
    width: 100%;
    margin-top: 4rem;
    font-size: 4.27rem;
    line-height: 1.2;
  }
  .chat_final_desktop_break{
    display: none;
  }
  .chat_final_mobile_break{
    display: initial;
  }
  .chat_final_button{
    width: 72rem;
    max-width: 100%;
    height: 19.5rem;
    margin-top: 5rem;
    border-radius: 22.4rem;
    padding: 0 3rem 0 6rem;
    justify-content: space-between;
  }
  .chat_final_button span{
    font-size: 5.33rem;
    line-height: 1.2;
    white-space: nowrap;
  }
  .chat_final_button img{
    width: 13.5rem;
    height: 13.5rem;
    flex: 0 0 13.5rem;
    transform: none;
  }
  .chat_final_decoration_wrap{
    width: 100%;
    max-width: none;
    margin-top: 4rem;
  }
  .chat_final_decoration{
    width: 200%;
    max-width: none;
    margin-left: 50%;
    margin-top: -2rem;
    transform: translateX(-50%);
  }
  .chat_final_mosquito{
    width: 28rem;
    left: -5rem;
    top: -15rem;
  }
  .chat_phone_wrap{
    width: 100%;
    max-width: none;
    position: static;
    margin: 0;
    padding-top: 18.5rem;
    transform: none;
  }
  .chat_phone_wrap.is-chat-finished{
    display: none;
  }
  .chat_hand{
    display: none;
  }
  .chat_screen{
    width: 100%;
    min-height: calc((var(--vh, 1vh) * 100) - 28rem);
    height: auto;
    position: relative;
    left: auto;
    top: auto;
    justify-content: center;
    padding-bottom: 4rem;
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .chat_screen.chat_screen_wrong,
  .chat_screen.chat_screen_correct{
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    overflow: visible;
  }
  .chat_progress{
    gap: 6rem;
    padding: 0 0 2rem;
    margin-top: 0;
    position: sticky;
    top: 0;
    background-color: #F7EAD1;
  }
  .chat_progress_text{
    font-size: 4.8rem;
  }
  .chat_progress_dots{
    gap: 3rem;
  }
  .chat_progress_dots img{
    width: 2.4rem;
    height: 2.4rem;
  }
  .chat_question{
    width: 100%;
    margin-top: 5rem;
    margin-left: 0;
  }
  .chat_question_avatar{
    width: 11rem;
    height: 11rem;
    margin-left: .4rem;
  }
  .chat_question_bubble{
    width: calc(100% - 8rem);
    min-height: 37rem;
    margin-left: -2rem;
    margin-top: .8rem;
    padding: 4.8rem 5.2rem 8rem 9.8rem;
  }
  .chat_question_bubble p{
    font-size: 3.2rem;
    line-height: 1.2;
  }
  .chat_question_1 .chat_question_bubble p{
    font-size: 3.2rem;
    line-height: 1.2;
  }
  .chat_mobile_break{
    display: none !important;
  }
  .chat_answers{
    margin-top: 3rem;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: 0;
    overflow: visible;
    padding-bottom: 8rem;
  }
  .chat_answer{
    width: calc(100% - 12rem);
    min-height: 18rem;
    padding: 3rem 5rem 3.8rem 5.4rem;
    gap: 4rem;
  }
  .chat_answers_2 .chat_answer{
    padding-top: 3.8rem;
    padding-bottom: 4.6rem;
  }
  .chat_answer+.chat_answer,
  .chat_answers_2 .chat_answer+.chat_answer,
  .chat_answers_3 .chat_answer+.chat_answer,
  .chat_answers_4 .chat_answer+.chat_answer{
    margin-top: 0;
  }
  .chat_answer_letter{
    width: 12rem;
    height: 12rem;
    flex-basis: 12rem;
    box-sizing: border-box;
    border-width: .9rem;
    font-size: 4.2rem;
    line-height: 1;
  }
  .chat_answer_text{
    flex: 1 1 auto;
    max-width: 54rem;
    font-size: 3.2rem;
  }
  .chat_answer_text br{
    display: none;
  }
  .chat_question_2,
  .chat_question_3,
  .chat_question_4{
    margin-top: 5rem;
  }
  .chat_answers_2,
  .chat_answers_3,
  .chat_answers_4{
    margin-top: 3rem;
  }
  .chat_answers_3 .chat_answer:last-child{
    min-height: 24rem;
    padding-top: 3.8rem;
    padding-bottom: 4.6rem;
  }
  .chat_wrong_answer,
  .chat_correct_answer{
    width: calc(100% - 2rem);
    height: auto;
    min-height: 0;
    margin: 3rem auto 0;
    padding-bottom: 8rem;
  }
  .chat_wrong_answer:before,
  .chat_wrong_answer:after,
  .chat_correct_answer:before,
  .chat_correct_answer:after{
    display: none;
  }
  .chat_wrong_answer_card,
  .chat_correct_answer_card{
    width: 100%;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto;
    min-height: 0;
    padding: 8rem 5rem 0;
    border-radius: 10rem;
    background-color: #FFFBF7;
    overflow: hidden !important;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chat_wrong_answer:after,
  .chat_correct_answer:after{
    display: block;
    width: 100%;
    height: 68rem;
    left: 0;
    bottom: 36.5rem;
    z-index: 6;
    opacity: var(--result-fade-opacity, 1);
    border-radius: 0 0 10rem 10rem;
    background: linear-gradient(180deg, rgba(255, 251, 247, 0) 0%, rgba(255, 251, 247, .48) 14%, rgba(255, 251, 247, .9) 38%, rgba(255, 251, 247, .98) 64%, #FFFBF7 100%);
  }
  .chat_wrong_answer_label,
  .chat_correct_answer_label{
    height: 9.3rem;
    min-width: 38.8rem;
    padding: 0 6rem;
    border-radius: 9.3rem;
    font-size: 4rem;
  }
  .chat_wrong_answer_text,
  .chat_correct_answer_text,
  .chat_correct_answer_1 .chat_correct_answer_text,
  .chat_correct_answer_2 .chat_correct_answer_text,
  .chat_correct_answer_3 .chat_correct_answer_text,
  .chat_correct_answer_4 .chat_correct_answer_text{
    font-size: 3.4rem;
    line-height: 1.2;
  }
  .chat_wrong_answer_1 .chat_wrong_answer_text{
    width: 100%;
    font-size: 3.2rem;
    line-height: 1.2;
  }
  .chat_wrong_answer_text br,
  .chat_correct_answer_text br{
    display: none;
  }
  .chat_wrong_answer_label + .chat_wrong_answer_text,
  .chat_correct_answer_label + .chat_correct_answer_text,
  .chat_correct_answer_1 .chat_correct_answer_label + .chat_correct_answer_text,
  .chat_correct_answer_2 .chat_correct_answer_label + .chat_correct_answer_text,
  .chat_correct_answer_4 .chat_correct_answer_label + .chat_correct_answer_text{
    margin-top: 4rem;
  }
  .chat_wrong_answer_image,
  .chat_correct_answer_image,
  .chat_wrong_answer_2 .chat_wrong_answer_image,
  .chat_wrong_answer_3 .chat_wrong_answer_image,
  .chat_wrong_answer_4 .chat_wrong_answer_image,
  .chat_correct_answer_1 .chat_correct_answer_image,
  .chat_correct_answer_2 .chat_correct_answer_image,
  .chat_correct_answer_3 .chat_correct_answer_image,
  .chat_correct_answer_4 .chat_correct_answer_image{
    display: block;
    width: 120rem;
    max-width: none;
    margin: 5rem 0 0;
    margin-bottom: -4rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .chat_wrong_answer_actions,
  .chat_correct_answer_actions{
    gap: 0;
    justify-content: space-between;
    margin-top: 2rem;
    position: sticky;
    bottom: 0;
    padding: 0 5rem 5rem;
  }
  .chat_wrong_answer_back,
  .chat_correct_answer_back,
  .chat_wrong_answer_next,
  .chat_correct_answer_next{
    width: 21.5rem;
    height: 21.5rem;
    padding: 3.2rem;
    border-radius: 50%;
    flex: 0 0 21.5rem;
  }
  .chat_wrong_answer_next,
  .chat_correct_answer_next{
    justify-content: center;
    padding: 3.2rem;
  }
  .chat_wrong_answer_next span,
  .chat_correct_answer_next span{
    display: none;
  }
  .chat_wrong_answer_next img,
  .chat_correct_answer_next img{
    width: 15rem;
    height: 15rem;
  }
  @media screen and (min-width: 600px) {
    .chat_page .chat_main{
      padding-top: 72px;
    }
    .chat_page .chat_section{
      min-height: calc(100vh - 72px);
      min-height: calc(100dvh - 72px);
      padding-bottom: 6rem;
      margin-bottom: -6rem;
    }
    .chat_page .chat_container{
      min-height: calc(100vh - 72px);
      min-height: calc(100dvh - 72px);
    }
    .chat_page .chat_fenistil_logo{
      width: 30rem;
      top: 4rem;
      left: 4rem;
    }
    .chat_page .chat_actions{
      top: 4rem;
      right: 4rem;
    }
    .chat_page .chat_actions .intro_icon_button{
      width: 7.6rem;
      height: 7.6rem;
    }
    .chat_page .chat_phone_wrap{
      padding-top: 14rem;
    }
    .chat_page .chat_screen{
      min-height: calc((var(--vh, 1vh) * 100) - 24rem);
      padding-bottom: 2rem;
    }
    .chat_page .chat_progress{
      gap: 4rem;
      padding-bottom: 1.2rem;
    }
    .chat_page .chat_progress_text{
      font-size: 4rem;
    }
    .chat_page .chat_question{
      margin-top: 3.5rem;
      justify-content: center;
    }
    .chat_page .chat_question_avatar{
      width: 9rem;
      height: 9rem;
    }
    .chat_page .chat_question_bubble{
      width: calc(100% - 18rem);
      min-height: 31rem;
      padding: 4rem 5rem 6.4rem 8rem;
    }
    .chat_page .chat_question_bubble p,
    .chat_page .chat_question_1 .chat_question_bubble p{
      font-size: 2.75rem;
    }
    .chat_page .chat_answers{
      margin-top: 2rem;
      padding-bottom: 5rem;
    }
    .chat_page .chat_answer{
      width: calc(100% - 22rem);
      min-height: 15rem;
      padding: 2.6rem 4rem 3.2rem;
      gap: 3rem;
    }
    .chat_page .chat_answer_letter{
      width: 9.6rem;
      height: 9.6rem;
      flex-basis: 9.6rem;
      font-size: 3.6rem;
    }
    .chat_page .chat_answer_text{
      max-width: 48rem;
      font-size: 2.75rem;
    }
    .chat_page .chat_wrong_answer,
    .chat_page .chat_correct_answer{
      width: calc(100% - 12rem);
      padding-bottom: 5rem;
    }
    .chat_page .chat_wrong_answer_card,
    .chat_page .chat_correct_answer_card{
      padding: 6rem 5rem 0;
      border-radius: 7rem;
    }
    .chat_page .chat_wrong_answer_text,
    .chat_page .chat_correct_answer_text,
    .chat_page .chat_correct_answer_1 .chat_correct_answer_text,
    .chat_page .chat_correct_answer_2 .chat_correct_answer_text,
    .chat_page .chat_correct_answer_3 .chat_correct_answer_text,
    .chat_page .chat_correct_answer_4 .chat_correct_answer_text{
      font-size: 2.8rem;
    }
    .chat_page .chat_wrong_answer_label,
    .chat_page .chat_correct_answer_label{
      height: 7rem;
      min-width: 29rem;
      padding: 0 4.8rem;
      border-radius: 7rem;
      font-size: 3.1rem;
    }
    .chat_page .chat_wrong_answer_image,
    .chat_page .chat_correct_answer_image,
    .chat_page .chat_wrong_answer_2 .chat_wrong_answer_image,
    .chat_page .chat_wrong_answer_3 .chat_wrong_answer_image,
    .chat_page .chat_wrong_answer_4 .chat_wrong_answer_image,
    .chat_page .chat_correct_answer_1 .chat_correct_answer_image,
    .chat_page .chat_correct_answer_2 .chat_correct_answer_image,
    .chat_page .chat_correct_answer_3 .chat_correct_answer_image,
    .chat_page .chat_correct_answer_4 .chat_correct_answer_image{
      width: 94rem;
    }
    .chat_page .chat_wrong_answer_actions,
    .chat_page .chat_correct_answer_actions{
      padding: 0 5rem 4rem;
    }
    .chat_page .chat_wrong_answer_back,
    .chat_page .chat_correct_answer_back,
    .chat_page .chat_wrong_answer_next,
    .chat_page .chat_correct_answer_next{
      width: 17rem;
      height: 17rem;
      flex-basis: 17rem;
      padding: 2.6rem;
    }
    .chat_page .chat_wrong_answer_back img,
    .chat_page .chat_correct_answer_back img,
    .chat_page .chat_wrong_answer_next img,
    .chat_page .chat_correct_answer_next img{
      width: 11rem;
      height: 11rem;
    }
    .chat_page .chat_final_content{
      width: calc(100% - 12rem);
      top: 22rem;
    }
    .chat_page .chat_container.is-chat-complete{
      padding-top: 22rem;
    }
    .chat_page .chat_final_title{
      font-size: 6.4rem;
    }
    .chat_page .chat_final_text{
      font-size: 3.6rem;
    }
    .chat_page .chat_final_button{
      width: 60rem;
      height: 15rem;
    }
    .chat_page .chat_final_button span{
      font-size: 4.2rem;
    }
    .chat_page .chat_final_button img{
      width: 10.5rem;
      height: 10.5rem;
      flex-basis: 10.5rem;
    }
  }
  .chat_main + .ot_footer{
    width: 100%;
    margin-top: 0;
    padding: 3rem;
    border-radius: 4rem;
    background-color: #FFFFFF;
  }
  .chat_main + .ot_footer > *{
    width: calc(100% - 4rem);
    max-width: 116rem;
  }

  /* ---------- main end ---------- */

  /* ---------- footer start ---------- */

  .ot_footer{
    width: 100%;
    margin: 0;
    padding: 3rem;
  }
  .ot_footer > *{
    width: calc(100% - 4rem);
    max-width: 116rem;
    margin-left: auto;
    margin-right: auto;
  }
  .sources_section{
    width: 100%;
    padding: 5rem 5rem;
    background-color: #fff;
    border-radius: 4rem;
    margin-top: 2rem;
  }
  .sources_title{
    font-size: 6rem;
    text-align: left;
  }
  .sources_title:before{
    width: 1.1em;
    height: 1.1em;
  }
  .sources{
    padding-top: 3.2rem;
  }
  .source{
    margin-top: 1em;
    font-size: 3rem;
    line-height: 1.25;
  }
  .footer_info_text{
    margin-top: 3.4rem;
  }
  .disclaimer_container{
    margin-top: 0;
    padding: 0 1rem;
  }
  .haleon_section{
    width: 100%;
    grid-template-columns: 1fr;
    padding: 5rem 4rem;
    border-radius: 4rem;
    margin-top: 3rem;
  }
  .chat_main + .ot_footer{
    background-color: #FFFFFF;
  }
  .chat_main + .ot_footer .sources_section,
  .chat_main + .ot_footer .haleon_section{
    background-color: #F7F7F7;
  }
  .haleon_section:before{
    left: 4rem;
    right: 4rem;
    top: 17.6rem;
    background-color: rgba(0, 0, 0, .12);
  }
  .logo_haleon_footer{
    width: 44rem;
  }
  .haleon_section_text{
    grid-column: 1;
    font-size: 3.6rem;
    margin-top: 5rem;
  }
  .haleon_section_text_bottom_line{
    grid-column: 1;
    padding-bottom: 0;
    margin-top: 3rem;
    text-align: left;
  }
  .haleon_section_black{
    padding: 11rem 4rem 10rem;
    background-color: #000000;
    border-radius: 0 0 4rem 4rem;
    margin-top: -4rem;
  }
  .haleon_section_black_title{
    font-size: 4rem;
  }
  .haleon_section_black_text{
    font-size: 4rem;
    margin-top: 5rem;
  }
  @media screen and (min-width: 600px) {
    .sources_title{
      font-size: 4.8rem;
    }
    .source{
      font-size: 2.4rem;
    }
    .logo_haleon_footer{
      width: 36rem;
    }
    .haleon_section_text{
      font-size: 3rem;
      margin-top: 4rem;
    }
    .haleon_section_text_bottom_line{
      margin-top: 2.4rem;
    }
    .haleon_section_black_title,
    .haleon_section_black_text{
      font-size: 3.2rem;
    }
    .haleon_section_black_text{
      margin-top: 4rem;
    }
  }

  /* ---------- footer end ---------- */

  .back_to_top_button{
    width: 14rem;
    height: 14rem;
    right: 1rem;
    bottom: 8rem;
  }
}

/*dialog code*/

.doctor-dialog{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    visibility: hidden;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(188, 197, 215, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.doctor-dialog[open]{
    visibility: visible;
    z-index: 1009;
}

.doctor-dialog__container{
    width: 100%;
    max-width: 530px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px 10px;
    display: flex;
    justify-content: center;
}

.doctor-dialog__inner{
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.doctor-dialog__text{
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.doctor-dialog__button{
  border: none;
  margin: 0;
  overflow: visible;
  outline: none;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    background-color: #000000;
    border-radius: 6px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    padding: 10px;
    cursor: pointer;
}

.doctor-dialog__button *{
    display: block;
    pointer-events: none;
}

@media screen and (max-width: 480px) {
  .doctor-dialog__text,
.doctor-dialog__button{
    font-size: 13px;
  }
}

.no-doctor-dialog{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    visibility: hidden;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.no-doctor-dialog[open]{
    visibility: visible;
    z-index: 1010;
}

.no-doctor-dialog__container{
    width: 100%;
    max-width: 530px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px 10px;
    display: flex;
    justify-content: center;
}

.no-doctor-dialog__inner{
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.no-doctor-dialog__title,
.no-doctor-dialog__text{
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

.no-doctor-dialog__title{
    font-weight: 700;
}

.no-doctor-dialog__buttons{
    display: flex;
    column-gap: 4px;
}

.no-doctor-dialog__button{
  border: none;
  margin: 0;
  overflow: visible;
  outline: none;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    background-color: #000000;
    border-radius: 6px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    padding: 10px;
    cursor: pointer;


}
.no-doctor-dialog__button *{
  display: block;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .no-doctor-dialog__text,
.no-doctor-dialog__button{
    font-size: 9px;
  }
}

.cookie{
  position: fixed;
  left: 3rem;
  bottom: 3rem;
  right: auto;
  top: auto;
  z-index: -1;
  width: 58rem;
  min-height: 16.2rem;
  border: none;
  padding: 0;
  display: none;
  background: none;
  opacity: 0;
  visibility: hidden;
  font-size: 1rem;
}

.cookie[open]{
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 1010;
}

.cookie__container{
  width: 100%;
  min-height: 16.2rem;
  padding: 3rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 2rem;
  align-items: center;
  background: #FFFFFF;
  border-radius: 3rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18);
}

.cookie__text{
  font-family: 'Gotham Pro';
  font-size: 1.4rem;
  line-height: 1.7rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #000000;
}

.cookie__text a{
  font-family: 'Gotham Pro';
  font-size: 1.4rem;
  line-height: 1.7rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  color: #000000;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-style: solid;
}

.cookie__buttons{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: stretch;
  justify-content: center;
}

.cookie__button{
  width: 100%;
  height: 5rem;
  padding: 1rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  border-radius: 7.5rem;
  background: linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%);
  color: #FFFFFF;
  cursor: pointer;
  transition: filter .25s ease, transform .25s ease;
}
.cookie__button span{
  font-family: 'Gotham Pro';
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  color: inherit;
  text-transform: none;
}
.cookie__button:hover{
  filter: saturate(1.08);
  transform: translateY(-.1rem);
}

.cookie__button--white{
  border: .1rem solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(84.19deg, #004A8B -17.63%, #009DDE 47.42%, #005EAB 135.42%) border-box;
  color: #000000;
}

@media (max-width: 47.999em) {
  .cookie{
    width: min(84rem, calc(100% - 3rem));
    min-height: auto;
    left: 50%;
    right: auto;
    bottom: 6rem;
    transform: translateX(-50%);
  }
  .cookie__container{
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 5rem 4.4rem;
    border-radius: 4.8rem;
  }
  .cookie__text,
  .cookie__text a{
    font-size: 2.7rem;
    line-height: 1.5;
  }
  .cookie__buttons{
    flex-direction: column;
    gap: 2rem;
  }
  .cookie__button{
    height: 9.6rem;
    padding: 2rem 2.8rem;
  }
  .cookie__button span{
    font-size: 3.4rem;
  }
}

@media screen and (min-width: 2000px) {
  .doctor-dialog__container{
    max-width: 1060px;
    border-radius: 16px;
    padding: 48px 20px;
  }
  .doctor-dialog__inner{
    max-width: 900px;
    row-gap: 8px;
  }
  .doctor-dialog__text{
    font-size: 24px;
    margin-bottom: 16px;
  }
  .doctor-dialog__button{
    column-gap: 20px;
    border-radius: 12px;
    font-size: 24px;
    padding: 20px;
  }
  .no-doctor-dialog__container{
    max-width: 1060px;
    border-radius: 16px;
    padding: 48px 20px;
  }
  .no-doctor-dialog__inner{
    max-width: 900px;
    row-gap: 24px;
  }
  .no-doctor-dialog__title,
.no-doctor-dialog__text{
    font-size: 24px;
  }
  .no-doctor-dialog__buttons{
    display: flex;
    column-gap: 8px;
  }
  .no-doctor-dialog__button{
    column-gap: 20px;
    border-radius: 12px;
    font-size: 24px;
    padding: 20px;
  }
}