@import '../../assets/fonts/font-awesome/_fontawesome.css';
@import '../../assets/css/feedback-slider.css';
@import '../../assets/css/benefits-cards.css';

* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Inter Black";
  src: local("Inter Black"), url("https://meetto.ru/assets/fonts/inter/Inter-Black.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter Bold";
  src: local("Inter Bold"), url("https://meetto.ru/assets/fonts/inter/Inter-Bold.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter ExtraBold";
  src: local("Inter ExtraBold"), url("https://meetto.ru/assets/fonts/inter/Inter-ExtraBold.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter ExtraLight";
  src: local("Inter ExtraLight"), url("https://meetto.ru/assets/fonts/inter/Inter-ExtraLight.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter Light";
  src: local("Inter Light"), url("https://meetto.ru/assets/fonts/inter/Inter-Light.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter Medium";
  src: local("Inter Medium"), url("https://meetto.ru/assets/fonts/inter/Inter-Medium.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: local("Inter"), url("https://meetto.ru/assets/fonts/inter/Inter-Regular.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter SemiBold";
  src: local("Inter SemiBold"), url("https://meetto.ru/assets/fonts/inter/Inter-SemiBold.ttf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Inter Thin";
  src: local("Inter Thin"), url("https://meetto.ru/assets/fonts/inter/Inter-Thin.ttf") format("ttf");
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

img {
  content-visibility: auto;
}

a, a:visited {
  color: #8501ff;
}

#page {
  color: #202020;
  font-family: "Inter", sans-serif;
}

#page h1 {
  font-family: "Inter ExtraBold", sans-serif;
  font-size: 36px;
  font-weight: 800;
}

#page h2 {
  font-family: "Inter ExtraBold", sans-serif;
  font-size: 32px;
  font-weight: 800;
}

#page .accent-color {
  color: #8501ff;
}

#page .page__wrapper {
  width: 1000px;
  margin: 0 auto;
}

#page .page__wrapper__tariffs {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 1284px;
}
#page .page__wrapper__tariffs .tariffs__switch {
  display: flex;
  flex-direction: column;
}

#page .page__wrapper__tariffs .tariffs__switch p {
  text-align: center;
  font-size: 18px;
  margin-bottom: 12px;
}

#pageNotFound {
  display: flex;
  align-items: center;
  height: 70vh;
}

header.header-only-nav {
  height: 80px;
}

header .header__menu {
  display: flex;
  align-items: center;
  width: 100%;
  height: 75px;
  background: #f9f9f9;
  position: fixed;
  z-index: 999;
  box-shadow: 0 1px 4px rgb(146 146 146 / 15%);
}

header .header__menu .page__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .header__menu .header__menu__buttons {
  display: flex;
  align-items: center;
}

header .header__menu .header__menu__buttons a:not(:last-of-type) {
  margin-right: 20px;
}

header .header__menu .header__menu__buttons a:first-of-type {
  cursor: pointer;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid #8501ff;
  color: #8501ff;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 8px;
  transition: 400ms all;
  white-space: nowrap;
}

header .header__menu .header__menu__buttons a:first-of-type:hover {
  background: #8501ff;
  color: #fff;
}

header .header__menu .header__menu__buttons a:last-of-type {
  cursor: pointer;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #8501ff;
  border-radius: 8px;
  color: #fff;
  padding: 12px 17px;
  transition: 400ms all;
}

header .header__menu .header__menu__buttons a:last-of-type:hover {
  background: #4caf50;
}

header .header__menu .page__wrapper > ul {
  display: flex;
}

header .header__menu .page__wrapper > ul li {
  list-style: none;
  white-space: nowrap;
}

header .header__menu .page__wrapper > ul li:not(:last-of-type) {
  margin-right: 30px;
}

header .header__menu .page__wrapper > ul li a {
  color: #202020;
  text-decoration: none;
}

header .header__menu .page__wrapper > ul li a:hover {
  color: #8501ff;
  border-bottom: 1px solid #8501ff;
}

header .header__content {
  display: flex;
  padding: 125px 0 50px;
}

header .header__content .header__content__left {
  flex: 1;
}

header .header__content .header__content__left h1 {
  margin: 20px 0;
}

header .header__content .header__content__left p {
  font-size: 24px;
  margin-bottom: 20px;
}

header .header__content .header__content__right {
  flex: 1;
  position: relative;
}

header .header__content .header__content__right .image {
  position: absolute;
  z-index: 1;
  top: -230px;
  right: 0;
  width: 645px;
  height: 663px;
  background: url("https://meetto.ru/assets/images/header_image.webp") #fff no-repeat;
  background-size: cover;
  priority: low;
  transform: rotate(10deg);
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  border-radius: 50px;
  zoom: 0.8;
}

header .header__content .header__content__right .image.image__modules {
  top: 0;
  transform: unset;
  width: 480px;
  height: 480px;
  background: url("https://meetto.ru/assets/images/header_image_modules.webp") #fff no-repeat;
  background-size: contain;
}

header .header__content .header__content__right .image.image__telegram-bot {
  top: 0;
  transform: unset;
  width: 480px;
  height: 480px;
  background: url("https://meetto.ru/assets/images/header_image_telegram-bot.webp") #fff no-repeat;
  background-size: contain;
  box-shadow: unset;
}

#howItWorks {
  padding: 50px 0;
}

#howItWorks h2 {
  margin-bottom: 50px;
}

#howItWorks .tab__content .tab__content__text {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

#howItWorks .tab__content .tab__content__text__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  padding: 0 25px;
  margin: 0 auto;
}

#howItWorks .tab__content .tab__content__text p {
  line-height: 1.4;
  margin-bottom: 18px;
}

#howItWorks .blockHead:after {
  color: #f0f0f0;
  border-left: 20px solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
}
#howItWorks .blockHead {
  background: #f0f0f0;
  height: 40px;
  width: calc(100% - 50px);
  line-height: 40px;
  display: inline-block;
  position: relative;
}

#howItWorks .blocktext {
  font-weight: 700;
  padding-left: 10px;
}

#howItWorks .blockHead + .blockHead {
  margin-top: 20px;
}

#howItWorks .tab__content .tab__content__image {
  /*flex: 1;*/
}

#howItWorks .tab__content .ipad-screen {
  position: relative;
  z-index: 1;
  min-width: 400px;
  height: 300px;
  border: 10px solid #f9f9f9;
  box-shadow: 1px 2px 6px rgba(255,255,255, 0.25), 2px 6px 12px rgba(0,0,0, 0.1);
  border-radius: 25px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url('https://meetto.ru/assets/images/how-it-works/manager-app.webp') no-repeat;
  background-size: cover;
  background-position-x: -1px;
}

#howItWorks .tab__content .ipad-screen .ipad-screen__text {
  position: absolute;
  z-index: 1;
  top: 80px;
  width: 160px;
  left: -30px;
  background: #fff;
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 1px 2px 6px rgba(255,255,255, 0.25), 2px 6px 12px rgba(0,0,0, 0.1);
  padding: 15px;
}

#howItWorks .tab__content .iphone-screen {
  position: relative;
  z-index: 1;
  min-width: 172px;
  max-width: 172px;
  height: 300px;
  border: 10px solid #f9f9f9;
  box-shadow: 1px 2px 6px rgba(255,255,255, 0.25), 2px 6px 12px rgba(0,0,0, 0.1);
  border-radius: 25px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url('https://meetto.ru/assets/images/how-it-works/client-app_1.webp') no-repeat;
  background-size: cover;
}

#howItWorks .tab__content .iphone-screen .iphone-screen__text {
  position: absolute;
  z-index: 1;
  top: 80px;
  right: -40px;
  width: 100px;
  background: #fff;
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 1px 2px 6px rgba(255,255,255, 0.25), 2px 6px 12px rgba(0,0,0, 0.1);
  padding: 15px;
}

#services {
  background: #f9f9f9;
  padding: 50px 0;
}

#services .services__tabs {
  display: flex;
  flex-wrap: wrap;
}

#services .services__tabs .radiotab {
  position: absolute;
  opacity: 0;
}

#services .services__tabs .label {
  font: 20px "Inter ExtraBold", sans-serif;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

#services .services__tabs .label:not(:last-of-type) {
  margin-right: 40px;
}

#services .services__tabs .label:hover {
  cursor: pointer;
  border-bottom: 2px dashed #202020;
}

#services .services__tabs .label:active {
  color: #8501ff;
}

#services .services__tabs .radiotab:checked + .label {
  color: #8501ff;
  border-bottom: 2px solid #8501ff;
}

#services .services__tabs .tab__content {
  display: none;
  margin-top: 36px;
  order: 99;
}

#services .services__tabs .radiotab:checked + .label + .tab__content {
  display: flex;
}

#services .services__tabs .tab__content .tab__content__text {
  flex: 1;
  padding-right: 50px;
}

#services .services__tabs .tab__content .tab__content__text p {
  line-height: 1.4;
  margin-bottom: 18px;
}

#services .services__tabs .tab__content .tab__content__image {
  /*flex: 1;*/
}

#services .services__tabs .tab__content .tab__content__circle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  margin-right: 50px;
}

#services .services__tabs .tab__content .tab__content__circle-icon i {
  font-size: 75px;
  color: #8501ff;
}
#benefits h2 {
  margin-bottom: 20px;
}

#benefits p {
  line-height: 1.4;
}

#benefits .page__wrapper h2,
#benefits .page__wrapper p.subtitle {
  text-align: center;
}

#benefits .page__wrapper h3 {
  margin: 25px 0 15px;
}

#consultation {
  text-align: center;
  padding: 50px 0;
  background: #f9f9f9;
  margin-top: 50px;
}

#consultation h2 {
  margin: 0 0 25px 0;
}

#consultation .consultation__small {
  font-size: 14px;
  opacity: 0.67;
}

.button__cta {
  cursor: pointer;
  width: fit-content;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8501ff;
  border-radius: 15px;
  color: #fff;
  height: 55px;
  padding: 0 60px;
  transition: 400ms all;
}

.button__cta:hover {
  background: #4caf50;
}

#consultation p {
  font-size: 16px;
  margin: 0;
}

#social {
  padding: 50px 0;
  border-top: 10px #f9f9f9 solid;
  border-bottom: 10px #f9f9f9 solid;
}

#social h2 {
  text-align: center;
  margin-bottom: 50px;
}

#social .social__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#social img {
  max-width: 175px;
  max-height: 80px;
}

#feedback h2 {
  text-align: center;
  margin-bottom: 50px;
}

#feedback .feedback__container {
  background: #f9f9f9;
  border-radius: 25px;
  padding: 35px 0;
  box-shadow: 5px 0 0 0 rgba(204,204,204, 0.3), -5px 0 0 0 rgba(204,204,204, 0.3), 0 5px 0 0 rgba(204,204,204, 0.3);
}

#feedback .feedback__container .feedback__container__slider {

}

#feedback .feedback__container .feedback__container__slider input[type="radio"] {
  display: none;
}

#feedback .feedback__container .feedback__container__slider .feedback__item__content {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 80px;
  display: flex;
  width: 820px;
  height: 250px;
  align-items: center;
  justify-content: space-between;
}

#feedback .feedback__container .feedback__container__slider .feedback__item__text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  flex: 1;
}

#feedback .feedback__container .feedback__container__slider .text__author {
  color: #444;
  margin-top: 16px;
  font-size: 14px;
}

#feedback .feedback__container .feedback__container__slider .feedback__item__photo {
  display: flex;
  margin-left: 32px;
}

#feedback .feedback__container .feedback__container__slider .feedback__item__photo img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  border: 5px solid #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}

#prices {
  padding: 50px 0 0 0;
}

#prices h2 {
  text-align: center;
}

#prices .page__wrapper p.subtitle {
  text-align: center;
  margin-bottom: 50px;
}

#prices .switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid lightgrey;
  border-radius: 30px;
  background: #fff;
  margin: 0 auto 40px auto;
}

#prices .switch-wrapper [type="radio"] {
  position: absolute;
  left: -9999px;
}

#prices .switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
#prices .switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
  color: #fff;
}

#prices .switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
#prices .switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
  background: transparent;
}

#prices .switch-wrapper [type="radio"]:checked#monthly + label[for="yearly"] ~ .highlighter {
  transform: none;
}

#prices .switch-wrapper [type="radio"]:checked#yearly + label[for="monthly"] ~ .highlighter {
  transform: translateX(100%);
}

#prices .switch-wrapper label {
  font-size: 16px;
  z-index: 1;
  min-width: 140px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
  text-align: center;
}

#prices .switch-wrapper label:hover {
  background: #f5f5f5;
}

#prices .switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: #4caf50;
  transition: transform 0.25s ease-in-out;
}

#prices .tariff-hide {
  display: none !important;
}

#prices .prices__container {
  display: flex;
  justify-content: space-between;
}

#prices .prices__container .prices__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  width: 300px;
  border-radius: 25px;
  background: #f5f5f5;
  box-shadow: 5px 0 0 0 rgba(204,204,204, 0.3), -5px 0 0 0 rgba(204,204,204, 0.3), 0 5px 0 0 rgba(204,204,204, 0.3);
}

#prices .prices__container .prices__item:first-of-type {
  background: #fff9c4;
  box-shadow: 5px 0 0 0 rgba(198,192,130, 0.3), -5px 0 0 0 rgba(198,192,130, 0.3), 0 5px 0 0 rgba(198,192,130, 0.3);
}

#prices .prices__container .prices__item__title {
  font-size: 1.5em;
  margin-bottom: 16px;
  font-weight: bold;
}

#prices .prices__container .prices__item .price__tariff-info {
  display: flex;
  flex-direction: column;
  width: 264px;
  border-radius: 20px;
  background: #fff;
  flex: 1;
  margin-top: 18px;
}

#prices .prices__container .prices__item .price__tariff-info ul {
  margin: 18px;
}

#prices .prices__container .prices__item .price__tariff-info ul li {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 100%;
  padding: 8px 0;
  font-size: 14px;
}

#prices .prices__container .prices__item .price__tariff-info__support {
  font-size: 12px;
  padding: 8px;
  border-radius: 0 0 20px 20px;
  background: rgba(133, 1, 255, 0.1);
  text-align: center;
}

#prices .prices__container .prices__item .price__tariff-info__support p {
  display: block;
  padding: 4px;
  border-radius: 4px 4px 15px 15px;
  margin-top: 8px;
  color: #444;
  font-weight: 700;
  background: #fff;
}

#prices .prices__container .prices__item .price__tariff-info ul li.enabled i {
  color: #4caf50;
}

#prices .prices__container .prices__item .price__tariff-info ul li.enabled span.strong {
  font-weight: bold;
}

#prices .prices__container .prices__item .price__tariff-info ul li.disabled span {
  opacity: 0.5;
}

#prices .prices__container .prices__item .price__tariff-info ul li.disabled i {
  color: #f44336;
}

#prices .prices__container .prices__item .price__tariff-info ul li:not(:last-of-type) {
  border-bottom: 1px #f5f5f5 solid;
}

#prices .prices__container .prices__item .price__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 264px;
  min-height: 80px;
  border-radius: 20px;
  background: #fff;
}

#prices .prices__container .prices__item .price__badge span.price__badge__title {
  font-size: 14px;
}

#prices .prices__container .prices__item .price__badge span.price__badge__price {
  font: 20px "Inter ExtraBold", sans-serif;
  font-weight: 800;
}

#prices .prices__container .prices__item .price__badge span.tariff-discount {
  font: 14px "Inter ExtraBold", sans-serif;
  background: #4caf50;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
}

#prices .prices__container .prices__item .price__badge span.price__badge__price-text {
  font-size: 14px;
}

#prices .prices__commentary {
  text-align: center;
  margin: 20px 0 0 0;
  font-size: 12px;
}

#prices .prices__container .button__cta {
  max-width: 204px;
  padding: 0 45px;
  margin: 20px 0 0 0;
}

#faq {
  margin-bottom: 50px;
}

#faq h2 {
  text-align: center;
  margin: 50px 0;
}

#faq .faq-accordion-container {

}

#faq .faq-accordion-item {
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#faq .faq-accordion-header {
  background-color: #8501ff;
  color: #fff;
  padding: 15px;
  font-size: 18px;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

#faq .faq-accordion-header:hover {
  background-color: #4caf50;
}

#faq .faq-accordion-content {
  background-color: #FAFAFA;
  overflow: hidden;
  padding: 0 15px;
  max-height: 0;
  transition: max-height 0.3s ease;
}

#faq .faq-accordion-content p {
  margin: 15px 0;
  line-height: 1.5;
}

#faq .icon {
  transition: transform 0.3s ease;
}

#faq .active .icon {
  transform: rotate(45deg);
}

#documentation {
  padding: 50px 0;
}

#documentation h2 {
  text-align: center;
  margin-bottom: 50px;
}

#documentation .documentation__columns {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
}

#documentation .documentation__columns .documentation__columns__item {
  width: 300px;
}

#documentation .documentation__columns .documentation__columns__item h3 {
  font-weight: 400;
  margin-bottom: 25px;
}

#documentation .documentation__columns .documentation__columns__item ul {

}

#documentation .documentation__columns .documentation__columns__item ul li {
  list-style: none;
  margin-bottom: 8px;
}

#documentation .documentation__columns .documentation__columns__item ul li a {
  font-size: 13px;
  color: #444;
  text-decoration: none;
}

#documentation .documentation__columns .documentation__columns__item ul li a:hover {
  color: #202020;
  text-decoration: underline;
}

footer {
  background: #f9f9f9;
}

footer .page__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 185px;
}

footer .footer__left {

}

footer .footer__left h4 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 6px;
}

footer .footer__left p.phone-number {
  font-size: 32px;
  margin: 0 0 10px 0;
}

footer .footer__left .social-icons a {
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

footer .footer__left .social-icons a:hover {
  background: #fff;
}

footer .footer__left .social-icons a:not(:last-of-type) {
  margin-right: 10px;
}

footer .footer__left .social-icons {
  display: flex;
}

footer .footer__right {
  text-align: right;
}

footer .footer__bottom {
  background: #303030;
  text-align: center;
  padding: 20px;
  font-size: 12px;
}

footer .footer__bottom ul {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-bottom: 12px;
}

footer .footer__bottom ul li {
  list-style: none;
}

footer .footer__bottom ul li:not(:last-of-type) {
  margin-right: 25px;
}

footer .footer__bottom ul li a {
  color: #aaa;
}

footer .footer__bottom__app-title {
  color: #aaa;
  margin-bottom: 12px;
}

footer .footer__bottom__app-copyright {
  color: #999;
}

footer .footer__bottom__links {
  margin-top: 15px;
}


footer .footer__bottom__links a {
  color: #888;
  text-decoration: none;
}

#pageContent {
  padding-top: 100px;
  min-height: 100vh;
  padding-bottom: 50px;
}

#pageContent h1,
#pageContent h2,
#pageContent h3 {
  text-align: center;
}

#pageContent h1 {
  margin-bottom: 50px;
}

#pageContent h2,
#pageContent h3 {
  margin: 25px 0;
}

#pageContent p {
  text-indent: 20px;
  line-height: 1.4;
  text-align: justify;
  margin-bottom: 10px;
}

#pageContent ul,
#pageContent ol {
  padding-left: 2rem;
  line-height: 1.4;
  text-align: justify;
}

#pageContent li {
  margin: 0 0 10px 20px;
}

#pageContent table td {
  padding: 10px;
  border-collapse: collapse;
  border: 1px #ddd solid;
  text-align: left;
}

#telegramBot,
#integrationsList {
  background: #f9f9f9;
  padding: 50px 0;
  margin-bottom: 50px;
}

#telegramBot {
  margin: 50px 0;
}

#telegramBot h2 {
  margin-bottom: 25px;
}

#telegramBot p {
  margin-bottom: 8px;
}

#telegramBot .page__wrapper {
  display: flex;
  justify-content: space-between;
}

#telegramBot .telegram-bot__image {
  flex: 0.4;
}

#telegramBot .telegram-bot__text {
  flex: 0.6;
}

#telegramBot ul {
  margin-left: 20px;
}

#integrationsList .page__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#integrationsList .integrations-list__title {
  margin-right: 50px;
}

#integrationsList .integrations-list {
  display: flex;
}

#integrationsList .integrations-list__item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}

#integrationsList .integrations-list__item:last-of-type {
  margin-right: 0;
}

#modules h2 {
  text-align: center;
  margin-bottom: 20px;
}

#modules .page__wrapper > p {
  text-align: center;
}

#modules .modules-list {
  margin-top: 50px;
}

#modules .modules-list__item {
  display: flex;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 1px 2px 6px rgba(255,255,255, 0.25), 2px 6px 12px rgba(0,0,0, 0.1);
}

#modules .modules-list__item .modules-list__item__image {
  margin-right: 50px;
}

#modules .modules-list__item .modules-list__item__image .ipad-screen {
  position: relative;
  z-index: 1;
  min-width: 600px;
  height: 450px;
  border: 10px solid #f9f9f9;
  box-shadow: 1px 2px 6px rgba(255,255,255, 0.25), 2px 6px 12px rgba(0,0,0, 0.1);
  border-radius: 25px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position-x: -1px;
}

#modules .modules-list__item .modules-list__item__image .ipad-screen .ipad-screen__image img {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12.5px;
  width: 600px;
  height: 450px;
}

#modules .modules-list__item:not(:last-of-type) {
  margin-bottom: 25px;
}

#modules .modules-list__item .modules-list__item__text h3,
#modules .modules-list__item .modules-list__item__text p {
  margin-bottom: 20px;
}

.app-icons {
  display: flex;
}

.app-icons a {
  color: #202020;
  text-decoration: none;
}

.app-icons a:not(:last-of-type) {
  margin-right: 25px;
}

.app-icons .app-icons__item {
  display: flex;
  align-items: center;
  width: 150px;
  height: 54px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 1px 2px 6px rgba(255,255,255, 0.25), 2px 6px 12px rgba(0,0,0, 0.1);
  cursor: pointer;
  transition: 400ms all;
}

.app-icons .app-icons__item:hover {
  box-shadow: 0 0 0 1px #4caf50;
}

.app-icons .app-icons__item__icon {
  width: 50px;
  text-align: center;
}

.app-icons .app-icons__item img {
  height: 38px;
}

.app-icons .app-icons__item__text {
  font-size: 10px;
  text-align: left;
}

.app-icons .app-icons__item__text span {
  font-size: 20px;
}

.app-icons .app-icons__item__text span.google-text {
  font-size: 16px;
}

@media screen and (min-width: 769px) {
  header .navbar {
    display: none;
  }

  #howItWorks .tab__content__mobile {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  #page {
    width: 100%;
  }

  #page .page__wrapper,
  #page .page__wrapper__tariffs {
    width: calc(100% - 40px);
    padding: 0 20px;
  }

  header .header__menu .page__wrapper > ul {
    display: none;
  }

  header .navbar {
    display: block;
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  header .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
  }

  header .navbar .menu-items {
    display: flex;
  }

  header .navbar .nav-container ul {
    flex-direction: column;
  }

  header .navbar .nav-container li {
    list-style: none;
  }

  header .navbar .nav-container a {
    text-decoration: none;
    color: #202020;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0.7rem;
  }

  header .navbar .nav-container a:hover {
    font-weight: bolder;
  }

  header .nav-container {
    display: block;
    height: 75px;
    width: 100vw;
    position: absolute;
    z-index: 900;
    top: 0;
    left: 0;
  }

  header .nav-container .checkbox {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 20px;
    left: 20px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }

  header .nav-container .hamburger-lines {
    height: 26px;
    width: 32px;
    position: absolute;
    top: 25px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  header .nav-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #0e2431;
  }

  header .nav-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  header .nav-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  header .nav-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  header .navbar .menu-items {
    padding-top: 75px;
    background: #f9f9f9;
    height: auto;
    width: calc(100% + 20px);
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    transition: transform 0.5s ease-in-out;
    text-align: left;
  }

  header .navbar .menu-items li {
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
    font-weight: 500;
  }

  header .nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }

  header .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }

  header .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  header .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }

  header .header__menu .header__menu__buttons {
    position: relative;
    z-index: 999;
  }


  header .header__content .header__content__left {
    width: 100%;
    margin-top: 125px;
  }

  header .header__content .header__content__right {
    display: none;
  }

  #page h1,
  header .header__content .header__content__left h1 {
    font-size: 28px;
  }

  header .header__content .header__content__left p {
    font-size: 20px;
    margin-bottom: 50px;
  }

  header .page__wrapper.header__menu__mobile {
    display: flex;
  }

  header .page__wrapper.header__menu__mobile i {
    font-size: 32px;
  }

  #howItWorks {
    width: calc(100% - 40px);
    padding: 0 20px;
  }

  #howItWorks h2 {
    text-align: center;
    margin: 50px 0;
  }

  #howItWorks .tab__content .tab__content__text {
    flex-direction: column;
  }

  #howItWorks .tab__content .tab__content__text > div:not(:last-of-type) {
    margin-bottom: 25px;
  }

  #howItWorks .tab__content .iphone-screen {
    margin: 0 auto;
  }

  #howItWorks .tab__content .ipad-screen {
    min-width: unset;
  }

  #howItWorks .tab__content .tab__content__text__inner {
    padding: 0;
  }

  #howItWorks .blockHead {
    width: calc(100vw - 120px);
  }

  #benefits {
    margin-top: 50px;
  }

  #services .services__tabs .tab__content .tab__content__image {
    display: none;
  }

  #services .services__tabs .label {
    font-size: 18px;
    margin-bottom: 15px;
  }

  #feedback .feedback__container .feedback__container__slider .feedback__item__content {
    width: calc(100vw - 140px);
    left: 50px;
    height: auto;
    flex-direction: column-reverse;
  }

  #feedback .feedback__container .feedback__container__slider .feedback__item__text {
    flex-direction: column-reverse;
    text-align: center;
  }

  #feedback .feedback__container .feedback__container__slider .text__author {
    margin: 16px 0;
  }

  #feedback .feedback__container .feedback__container__slider .feedback__item__photo {
    margin: 0;
  }

  #feedback .feedback__container .feedback__container__slider .feedback__item__photo img {
    width: 100px;
    height: 100px;
  }


  #prices .prices__container {
    flex-direction: column;
    justify-content: space-around;
  }

  #prices .prices__container .prices__item {
    width: 100%;
  }

  #prices .prices__container .prices__item .price__tariff-info,
  #prices .prices__container .prices__item .price__badge {
    width: calc(100% - 36px);
  }

  #prices .prices__container .prices__item:not(:last-of-type) {
    margin-bottom: 25px;
  }

  #social .social__list {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #social .social__list .social__list__item:not(:last-of-type) {
    margin-bottom: 40px;
  }

  #documentation .documentation__columns {
    flex-direction: column;
  }

  #documentation .documentation__columns .documentation__columns__item {
    width: 100%;
  }

  #documentation .documentation__columns .documentation__columns__item:not(:last-of-type) {
    margin-bottom: 25px;
  }

  #modules .modules-list__item {
    flex-direction: column;
    overflow: hidden;
  }

  #modules .modules-list__item .modules-list__item__text {
    margin-top: 25px;
  }

  #integrationsList {
    margin-top: 50px;
  }

  #integrationsList .page__wrapper {
    flex-direction: column;
  }

  #integrationsList h2 {
    text-align: center;
    margin-bottom: 50px;
  }

  #integrationsList .integrations-list {
    flex-direction: column;
  }

  #integrationsList .integrations-list__title {
    margin: 0;
  }

  #integrationsList .integrations-list__item {
    flex-direction: column;
    margin: 0 0 25px 0;
  }

  #integrationsList .integrations-list__item:last-of-type {
    margin: 0;
  }

  footer .page__wrapper {
    flex-direction: column;
    align-items: center;
    padding: 20px !important;
    height: auto;
  }

  footer .footer__right,
  footer .footer__left {
    text-align: center;
  }

  footer .footer__bottom ul {
    flex-direction: column;
  }

  footer .footer__bottom ul li:not(:last-of-type) {
    margin-right: 0;
  }

  footer .footer__bottom ul li {
    margin: 0 0 15px 0;
  }

  .app-icons {
    margin-bottom: 50px;
  }

  .app-icons {
    flex-wrap: wrap;
  }

  .app-icons a:not(:last-of-type) {
    margin: 0 25px 25px 0;
  }

  footer .app-icons {
    flex-direction: column;
    margin-top: 20px;
  }

  footer .app-icons a:not(:last-of-type) {
    margin: 0 0 25px 0;
  }

  .social-icons {
    margin-bottom: 20px;
  }

  footer .footer__left .social-icons {
    display: flex;
    justify-content: space-evenly;
  }

  footer .footer__left .social-icons img {
    width: 36px;
    height: 36px;
  }
}