/* About us page */

.about-page-content .highlight.yellow {
  box-shadow: inset 0 -70px 0 -12px #FFDC4E;
}

.about-page-content .highlight.mint {
  box-shadow: inset 0 -70px 0 -12px #A7FEE9;
}

.about-page-content .highlight.blue {
  box-shadow: inset 0 -70px 0 -12px #BBCAFD;
}

.about-us {
  overflow: hidden;
}

.about-main {
  position: relative;
  height: 100vh;
  min-height: 900px;
  max-height: 900px;
}

.about-us-main-content {
  display: flex;
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.about-us-main-content .text-wrap {
  margin: auto;
  width: 46%;
  text-align: center;
}

.about-us-main-content .text-wrap p {
  font-size: 2rem;
}


.smiles-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
}

.smile-item {
  position: absolute;
  width: 5vw;
  height: 5vw;
}

.smile-item.aliaksey,
.smile-item.misha,
.smile-item.anton,
.smile-item.vadim,
.smile-item.sasha,
.smile-item.andrey {
  top: 13%;
}

.smile-item.nastya,
.smile-item.kate-g,
.smile-item.dasha,
.smile-item.eugene,
.smile-item.chris,
.smile-item.mara {
  top: 28%
}

.smile-item.dmitry,
.smile-item.kasper {
  top: 48%;
}


.smile-item.vova,
.smile-item.ilya {
  top: 43%
}

.smile-item.kate,
.smile-item.konstantin,
.smile-item.mike,
.smile-item.oleg,
.smile-item.pavel,
.smile-item.polina {
  top: 64%;
}

.smile-item.bro,
.smile-item.buyalski,
.smile-item.sergey,
.smile-item.vitya,
.smile-item.alexey,
.smile-item.ihar {
  top: 80%
}

.smile-item.vova {
  left: 17vw;
}

.smile-item.anton,
.smile-item.ilya {
  left: 80vw;
}

.smile-item.buyalski,
.smile-item.nastya {
  left: 21.4vw;
}

.smile-item.sergey,
.smile-item.kate-g {
  left: 38.8vw;
}

.smile-item.vitya,
.smile-item.dasha {
  left: 56.2vw;
}

.smile-item.alexey,
.smile-item.eugene {
  left: 73.6vw;
}

.smile-item.kasper,
.smile-item.bro,
.smile-item.chris {
  left: 4vw;
}

.smile-item.misha,
.smile-item.kate {
  left: 10vw;
}

.smile-item.vadim,
.smile-item.konstantin {
  left: 25vw;
}

.smile-item.sasha,
.smile-item.mike {
  left: 40vw;
}

.smile-item.andrey,
.smile-item.oleg {
  left: 55vw;
}

.smile-item.anton,
.smile-item.pavel {
  left: 70vw;
}

.smile-item.aliaksey,
.smile-item.polina {
  left: 85vw;
}

.smile-item.dmitry,
.smile-item.ihar,
.smile-item.mara {
  left: 91vw;
}


.smile-item .smile {
  position: relative;
  width: 5vw;
  height: 5vw;
  font-size: 5vw;
  line-height: 5vw;
  cursor: pointer;
  z-index: 2;
}

.smile-item .person {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  transform: translate(calc(-50% + 2.5vw), -30%) scale(0);
  transform-origin: 50% 50%;
  transition: transform 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

.smile-item:hover .person {
  transform: translate(calc(-50% + 2.5vw), -30%) scale(1);
}

.smile-item.kasper:hover .person,
.smile-item.chris:hover .person,
.smile-item.bro:hover .person {
  transform: translate(calc(-40% + 4vw), -30%) scale(1);
}

.smile-item.dmitry:hover .person,
.smile-item.mara:hover .person,
.smile-item.ihar:hover .person {
  transform: translate(calc(-60% + 2.5vw), -30%) scale(1);
}

.smile-item .person .photo {
  width: 14vw;
  min-width: 15rem;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  border: 0.4rem solid #ffffff;
  box-shadow: 0 1rem 35px rgba(0, 0, 0, 0.2);

}

.smile-item .person .info {
  position: relative;
  top: -3rem;
  padding: 1.7rem 2.4rem;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1rem 35px rgba(0, 0, 0, 0.2);
  text-align: center;
  white-space: nowrap;
}

.smile-item .person .info .name {
  display: block;
  font-family: 'Graphik LC', sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--fibery-text-default-color);
  margin-bottom: 0.5rem;
}

.smile-item .person .info .position {
  display: block;
  font-family: 'Graphik LC', sans-serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  color: #8798A6;
}


.about-page-content {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.about-page-content.grey {
  background-color: #F7F7FB;
}

.about-page-content.grey-first {
  background: linear-gradient(to bottom, #f7f7fb 0%, #f7f7fb 50%, #fffcfc 50%, #ffffff 100%);
}

.advantages {
  background: url("../img/about-us/bg-advantages.svg") no-repeat right bottom;
}

.advantages-list {
  max-width: 110rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: self-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.advantages-list .advantages-item {
  width: 30%;
}

.advantages-list .advantages-item h2 {
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 4rem;
  margin-bottom: 2.4rem;
}

.advantages-list .advantages-item p {
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 3rem;
}

.advantages-list .advantages-item a {
  color: #000;
}

.chat-advantages-wrap {
  padding: 19rem 0 5rem;
}

.chat-advantages-wrap .bg-pic {
  position: relative;
}

.chat-advantages-wrap .bg-pic:after {
  content: '';
  position: absolute;
  right: -5rem;
  top: -13rem;
  width: 16.1rem;
  height: 15.8rem;
  background: url("../img/about-us/bg-vision.png") no-repeat 50% 50% / 16.1rem 15.8rem;
}


.chat-like {
  position: relative;
}

.chat-like.bg1 {
  background: url("../img/about-us/deco1.svg") no-repeat 0 calc(100% - 20rem);
}

.chat-like.bg2:before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  right: 0;
  top: -14rem;
  height: 66.3rem;
  width: 50rem;
  background: url("../img/about-us/deco2.svg") no-repeat 0 100%;
}

.chat-like.bg2:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -10rem;
  height: 43.7rem;
  width: 34rem;
  background: url("../img/about-us/deco3.svg") no-repeat 0 0;
}

.chat-like.bg3:before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  right: 4rem;
  top: -25rem;
  height: 66rem;
  width: 46rem;
  background: url("../img/about-us/deco4.svg") no-repeat 0 100%;
  transform: rotate(-5deg);
}

.chat-like.bg3:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -10rem;
  height: 81rem;
  width: 56.2rem;
  background: url("../img/about-us/deco5.svg") no-repeat 0 100% / 100% auto;
}

.chat-like {
}

.chat-wrap {
  max-width: 110rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.unnecessary-emoji {
  text-align: center;
  font-size: 4.8rem;
}

.chat-wrap .headline {
  font-size: 8.2rem;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  line-height: 10rem;
  margin-bottom: 10rem;
}

.chat-wrap .headline.sm {
  margin-bottom: 2.5rem;
}

.chat-wrap .headline.crown:after {
  content: '👑';
  display: inline-block;
  font-size: 4.8rem;
  margin-left: 20rem;
}

.chat-wrap .chat-wrap-description {
  max-width: 69rem;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 3.8rem;
  margin-bottom: 6rem;
}

.chat-wrap .chat-wrap-description.strange {
  width: 45%;
  max-width: 45rem;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.45;
  margin-bottom: -4rem;
}

.about-feature .highlight {
  white-space: nowrap;
}

.highlight-white {
  box-shadow: inset 0 -70px 0 -12px #FFFFFF;

}

.chat-item {
  margin-bottom: 3.5rem;
}

.chat-item .person {
  max-width: 20rem;
  margin-bottom: -10rem;
}

.chat-item .person-photo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2rem;
}

.chat-item .person .photo {
  display: block;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.chat-item .person .photo span {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

.chat-item .person .photo span:nth-child(2) {
  opacity: 0.8;
  z-index: 3;
}

.chat-item .person .photo img {
  width: 100%;
  min-height: 100%;
}

.chat-item .person .photo-deco {
  display: block;
  position: relative;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  z-index: 2;
}


.chat-item .person.yellow .photo-deco {
  background: #FFDC4E;
}

.chat-item .person.blue .photo-deco {
  background: #BBCAFD;
}

.chat-item .person.pink .photo-deco {
  background: #F5CFBD;
}

.chat-item .person.mint .photo-deco {
  background: #BAFCEA;
}

.chat-item .person.olive .photo-deco {
  background: #E6E6BA;
}

.chat-item .person.light-blue .photo-deco {
  background: #BBE1F9;
}

.chat-item .person.light-yellow .photo-deco {
  background: #F9EDC4;
}

.chat-item .person.red .photo-deco {
  background: #DD9F94;
}

.chat-item .person-info {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 700;
  text-align: center;
}

.chat-item .person-info .name,
.chat-item .person-info .position {
  display: block;
}


.speech-bubble {
  position: relative;
  border-radius: 2.7rem;
  padding: 2.4rem 3.3rem;
}

.speech-bubble p {
  font-size: 1.8rem;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  margin-bottom: 3rem;
}

.speech-bubble b {
  display: block;
}

.speech-bubble a {
  color: #000;
}

.speech-bubble .flag {
  display: block;
  font-size: 3.8rem;
  line-height: 0;
  position: relative;
  z-index: 3;
}

.speech-bubble .flag img {
  height: 3.8rem;
}

.speech-bubble p:last-child {
  margin-bottom: 0;
}

.chat-item.question {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: flex-start;
}

.chat-item.answer {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border: 7rem solid transparent;
}

.chat-item.question .speech-bubble.sm:after {
  border-right-width: 3rem;
  border-top-width: 3rem;
}

.speech-bubble.grey {
  background-color: #F7F7FB;
}

.speech-bubble.grey:after {
  border-left-color: #F7F7FB;
}

.speech-bubble.dark-grey {
  background-color: #E5E5E5;
}

.speech-bubble.dark-grey:after {
  border-left-color: #E5E5E5;
}

.speech-bubble.blue {
  background-color: #BBCAFD;
}

.speech-bubble.blue:after {
  border-right-color: #BBCAFD;
}

.speech-bubble.white {
  background-color: #fff;
}

.speech-bubble.white:after {
  border-left-color: #fff;
}

.speech-bubble.red {
  background-color: #D69A92;
}

.speech-bubble.red:after {
  border-left-color: #D69A92;
}

.chat-item.answer .speech-bubble.grey:after {
  border-right-color: #F7F7FB;
}


.chat-item.answer .person-photo {
  flex-direction: row-reverse;
}

.chat-item.question .person-photo > span:first-child {
  margin-right: -6.5rem;
}

.chat-item.answer .person-photo > span:first-child {
  margin-left: -6.5rem;
}

.chat-item.question .speech-bubble {
  max-width: 46rem;
  margin-right: 6rem;
}

.chat-item.question .speech-bubble.sm {
  width: 40%;
  max-width: 35rem;
  margin-right: 6rem;
}

.chat-item.answer .speech-bubble {
  max-width: 53rem;
  margin-left: 6rem;
}

.chat-item.question .speech-bubble:after {
  right: 0;

  border-right: 0;
  border-bottom: 0;
  margin-right: -4rem;
}

.chat-item.answer .speech-bubble:after {
  left: 0;
  border-left: 0;
  border-bottom: 0;
  margin-left: -4rem;
}


.call-to-action {
  padding-top: 15rem;
  text-align: center;
  max-width: 30rem;
  margin: 0 auto 4rem;
}

.chat-advantages-wrap + .call-to-action {
  padding-top: 5rem;
}

.call-to-action .emoji {
  font-size: 4.8rem;
  line-height: 5.8rem;
  margin-bottom: 0.7rem;
}

.call-to-action .text {
  font-size: 1.6rem;
  line-height: 2.1rem;
  font-family: "Graphik", sans-serif;
  margin-bottom: 4rem;
}

.call-to-action .btn-wrap {
}


.scroll-more {
}

.scroll-step-one {
  font-size: 2rem;
  line-height: 3rem;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  margin-left: 50%;
  text-align: center;
  max-width: 32rem;
  background-image: url(../img/about-us/scroll-down.svg);
  background-repeat: no-repeat;
  background-position: 0 bottom;
  padding: 0 0 10rem 1.6rem;
  margin-bottom: 10.4rem;
}

.scroll-step-two {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: calc(50% - 6.6rem);
  text-align: right;
}

.scroll-step-two .text {
  max-width: 40rem;
  font-size: 2.4rem;
  line-height: 3.5rem;
  font-family: "Graphik", sans-serif;
  margin-right: 2.4rem;
}

.scroll-step-two .animation {
  height: 15rem;
  width: 6.6rem;
  position: relative;
  top: -3rem;
  overflow: hidden;
  -webkit-clip-path: circle(62.0% at 50% 50%);
  clip-path: circle(62.0% at 50% 50%);
}

.scroll-step-two .animation .smile-nerd {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -2rem;
  font-size: 4rem;
  line-height: 1;
  animation-name: downFall;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index: 2;
}

.scroll-step-two .animation .smile-rabbit-hole {
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin-left: -2.5rem;
  font-size: 5rem;
  line-height: 1;
  z-index: 1;
}

@keyframes downFall {
  0% {
    top: 5%;
  }

  100% {
    top: 400%;
  }
}


.upside-down-animation {
  position: relative;
  width: 32rem;
  margin: 0 auto 5.3rem;
  text-align: center;
}

.upside-down-animation .animation {
  margin: 0 auto;
  width: 5.5rem;
  height: 14.5rem;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  -webkit-clip-path: polygon(0% 6%, 13% 5%, 23% 4%, 32% 3%, 37% 2.5%, 47% 2.5%, 57% 2.5%, 68% 3%, 77% 4%, 87% 5%, 100% 6%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 6%, 13% 5%, 23% 4%, 32% 3%, 37% 2.5%, 47% 2.5%, 57% 2.5%, 68% 3%, 77% 4%, 87% 5%, 100% 6%, 100% 100%, 0% 100%);
}

.upside-down-animation .animation .smile-rabbit-hole {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -2.7rem;
  font-size: 5rem;
  line-height: 1;
  z-index: 1;
  transform: rotate(-180deg);
}

.upside-down-animation .text {
  position: absolute;
  left: 50%;
  width: 25rem;
  margin-left: -12.5rem;
  top: 3.5rem;
  padding: 3rem 1rem;
  font: 400 1.6rem/2.1rem "Graphik", sans-serif;

}

.upside-down-animation .animation .smile-fall {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -2rem;
  font-size: 4rem;
  line-height: 1;
  animation-name: upDownFall;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index: 2;
}

@keyframes upDownFall {
  0% {
    bottom: 100%;
  }

  100% {
    bottom: 0;
  }
}

.call-to-action-second {
  text-align: center;
}

.call-to-action-second .btn-wrap {
  margin-bottom: 3.3rem;
}

.call-to-action-second .text {
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  margin-bottom: 2rem;
}

.call-to-action-second .scroll-pic {
  padding-bottom: 7rem;
}


.pacman-animation {
  padding-top: 13rem;
  text-align: center;
}

.pacman-animation .text {
  margin: 0 auto 3rem;
  max-width: 25rem;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.1rem;
}

.pacman-animation .animation {
  width: 11rem;
  padding: 0.3rem 0;
  margin: 0 auto 4rem;
  overflow: hidden;
}

.pacman {
  margin: 0 auto;
  width: 11rem;
  height: 4rem;
  position: relative;
  border-bottom-left-radius: 2.2rem;
  border-top-left-radius: 2.2rem;
}

.pacman:before {
  content: "";
  width: 22px;
  height: 44px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.pacman-top,
.pacman-bottom {
  position: absolute;
  left: 0;
  height: 22px;
  width: 42px;
  background-color: #FFDC4E;
  z-index: 3;
}

.pacman-top {
  top: 0;
  border-radius: 20px 20px 0 0;
  animation: spin1 0.5s infinite linear;
}

.pacman-bottom {
  bottom: 0;
  border-radius: 0 0 20px 20px;
  animation: spin2 0.5s infinite linear;
}

.feed {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  font-size: 3.5rem;
  line-height: 4rem;
  text-align: center;
  -moz-animation: eat 1s linear 0s infinite;
  -webkit-animation: eat 1s linear 0s infinite;
  animation: eat 1s linear 0s infinite;
}

/* Animation*/

@keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-35deg);
  }

}

@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(35deg);
  }
}


@keyframes eat {
  0% {
    right: 0;
  }
  100% {
    right: 100%;
  }
}


.typing-indicator {
  display: table;
  padding: 1.2rem 0.6rem;
  margin: 0 auto;
  position: relative;
  animation: 2s bulge infinite ease-out;
}

.typing-indicator span {
  height: 1.6rem;
  width: 1.6rem;
  float: left;
  margin: 0 0.3rem;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}

.typing-indicator span:nth-of-type(1) {
  animation: 1s blink infinite .3333s;
}

.typing-indicator span:nth-of-type(2) {
  animation: 1s blink infinite .6666s;
}

.typing-indicator span:nth-of-type(3) {
  animation: 1s blink infinite .9999s;
}


@keyframes blink {
  50% {
    opacity: 1;
  }
}


.call-to-action-last {
  padding-top: 11rem;
  text-align: center;
  margin-bottom: -12rem;
}

.call-to-action-last .btn-wrap {
  margin-bottom: 3.3rem;
}

.call-to-action-last .text {
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  margin-bottom: 1rem;
}

.call-to-action-last .sub-text {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 3rem;
  text-align: center;
  margin-bottom: 1rem;
}

.sheep-animation {
  height: 14rem;
  width: 20rem;
  margin: 0 auto 1rem;
  position: relative;
  overflow: hidden;
}

.sheep-animation > div {
  font-size: 4.8rem;
  line-height: 6rem;
}

.sheep-animation .fence,
.sheep-animation .sheep {
  position: absolute;
  bottom: 0;
  width: 6.6rem;
  z-index: 1;
}

.sheep-animation .sheep {
  z-index: 2;
}

.sheep-animation .sheep.one {
  left: 0;
  animation: sheepOne 1s infinite linear;
}

.sheep-animation .sheep.two {
  bottom: 6rem;
  left: 6.6rem;
  animation: sheepTwo 1s infinite linear;
}

.sheep-animation .sheep.three {
  right: 0;
  animation: sheepOne 1s infinite linear;
}

.sheep-animation .sheep.four {
  bottom: 6rem;
  right: -6.6rem;
  animation: sheepTwo 1s infinite linear;
}

.sheep-animation .fence {
  left: 6.6rem;
  font-size: 4.4rem;
}

@keyframes sheepOne {
  to {
    transform: translate(-100%, -100%);
  }
}

@keyframes sheepTwo {
  to {
    transform: translate(-100%, 100%);
  }
}