@import "/static/css-promo/fonts.css";
@import "/static/css-promo/colors.css";
@import "/static/css-promo/typography.css";
@import "/static/css-promo/header.css";
@import "/static/css-promo/display.css";
@import "/static/css-promo/partners.css";
@import "/static/css-promo/our-clients.css";
@import "/static/css-promo/our-bots.css";
@import "/static/css-promo/pluses.css";
@import "/static/css-promo/mobile-links.css";
@import "/static/css-promo/web.css";
@import "/static/css-promo/screen.css";
@import "/static/css-promo/faq.css";
@import "/static/css-promo/footer.css";
@import "/static/css-promo/popup.css";
@import "/static/css-promo/prices.css";
@import "/static/css-promo/blog-list.css";
@import "/static/css-promo/company-card-promo.css";
@import "/static/css-promo/bot/support-bot.css";
@import '/static/css-promo/bot/root.css';
@import '/static/css-promo/bot/pane.css';
@import '/static/css-promo/bot/chat-toggle.css';
@import '/static/css-promo/bot/chat.css';
@import '/static/css-promo/utilities.css';
@import '/static/css-promo/bot/message.css';
@import '/static/css-promo/spacing.css';
@import '/static/css-promo/grid.css';
@import '/static/css-promo/flex.css';
@import '/static/css-promo/header-menu.css';
@import '/static/css-promo/advantage-item.css';
@import '/static/css-promo/block.css';
@import "/static/css-promo/switch.css";
@import "/static/css-promo/support.css";

html {
  scroll-padding-top: 160px;

  &:has(.stick-footer) {
    height: 100%;

    .post-wrapper {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
}

h1,
h2 {
  color: var(--h-1-h-2);
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  margin: 0;

  li::marker {
    color: var(--primary-color);
  }
}

code {
  background-color: var(--bg-light);
  padding: var(--spacing-0);
  border-radius: var(--spacin-1);
  word-break: break-word;
}

pre {
  padding: var(--spacing-3);
  border-radius: var(--spacing-1);
  background-color: color-mix(in oklab, var(--primary-color), transparent 95%);
  border: 1px solid var(--primary-color);
  position: relative;
  overflow: visible;
  display: flex;

  code {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--primary-color), transparent 60%) color-mix(in oklab, var(--primary-color), transparent 90%);
    overflow: auto;
    display: inline-block;
    max-width: 100%;
    background-color: unset;
    padding: 0;
    border-radius: 0;
    word-break: unset;
    user-select: all;

    @media (any-hover: hover) {
      overscroll-behavior: contain;
    }
  }

  .code-line {
    pointer-events: none;
  }

  .copied {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    cursor: pointer;
    visibility: hidden;
    width: 32px;
    height: 32px;
    border-radius: var(--spacing-1);
    background-color: #fff;
    display: grid;
    place-content: center;
    border: 1px solid var(--primary-color);

    &._show {
      visibility: visible;
    }

    &:hover {
      .octicon-copy {
        color: var(--primary-color);
      }
    }
  }

  .octicon-copy,
  .octicon-check {
    pointer-events: none;
  }

  .octicon-check {
    color: var(--green-color);
    display: none;
  }

  .tip {
    position: absolute;
    top: calc(var(--spacing-3) * -1);
    left: 50%;
    translate: -50% -100%;
    background-color: var(--white);
    border: 1px solid color-mix(in oklab, var(--primary-color), var(--white));
    padding: var(--spacing-1);
    border-radius: var(--spacing-1);
    text-align: center;
    max-width: 230px;
    font-size: var(--font-size-extra-small);
    z-index: 1;

    @media (width < 1024px) {
      left: unset;
      right: -10px;
      translate: 0 -100%;
    }
  }

  .tip-arrow {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    rotate: 45deg;
    background-color: color-mix(in oklab, var(--primary-color), var(--white));
    top: -50%;
    left: 50%;
    translate: -50% -25%;
  }

  .punctuation {
    color: #043100;
  }

  .string,
  .template-punctuation {
    color: #ba4700;
  }

  .string-property,
  .template-string {
    color: #0060d6;
  }

  .number {
    color: #4a099f;
  }

  .comment {
    color: #008125;
  }

  .keyword {
    color: #0019d5;
  }

  .maybe-class-name {
    color: #00711a;
  }

  .boolean {
    color: #d50000;
  }

  .builtin {
    color: #e18b00;
  }

  .operator {
    color: rgb(0, 0, 255);
  }

  &:hover {
    .copied {
      visibility: visible;
    }
  }
}

.clear-list-style {
  list-style: none;
}

.center-block {
  margin: 0 auto;
}

.dark-bg {
  background: var(--bg-pluses);
}

.dark-bg .btn-close {
  background: var(--bs-btn2-close-bg);
}

.white-text {
  color: var(--white);
}

.light-grey-text {
  color: var(--gray);
}

.dark-text {
  color: var(--dark-text);
}

.btn-purple,
.btn-white,
.btn-gray,
.btn-gray-mini {
  padding: 15px 21px;
  align-items: center;
  border-radius: 40px;
  border: none;
  display: inline-block;
  text-decoration: none;
  font-family: 'Montserrat', 'Nunito', Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 3vw, 20px);
}

.btn-purple.p10 {
  padding: 10px 10px;
}

.btn-gray-mini {
  padding: 10px 20px;
}

.btn-purple {
  background-color: var(--text-purple);
  color: var(--white);
}

.btn-white {
  background-color: var(--white);
  color: var(--text-purple);
}

.btn-gray {
  background-color: #F5F4F7;
  color: var(--text-purple);
  border-radius: 12px;
  font-family: Nunito, sans-serif;
  font-size: 1.5rem;
  line-height: 1.4em;
  font-weight: bold;
}

.btn-gray-mini {
  background: var(--text-purple);
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  column-gap: 4px;
}

.btn-purple:focus,
.btn-white:focus {
  filter: drop-shadow(0 8px 16px rgba(82, 22, 143, 0.27));
}

.btn-purple:hover {
  background-color: var(--white);
  color: var(--bg-pluses);
  filter: drop-shadow(0 8px 16px rgba(82, 22, 143, 0.27));
}

.dark-hover.btn-white:hover,
.dark-hover.btn-purple:hover {
  background-color: var(--bg-pluses);
  color: var(--white);
  filter: drop-shadow(0 8px 16px rgba(82, 22, 143, 0.27));
}

.btn-white:hover {
  background-color: var(--bg);
  filter: drop-shadow(0 8px 16px rgba(82, 22, 143, 0.27));
}

.purple-hover.btn-white:hover,
.purple-hover.btn-gray-mini:hover {
  background-color: var(--text-purple);
  color: var(--white);
}

.btn-font-24 {
  font-family: Nunito, sans-serif;
  font-size: 1.5rem;
  line-height: 1.4em;
  font-weight: bold;
  border-radius: 60px;
}

.btn-font-16 {
  font-size: 1em;
  border-radius: 40px;
}

.btn-font-20 {
  font-size: 1.25em;
  font-weight: bold;
}

.text-btn-notice {
  font-weight: normal;
  font-size: 14px;
}

.text-purple {
  color: var(--text-purple);
}

.nav-main-wrapper {
  column-gap: 40px;
}

.nav-wrapper {
  background-color: var(--bg-pluses);
}

.nav-wrapper .btn-white {
  font-family: Nunito, sans-serif;
  font-size: 15px;
  font-weight: bold;
}

.nav-wrapper .navbar-toggler {
  border: none;
}

.nav-wrapper .navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-light-bg);
}

.logo-company {
  font-family: Poppins, sans-serif;
  font-size: 28px;
  text-decoration: none;
}

.nav-list {
  flex: 1 1 auto;
}

.nav-list a {
  font-family: Nunito, sans-serif;
  color: var(--white);
  text-decoration: none;
}

.nav-list a:focus,
.nav-list a:hover,
.navbar-nav .nav-link.active {
  color: var(--text-purple);
}

.page-team {
  background: #f2f2f2;
}

@media (min-width: 992px) and (max-width: 1439px) {

  /* lg size */
  .nav-wrapper .container {
    max-width: 960px;
  }

  .btn-purple,
  .btn-white,
  .btn-gray {
    padding: 10px 12px;
    line-height: normal;
  }

  .btn-font-24 {
    font-size: 15px;
    line-height: normal;
  }

  .btn-gray-mini {
    font-size: 1rem;
  }

  .logo-company {
    font-size: 1em;
    padding-top: 0;
    padding-bottom: 0;
  }

  .logo-company img {
    width: 40px;
    height: 40px;
  }

  .logo-company .me-3 {
    margin-right: 10px !important;
  }
}

.page-team {
  background: #f2f2f2;
}


@media (min-width: 768px) and (max-width: 991px) {
  .nav-wrapper .container {
    max-width: 736px;
  }

  .btn-purple,
  .btn-white,
  .btn-gray {
    padding: 10px 12px;
    line-height: normal;
  }

  .btn-font-24 {
    font-size: 15px;
    line-height: normal;
  }

  .logo-company {
    font-size: 1em;
    padding-top: 0;
    padding-bottom: 0;
  }

  .logo-company img {
    width: 40px;
    height: 40px;
  }

  .logo-company .me-3 {
    margin-right: 10px !important;
  }
}

@media (max-width: 767px) {

  /* sm size */
  .nav-wrapper .container {
    max-width: none;
  }

  .btn-purple,
  .btn-white,
  .btn-gray {
    padding: 10px 12px;
    line-height: normal;
  }

  .btn-font-24 {
    font-size: 15px;
    line-height: normal;
  }

  .logo-company {
    font-size: 1em;
    padding-top: 0;
    padding-bottom: 0;
  }

  .logo-company img {
    width: 40px;
    height: 40px;
  }

  .logo-company .me-3 {
    margin-right: 12px !important;
  }
}

.tl_article address time:before {
  content: '\2022';
  padding: 0 7px;
}

.prefooter {
  position: relative;
  overflow: hidden;
  padding-top: clamp(40px, 8vw, 140px);
  padding-bottom: clamp(40px, 8vw, 140px);
  background:
    url('/static/img-promo/prefooter/bg-decor.svg') center / cover no-repeat,
    var(--bg-white);

  @media (width <=991px) {
    padding-bottom: 0;
  }
}

.prefooter__info {
  @media (width > 991px) {
    width: 57%;
  }
}

.prefooter__image {
  position: absolute;
  top: 60px;
  left: 58vw;
  max-height: 740px;
  margin-bottom: -60px;
  max-width: 100%;

  @media (width <=991px) {
    position: static;
    margin-top: clamp(20px, 3vw, 28px);
    inset: unset;
    max-height: unset;
    margin-bottom: -90px;
  }

  @media (width <=425px) {
    margin-bottom: -38%;
    max-width: 214%;
  }
}