@font-face {
  font-family: "Noah Head";
  src: url(fonts/NoahHead-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noah Head";
  src: url(fonts/NoahHead-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Druk Cyr";
  font-style: normal;
  font-weight: 700;
  src: url(fonts/DrukCyr-Bold.woff2) format("woff2");
  font-display: swap;
}
:root {
  --font-family: "Noah Head", system-ui;
  --font-second: "Druk Cyr", system-ui;
  --root-size: 18px;
  --primary: #fae182;
  --white: #ffffff;
  --black: #191921;
  --gray: rgba(25, 25, 33, 0.38);
  --green: #289962;
  --bg: #d6d8e2;
  --blue: #eff0f4;
  --navy: #3054e6;
  --blue-2: #e4f0fc;
  --red: red;
  --gap-1: 10px;
  --gap-2: min(20px, calc(15px + 5 * (100vw - 320px) / 1640));
  --gap-3: min(30px, calc(15px + 15 * (100vw - 320px) / 1640));
  --gap-4: min(40px, calc(20px + 20 * (100vw - 320px) / 1640));
  --gap-5: min(50px, calc(30px + 20 * (100vw - 320px) / 1640));
  --gap-6: min(60px, calc(40px + 20 * (100vw - 320px) / 1640));
  --gap-7: min(70px, calc(50px + 30 * (100vw - 320px) / 1640));
  --gap-8: min(80px, calc(50px + 30 * (100vw - 320px) / 1640));
  --gap-9: min(90px, calc(60px + 30 * (100vw - 320px) / 1640));
  --gap-10: min(100px, calc(60px + 40 * (100vw - 320px) / 1640));
  --gap-12: min(120px, calc(70px + 50 * (100vw - 320px) / 1640));
  --gap-xl: min(240px, calc(90px + 150 * (100vw - 320px) / 1640));
  --index: calc(1vw + 1vh);
}
@layer base,layouts,typography,custom,responsive;
@layer base {
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    background: #d6d8e2;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
  }
  .aside-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    max-width: 700px;
    transform: translate(120%, 0);
    -webkit-transform: translate(120%, 0);
    z-index: 997;
    pointer-events: none;
  }
  .panel-fill {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 973;
    height: 100vh;
    width: 100%;
    max-width: 700px;
    transform-origin: right center;
    background-color: #fff;
    transform: translate3d(120%, 0, 0);
    -webkit-transform: translate3d(120%, 0, 0);
    pointer-events: none;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
  }
  .aside-panel,
  .panel-fill {
    transition: all 0.8s cubic-bezier(0.19, 1, 0.56, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.56, 1);
  }
  *,
  ::after,
  ::before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    outline: 0;
  }
  ::after,
  ::before {
    pointer-events: none;
  }
  * {
    scrollbar-width: thin;
  }
  html {
    font-size: var(--root-size);
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.15;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    font-kerning: none;
    font-variant-ligatures: none;
    user-select: none;
  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  .lenis.lenis-stopped {
    overflow: hidden;
  }
  body {
    color: var(--black);
    background-color: var(--bg);
    min-width: 280px;
    margin: 0 auto;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 2.2rem;
    margin-bottom: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
  }
  .h1,
  h1 {
    margin-top: 0;
  }
  p:not(:last-child) {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  p:last-child {
    margin-bottom: 0;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  input[type="date"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  textarea {
    width: 100%;
    font-weight: 700;
    line-height: 1;
    font-size: min(22px, calc(16px + 6 * (100vw - 320px) / 1640));
    color: var(--white);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    height: min(100px, calc(60px + 40 * (100vw - 320px) / 1640));
    padding: var(--gap-2) 3rem;
    padding-right: var(--gap-2);
    border-radius: 5rem;
    border: 1px solid var(--blue-2);
    background: linear-gradient(
      -45deg,
      rgb(249 250 253 / 22%),
      rgb(240 241 244)
    );
  }
  input:-webkit-autofill,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:hover,
  select:-webkit-autofill,
  select:-webkit-autofill:focus,
  select:-webkit-autofill:hover,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:focus,
  textarea:-webkit-autofill:hover {
    border: none;
    -webkit-text-fill-color: var(--black);
    -webkit-box-shadow: 0 0 0 1000px var(--blue) inset;
    transition: background-color 5000s ease-in-out 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  textarea {
    resize: none;
    overflow: auto;
    vertical-align: top;
    height: initial;
    border-radius: 1.66rem;
  }
  .input-group textarea {
    font-size: min(22px, calc(16px + 6 * (100vw - 320px) / 1640));
  }
  a {
    color: var(--black);
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  a:hover {
    color: var(--primary);
  }
  a:not([href]):not([class]),
  a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
  }
  a:active,
  a:focus,
  a:hover {
    color: var(--black);
  }
  input:focus,
  textarea:focus {
    color: var(--black);
    background-color: var(--blue);
  }
  address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
  }
  [tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important;
  }
  hr {
    color: inherit;
    background-color: var(--black);
    border: 0;
  }
  hr:not([size]) {
    height: 1px;
  }
  ul {
    list-style: none;
  }
  dl,
  ol,
  ul {
    margin: 0;
    padding: 0;
  }
  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin-bottom: 0;
  }
  dt {
    font-weight: 700;
  }
  dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
  }
  blockquote {
    border-left: 4px solid;
    line-height: 1.45;
    margin: 0 0 1.75em;
    overflow: hidden;
    padding: 0 0 0 1.235em;
  }
  blockquote > :last-child {
    margin-bottom: 0;
  }
  blockquote p {
    margin-bottom: 0.875em;
  }
  b,
  strong {
    font-weight: bolder;
  }
  .small,
  small {
    font-size: 0.885em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 14rem;
  }
  .small {
    text-transform: none;
    font-weight: 500;
  }
  .mark,
  mark {
    padding: 0;
    color: var(--gray);
    background: 0 0;
  }
  sub,
  sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  picture {
    contain: content;
    display: block;
    overflow: hidden;
    overflow: clip;
  }
  img,
  video {
    display: block;
    height: auto;
    object-fit: cover;
    pointer-events: none;
    width: 100%;
    -ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  iframe,
  picture {
    height: 100%;
    width: 100%;
  }
  table {
    border-collapse: inherit;
    border-spacing: 10px;
    border-width: 0;
    margin: 0;
    table-layout: fixed;
    width: 100%;
  }
  caption,
  td,
  th {
    position: relative;
  }
  td,
  th {
    border-width: 0 1px 1px 0;
    font-weight: 400;
    text-align: left;
  }
  caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
  }
  label {
    display: inline-block;
  }
  .label {
    color: var(--gray);
  }
  button {
    border-radius: 0;
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  button,
  select {
    text-transform: none;
  }
  [role="button"] {
    cursor: pointer;
  }
  select {
    word-wrap: normal;
  }
  [list]::-webkit-calendar-picker-indicator {
    display: none;
  }
  button:not(:disabled) {
    appearance: none;
    -webkit-appearance: none;
  }
  .btn,
  button {
    position: relative;
    cursor: pointer;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  ::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-fields-wrapper,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-text,
  ::-webkit-datetime-edit-year-field {
    padding: 0;
  }
  ::-webkit-inner-spin-button {
    display: none;
  }
  ::-webkit-input-placeholder,
  input::placeholder {
    color: var(--black);
  }
  [type="search"] {
    outline-offset: -2px;
    -webkit-appearance: textfield;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  ::file-selector-button {
    font: inherit;
  }
  ::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
  }
  ::selection {
    color: var(--black);
    background-color: var(--primary);
  }
  output {
    display: inline-block;
  }
  iframe {
    border: 0;
  }
  summary {
    display: list-item;
    cursor: pointer;
  }
  .loading {
    cursor: wait;
  }
}
@layer layouts {
  .container {
    position: relative;
    margin-inline: auto;
    width: min(100% - 20px, 1840px);
  }
  @media (min-width: 576px) {
    .container {
      width: min(100% - 40px, 1840px);
    }
  }
  @media (min-width: 1024px) {
    .sticky-col {
      position: sticky;
      top: 8rem;
    }
    .service-grid-l {
      padding: var(--gap-6);
      border-top-right-radius: 3.3rem;
      border-bottom-right-radius: 3.3rem;
    }
    .service-grid-l::before {
      content: "";
      position: absolute;
      width: 10vw;
      top: 0;
      bottom: 0;
      left: -10vw;
      background-color: var(--white);
    }
    .infobar.small-box {
      position: sticky;
      top: var(--gap-6);
    }
    .hero-box__image img {
      height: auto;
      object-fit: contain;
      max-height: 75vh;
    }
  }
  @media (min-width: 1200px) {
    .container {
      width: min(100% - 60px, 1840px);
    }
    .section-panel-serv {
      max-width: 84%;
      margin-inline: auto;
    }
  }
  @media (min-width: 1400px) {
    .container {
      width: min(100% - 80px, 1840px);
    }
  }
  .hidden,
  [hidden] {
    display: none;
  }
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-end {
    align-items: flex-end;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .place-items-center {
    justify-content: center;
    align-items: center;
  }
  .col.basis-full {
    flex-basis: 100%;
  }
  .o-hidden {
    overflow: hidden;
  }
  .grid {
    display: grid;
    grid-auto-flow: dense;
    gap: var(--gap-3);
  }
  .two-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .three-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .gap-1 {
    gap: var(--gap-1);
  }
  .gap-2 {
    gap: var(--gap-2);
  }
  .gap-3 {
    gap: var(--gap-3);
  }
  .gap-4 {
    gap: var(--gap-4);
  }
  .gap-5 {
    gap: var(--gap-5);
  }
  .gap-6 {
    gap: var(--gap-6);
  }
  .gap-8 {
    gap: var(--gap-8);
  }
  .gap-9 {
    gap: var(--gap-9);
  }
  .gap-10 {
    gap: var(--gap-10);
  }
  .gap-12 {
    gap: var(--gap-12);
  }
  .m-0 {
    margin: 0;
  }
  .mt-1 {
    margin-top: var(--gap-1);
  }
  .mt-3 {
    margin-top: var(--gap-3);
  }
  .mt-6 {
    margin-top: var(--gap-6);
  }
  .mt-8 {
    margin-top: var(--gap-8);
  }
  .mt-10 {
    margin-top: var(--gap-10);
  }
  .mb-3 {
    margin-bottom: var(--gap-3);
  }
  .mb-6 {
    margin-bottom: var(--gap-6);
  }
  .mb-8 {
    margin-bottom: var(--gap-8);
  }
  .mb-9 {
    margin-bottom: var(--gap-9);
  }
  .mb-10 {
    margin-bottom: var(--gap-10);
  }
  .mb-12 {
    margin-bottom: var(--gap-12);
  }
  .mt-6 {
    margin-top: var(--gap-6);
  }
  .mt-9 {
    margin-top: var(--gap-9);
  }
  .mt-12 {
    margin-top: var(--gap-12);
  }
  .pt-9 {
    padding-top: var(--gap-9);
  }
  .relative {
    position: relative;
  }
  .w-full {
    width: 100%;
  }
  .h-full {
    height: 100%;
  }
  .h-screen {
    height: 100vh;
  }
  .font-bold {
    font-weight: 700;
  }
  .section {
    position: relative;
    padding: var(--gap-xl) 0;
  }
  .page-section {
    padding: var(--gap-12) 0;
  }
  .section.pt0 {
    padding-top: 0;
  }
  .section.pb0 {
    padding-bottom: 0;
  }
  @media (min-width: 640px) {
    .sm\:flex {
      display: flex;
    }
    .sm\:hidden {
      display: none;
    }
  }
  @media (min-width: 768px) {
    .md\:flex {
      display: flex;
    }
    .md\:hidden {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .lg\:flex {
      display: flex;
    }
    .lg\:hidden {
      display: none;
    }
  }
  @media (min-width: 1280px) {
    .xl\:flex {
      display: flex;
    }
    .xl\:hidden {
      display: none;
    }
  }
}
@layer typography {
  .heading,
  h1:not(.home h1) {
    font-family: var(--font-second);
    font-size: min(150px, calc(35px + 115 * (100vw - 320px) / 1640));
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .home h1,
  .pricing-category th,
  .second-heading {
    font-size: min(67px, calc(25px + 42 * (100vw - 320px) / 1640));
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
  }
  .second-subheading,
  .subcategory th,
  .subheading,
  h2 {
    font-weight: 700;
    font-size: min(33px, calc(18px + 15 * (100vw - 320px) / 1640));
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .second-subheading,
  .service-item__list a,
  h3 {
    font-size: min(23px, calc(16px + 7 * (100vw - 320px) / 1640));
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 800;
    line-height: 1;
    font-size: min(22px, calc(16px + 6 * (100vw - 320px) / 1640));
    color: var(--white);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    height: min(140px, calc(60px + 80 * (100vw - 320px) / 1640));
    padding: var(--gap-2) 3rem;
    padding-right: var(--gap-2);
    border-radius: 5rem;
    position: relative;
    text-decoration: none;
    border: 0;
    max-width: 24.278rem;
    z-index: 1;
    transform: translateZ(0);
  }
  .btn-primary,
  .btn-primary .btn-fill {
    background-color: var(--primary);
  }
  .btn-primary {
    color: var(--black);
  }
  .btn-black,
  .btn-black .btn-fill {
    background-color: var(--black);
  }
  .btn-white,
  .btn-white .btn-fill {
    background-color: #fff;
  }
  .btn-title {
    position: relative;
    top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    transform: translateZ(0);
  }
  .btn-title em {
    position: relative;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.87rem;
    width: 100%;
    height: 100%;
  }
  .btn-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transform: translateZ(0);
    border-radius: inherit;
    transition: background 0.3s;
  }
  .btn-ripple {
    display: none;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: #fff;
    border-radius: inherit;
  }
  .btn-primary .btn-ripple.-v1 {
    background: #ffe0a1;
  }
  .btn-primary .btn-ripple.-v2 {
    background: #ffe6b4;
  }
  .btn-black .btn-ripple.-v1 {
    background: #333;
  }
  .btn-black .btn-ripple.-v2 {
    background: #444;
  }
  .btn-white .btn-ripple.-v1 {
    background: #f4f4f4;
  }
  .btn-white .btn-ripple.-v2 {
    background: #f0f0f0;
  }
  .btn-arrow {
    position: relative;
    width: min(90px, calc(40px + 50 * (100vw - 320px) / 1640));
    min-width: min(90px, calc(40px + 50 * (100vw - 320px) / 1640));
    height: min(90px, calc(40px + 50 * (100vw - 320px) / 1640));
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: translateX(0);
    transition: 0.3s ease;
  }
  .btn em span {
    transition: 0.3s ease;
  }
  .link-btn {
    color: var(--black);
    background: 0 0;
    border: 0;
    transition: 0.5s ease;
  }
  .bg-white {
    background-color: var(--white);
  }
  .bg-black {
    background-color: var(--black);
  }
  .color-blue {
    color: var(--blue);
  }
  .color-gray {
    color: var(--gray);
  }
  .color-bg {
    color: var(--bg);
  }
  .color-white {
    color: var(--white);
  }
  .z-1 {
    z-index: 1;
  }
  .z-2 {
    z-index: 2;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(2rem);
      will-change: transform;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      will-change: auto;
    }
  }
  .main-content {
    animation: fadeIn 1s ease;
  }
}

@media (max-width: 750px) {
  .header-contacts_phone {
    display: none;
  }
}

@layer custom {
  .header {
    position: sticky;
    top: 0;
    background-color: unset;
    padding: var(--gap-3) 0;
    z-index: 1001;
    transition: none;
  }
  .panel-showed .header {
    z-index: 599;
  }
  .header-contacts_worktime,
  .header-logo {
    transition: 0.5s ease;
  }
  .scrolled .header-contacts_worktime,
  .scrolled .header-logo {
    opacity: 0;
  }
  .header-contacts,
  .header-logo {
    width: auto;
  }
  .header-logo img {
    width: 100%;
    display: flex;
    max-width: 10.278rem;
  }
  .services-btn {
    background: 0 0;
    border: 0;
    margin: 0;
  }
  .header-contacts_phone {
    font-size: min(37px, calc(18px + 19 * (100vw - 320px) / 1640));
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }
  i.phone {
    background: url("data:image/svg+xml,%3Csvg width='27' height='29' viewBox='0 0 27 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_23_145)'%3E%3Cpath d='M25.5652 20.4896V24.1418C25.5666 24.4808 25.4971 24.8164 25.3613 25.1271C25.2255 25.4377 25.0263 25.7166 24.7764 25.9458C24.5266 26.175 24.2316 26.3495 23.9105 26.4581C23.5893 26.5667 23.249 26.6071 22.9113 26.5765C19.1652 26.1695 15.5668 24.8894 12.4052 22.8392C9.46377 20.97 6.96996 18.4762 5.10085 15.5348C3.04343 12.3589 1.76306 8.74297 1.36346 4.98002C1.33304 4.64337 1.37304 4.30408 1.48094 3.98374C1.58883 3.6634 1.76224 3.36903 1.99013 3.11938C2.21802 2.86974 2.49539 2.67027 2.8046 2.5337C3.1138 2.39712 3.44805 2.32643 3.78607 2.32611H7.43824C8.02905 2.32029 8.60182 2.52951 9.04978 2.91476C9.49774 3.3 9.79034 3.835 9.87303 4.42002C10.0272 5.5888 10.3131 6.73638 10.7252 7.84089C10.889 8.27662 10.9244 8.75018 10.8273 9.20544C10.7303 9.6607 10.5047 10.0786 10.1774 10.4096L8.63129 11.9557C10.3643 15.0035 12.8878 17.527 15.9356 19.26L17.4817 17.7139C17.8127 17.3866 18.2306 17.1611 18.6859 17.064C19.1411 16.9669 19.6147 17.0023 20.0504 17.1661C21.1549 17.5783 22.3025 17.8641 23.4713 18.0183C24.0627 18.1017 24.6027 18.3996 24.9888 18.8552C25.3749 19.3109 25.58 19.8925 25.5652 20.4896Z' stroke='%23191921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_23_145'%3E%3Crect width='26.7826' height='28' fill='white' transform='translate(0 0.5)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
      no-repeat 50% 50% / contain;
    display: flex;
    width: 0.8em;
    height: 0.8em;
  }
  .main-nav {
    padding: 0 var(--gap-3);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3.333rem;
  }
  .main-nav ul {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
  }
  .main-nav a,
  .services-btn {
    position: relative;
    padding: 0.8rem 0;
    font-size: min(20px, calc(16px + 4 * (100vw - 320px) / 1640));
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--black);
  }
  button.burger {
    position: relative;
    width: 30px;
    height: 20px;
    display: grid;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    background: 0 0;
    border: 0;
  }
  button.burger span {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--black);
    transition: all 0.4s;
  }
  .burger span:first-of-type {
    top: 0;
  }
  .burger span:nth-of-type(3) {
    bottom: 0;
  }
  .burger.is-open span:nth-of-type(2) {
    opacity: 0;
  }
  .burger.is-open span:first-of-type {
    -webkit-transform: translateY (20px) rotate (-45deg);
    transform: translateY(20px) rotate(-45deg);
  }
  .burger.is-open span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
  }
  .small-indent {
    margin-left: var(--gap-6);
  }
  .animated-heading {
    visibility: hidden;
  }
  .line {
    position: relative;
    display: inline-flex;
    overflow: hidden;
  }
  em.words {
    padding-right: 0.2em;
  }
  .hero-section {
    padding-top: 8rem;
    padding-bottom: 16rem;
  }
  .hero-cols {
    grid-template-columns: 2fr 1fr;
  }
  .hero-trigger {
    max-width: clamp(15rem, 20rem, 23rem);
  }
  .arrow {
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_22_141)'%3E%3Cpath d='M1.66672 1.66644L18.3334 18.3331' stroke='%23191921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M18.3334 1.66644V18.3331H1.66672' stroke='%23191921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_22_141'%3E%3Crect width='20' height='20' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
      no-repeat 50% 50% / contain;
    display: flex;
    width: 1em;
    height: 1em;
  }
  .arrow-2 {
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_22_137)'%3E%3Cpath d='M20.0001 38.1818C30.0416 38.1818 38.1819 30.0415 38.1819 19.9999C38.1819 9.95839 30.0416 1.81812 20.0001 1.81812C9.95851 1.81812 1.81824 9.95839 1.81824 19.9999C1.81824 30.0415 9.95851 38.1818 20.0001 38.1818Z' stroke='%23191921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M20.0001 27.2727L27.2728 19.9999L20.0001 12.7272' stroke='%23191921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M12.7273 19.9999H27.2728' stroke='%23191921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_22_137'%3E%3Crect width='40' height='40' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
      no-repeat 50% 50% / contain;
    display: flex;
    width: 1.4em;
    height: 1.4em;
    transition: 0.4s ease;
  }
  .indent {
    text-indent: 30%;
  }
  .decor-star::before {
    content: "✱";
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: min(67px, calc(30px + 37 * (100vw - 320px) / 1640));
    line-height: 0.95;
    letter-spacing: -0.04em;
  }
  .hero-img {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    height: 100%;
    width: clamp(42%, 55%, 46rem);
    transform: translate(-47%, 5%);
    -webkit-transform: translate(-47%, 5%);
  }
  .hero-img img {
    height: 100%;
    object-fit: contain;
    object-position: bottom;
  }
  .opacity-0 {
    opacity: 0;
  }
  .watermark {
    position: absolute;
    z-index: -1;
    bottom: -10%;
    width: 100vw;
  }
  @keyframes floating {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .float {
    animation: floating 3s ease-in-out infinite;
  }
  .main-grid {
    display: grid;
    gap: var(--gap-3);
    grid-auto-flow: dense;
    grid-template-columns: 1fr 2fr;
  }
  .section-reeller {
    padding-top: var(--gap-3);
  }
  .reeller-item {
    position: relative;
    display: flex;
    align-items: center;
  }
  .reeller-item::after {
    content: "";
    display: flex;
    margin-left: var(--gap-6);
    width: var(--gap-2);
    max-width: var(--gap-2);
    height: var(--gap-2);
    background-color: var(--blue);
    border-radius: 50%;
  }
  .arrow-circle {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border: 1px solid;
  }
  .serv-card {
    position: relative;
    background: var(--blue);
    padding: var(--gap-4) var(--gap-6);
    border-radius: 3.3rem;
    min-height: 30rem;
    overflow: hidden;
    transition: 0.5s ease;
  }
  .serv-card__img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: scale(1);
    transition: 0.5s ease;
  }
  .serv-card__info .second-subheading {
    font-weight: 500;
  }
  .serv-card__info .arrow-2 {
    width: 2em;
    height: 2em;
    transition: 0.5s ease;
    transform: rotate(0);
  }
  .serv-card__link {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .text-center {
    text-align: center;
  }
  .decor-top-line::before {
    content: "";
    position: absolute;
    top: -100%;
    height: 10rem;
    width: 6px;
    background: url("data:image/svg+xml,%3Csvg width='6' height='112' viewBox='0 0 6 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 111.667C4.47276 111.667 5.66667 110.473 5.66667 109C5.66667 107.527 4.47276 106.333 3 106.333C1.52724 106.333 0.333333 107.527 0.333333 109C0.333333 110.473 1.52724 111.667 3 111.667ZM3.5 109L3.5 0H2.5L2.5 109H3.5Z' fill='%23191921' /%3E%3C/svg%3E")
      no-repeat bottom center;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
  .section-cta {
    min-height: 56rem;
  }
  .section-cta .heading em {
    color: rgba(255, 255, 255, 0.3);
  }
  .cta-video {
    position: absolute;
    width: 9rem;
    height: 9rem;
    transform: translate(-54%, 76%);
    -webkit-transform: translate(-54%, 76%);
    left: 0;
    top: 0;
  }
  .section-cta .hero-img {
    z-index: 1;
    pointer-events: none;
  }
  .how-we {
    max-width: 18.6rem;
  }
  .how-we__number,
  .how-we__number::after {
    position: relative;
    font-family: var(--font-second);
    font-weight: 700;
    font-size: 1.333rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    margin-right: var(--gap-3);
  }
  .how-we__number::after {
    content: "/";
    opacity: 0.3;
    right: -50%;
  }
  .how-we__item:nth-child(2) {
    margin-left: var(--gap-3);
  }
  .how-we__item:nth-child(3) {
    margin-left: var(--gap-6);
  }
  .how-we__item:nth-child(4) {
    margin-left: var(--gap-9);
  }
  .cta-form-wrapper {
    max-width: 24.278rem;
  }
  .cta-decor {
    position: absolute;
    right: 0;
    bottom: 20%;
    max-width: 19rem;
    z-index: 0;
  }
  .cta-decor svg {
    width: 100%;
  }
  .bg-black input {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.07);
  }
  .bg-black ::-webkit-input-placeholder,
  .bg-black input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  .home .section.section-faq {
    padding-bottom: 0;
  }
  .accordeon-item {
    padding-block: var(--gap-3);
    border-bottom: 1px solid var(--black);
  }
  .accordeon-item:first-child {
    border-top: 1px solid var(--black);
  }
  .accordeon-item__header {
    cursor: pointer;
    transition: 0.3s ease;
  }
  .accordeon-item__description {
    height: auto;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }
  .accordeon-item__description p {
    margin-top: 1.5rem;
    font-weight: 500;
  }
  .accordeon-item__btn {
    color: var(--black);
    font-weight: 800;
    font-size: 0.86rem;
    line-height: 1;
    text-align: center;
    border: 0;
    padding-inline: var(--gap-3);
    height: 2.22rem;
    border-radius: 2.22rem;
    background-color: var(--white);
    transition: 0.4s ease;
  }
  .accordeon-item__icon {
    font-family: var(--font-second);
    font-style: italic;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(25, 25, 33, 0.17);
  }
  .reel-portfolio {
    position: relative;
    display: flex;
  }
  .reeller-item:nth-child(4)::after {
    margin-right: var(--gap-6);
  }
  .reel-portfolio-item {
    margin-right: var(--gap-3);
    width: clamp(100%, 100%, 25vw);
    min-width: 20vw;
    height: 14vw;
    background: var(--gray);
    border-radius: 1.66667rem;
    overflow: hidden;
  }
  .portfolio__item {
    aspect-ratio: 1/1;
    background: var(--gray);
    border-radius: 1.66667rem;
    overflow: hidden;
  }
  .portfolio__item img {
    height: 100%;
    object-fit: cover;
  }
  .feed-video {
    position: absolute;
    width: 9rem;
    height: 9rem;
    transform: translateY(-11%);
    -webkit-transform: translateY(-11%);
  }
  .col-testimonials .grid,
  .testimonials-form,
  .testimonials-grid {
    gap: var(--gap-10);
  }
  .testimonials__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    border: 1px solid var(--black);
    padding: var(--gap-10);
    border-radius: 3.3rem;
    quotes: "\201c" "\201d";
  }
  .testimonials__item-header {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .testimonials__item-title {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
  }
  .testimonials__item-date,
  .testimonials__item-name {
    font-weight: 700;
  }
  .testimonials__item-image {
    background: var(--white);
    border-radius: 50%;
    width: 5em;
    height: 5em;
    display: grid;
    align-items: center;
    justify-content: center;
  }
  .testimonials__item-image svg {
    max-width: 1.6em;
    margin: auto;
  }
  .testimonials__item-text {
    padding: 0;
    border: 0;
    margin: 0;
    opacity: 0.5;
    font-weight: 500;
    font-size: min(22px, calc(16px + 6 * (100vw - 320px) / 1640));
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .testimonials__item::after,
  .testimonials__item::before {
    font-size: min(80px, calc(40px + 40 * (100vw - 320px) / 1640));
    font-weight: 700;
    line-height: 0;
    border-bottom-right-radius: 50%;
  }
  .testimonials__item::before {
    content: open-quote;
    position: absolute;
    top: 0;
    left: 0;
    width: 5rem;
    height: 5rem;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--gap-2);
    z-index: 1;
    transform: translate(-31%, -3%);
    -webkit-transform: translate(-31%, -3%);
  }
  .testimonials__item-date {
    color: var(--gray);
    font-size: 1rem;
  }
  .box-scroll {
    position: relative;
    max-height: 23rem;
    max-width: 28rem;
    overflow: hidden;
  }
  .box-scroll::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6em;
    background: linear-gradient(to bottom, transparent, var(--bg));
  }
  .box-content-wrapper {
    position: relative;
  }
  .box-scroll::-webkit-scrollbar-track {
    background: 0 0;
  }
  .box-scroll::-webkit-scrollbar {
    width: 0;
  }
  .box-scroll::-webkit-scrollbar-thumb {
    background: 0 0;
    opacity: 0;
  }
  .grid-pricelist {
    gap: var(--gap-8);
  }
  table {
    background: var(--blue);
    border-spacing: 5px;
  }
  table th {
    padding: 15px 12px;
    text-align: center;
    font-weight: 700;
    z-index: 1;
  }
  table tr:nth-child(odd) td {
    background-color: #e7e8ef;
  }
  table td {
    line-height: 1.2;
    text-align: left;
    padding: var(--gap-2) var(--gap-2);
    width: auto;
  }
  .pricing-category th,
  table h2 {
    margin: 0;
    padding: var(--gap-3);
  }
  @keyframes pulse-arrow {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    50% {
      transform: translateX(-0.25em);
      opacity: 1;
    }
    75% {
      transform: translateX(-0.25em);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 0;
    }
  }
  @keyframes hand-move {
    0% {
      transform: translateX(0) scale(-1, 1);
    }
    50% {
      transform: translateX(-0.5em) scale(-1, 1);
    }
    100% {
      transform: translateX(0) scale(-1, 1);
    }
  }
  svg.swipe-icon {
    width: 18px;
    height: 24px;
    position: relative;
    left: 13px;
    overflow: visible;
    margin: 1rem 0;
    display: none;
  }
  .swipe-icon .swipe-arrow {
    animation: pulse-arrow 2s ease-out infinite;
  }
  .swipe-icon {
    animation: hand-move 2s ease-out infinite;
  }
  .swipe-icon g > path {
    transform: scale(-1, 1);
  }
  .breadcrumbs {
    margin-bottom: var(--gap-1);
  }
  .breadcrumbs,
  .breadcrumbs__link {
    color: var(--gray);
  }
  .breadcrumbs > span:first-child:before {
    content: "";
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E")
      no-repeat 50% 50% / contain;
    margin-right: var(--gap-1);
    width: 0.8em;
    height: 0.8em;
    display: inline-flex;
    opacity: 0.4;
  }
  .seo-content-col {
    max-width: 50rem;
    font-size: 1.1rem;
    line-height: 1.55;
  }
  .seo-content-col ol,
  .seo-content-col ul,
  .service-grid-r ol,
  .service-grid-r ul {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    list-style: inside;
    padding-bottom: var(--gap-3);
    line-height: 1.2;
  }
  .seo-content-col ol,
  .service-grid-r ol {
    list-style: decimal-leading-zero;
    padding-left: var(--gap-4);
  }
  ol ::marker,
  ul ::marker {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--gray);
  }
  ul ::marker {
    font-size: 1.4em;
    line-height: 0;
  }
  .service-grid {
    gap: var(--gap-6);
  }
  .service-grid-l {
    padding: var(--gap-6);
  }
  .box-content p {
    line-height: 1.55;
  }
  .box-content strong {
    font-weight: 500;
  }
  .cta-box {
    position: relative;
    margin-block: var(--gap-6);
    padding: var(--gap-9) var(--gap-6);
    border-radius: 3.3rem;
    border: 1px solid var(--black);
    overflow: hidden;
  }
  .manager-item__photo {
    position: absolute;
    height: calc(100% - var(--gap-3));
    width: 38%;
    left: 10%;
    bottom: 0;
    display: flex;
  }
  .manager-item__photo img {
    object-fit: contain;
    width: auto;
  }
  .manager-item__name {
    position: relative;
    border-radius: 10px;
    padding: 5px 10px;
    width: fit-content;
    border-bottom-right-radius: 0;
  }
  .manager-item__name::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 0;
    border-right: 10px solid var(--white);
  }
  .explanation {
    margin-block: var(--gap-3);
    opacity: 0.5;
  }
  footer {
    position: relative;
    overflow: clip;
  }
  .bg-round {
    border-top-left-radius: 5rem;
    border-top-right-radius: 5rem;
  }
  .footer-left {
    max-width: 16.6rem;
  }
  .footer .menu {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
  }
  .widget_nav_menu a {
    font-weight: 500;
    font-size: min(33px, calc(18px + 15 * (100vw - 320px) / 1640));
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--white);
  }
  .footer-phone,
  .phone-item {
    border: 1px solid var(--black);
    border-radius: 5rem;
    padding: var(--gap-1) var(--gap-3);
    height: 3.8rem;
    color: var(--black);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    max-width: 16.6rem;
  }
  .footer-phone {
    color: var(--white);
    border: 1px solid var(--white);
  }
  .footer-phone i {
    filter: invert(1);
  }
  .bottom-footer {
    padding-block: var(--gap-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-logo {
    max-width: 10rem;
  }
  .copyrights {
    opacity: 0.5;
  }
  .messenger__item svg {
    width: 2em;
    height: 2em;
  }
  .seo-content-col {
    max-width: 900px;
  }
  .service-item-menu {
    border: 1px solid var(--black);
    padding: var(--gap-10);
    border-radius: 3.3rem;
  }
  .request-panel .header-contacts__socials {
    justify-content: center;
  }
  .menu-districts-container a {
    color: var(--black);
  }
  .menu-districts-container li {
    padding-block: var(--gap-3);
    border-top: 1px solid var(--black);
  }
  .menu-districts-container li:last-child {
    border-bottom: 1px solid var(--black);
  }
  .aside-panel .btn {
    max-width: 100%;
  }
  .panel-show {
    pointer-events: auto;
    visibility: visible;
  }
  .panel-show .panel-content {
    opacity: 1;
  }
  .panel-show,
  .panel-showed .panel-fill {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  body.panel-showed {
    overflow: hidden;
  }
  .panel-showed .overlay {
    opacity: 0.87;
    visibility: visible;
  }
  .panel-scroll {
    overflow-y: auto;
    height: 100%;
  }
  .panel-content {
    opacity: 0;
    padding: var(--gap-12) var(--gap-10);
    margin: 0 auto;
    transition:
      opacity 1s ease,
      -webkit-transform 1s ease;
  }
  .panel-body {
    position: relative;
    width: 100%;
  }
  .panel-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: 0 0;
    display: grid;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border: 0;
  }
  button.panel-close:hover {
    opacity: 0.7;
  }
  .panel-close:before {
    transform: rotate(45deg);
  }
  .panel-close:after {
    transform: rotate(-45deg);
  }
  .panel-close:after,
  .panel-close:before {
    content: " ";
    position: absolute;
    border-radius: 2px;
    background-color: var(--black);
    width: 32px;
    height: 2px;
    display: grid;
    -webkit-transition:
      background-color 0.2s ease-in-out,
      transform 0.2s ease-in-out;
    transition:
      background-color 0.2s ease-in-out,
      transform 0.2s ease-in-out;
  }
  .services-panel {
    max-width: 100%;
  }
  .services-panel.panel-show ~ .panel-fill {
    background-color: var(--blue);
    max-width: 100%;
  }
  .callback-btn {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 5.5rem;
    height: 5.5rem;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border-radius: 50%;
    -webkit-animation: pulse-dot 2.25s
      cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
    animation: pulse-dot 2.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s
      infinite;
    z-index: 100;
    border: 1px solid var(--blue);
  }
  .pulsating-circle {
    content: "";
    position: absolute;
    display: flex;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--primary);
    -webkit-animation: pulse-ring 3.25s cubic-bezier(0.215, 0.61, 0.355, 1)
      infinite;
    animation: pulse-ring 3.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
  }
  @-webkit-keyframes pulse-ring {
    0% {
      transform: scale(0.33);
    }
    100%,
    80% {
      opacity: 0;
    }
  }
  @keyframes pulse-ring {
    0% {
      transform: scale(0.33);
    }
    100%,
    80% {
      opacity: 0;
    }
  }
  @-webkit-keyframes pulse-dot {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes pulse-dot {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  .mobmenu-panel .panel-content {
    align-items: flex-start;
    height: auto;
  }
  .sticky-wrapper {
    position: sticky;
    top: 1.6rem;
    z-index: 1;
  }
  .tab {
    font-weight: 700;
    background-color: var(--blue);
    color: var(--black);
    padding-inline: 1rem;
  }
  .tab.active {
    background-color: var(--blue-2);
  }
  [data-tab-content].active {
    display: grid;
  }
  .mobmenu-panel .services-btn,
  [data-tab-content] {
    display: none;
  }
  .tabs-content {
    margin-top: var(--gap-6);
  }
  .tabs-content .main-nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .loading .aside-panel,
  .loading .panel-fill {
    display: none;
  }
  .aside-panel .main-nav {
    justify-content: flex-start;
  }
  .aside-panel .main-nav a {
    font-size: min(40px, calc(20px + 20 * (100vw - 320px) / 1640));
  }
  .sticky-mob {
    position: fixed;
    background-color: #fff;
    width: 100%;
    padding: 15px 20px;
    top: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in-out;
  }
  .is-visible {
    opacity: 1;
    visibility: visible;
  }
  .footer .header-contacts__socials path {
    fill: white;
  }
  .notification-box {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: var(--black);
    border: 1px solid var(--white);
    font-size: 1.4em;
    padding: 2em;
    border-radius: 20px;
    visibility: hidden;
    z-index: 2;
  }
  .notification-box.show-error,
  .notification-box.show-success {
    opacity: 1;
    visibility: visible;
  }
  .lp-form {
    position: relative;
  }
  .lp-form .error {
    border: 1px solid red;
  }
}
@layer responsive {
  @media (hover: hover) {
    a:hover {
      opacity: 0.6;
    }
    .header .panel-trigger:hover,
    .header-logo a:hover {
      opacity: 0.7;
    }
    .btn:hover .btn-arrow,
    .link-btn:hover .arrow-2 {
      transform: translateX(-10%);
    }
    .btn:hover em span {
      transform: translateX(10%);
    }
    .serv-card:hover {
      background-color: var(--blue-2);
    }
    .serv-card:hover .serv-card__img {
      transform: scale(1.05);
    }
    .serv-card:hover .arrow-2 {
      transform: rotate(90deg);
    }
    .accordeon-item__btn:hover {
      background-color: var(--blue);
    }
  }
  @media (min-width: 1200px) {
    .section-cta .hero-img {
      height: 87%;
    }
  }
  @media (min-width: 1350px) {
    .header-contacts_worktime {
      line-height: 1;
    }
    .header-contacts,
    .header-logo {
      width: clamp(25%, 100%, 25%);
    }
  }
  @media (min-width: 1400px) {
    .main-nav {
      max-width: 31rem;
    }
    .footer .container,
    .section .container {
      max-width: 86%;
    }
  }
  @media (max-width: 1280px) {
    :root {
      --root-size: 16px;
    }
    .bg-round {
      border-top-left-radius: 2rem;
      border-top-right-radius: 2rem;
    }
  }
  @media (max-width: 1150px) {
    .hero-trigger .second-subheading {
      line-height: 1.1;
      font-size: min(23px, calc(14px + 9 * (100vw - 320px) / 1640));
    }
    .header-logo {
      max-width: 7rem;
    }
    .hero-left-col {
      gap: var(--gap-9);
    }
    .container .btn {
      max-width: 21rem;
    }
    .section:not(.section.pb0, .page-section, .home .section.section-faq) {
      padding: var(--gap-12) 0;
    }
    .serv-card {
      min-height: 24rem;
      padding: var(--gap-4) var(--gap-2);
      border-radius: 2.3rem;
    }
    .serv-card__info {
      gap: var(--gap-2);
    }
    .serv-card__info .arrow-2 {
      width: 1.5em;
      height: 1.5em;
    }
    .arrow-circle {
      width: 4rem;
      height: 4rem;
    }
    .arrow {
      width: 0.8em;
    }
    .section-cta {
      min-height: 39rem;
    }
    .cta-video {
      transform: translate(-54%, 50%);
      -webkit-transform: translate(-54%, 50%);
    }
    .is-mobile .cta-video,
    .is-mobile .feed-video {
      display: none;
    }
    .cta-box {
      padding: var(--gap-6) var(--gap-6);
    }
    .manager-item__photo {
      height: calc(100% - var(--gap-6));
      left: 6%;
    }
    .name {
      font-size: 14px;
    }
    .manager-item__name .small {
      font-size: 12px;
    }
    .manager-item__name {
      right: 1rem;
    }
    .cta-video,
    .feed-video {
      width: 7rem;
      height: 7rem;
    }
    .cta-decor {
      bottom: -2%;
      max-width: 11rem;
    }
    .section-cta .hero-img {
      left: 54%;
    }
    .hero-right-col .second-heading {
      margin-bottom: var(--gap-6);
    }
    .service-item-menu,
    .testimonials__item {
      border-radius: 2.3rem;
      padding: var(--gap-6);
    }
    .main-content .page-section {
      padding-top: var(--gap-6);
    }
    .box-scroll {
      max-height: 16rem;
    }
  }
  @media (max-width: 1023px) {
    :root {
      --root-size: 15px;
    }
    .header-contacts {
      width: 100%;
      margin-right: var(--gap-6);
    }
    .main-grid {
      grid-template-columns: 1fr;
    }
    .service-grid-l {
      order: 2;
    }
    .service-grid-l {
      border-radius: 1.66rem;
    }
    .accordeon-item__icon,
    .section-callus small,
    .serv-left {
      display: none;
    }
    .col-testimonials .grid,
    .testimonials-form,
    .testimonials-grid {
      gap: var(--gap-6);
    }
    .testimonials__item::before {
      width: 4rem;
      height: 4rem;
    }
    .hero-box__image img {
      max-height: 30rem;
      object-fit: contain;
    }
    .testimonials__item-image {
      width: 4em;
      height: 4em;
    }
    .testimonials__item-image svg {
      max-width: 0.8em;
    }
    .reel-portfolio-item {
      border-radius: 10px;
    }
    .box-scroll {
      max-height: 12rem;
    }
    .callback-btn {
      width: 4.5rem;
      height: 4.5rem;
    }
  }
  @media (max-width: 860px) {
    .hero-img {
      bottom: -10%;
    }
    .hero-right-col .arrow {
      display: none;
    }
    .hero-trigger {
      max-width: 13rem;
    }
    .small-indent {
      margin-left: unset;
    }
    .container .btn {
      max-width: 15rem;
    }
    .btn-title em {
      gap: var(--gap-2);
    }
    .section-cta .hero-right-col {
      display: none;
    }
    .section-cta {
      min-height: unset;
    }
    .cta-form-wrapper {
      max-width: 14.278rem;
    }
    .hero-box__content {
      gap: var(--gap-4);
    }
    .cta-box {
      border-radius: 1.6rem;
      min-height: 30rem;
    }
    .manager-item {
      order: 2;
    }
    .manager-item__photo {
      height: 54%;
      left: 23%;
    }
    .manager-item__name {
      right: 0;
      bottom: 3rem;
    }
  }
  @media (max-width: 768px) {
    :root {
      --root-size: 14px;
    }
    .reeller {
      gap: var(--gap-3);
    }
    .reeller-item::after {
      margin-left: var(--gap-3);
      width: var(--gap-1);
      max-width: var(--gap-1);
      height: var(--gap-1);
    }
    .reeller-item:nth-child(4)::after {
      margin-right: var(--gap-3);
    }
    .testimonials__item-name {
      font-size: 1rem;
    }
    .testimonials__item-date {
      font-size: 0.8rem;
    }
    .box-content p {
      line-height: 1.2;
    }
    .seo-content-col ol,
    .service-grid-r ol {
      padding-left: var(--gap-6);
    }
    .serv-card {
      min-height: 20rem;
      border-radius: 1.6rem;
    }
    .three-cols {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px) {
    .hero-img {
      left: 54%;
    }
    .hero-trigger {
      position: relative;
      max-width: 8rem;
      bottom: 2rem;
      left: 10px;
    }
    .hero-trigger mark {
      display: none;
    }
    .reel-portfolio-item {
      margin-right: var(--gap-1);
    }
    .mb-8 {
      margin-bottom: var(--gap-6);
    }
    .reel-portfolio-item {
      min-width: 35vw;
      height: 24vw;
    }
    .contact-list {
      gap: var(--gap-4);
    }
    .cta-decor {
      bottom: 54%;
    }
    .contact-list .second-subheading {
      font-size: 1.2rem;
    }
  }
  @media (max-width: 667px) {
    .header-grid {
      gap: var(--gap-6);
    }
    .header-logo {
      max-width: 12rem;
      width: 100%;
    }
    .header-logo img {
      max-width: 7rem;
    }
    .container .btn {
      max-width: 13rem;
    }
    button.burger {
      padding: 7px 0;
      height: 16px;
    }
    .header-contacts {
      margin-inline: var(--gap-3);
    }
    .hero-img {
      left: 54%;
      width: clamp(42%, 67%, 51rem);
    }
    input,
    textarea {
      padding: var(--gap-2) 2rem;
    }
    .btn {
      font-size: 14px;
      font-weight: 700;
    }
    .btn:not(.tab) {
      padding: var(--gap-2) 2rem;
      padding-right: 10px;
    }
    .breadcrumbs {
      display: none;
    }
    .service-grid-l {
      order: 0;
    }
    .hero-box__image img {
      max-height: 12rem;
    }
    .two-cols {
      grid-template-columns: 1fr;
    }
    .serv-card__img {
      max-height: 52%;
    }
    .section-cta .hero-img {
      left: 69%;
    }
    .serv-right {
      gap: var(--gap-6);
    }
    .serv-card .subheading {
      font-size: 1.6rem;
    }
    .serv-card__info {
      max-width: 13rem;
    }
    .seo-img img {
      max-height: 60%;
      width: auto;
      margin-inline: auto;
      margin-bottom: -10%;
    }
    .accordeon-item__btn {
      font-size: 12px;
    }
    .section-faq .small-faq-title {
      display: none;
    }
    .footer-left {
      margin-bottom: var(--gap-6);
    }
    .panel-content {
      padding: var(--gap-12) var(--gap-6);
    }
    .aside-panel .main-nav a,
    .service-item__title .subheading {
      font-size: 1.9rem;
      font-weight: 700;
    }
    .service-item__list {
      gap: 0.6rem;
    }
    .service-item__list a {
      font-size: min(40px, calc(20px + 20 * (100vw - 320px) / 1640));
    }
  }
}