@charset "UTF-8";

:root {
  --color-primary: #cc6835;
  --color-primary-light: #e8a165;
  --color-primary-soft: rgba(204, 104, 53, .1);
  --color-primary-gradient: linear-gradient(90deg, #cc6835 0%, #e8a165 100%);
  --color-whatsapp: #267e39;
  --color-text: #000000;
  --color-text-body: #353535;
  --color-text-muted: #9c9c9c;
  --color-bg: #ffffff;
  --color-bg-page: #f5f3f3;
  --color-bg-soft: #f5f3f3;
  --color-border: #e8e8e8;
  --font-family: "ProximaNova", Arial, Helvetica, sans-serif;
  --container-max: 1640px;
  --container-padding: 20px;
  --page-gutter: clamp(16px, calc((100% - var(--container-max)) / 2), 140px);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --header-height: 90px;
  --transition: .25s ease
}

    @charset "UTF-8";

    :root {
      --color-primary: #cc6835;
      --color-primary-light: #e8a165;
      --color-primary-soft: rgba(204, 104, 53, .1);
      --color-primary-gradient: linear-gradient(90deg, #cc6835 0%, #e8a165 100%);
      --color-whatsapp: #267e39;
      --color-text: #000000;
      --color-text-body: #353535;
      --color-text-muted: #9c9c9c;
      --color-bg: #ffffff;
      --color-bg-page: #f5f3f3;
      --color-bg-soft: #f5f3f3;
      --color-border: #e8e8e8;
      --font-family: "ProximaNova", Arial, Helvetica, sans-serif;
      --container-max: 1640px;
      --container-padding: 20px;
      --page-gutter: clamp(16px, calc((100% - var(--container-max)) / 2), 140px);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 20px;
      --header-height: 90px;
      --transition: .25s ease
    }

    @font-face {
      font-family: ProximaNova;
      src: url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/fonts/ProximaNova-Regular.woff) format("woff"), url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/fonts/ProximaNova-Regular.ttf) format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap
    }

    @font-face {
      font-family: ProximaNova;
      src: url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/fonts/ProximaNova-Semibold.woff) format("woff"), url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/fonts/ProximaNova-Semibold.ttf) format("truetype");
      font-weight: 500;
      font-style: normal;
      font-display: swap
    }

    @font-face {
      font-family: ProximaNova;
      src: url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/fonts/ProximaNova-Bold.woff) format("woff"), url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/fonts/ProximaNova-Bold.ttf) format("truetype");
      font-weight: 700;
      font-style: normal;
      font-display: swap
    }

    address {
      font-style: normal
    }

    a {
      color: inherit;
      background-color: transparent;
      text-decoration: none
    }

    blockquote,
    q {
      quotes: none
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content: ""
    }

    button,
    [type=button],
    [type=reset],
    [type=submit] {
      -webkit-appearance: button;
      -moz-appearance: button;
      appearance: button;
      cursor: pointer
    }

    button {
      background: transparent
    }

    button:-moz-focusring,
    [type=button]:-moz-focusring,
    [type=reset]:-moz-focusring,
    [type=submit]:-moz-focusring {
      outline: 1px dotted ButtonText
    }

    button::-moz-focus-inner,
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner {
      border-style: none;
      padding: 0
    }

    button,
    input {
      line-height: normal;
      overflow: visible
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font-size: inherit;
      font-family: inherit;
      margin: 0
    }

    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    header,
    menu,
    nav,
    output,
    ruby,
    select,
    summary,
    textarea,
    time,
    mark,
    audio,
    video {
      border: 0;
      margin: 0;
      padding: 0
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      border: 0;
      margin: 0;
      padding: 0
    }

    hr {
      box-sizing: content-box;
      height: 0;
      overflow: visible
    }

    html {
      scroll-behavior: smooth
    }

    html,
    body,
    button,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    u,
    i,
    input,
    dl,
    dt,
    dd,
    ol,
    optgroup,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    header,
    menu,
    nav,
    output,
    ruby,
    select,
    summary,
    textarea,
    time,
    mark,
    audio,
    video {
      border: 0;
      margin: 0;
      padding: 0
    }

    img {
      display: block;
      border-style: none;
      max-width: 100%
    }

    legend {
      box-sizing: border-box;
      color: inherit;
      display: table;
      max-width: 100%;
      padding: 0;
      white-space: normal
    }

    * {
      box-sizing: border-box
    }

    ol,
    ul,
    li {
      list-style: none
    }

    progress {
      vertical-align: baseline
    }

    [type=checkbox],
    [type=radio] {
      box-sizing: border-box;
      padding: 0
    }

    [type=number]::-webkit-inner-spin-button,
    [type=number]::-webkit-outer-spin-button {
      height: auto
    }

    [type=search] {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
      outline-offset: -2px
    }

    [type=search]::-webkit-search-decoration {
      -webkit-appearance: none
    }

    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit
    }

    textarea {
      overflow: auto
    }

    summary {
      display: list-item
    }

    .new-container {
      max-width: 1200px;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px
    }

    @media screen and (max-width:570px) {
      .new-container {
        padding-inline: 20px
      }
    }

    .page {
      padding-top: 100px;
      background: #f5f3f3
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 16px 32px;
      border: none;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: -.02em;
      text-align: center;
      cursor: pointer;
      transition: background var(--transition), color var(--transition), box-shadow var(--transition)
    }

    .btn--primary {
      color: #fff;
      background: var(--color-primary)
    }

    .btn--primary:hover {
      background: #b85a2e
    }

    .btn--outline {
      color: var(--color-text);
      background: transparent;
      border: 1.5px solid var(--color-primary)
    }

    .btn--outline:hover {
      background: var(--color-primary-soft)
    }

    .btn--outline-dark {
      color: var(--color-text);
      background: #fff;
      box-shadow: inset 0 0 0 1.5px var(--color-primary)
    }

    .btn--outline-dark:hover {
      background: var(--color-primary-soft)
    }

    .btn--whatsapp {
      color: var(--color-whatsapp);
      background: #fff;
      box-shadow: inset 0 0 0 1.5px var(--color-whatsapp)
    }

    .btn--whatsapp:hover {
      background: #267e3914
    }

    .btn--header {
      padding: 12px 24px;
      font-size: 15px;
      border-radius: var(--radius-sm)
    }

    .btn--wide {
      width: 100%;
      max-width: 367px;
      padding: 18px 24px;
      font-size: 22px;
      font-weight: 700
    }

    .btn--calc {
      min-width: 280px;
      padding: 22px 28px;
      border-radius: var(--radius-sm);
      font-size: 18px
    }

    .btn--lg {
      width: 100%;
      padding: 18px;
      font-size: 18px
    }

    .section {
      position: relative;
      padding-block: 100px;
      overflow: hidden
    }

    @media screen and (max-width:1023px) {
      .section {
        padding-block: 50px
      }
    }

    .section--white {
      background: var(--color-bg)
    }

    .section__title {
      margin-bottom: 32px;
      font-size: clamp(28px, 3vw, 43px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.02em
    }

    .section__title--center {
      text-align: center
    }

    .section__subtitle {
      margin-bottom: 40px;
      font-size: 19px;
      letter-spacing: -.02em;
      color: var(--color-text)
    }

    .section__watermark {
      position: absolute;
      top: 20px;
      left: var(--page-gutter);
      font-size: clamp(80px, 12vw, 210px);
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      background: linear-gradient(180deg, #9c9c9c, #e8e8e8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      opacity: .11
    }

    .section__watermark--center {
      left: 50%;
      transform: translate(-50%)
    }

    .text-accent {
      color: var(--color-primary)
    }

    .alert {
      display: none
    }

    .alert.alert--active {
      position: fixed;
      display: block;
      inset: 50px 0 auto;
      z-index: 105
    }

    .alert.alert--active .new-container {
      position: relative;
      max-width: 100%;
      padding: 0
    }

    .my-alert__close {
      position: absolute;
      right: 20px;
      top: 15px;
      width: 35px;
      height: 35px;
      cursor: pointer;
      border: 0;
      border-radius: 5px;
      transition: .2s;
      background: #636363
    }

    .my-alert__close:before,
    .my-alert__close:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 18px;
      height: 2px;
      background: #fff;
      border-radius: 999px
    }

    .my-alert__close:before {
      transform: translate(-50%, -50%) rotate(45deg)
    }

    .my-alert__close:after {
      transform: translate(-50%, -50%) rotate(-45deg)
    }

    .my-alert__close:hover {
      background-color: #9e9e9e
    }

    .header_fixed {
      position: fixed;
      inset: 0 0 auto;
      z-index: 9;
      background-color: #fff
    }

    .header_fixed .new-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .logo {
      display: block;
      width: 170px;
      height: 80px;
      /* background: url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/img/new-logo-4.png) center/contain no-repeat */
    }

    @media screen and (max-width:1640px) {
      .logo {
        width: 170px;
        height: 75px
      }
    }

    @media screen and (max-width:1200px) {
      .logo {
        width: 150px;
        height: 60px
      }
    }

    .menu {
      display: flex
    }

    .menu>li:not(:last-child) {
      margin-right: 20px
    }

    @media screen and (max-width:1640px) {
      .menu>li:not(:last-child) {
        margin-right: 18px
      }
    }

    @media screen and (max-width:1200px) {
      .menu>li:not(:last-child) {
        margin-right: 0
      }
    }

    .menu_link {
      font-size: 15px;
      color: #000
    }

    @media screen and (max-width:1200px) {
      .menu_link {
        display: block;
        padding: 10px 15px
      }
    }

    .menu_link.active {
      font-weight: 700;
      color: #cc6835
    }

    @media screen and (max-width:1200px) {
      .menu_link.active {
        color: #fff;
        background-color: #cc6835
      }
    }

    .menu_link:hover {
      color: #cc6835
    }

    @media screen and (max-width:1200px) {
      .menu_link:hover {
        color: #fff;
        background-color: #ff565c
      }
    }

    .mob_menu {
      display: none;
      flex-shrink: 0;
      width: 30px;
      margin-left: 30px;
      position: relative
    }

    @media screen and (max-width:1200px) {
      .mob_menu {
        display: block
      }
    }

    .menu_btn {
      display: block;
      cursor: pointer
    }

    .menu_btn span {
      width: 100%;
      height: 3px;
      display: block;
      background-color: #cc6835;
      transform: rotate(0);
      transition: .4s
    }

    .menu_btn:hover span,
    .mob_menu.active .menu_btn span {
      background-color: #b5b5b5
    }

    .menu_btn .menu2,
    .menu_btn .menu3 {
      margin-top: 7px
    }

    .under_nav {
      position: absolute;
      display: none;
      right: 20px;
      top: 100%;
      width: 180px;
      max-height: 350px;
      overflow: auto;
      z-index: 5;
      background-color: #fff;
      box-shadow: 0 3px 9px #0003
    }

    .under_nav .menu {
      flex-direction: column
    }

    .head_right {
      display: flex;
      align-items: center
    }

    @media screen and (max-width:400px) {
      .head_right {
        margin-left: 20px
      }
    }

    .red_btn {
      color: #fff;
      transition: .4s;
      background-color: #cc6835;
      border: 1px solid transparent
    }

    .red_btn:hover {
      color: #cc6835;
      background-color: #fff;
      border-color: #cc6835
    }

    .request_btn {
      flex-shrink: 0;
      margin-left: 24px;
      padding: 12px 28px;
      border-radius: 6px;
      font-weight: 700
    }

    @media screen and (max-width:1640px) {
      .request_btn {
        margin-left: 20px;
        padding: 12px 25px;
        font-size: 14px
      }
    }

    @media screen and (max-width:570px) {
      .request_btn {
        display: none
      }
    }

    .lang_block {
      position: relative;
      text-transform: uppercase;
      font-size: 16px
    }

    @media screen and (max-width:1640px) {
      .lang_block {
        font-size: 14px
      }
    }

    .lang_block.active .lang_choice {
      background-color: #e2e2e2
    }

    .lang_choice {
      cursor: pointer;
      color: #000;
      padding: 5px 25px 5px 10px;
      border: 1px solid #e8e8e8;
      border-radius: 3px;
      /* background: url(file:///Users/raven/Downloads/bkcp/astana-ceramic-fixed/assets/img/lang_arrow.svg) right 5px center/11px no-repeat, #f5f3f3 */
    }

    .lang_choice:hover {
      background-color: #e2e2e2
    }

    .other_lang {
      position: absolute;
      display: none;
      inset: 100% 0 auto;
      overflow: hidden;
      border-radius: 0 0 5px 5px;
      border: 1px solid #e8e8e8
    }

    .lang {
      display: block;
      color: #231e79;
      padding: 5px 10px;
      background-color: #e2e2e2
    }

    .lang:hover {
      color: #fff;
      background-color: #969696
    }

    .lang.active,
    .lang.active:hover {
      color: #fff;
      background-color: #313131
    }

    .hero {
      position: relative;
      overflow: hidden;
      margin-top: -100px;
      padding: 200px 0 100px;
      background: #fff
    }

    @media screen and (max-width:1200px) {
      .hero {
        padding: 148px 0 60px
      }
    }

    @media screen and (max-width:1023px) {
      .hero {
        padding: 132px 0 40px
      }
    }

    @media screen and (max-width:767px) {
      .hero {
        padding: 124px 0 32px
      }
    }

    @media screen and (max-width:570px) {
      .hero {
        padding: 100px 0 24px
      }
    }

    .hero:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(180deg, #fff, #faf9f8 14%, #f5f3f3 55%, #f1ebe4);
      pointer-events: none;
      z-index: 0
    }

    .hero:after {
      content: "";
      position: absolute;
      right: -8%;
      bottom: -18%;
      width: 62%;
      height: 72%;
      background: radial-gradient(ellipse at center, rgba(232, 161, 101, .32) 0%, rgba(245, 235, 225, .14) 42%, transparent 70%);
      pointer-events: none;
      z-index: 0
    }

    .hero .new-container {
      position: relative;
      z-index: 1
    }

    .hero__inner {
      display: flex;
      align-items: flex-start;
      gap: clamp(40px, 40px + 160 * (100vw - 768px) / 872, 200px);
      width: 100%;
      min-width: 0
    }

    @media screen and (max-width:1200px) {
      .hero__inner {
        flex-direction: column;
        gap: 64px
      }
    }

    .hero__content {
      flex: 1 1 560px;
      min-width: 0;
      max-width: 560px;
      width: 100%;
      padding-top: 8px
    }

    @media screen and (max-width:1200px) {
      .hero__content {
        flex: 1 1 auto;
        max-width: 100%
      }
    }

    .hero__title {
      width: 100%;
      max-width: 520px;
      margin: 0 0 20px;
      font-size: 43px;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -.86px;
      color: #000
    }

    @media screen and (max-width:1200px) {
      .hero__title {
        max-width: 100%;
        font-size: clamp(30px, 4.5vw, 40px);
        letter-spacing: -.02em
      }
    }

    @media screen and (max-width:767px) {
      .hero__title {
        font-size: 28px
      }
    }

    .hero__subtitle {
      width: 100%;
      max-width: 520px;
      margin: 0 0 54px;
      font-size: 19px;
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -.38px;
      color: #000
    }

    @media screen and (max-width:1200px) {
      .hero__subtitle {
        max-width: 100%;
        margin-bottom: 32px;
        font-size: clamp(16px, 2.2vw, 18px)
      }
    }

    @media screen and (max-width:767px) {
      .hero__subtitle {
        margin-bottom: 24px;
        font-size: 16px
      }
    }

    .hero__features {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      max-width: 560px;
      margin-bottom: 54px
    }

    @media screen and (max-width:1200px) {
      .hero__features {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 32px;
        margin-bottom: 32px
      }
    }

    @media screen and (max-width:767px) {
      .hero__features {
        margin-bottom: 24px
      }
    }

    .hero__feature {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 135px;
      padding: 0 8px;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -.36px;
      color: #353535
    }

    .hero__feature:not(:last-child):after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
      height: 80px;
      background: #e8e8e8
    }

    .hero__feature span {
      display: block;
      margin-top: 12px
    }

    @media screen and (max-width:1200px) {
      .hero__feature {
        min-width: 0;
        font-size: 16px
      }

      .hero__feature:nth-child(2n):after {
        display: none
      }

      .hero__feature:not(:last-child):after {
        height: 64px
      }
    }

    @media screen and (max-width:767px) {
      .hero__feature {
        width: 50%
      }

      .hero__feature:after {
        display: none
      }
    }

    .hero__feature-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: #cc68351a;
      border-radius: 50%
    }

    .hero__feature-icon img {
      display: block;
      object-fit: contain
    }

    @media screen and (max-width:1200px) {
      .hero__feature-icon {
        width: 64px;
        height: 64px
      }
    }

    @media screen and (max-width:767px) {
      .hero__feature-icon {
        width: 56px;
        height: 56px
      }
    }

    .hero__actions {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 16px
    }

    @media screen and (max-width:1200px) {
      .hero__actions {
        align-items: stretch
      }
    }

    @media screen and (max-width:767px) {
      .hero__actions {
        flex-wrap: wrap
      }
    }

    .hero__actions .btn {
      min-height: 55px;
      padding: 0 32px;
      border-radius: var(--radius-sm);
      font-size: 18px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -.36px;
      white-space: nowrap
    }

    @media screen and (max-width:1200px) {
      .hero__actions .btn {
        min-width: 0;
        min-height: 50px;
        font-size: 16px
      }
    }

    @media screen and (max-width:767px) {
      .hero__actions .btn {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
        padding-inline: 24px
      }
    }

    .hero__actions .btn--primary {
      min-width: 260px
    }

    .hero__actions .btn--outline {
      min-width: 310px
    }

    .hero__visual {
      flex: 0 1 496px;
      min-width: 0;
      max-width: 496px;
      margin-top: -8px
    }

    .hero__visual img {
      display: block;
      width: 100%;
      height: auto
    }

    @media screen and (max-width:1200px) {
      .hero__visual--desktop {
        display: none
      }
    }

    .hero__visual--mobile {
      display: none;
      flex: none;
      width: 100%;
      max-width: min(380px, 72vw);
      margin: 0 auto 32px
    }

    @media screen and (max-width:1200px) {
      .hero__visual--mobile {
        display: block
      }
    }

    @media screen and (max-width:767px) {
      .hero__visual--mobile {
        max-width: min(320px, 88vw);
        margin-bottom: 24px
      }
    }

    @media screen and (max-width:1200px) {
      .hero__visual {
        flex: none;
        align-self: center;
        width: 100%;
        max-width: min(380px, 72vw);
        margin-top: 0
      }
    }

    @media screen and (max-width:767px) {
      .hero__visual {
        max-width: min(320px, 88vw)
      }
    }

    .gas-block {
      padding: 0
    }

    @media screen and (max-width:1023px) {
      .gas-block {
        padding-top: 50px
      }
    }

    .gas-block .new-container {
      --gas-block-gap: clamp(32px, 6vw, 64px);
      --gas-block-media-width: clamp(320px, 50vw, 605px);
      --gas-block-media-height: clamp(400px, 55vw, 700px);
      min-height: var(--gas-block-media-height)
    }

    @media screen and (max-width:1023px) {
      .gas-block .new-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        min-height: auto
      }
    }

    .gas-block .section__watermark {
      left: 50%;
      transform: translate(-50%);
      right: auto;
      z-index: 0
    }

    @media screen and (max-width:1023px) {
      .gas-block .section__watermark {
        left: 0
      }
    }

    .gas-block__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: var(--gas-block-media-height);
      max-width: 615px;
      margin-left: calc(var(--gas-block-media-width) + var(--gas-block-gap) - var(--container-padding) - 80px)
    }

    .gas-block__content .section__title {
      margin-bottom: clamp(16px, 1.6666666667vw, 24px)
    }

    @media screen and (max-width:1023px) {
      .gas-block__content {
        order: -1;
        min-height: auto;
        max-width: none;
        margin-left: 0;
        padding: 0 20px
      }
    }

    .gas-block__media {
      position: absolute;
      top: 0;
      left: 0;
      width: 45vw;
      height: clamp(400px, 70vw, 700px)
    }

    .gas-block__media img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 0;
      object-fit: cover
    }

    @media screen and (max-width:1023px) {
      .gas-block__media img {
        width: 100%
      }
    }

    @media screen and (max-width:1023px) {
      .gas-block__media {
        position: relative;
        order: 1;
        width: 100vw;
        height: clamp(400px, 70vw, 650px);
        max-width: none;
        margin-inline: calc(50% - 50vw);
        transform: none;
        overflow: hidden
      }

      .gas-block__media img {
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: center
      }
    }

    .gas-block__cta {
      position: absolute;
      bottom: 60px;
      left: 50%;
      z-index: 1;
      width: auto;
      max-width: clamp(280px, 25.4861111111vw, 367px);
      padding: clamp(14px, 1.25vw, 18px) clamp(20px, 1.6666666667vw, 24px);
      font-size: clamp(18px, 1.5277777778vw, 22px);
      font-weight: 700;
      white-space: nowrap;
      transform: translate(-50%)
    }

    @media screen and (max-width:1023px) {
      .gas-block__cta {
        bottom: 60px;
        max-width: calc(100% - 40px);
        white-space: normal;
        text-align: center
      }
    }

    .gas-block__lead {
      max-width: 615px;
      margin-bottom: clamp(16px, 1.6666666667vw, 24px);
      font-size: clamp(16px, 1.3194444444vw, 19px);
      line-height: 1.45;
      letter-spacing: -.02em
    }

    .gas-block__list {
      margin-bottom: clamp(24px, 2.2222222222vw, 32px);
      padding-left: 0;
      list-style: none
    }

    .gas-block__list li {
      position: relative;
      padding-left: 18px;
      margin-bottom: clamp(6px, .6944444444vw, 10px);
      font-size: clamp(16px, 1.25vw, 18px);
      line-height: 1.55
    }

    .gas-block__list li:before {
      content: "•";
      position: absolute;
      left: 0
    }

    .gas-block__note {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      max-width: 550px;
      margin-top: 12px;
      font-size: clamp(18px, 1.3888888889vw, 20px);
      font-weight: 700;
      line-height: 1.3;
      color: var(--color-primary)
    }

    .gas-block__note img {
      flex-shrink: 0;
      width: clamp(32px, 2.7777777778vw, 40px);
      height: auto
    }

    .faq_section {
      padding: 100px 0;
      background: #fff
    }

    @media screen and (max-width:1023px) {
      .faq_section {
        padding: 50px 0
      }
    }

    .title {
      font-size: 64px;
      font-weight: 700;
      color: #000;
      text-transform: uppercase
    }

    @media screen and (max-width:1200px) {
      .title {
        font-size: 32px
      }
    }

    @media screen and (max-width:400px) {
      .title {
        font-size: 28px
      }
    }

    .title__small {
      font-size: 24px;
      color: #cbcbcb
    }

    @media screen and (max-width:1200px) {
      .title__small {
        font-size: 16px
      }
    }

    @media screen and (max-width:400px) {
      .title__small {
        font-size: 14px
      }
    }

    .faq_list {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      margin-top: 30px
    }

    .faq_list .faq_item:nth-child(1) {
      transition-delay: 0s
    }

    .faq_list .faq_item:nth-child(2) {
      transition-delay: .1s
    }

    .faq_list .faq_item:nth-child(3) {
      transition-delay: .2s
    }

    .faq_list .faq_item:nth-child(4) {
      transition-delay: .3s
    }

    .faq_list .faq_item:nth-child(5) {
      transition-delay: .4s
    }

    .faq_list .faq_item:nth-child(6) {
      transition-delay: .5s
    }

    .faq_list .faq_item:nth-child(7) {
      transition-delay: .6s
    }

    .faq_list .faq_item:nth-child(8) {
      transition-delay: .7s
    }

    .faq_list .faq_item:nth-child(9) {
      transition-delay: .8s
    }

    .faq_list .faq_item:nth-child(10) {
      transition-delay: .9s
    }

    .faq_item {
      padding: 20px;
      background: #f3f3f3;
      border-radius: 20px;
      display: flex;
      flex-direction: column
    }

    @media screen and (max-width:1023px) {
      .faq_item {
        padding: 15px 15px 15px 25px
      }
    }

    .faq_item.way {
      opacity: 0;
      transition: opacity 1s, transform 1s;
      transform: translateY(50px)
    }

    .faq_item.way.way--active {
      opacity: 1;
      transform: none
    }

    .faq_question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-weight: 500;
      font-size: 24px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none
    }

    .faq_question.active .faq_plus {
      background: #cc6835
    }

    .faq_question.active .faq_plus svg {
      transform: rotate(45deg)
    }

    .faq_question.active .faq_plus svg path {
      stroke: #fff
    }

    .faq_question .faq_plus svg {
      transition: .2s ease-in-out
    }

    .faq_question .faq_plus svg path {
      transition: .2s ease-in-out
    }

    @media screen and (max-width:1023px) {
      .faq_question {
        font-size: 16px
      }
    }

    .faq_plus {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      border-radius: 20px;
      background: #d9d9d9;
      transition: background .2s ease-in-out
    }

    @media screen and (max-width:1023px) {
      .faq_plus {
        width: 30px;
        height: 30px
      }
    }

    .faq_answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .35s ease
    }

    .faq_answer.is-open {
      grid-template-rows: 1fr
    }

    .faq_answer__inner {
      overflow: hidden;
      line-height: 140%;
      padding-top: 0;
      transition: padding-top .35s ease
    }

    .faq_answer.is-open .faq_answer__inner {
      padding-top: 20px
    }

    @media screen and (max-width:1023px) {
      .faq_answer__inner {
        font-size: 14px
      }
    }

    .compare {
      margin: 0 auto
    }

    .compare__table-wrap {
      overflow-x: auto;
      border: 2px solid #d67f4b;
      border-radius: 18px;
      background: #fff
    }

    @media screen and (max-width:1023px) {
      .compare__table-wrap {
        width: calc(100% + var(--page-gutter));
        margin-right: calc(-1 * var(--page-gutter));
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
      }
    }

    .compare__table {
      width: 100%;
      min-width: 1020px;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff;
      font-size: 16px;
      line-height: 1.35;
      color: #5b5b5b
    }

    .compare__table th,
    .compare__table td {
      padding: 16px 24px;
      text-align: left;
      vertical-align: top;
      border-right: 1px solid rgba(214, 127, 75, .28);
      border-bottom: 1px solid rgba(214, 127, 75, .16)
    }

    .compare__table thead th {
      padding-top: 18px;
      padding-bottom: 18px;
      background: #d88a5f;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.15;
      text-align: left;
      vertical-align: middle;
      border-bottom-color: #d67f4b47
    }

    .compare__table tbody tr:nth-child(2n) {
      background: #d88a5f17
    }

    .compare__table tbody td:first-child,
    .compare__table thead th:first-child {
      width: 19%
    }

    .compare__table tbody td:first-child {
      font-weight: 700;
      color: #212121
    }

    .compare__table thead th:nth-child(2),
    .compare__table tbody td:nth-child(2) {
      width: 15%
    }

    .compare__table thead th:nth-child(3),
    .compare__table tbody td:nth-child(3) {
      width: 20%
    }

    .compare__table thead th:last-child,
    .compare__table tbody td:last-child {
      width: 46%
    }

    .compare__table tbody td:nth-child(3) {
      background: #d88a5f33;
      font-weight: 500
    }

    .compare__table th:last-child,
    .compare__table td:last-child {
      border-right: none
    }

    .compare__table tbody tr:last-child td {
      border-bottom: none
    }

    @media screen and (max-width:1023px) {
      .compare__table {
        min-width: 920px;
        font-size: 14px
      }

      .compare__table th,
      .compare__table td {
        padding: 14px 18px
      }

      .compare__table thead th {
        font-size: 14px
      }
    }

    .mistakes__title {
      max-width: 700px;
      margin-inline: auto;
      margin-bottom: 16px
    }

    .mistakes__subtitle {
      margin-bottom: 48px;
      text-align: center;
      font-size: 19px;
      letter-spacing: -.02em
    }

    .mistakes__grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 30px;
      max-width: var(--container-max);
      margin: 0 auto 40px
    }

    @media screen and (max-width:1023px) {
      .mistakes__grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media screen and (max-width:767px) {
      .mistakes__grid {
        grid-template-columns: 1fr
      }
    }

    .mistakes__card {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 250px
    }

    .mistakes__card img {
      width: 100%;
      height: 100%;
      min-height: 250px;
      object-fit: cover
    }

    .mistakes__card--lg {
      grid-column: span 3
    }

    @media screen and (max-width:1023px) {
      .mistakes__card--lg {
        grid-column: span 1
      }
    }

    @media screen and (max-width:767px) {
      .mistakes__card--lg {
        grid-column: span 1
      }
    }

    .mistakes__card:not(.mistakes__card--lg) {
      grid-column: span 2
    }

    @media screen and (max-width:1023px) {
      .mistakes__card:not(.mistakes__card--lg) {
        grid-column: span 1
      }
    }

    @media screen and (max-width:767px) {
      .mistakes__card:not(.mistakes__card--lg) {
        grid-column: span 1
      }
    }

    .mistakes__card-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 30px;
      background: linear-gradient(180deg, #0000, #000000c2);
      color: #fff
    }

    .mistakes__card-overlay h3 {
      margin-bottom: 8px;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -.02em
    }

    .mistakes__card-overlay p {
      font-size: 18px;
      letter-spacing: -.02em
    }

    .mistakes__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      max-width: 1000px;
      margin: 0 auto;
      font-size: 20px;
      font-weight: 700;
      color: var(--color-primary)
    }

    .cerablock {
      margin: 0 auto
    }

    .cerablock .new-container {
      display: flex;
      /* gap: clamp(32px, 6vw, 64px); */
      align-items: start
    }

    @media screen and (max-width:1400px) {
      .cerablock .new-container {
        flex-direction: column;
        gap: 40px
      }
    }

    @media screen and (max-width:1023px) {
      .cerablock .new-container {
        display: block
      }
    }

    @media screen and (max-width:1400px) {
      .cerablock__content {
        max-width: 100%
      }
    }

    .cerablock__composition {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-items: start;
      padding-top: 96px
    }

    @media screen and (max-width:1023px) {
      .cerablock__composition {
        gap: 32px 24px;
        padding-top: 40px
      }
    }

    @media screen and (max-width:767px) {
      .cerablock__composition {
        gap: 24px
      }
    }

    .cerablock__item {
      position: relative;
      flex: 1 1 0;
      text-align: center;
      padding: 0 14px;
      min-width: 0
    }

    @media screen and (max-width:1023px) {
      .cerablock__item {
        flex-basis: calc(50% - 12px)
      }
    }

    @media screen and (max-width:767px) {
      .cerablock__item {
        flex-basis: 100%
      }
    }

    .cerablock__item:not(:last-child):after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 132px;
      background: #d88a5f33
    }

    @media screen and (max-width:1023px) {
      .cerablock__item:not(:last-child):after {
        display: none
      }
    }

    .cerablock__item strong {
      display: block;
      margin: 16px 0 10px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.1;
      color: #111;
      text-transform: none
    }

    .cerablock__item p {
      font-size: 14px;
      line-height: 1.35;
      color: #353535
    }

    .cerablock__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      margin: 0 auto;
      background: #d88a5f1a;
      border-radius: 50%
    }

    .cerablock__icon img {
      max-width: 60%;
      max-height: 60%;
      object-fit: contain
    }
    .cerablock__content {
      width: 100%;
    }
    .cerablock__product {
      display: flex;
      align-self: start;
      justify-content: flex-end;
    }

    .cerablock__product img {
      width: min(100%, 470px);
      height: auto
    }

    @media screen and (max-width:1400px) {
      .cerablock__product {
        justify-content: center
      }
    }

    @media screen and (max-width:1023px) {
      .cerablock__product {
        justify-content: center;
        margin-top: 40px
      }

      .cerablock__product img {
        width: min(100%, 420px)
      }
    }

    .cerablock .section__title {
      max-width: 620px;
      margin-bottom: 12px;
      font-size: clamp(32px, 3vw, 44px);
      line-height: 1.06;
      letter-spacing: -.03em
    }

    .cerablock .section__subtitle {
      margin-bottom: 0;
      font-size: 19px;
      line-height: 1.3;
      color: #222
    }

    .house-cost {
      padding-bottom: clamp(50px, 7.9268292683vw, 110px)
    }

    .house-cost .new-container {
      position: relative;
      z-index: 1
    }

    .house-cost__watermark {
      top: auto;
      bottom: -35px;
      left: 50%;
      transform: translate(-50%)
    }

    @media screen and (max-width:767px) {
      .house-cost__watermark {
        bottom: -5px
      }
    }

    .house-cost__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-bottom: 32px
    }

    @media screen and (max-width:1023px) {
      .house-cost__grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media screen and (max-width:767px) {
      .house-cost__grid {
        grid-template-columns: 1fr
      }
    }

    .house-cost__card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 138px;
      padding: 36px;
      background: var(--color-primary-soft);
      border-radius: var(--radius-md)
    }

    @media screen and (max-width:767px) {
      .house-cost__card {
        padding: 32px
      }
    }

    .house-cost__content {
      flex: 1;
      min-width: 0;
      max-width: 300px
    }

    .house-cost__content h3 {
      margin-bottom: 8px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.1
    }

    .house-cost__content p {
      font-size: 14px;
      line-height: 1.35;
      color: var(--color-text-body)
    }

    .house-cost__icon {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    @media screen and (max-width:767px) {
      .house-cost__icon {
        width: 72px;
        height: 72px
      }
    }

    .house-cost__icon img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .house-cost__banner {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: center;
      min-height: 150px;
      padding: 24px clamp(360px, 35vw, 460px) 24px 48px;
      background: var(--color-primary-gradient);
      border-radius: var(--radius-sm);
      overflow: hidden
    }

    @media screen and (max-width:1023px) {
      .house-cost__banner {
        padding-left: 32px;
        padding-right: clamp(320px, 42vw, 420px)
      }
    }

    @media screen and (max-width:767px) {
      .house-cost__banner {
        flex-direction: column;
        padding: 28px 0 0;
        text-align: center
      }
    }

    .house-cost__banner-icon {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      width: 78px;
      height: 78px;
      margin-right: 34px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center
    }

    @media screen and (max-width:1023px) {
      .house-cost__banner-icon {
        width: 64px;
        height: 64px;
        margin-right: 24px
      }
    }

    @media screen and (max-width:767px) {
      .house-cost__banner-icon {
        width: 78px;
        height: 78px;
        margin-right: 0;
        margin-bottom: 18px
      }
    }

    .house-cost__banner-text {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 24px;
      flex: 0 1 auto;
      line-height: 1.3;
      color: #fff
    }

    @media screen and (max-width:1023px) {
      .house-cost__banner-text {
        gap: 12px;
        font-size: 20px
      }
    }

    @media screen and (max-width:767px) {
      .house-cost__banner-text {
        flex-direction: column;
        gap: 8px;
        font-size: 24px
      }
    }

    .house-cost__banner-text strong {
      font-size: 36px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap
    }

    .house-cost__banner-separator {
      font-weight: 700;
      line-height: 1;
      font-size: 36px
    }

    .house-cost__banner-description {
      max-width: 330px;
      font-size: 24px;
      font-weight: 400
    }

    @media screen and (max-width:1023px) {
      .house-cost__banner-description {
        max-width: 260px
      }
    }

    @media screen and (max-width:767px) {
      .house-cost__banner-description {
        max-width: 330px
      }
    }

    .house-cost__banner-img {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 0;
      height: 100%;
      width: clamp(360px, 35vw, 450px);
      object-fit: cover;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 36%)
    }

    @media screen and (max-width:1023px) {
      .house-cost__banner-img {
        width: clamp(320px, 42vw, 420px)
      }
    }

    @media screen and (max-width:767px) {
      .house-cost__banner-img {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 48px;
        border-radius: var(--radius-sm);
        -webkit-mask-image: none;
        mask-image: none
      }
    }

    .ceramic-choice__inner {
      display: grid;
      grid-template-columns: minmax(0, 634px) minmax(340px, 420px);
      gap: clamp(32px, 6vw, 64px);
      align-items: start
    }

    @media screen and (max-width:1023px) {
      .ceramic-choice__inner {
        grid-template-columns: 1fr
      }
    }

    .ceramic-choice__intro .section__title {
      max-width: 670px;
      margin-bottom: 24px
    }

    .ceramic-choice__intro .section__subtitle {
      max-width: 520px;
      margin-bottom: 42px
    }

    .ceramic-choice__media img {
      width: 100%;
      aspect-ratio: 634/394;
      border-radius: var(--radius-lg);
      object-fit: cover
    }

    .ceramic-choice__list {
      list-style: none;
      padding: 0;
      margin: 0
    }

    .ceramic-choice__list li {
      display: flex;
      gap: 24px;
      align-items: flex-start
    }

    .ceramic-choice__list li+li {
      padding-top: 18px
    }

    .ceramic-choice__list li:last-child div {
      padding-bottom: 0;
      border-bottom: none
    }

    .ceramic-choice__list li img {
      flex-shrink: 0;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      object-fit: contain;
      box-sizing: border-box
    }

    .ceramic-choice__list li div {
      flex: 1;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--color-border)
    }

    .ceramic-choice__list li strong {
      display: block;
      margin-bottom: 6px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -.02em
    }

    .ceramic-choice__list li p {
      font-size: 16px;
      line-height: 1.3;
      color: var(--color-text-body)
    }

    @media screen and (max-width:1023px) {
      .solution {
        padding: 40px 0 50px
      }
    }

    .solution .new-container {
      --solution-media-width: clamp(420px, 50vw, 805px);
      --solution-media-height: clamp(320px, 28vw, 500px);
      position: relative;
      margin-bottom: 10px
    }

    .solution .section__watermark {
      top: unset;
      right: auto;
      bottom: -35px;
      left: 50%;
      z-index: 0;
      transform: translate(-50%)
    }

    @media screen and (max-width:1023px) {
      .solution .section__watermark {
        display: none
      }
    }

    .solution__layout {
      position: relative;
      min-height: var(--solution-media-height);
      margin-bottom: clamp(32px, 3.3333333333vw, 65px)
    }

    @media screen and (max-width:1023px) {
      .solution__layout {
        display: flex;
        flex-direction: column;
        gap: 28px;
        min-height: auto
      }
    }

    .solution__content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: var(--solution-media-height);
      max-width: 500px;
      padding-right: 45px
    }

    .solution__content .section__title {
      max-width: 420px;
      margin-bottom: 20px
    }

    .solution__content .section__subtitle {
      max-width: 470px;
      margin-bottom: 32px;
      font-size: clamp(16px, 1.3194444444vw, 19px);
      line-height: 1.45
    }

    @media screen and (max-width:1023px) {
      .solution__content {
        min-height: auto;
        max-width: none;
        padding: 0
      }

      .solution__content .section__title,
      .solution__content .section__subtitle {
        max-width: none
      }
    }

    .solution__benefits {
      max-width: 390px;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .solution__benefits li {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 30px;
      align-items: flex-start;
      margin-bottom: 20px
    }

    .solution__benefits li:last-child {
      margin-bottom: 0
    }

    .solution__benefits strong {
      display: block;
      margin-bottom: 6px;
      font-size: clamp(18px, 1.3888888889vw, 20px);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -.02em
    }

    .solution__benefits span {
      display: flex;
      align-items: center;
      font-size: 16px;
      line-height: 1.45;
      color: var(--color-text-body)
    }

    .solution__benefit-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: var(--color-primary-soft)
    }

    .solution__benefit-icon img {
      width: 37px;
      height: 32px;
      object-fit: contain
    }

    .solution__visual {
      position: absolute;
      top: 0;
      right: -12em;
      z-index: 0;
      width: var(--solution-media-width);
      height: 100%;
      overflow: hidden;
      border-radius: var(--radius-lg) 0 0 var(--radius-lg)
    }

    .solution__visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center
    }

    @media screen and (max-width:1440px) {
      .solution__visual {
        right: -2em
      }
    }

    @media screen and (max-width:1023px) {
      .solution__visual {
        position: relative;
        top: auto;
        right: auto;
        width: 100vw;
        height: auto;
        margin-inline: calc(50% - 50vw);
        border-radius: 0
      }

      .solution__visual img {
        width: 100%;
        height: auto;
        object-fit: unset
      }
    }

    .solution__actions {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 16px
    }

    .solution__actions .btn {
      gap: 12px;
      min-height: 70px;
      padding: 18px 28px;
      border-radius: var(--radius-sm);
      font-size: 18px
    }

    .solution__actions .btn--calc {
      min-width: 280px;
    }

    .solution__actions .btn--outline-dark {
      min-width: 280px;
    }

    .solution__actions .btn--whatsapp {
      min-width: 280px;
    }

    @media screen and (max-width:1023px) {
      .solution__actions {
        flex-direction: column
      }

      .solution__actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 0 32px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -.36px
      }
    }

    @media screen and (max-width:767px) {
      .solution__actions .btn {
        min-height: 48px;
        font-size: 15px;
        padding-inline: 24px
      }
    }

    .solution__button-icon {
      display: block;
      flex-shrink: 0;
      width: auto;
      height: 26px;
      object-fit: contain
    }

    .site-footer {
      padding: 50px 0 40px;
      background-color: #292929;
      color: #fffc
    }

    .site-footer .new-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 56px
    }

    @media screen and (max-width:1023px) {
      .site-footer .new-container {
        flex-direction: column;
        gap: 0
      }
    }

    .site-footer__left {
      flex: 1 1 auto;
      min-width: 0
    }

    @media screen and (max-width:1023px) {
      .site-footer__left {
        display: contents
      }
    }

    .site-footer__menu {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 36px;
      padding-bottom: 28px;
      margin-bottom: 44px;
      border-bottom: 1px solid #fff
    }

    @media screen and (max-width:767px) {
      .site-footer__menu {
        gap: 14px 24px;
        margin-bottom: 32px;
        padding-bottom: 24px
      }
    }

    @media screen and (max-width:1023px) {
      .site-footer__menu {
        order: 2
      }
    }

    .site-footer__link {
      font-size: 16px;
      line-height: 1.4;
      color: #fff
    }

    .site-footer__link:hover {
      color: var(--color-primary-light)
    }

    .site-footer__link--active {
      font-weight: 700
    }

    .site-footer__contacts {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr);
      gap: 32px 48px
    }

    @media screen and (max-width:1200px) {
      .site-footer__contacts {
        grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr);
        gap: 32px
      }
    }

    @media screen and (max-width:767px) {
      .site-footer__contacts {
        grid-template-columns: 1fr
      }
    }

    @media screen and (max-width:1023px) {
      .site-footer__contacts {
        display: contents
      }
    }

    .site-footer__title {
      margin-bottom: 14px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #fff
    }

    .site-footer__contact {
      max-width: 380px
    }

    @media screen and (max-width:1023px) {
      .site-footer__contact:first-child {
        order: 3;
        margin-bottom: 32px
      }
    }

    @media screen and (max-width:1023px) {
      .site-footer__contact:last-child {
        order: 4
      }
    }

    .site-footer__contact p,
    .site-footer__contact-list li {
      font-size: 16px;
      line-height: 1.7;
      color: #fffc
    }

    .site-footer__contact p+p,
    .site-footer__contact-list li+li {
      margin-top: 12px
    }

    .site-footer__contact-list a {
      color: #fff
    }

    .site-footer__contact-list a:hover {
      color: var(--color-primary-light)
    }

    .site-footer__note {
      display: block;
      margin-top: 4px;
      font-size: 14px;
      line-height: 1.5;
      color: #ffffff8c
    }

    .site-footer__right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;
      margin-left: auto;
      margin-top: -4px;
      color: #fff
    }

    @media screen and (max-width:1023px) {
      .site-footer__right {
        display: contents;
        margin-top: 0;
        margin-left: 0
      }
    }

    .site-footer__logo {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 32px;
      font-size: 42px;
      font-weight: 700;
      line-height: .92;
      letter-spacing: .02em;
      color: #fff;
      text-transform: uppercase
    }

    @media screen and (max-width:1200px) {
      .site-footer__logo {
        font-size: 46px
      }
    }

    @media screen and (max-width:1023px) {
      .site-footer__logo {
        order: 1;
        width: 100%;
        align-items: flex-start;
        font-size: 44px
      }
    }

    .site-footer__socials {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 28px
    }

    @media screen and (max-width:1023px) {
      .site-footer__socials {
        order: 5;
        width: 258px;
        margin-top: 32px;
        margin-left: 0
      }
    }

    .site-footer__social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      border-radius: 8px;
      color: #fff;
      box-shadow: 0 6px 14px #00000029;
      transition: transform var(--transition)
    }

    .site-footer__social-link:hover {
      transform: translateY(-2px)
    }

    .site-footer__social-link--youtube {
      background: #ff1500
    }

    .site-footer__social-link--facebook {
      background: #115a8c
    }

    .site-footer__social-link--instagram {
      background: radial-gradient(circle at 30% 107%, #fdf497, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)
    }

    .site-footer__social-link--telegram {
      background: #2ca5e0
    }

    .site-footer__socials svg {
      width: 24px;
      height: 24px;
      fill: currentColor
    }

    .site-footer__copy {
      width: 320px;
      margin-left: auto;
      text-align: end;
      font-size: 16px;
      line-height: 1.35;
      color: #fff
    }

    @media screen and (max-width:1023px) {
      .site-footer__copy {
        order: 6;
        width: 100%;
        margin-left: 0;
        text-align: left
      }
    }

    .site-footer__created {
      margin-top: 22px
    }

    .site-footer__created a {
      color: #fff
    }

    .site-footer__created a:hover {
      color: var(--color-primary-light)
    }

    @media screen and (max-width:570px) {
      .site-footer {
        padding: 44px 0 32px
      }

      .site-footer__link,
      .site-footer__contact p,
      .site-footer__contact-list li {
        font-size: 15px
      }

      .site-footer__logo {
        width: 240px;
        font-size: 34px;
        line-height: .94;
        margin-bottom: 24px
      }

      .site-footer__social-link {
        width: 42px;
        height: 42px;
        border-radius: 7px
      }

      .site-footer__socials {
        width: 210px;
        gap: 10px
      }

      .site-footer__socials svg {
        width: 22px;
        height: 22px
      }

      .site-footer__copy {
        font-size: 15px
      }
    }

    .modal {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition), visibility var(--transition)
    }

    .modal[aria-hidden=false] {
      opacity: 1;
      visibility: visible
    }

    .modal[aria-hidden=false] .modal__dialog {
      transform: translateY(0)
    }

    .modal__backdrop {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: #0000008c
    }

    .modal__dialog {
      position: relative;
      width: 100%;
      max-width: 440px;
      padding: 40px 32px 32px;
      background: var(--color-bg);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      transform: translateY(16px);
      transition: transform var(--transition)
    }

    .modal__close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--color-bg-soft)
    }

    .modal__close:before,
    .modal__close:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 2px;
      background: var(--color-text)
    }

    .modal__close:before {
      transform: translate(-50%, -50%) rotate(45deg)
    }

    .modal__close:after {
      transform: translate(-50%, -50%) rotate(-45deg)
    }

    .modal__title {
      margin-bottom: 24px;
      font-size: 24px;
      font-weight: 800
    }

    .modal__form {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .field__label {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-muted)
    }

    .field__input {
      padding: 14px 16px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-bg);
      transition: border-color var(--transition)
    }

    .field__input:focus {
      border-color: var(--color-primary);
      outline: none
    }

    body.modal-open {
      overflow: hidden
    }

    body {
      font-family: var(--font-family);
      color: #000;
      background: #f5f3f3
    }

    /*$vite$:1*/