@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local('Plus Jakarta Sans'),
    url('/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local('Plus Jakarta Sans'),
    url('/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('Plus Jakarta Sans'),
    url('/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local('Roboto'),
    url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local('Roboto'),
    url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('Roboto'),
    url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}


html {
  // scroll-behavior: smooth;
  // scrollbar-gutter: stable;
  :has(.modal.open){
    overflow: hidden;
  }

  body {
    padding: 0;
    margin: 0;
    // overflow-x: hidden !important;
    // overflow-x: clip;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background-color: var(--color-white);


    // table {
    //   width: 100%;
    //   border-collapse: collapse;
    //   margin: 20px 0;
    //   font-size: 16px;
    //   text-align: left;
    // }

    // th, td {
    //   border: 1px solid #ddd;
    //   padding: 8px;
    // }

    // th {
    //   background-color: #f4f4f4;
    //   font-weight: bold;
    // }

    // tr:nth-child(even) {
    //   background-color: #f9f9f9;
    // }

    // tr:hover {
    //   background-color: #f1f1f1;
    // }


    div {
      white-space: pre-wrap;
    }

    .editor-heading-1 {
      display: block;
      font-size: 2rem;
      margin-block-start: 0.67em;
      margin-block-end: 0.67em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      font-weight: bold;
    }

    .editor-heading-2 {
      display: block;
      font-size: 1.5rem;
      margin-block-start: 0.83em;
      margin-block-end: 0.83em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      font-weight: bold;
    }

    .editor-heading-3 {
      display: block;
      font-size: 1.17rem;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      font-weight: bold;
    }

    .editor-heading-4 {
      display: block;
      font-size: 1rem;
      margin-block-start: 1.33em;
      margin-block-end: 1.33em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      font-weight: bold;
    }

    .editor-heading-5 {
      display: block;
      font-size: 0.83rem;
      margin-block-start: 1.67em;
      margin-block-end: 1.67em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      font-weight: bold;
    }

    .editor-heading-6 {
      display: block;
      font-size: 0.67rem;
      margin-block-start: 2.33em;
      margin-block-end: 2.33em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      font-weight: bold;
    }

    .editor-code-block {
      font-size: 0.875rem;
      background-color: #f8f9fa;
      padding: 0.2rem 0.4rem;
      border-radius: 0.25rem;
    }

    code {
      display: inline-block;
      font-size: 0.875rem;
      background-color: #f8f9fa;
      padding: 0.2rem 0.4rem;
      border-radius: 0.25rem;
    }

    .editor-quote {
      padding: 0.2rem 0.8rem;
      border-left: 2px solid #091E4224;
    }

    .editor-align-center {
      text-align: center;
    }

    .editor-align-right {
      text-align: end;
    }


    // table {
    //   width: 100%;
    //   border-collapse: collapse;
    //   margin: 20px 0;
    //   font-size: 16px;
    //   text-align: left;
    // }

    // th, td {
    //   border: 1px solid #ddd;
    //   padding: 8px;
    // }

    // th {
    //   background-color: #f4f4f4;
    //   font-weight: bold;
    // }

    // tr:nth-child(even) {
    //   background-color: #f9f9f9;
    // }

    // tr:hover {
    //   background-color: #f1f1f1;
    // }

  }

  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #2b2a3d;
  --color-secondary: #ff7144;
  --color-secondary-hover: #f96638;
  --color-grey: #717a8c;
  --color-grey-active: #C0C0C0;
  --modal-bg-color: rgba(0, 0, 0, 0.5);
  --nav-menu-border-color: #c7d0e3;
  --secondary-background-color:#fff5e9;
  --heading-color: #121213;
  --tab-title-color: #717a8c;
  --tab-title-border-color: #d6d6dc;
  --collapse-border-color: #d6c3b9;
  --collapse-content-color: rgba(0, 0, 0, 0.88);
  --text-color: #46465a;

  --section-max-width: 120rem;

  --modal-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --tabs-title-scroll-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5);


  --shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.15);

  --arrow-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuOTYwOTQgMTAuNTIxM0MzLjU0NjczIDEwLjUyMTMgMy4yMTA5NCAxMC4xODU1IDMuMjEwOTQgOS43NzEzMkMzLjIxMDk0IDkuMzU3MTEgMy41NDY3MyA5LjAyMTMyIDMuOTYwOTQgOS4wMjEzMlYxMC41MjEzWk0xNi40NjA5IDkuMDIxMzJIMTcuMjEwOVYxMC41MjEzSDE2LjQ2MDlWOS4wMjEzMlpNMy45NjA5NCA5LjAyMTMySDE2LjQ2MDlWMTAuNTIxM0gzLjk2MDk0VjkuMDIxMzJaIiBmaWxsPSIjNDY0NjVBIi8+CjxwYXRoIGQ9Ik05IDQuNzUxMTZMMy45NTgzMyA5Ljc3MTE2TDkgMTQuNzkyIiBzdHJva2U9IiM0NjQ2NUEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+Cjwvc3ZnPgo=');
  --black-right-arrow-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSI2NCA2NCA4OTYgODk2IiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLWljb249ImFycm93LXJpZ2h0IiAgIGZpbGw9ImN1cnJlbnRDb2xvciIgYXJpYS1oaWRkZW49InRydWUiIHdpZHRoPSIxIiAgaGVpZ2h0PSIxIiA+PHBhdGggZD0iTTg2OSA0ODcuOEw0OTEuMiAxNTkuOWMtMi45LTIuNS02LjYtMy45LTEwLjUtMy45aC04OC41Yy03LjQgMC0xMC44IDkuMi01LjIgMTRsMzUwLjIgMzA0SDE1MmMtNC40IDAtOCAzLjYtOCA4djYwYzAgNC40IDMuNiA4IDggOGg1ODUuMUwzODYuOSA4NTRjLTUuNiA0LjktMi4yIDE0IDUuMiAxNGg5MS41YzEuOSAwIDMuOC0uNyA1LjItMkw4NjkgNTM2LjJhMzIuMDcgMzIuMDcgMCAwMDAtNDguNHoiIGZpbGw9IiM1NTU1NTUiPjwvcGF0aD48L3N2Zz4=);
  --white-right-arrow-icon: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+CiAgPHBvbHlnb24gcG9pbnRzPSIxNyAxNS41ODYgNi43MDcgNS4yOTMgNS4yOTMgNi43MDcgMTUuNTg2IDE3IDcgMTcgNyAxOSAxOSAxOSAxOSA3IDE3IDcgMTcgMTUuNTg2IiBmaWxsPSIjZmZmZmZmIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIi8+Cjwvc3ZnPgo=");
  --nav-menu-icon-close: url("data:image/svg+xml;base64,ICAgICAgPHN2ZwogICAgICAgIHdpZHRoPScyNCcKICAgICAgICBoZWlnaHQ9JzI0JwogICAgICAgIHZpZXdCb3g9JzY0IDY0IDg5NiA4OTYnCiAgICAgICAgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJwogICAgICAgIGZpbGw9J3doaXRlJwogICAgICAgIGZpbGxSdWxlPSdldmVub2RkJwogICAgICA+CiAgICAgICAgPHBhdGggZD0nTTc5OS44NiAxNjYuMzFjLjAyIDAgLjA0LjAyLjA4LjA2bDU3LjY5IDU3LjdjLjA0LjAzLjA1LjA1LjA2LjA4YS4xMi4xMiAwIDAxMCAuMDZjMCAuMDMtLjAyLjA1LS4wNi4wOUw1NjkuOTMgNTEybDI4Ny43IDI4Ny43Yy4wNC4wNC4wNS4wNi4wNi4wOWEuMTIuMTIgMCAwMTAgLjA3YzAgLjAyLS4wMi4wNC0uMDYuMDhsLTU3LjcgNTcuNjljLS4wMy4wNC0uMDUuMDUtLjA3LjA2YS4xMi4xMiAwIDAxLS4wNyAwYy0uMDMgMC0uMDUtLjAyLS4wOS0uMDZMNTEyIDU2OS45M2wtMjg3LjcgMjg3LjdjLS4wNC4wNC0uMDYuMDUtLjA5LjA2YS4xMi4xMiAwIDAxLS4wNyAwYy0uMDIgMC0uMDQtLjAyLS4wOC0uMDZsLTU3LjY5LTU3LjdjLS4wNC0uMDMtLjA1LS4wNS0uMDYtLjA3YS4xMi4xMiAwIDAxMC0uMDdjMC0uMDMuMDItLjA1LjA2LS4wOUw0NTQuMDcgNTEybC0yODcuNy0yODcuN2MtLjA0LS4wNC0uMDUtLjA2LS4wNi0uMDlhLjEyLjEyIDAgMDEwLS4wN2MwLS4wMi4wMi0uMDQuMDYtLjA4bDU3LjctNTcuNjljLjAzLS4wNC4wNS0uMDUuMDctLjA2YS4xMi4xMiAwIDAxLjA3IDBjLjAzIDAgLjA1LjAyLjA5LjA2TDUxMiA0NTQuMDdsMjg3LjctMjg3LjdjLjA0LS4wNC4wNi0uMDUuMDktLjA2YS4xMi4xMiAwIDAxLjA3IDB6JyAvPgogICAgICA8L3N2Zz4=");
  --nav-menu-icon-open: url("data:image/svg+xml;base64,PHN2ZwogICAgICAgIHdpZHRoPScyNCcKICAgICAgICBoZWlnaHQ9JzI0JwogICAgICAgIHZpZXdCb3g9JzAgMCAyNCAyNCcKICAgICAgICBmaWxsPSdub25lJwogICAgICAgIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICAgICAgPgogICAgICAgIDxwYXRoCiAgICAgICAgICBkPSdNMSA5SDIzJwogICAgICAgICAgc3Ryb2tlPSd3aGl0ZScKICAgICAgICAgIHN0cm9rZVdpZHRoPScxLjUnCiAgICAgICAgICBzdHJva2VMaW5lY2FwPSdzcXVhcmUnCiAgICAgICAgLz4KICAgICAgICA8cGF0aAogICAgICAgICAgZD0nTTEgMTVIMjMnCiAgICAgICAgICBzdHJva2U9J3doaXRlJwogICAgICAgICAgc3Ryb2tlV2lkdGg9JzEuNScKICAgICAgICAgIHN0cm9rZUxpbmVjYXA9J3NxdWFyZScKICAgICAgICAvPgogICAgICA8L3N2Zz4=");
  --collapse-icon-active: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cG9seWdvbiBwb2ludHM9IjE3IDE1LjU4NiA2LjcwNyA1LjI5MyA1LjI5MyA2LjcwNyAxNS41ODYgMTcgNyAxNyA3IDE5IDE5IDE5IDE5IDcgMTcgNyAxNyAxNS41ODYiIGZpbGw9IiNmZjcxNDQiLz4KPC9zdmc+Cg==);
  --collapse-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cG9seWdvbiBwb2ludHM9IjE3IDE1LjU4NiA2LjcwNyA1LjI5MyA1LjI5MyA2LjcwNyAxNS41ODYgMTcgNyAxNyA3IDE5IDE5IDE5IDE5IDcgMTcgNyAxNyAxNS41ODYiLz4KPC9zdmc+Cg==);
  --cross-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIGRhdGEtaWNvbj0iY2xvc2UiICAgZmlsbD0id2hpdGUiIGFyaWEtaGlkZGVuPSJ0cnVlIiB3aWR0aD0iMSIgIGhlaWdodD0iMSIgPjxwYXRoIGQ9Ik03OTkuODYgMTY2LjMxYy4wMiAwIC4wNC4wMi4wOC4wNmw1Ny42OSA1Ny43Yy4wNC4wMy4wNS4wNS4wNi4wOGEuMTIuMTIgMCAwMTAgLjA2YzAgLjAzLS4wMi4wNS0uMDYuMDlMNTY5LjkzIDUxMmwyODcuNyAyODcuN2MuMDQuMDQuMDUuMDYuMDYuMDlhLjEyLjEyIDAgMDEwIC4wN2MwIC4wMi0uMDIuMDQtLjA2LjA4bC01Ny43IDU3LjY5Yy0uMDMuMDQtLjA1LjA1LS4wNy4wNmEuMTIuMTIgMCAwMS0uMDcgMGMtLjAzIDAtLjA1LS4wMi0uMDktLjA2TDUxMiA1NjkuOTNsLTI4Ny43IDI4Ny43Yy0uMDQuMDQtLjA2LjA1LS4wOS4wNmEuMTIuMTIgMCAwMS0uMDcgMGMtLjAyIDAtLjA0LS4wMi0uMDgtLjA2bC01Ny42OS01Ny43Yy0uMDQtLjAzLS4wNS0uMDUtLjA2LS4wN2EuMTIuMTIgMCAwMTAtLjA3YzAtLjAzLjAyLS4wNS4wNi0uMDlMNDU0LjA3IDUxMmwtMjg3LjctMjg3LjdjLS4wNC0uMDQtLjA1LS4wNi0uMDYtLjA5YS4xMi4xMiAwIDAxMC0uMDdjMC0uMDIuMDItLjA0LjA2LS4wOGw1Ny43LTU3LjY5Yy4wMy0uMDQuMDUtLjA1LjA3LS4wNmEuMTIuMTIgMCAwMS4wNyAwYy4wMyAwIC4wNS4wMi4wOS4wNkw1MTIgNDU0LjA3bDI4Ny43LTI4Ny43Yy4wNC0uMDQuMDYtLjA1LjA5LS4wNmEuMTIuMTIgMCAwMS4wNyAweiIgZmlsbD0id2hpdGUiPjwvcGF0aD48L3N2Zz4=);
}

@media (max-width: 1024px) {
  html {}
}

@media (max-width: 520px) {
  html {}
}
    html {
  height: auto !important;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;

  [id] {
    scroll-margin-top: 5.125rem;
  }

  p,
  h1 {
    margin: 0;
  }

  .editor-float-right {
    float: right;
    clear: right;
    margin-left: 1rem;
  }

  .editor-float-left {
    float: left;
    clear: left;
    margin-right: 1rem;
  }

  #introduce-section {
    scroll-margin-top: 5rem;
  }

  #advantages-section {
    scroll-margin-top: 5rem;
  }

  #about-us-section {
    scroll-margin-top: 5rem;
  }

  #who-we-are-section {
    scroll-margin-top: 5rem;
  }

  #dream-team-section {
    scroll-margin-top: 5rem;
  }

  #blog-section {
    scroll-margin-top: 5rem;
  }

  #vacancies-section {
    scroll-margin-top: 5rem;
  }

  #contacts-section {
    scroll-margin-top: 5rem;
  }

}

body.sidebar-opened {
  overflow-y: hidden !important;
}

body.nav-opened {
  overflow-y: hidden !important;
}

body {
  overflow-x: hidden !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  html {
    [id] {
      scroll-margin-top: 10rem;
    }

    #introduce-section {
      scroll-margin-top: 3.75rem;
    }

    #advantages-section {
      scroll-margin-top: 3.75rem;
    }

    #about-us-section {
      scroll-margin-top: 3.75rem;
    }

    #who-we-are-section {
      scroll-margin-top: 3.75rem;
    }

    #dream-team-section {
      scroll-margin-top: 3.75rem;
    }

    #blog-section {
      scroll-margin-top: 3.75rem;
    }

    #vacancies-section {
      scroll-margin-top: 3.75rem;
    }

    #contacts-section {
      scroll-margin-top: 3.75rem;
    }
  }
}

@media (max-width: 520px) {
  html {}
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  src:
    local('Plus Jakarta Sans'),
    url('/assets/54.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  src:
    local('Plus Jakarta Sans'),
    url('/assets/55.ttf') format('truetype');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  src:
    local('Plus Jakarta Sans'),
    url('/assets/56.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src:
    local('Roboto'),
    url('/assets/755.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src:
    local('Roboto'),
    url('/assets/756.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src:
    local('Roboto'),
    url('/assets/754.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 900;
  src:
    local('Roboto Flex'),
    url('/assets/764.ttf') format('truetype');
}
    
  .hljs-doctag,
  .hljs-keyword,
  .hljs-meta .hljs-keyword,
  .hljs-template-tag,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable.language_ {
    color: #07a;
  }
  .hljs-title,
  .hljs-title.class_,
  .hljs-title.class_.inherited__,
  .hljs-title.function_,
  .hljs-built_in {
    color: #dd4a68;
  }
  .hljs-operator {
    color: #9a6e3a;
  }
  .hljs-attr,
  .hljs-attribute,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-id {
    color: #005cc5
  }
  .hljs-regexp,
  .hljs-string,
  .hljs-meta .hljs-string {
    color: #0284c7;
  }
  .hljs-built_in,
  .hljs-symbol,
  .hljs-punctuation {
    color: #8b949e;
  }
  .hljs-comment,
  .hljs-code,
  .hljs-formula {
    color: #64748b;
  }
  .hljs-name,
  .hljs-quote,
  .hljs-selector-tag,
  .hljs-selector-pseudo,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-selector-attr {
    color: #690;
  }
  .hljs-subst {
    color: #8b949e;
  }
  .hljs-section {
    color: #2563eb;
    font-weight: bold;
  }
  .hljs-bullet {
    color: #735c0f
  }
  .hljs-emphasis {
    color: #8b949e;
    font-style: italic;
  }
  .hljs-strong {
    color: #8b949e;
    font-weight: bold;
  }
  .hljs-addition {
    color: #16a34a;
    background-color: rgba(22, 163, 74, 0.15);
  }
  .hljs-deletion {
    color: #e11d48;
    background-color: rgba(225, 29, 72, 0.15);
  }
  .hljs-property {
    color: #c026d3;
  }
  .hljs-variable,
  .hljs-template-variable {
    color: #ea580c;
  }

    
.comments {
  width: 100%;
  margin-top: 3rem;
  padding-top: 2rem;
  max-width: 100%;
}

.comments-title {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: var(--color-black);
  font-family: inherit;
}

.comments-list {
  margin-bottom: 3rem;
}

.comment {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  overflow: initial;
}

.comment-with-replies > .comment-content, .comment-with-replies > .comment-actions, .comment-with-replies > .comment-new-comment-alert {
  border-left: 2px solid #e0e0e0;
}

.comment-replies {
  margin-left: 1.375rem;
  position: relative;
}

.comment-replies .comment {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.comment-reply {
  padding-left: 2rem;
  padding-top: 2.5rem;
  position: relative;
}

.comment-reply::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 3.875rem;
  border-left: 2px solid #e0e0e0;
  border-bottom: 2px solid #e0e0e0;
  border-bottom-left-radius: 8px;
  z-index: 1;
}

.comment-reply:not(:last-child)::before {
  content: '';
  position: absolute;
  top: calc(3.875rem - 4px);
  left: 0;
  bottom: -1rem;
  border-left: 2px solid #e0e0e0;
  z-index: 1;
}

.comment-reply.comment-reply-form{
  margin-left: 1.375rem;
  padding-top: 0;
}

.comment-reply.comment-reply-form::after{
  display: none;
}

.comment-reply.comment-reply-form::before{
  top: -2rem
}

.comment-header {
  display: flex;
  align-items: center;
  column-gap: 0.875rem;
  flex-wrap: wrap;
}

.comment-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: bold;
  z-index: 1;
}

.comment-avatar-icon {
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--color-black);
  text-transform: uppercase;
}

.comment-avatar::after {
  content: '';
  width: 2px;
  height: 3rem;
  margin-top: 4.5rem;
  border-right: 2px solid #e0e0e0;
  position: absolute;
  z-index: -1;
}

.comment:not(.comment-with-replies){
  .comment-avatar::after {
    display: none;
  }
}

.comment-author {
  position: relative;
  z-index: 1;
  font-weight: bold;
  color: var(--color-black);
  font-size: 1rem;
}

.comment-author strong {
  font-weight: bold;
}

.comment-date {
  cursor: pointer;
  color: #666;
  font-size: 0.875rem;
  text-decoration: underline;
  margin-left: auto;
  white-space: nowrap;
}

.comment-date>a:hover {
  color: #666;
}

.comment-new-comment-alert{
  color: #999;
  padding-left: 2.25rem;
  padding-top: 0.5rem;
  margin-left: 1.375rem;
}

.comment-content {
  padding-left: 2.25rem;
  padding-top: 0.5rem;
  margin-left: 1.375rem;
  line-height: 1.7;
  color: var(--color-black);
  font-size: 1rem;
  word-wrap: break-word;
}

.comment-actions {
  padding-top: 1rem;
  padding-left: 2.25rem;
  margin-left: 1.375rem;
}

.comment-reply-button {
  background: none;
  border: none;
  color: var(--color-black);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
  font-family: inherit;
}

.comment-reply-button:hover {
  color: #666;
  text-decoration: none;
}

.comments-load-more{
}

.comments-load-more:hover {
}

.comment-reply-form {
  margin-top: 2rem;
  padding-top: 2rem;
  margin-left: 3.625rem;
  border-top: 1px solid #e0e0e0;
}

.comments-form-wrapper {
  background-color: var(--color-white);
}

.comments-form {
  width: 100%;
}

.comments-form-title {
  font-size: 1.375rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  color: var(--color-black);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: inherit;
}

.comments-form-cancel {
  background: none;
  border: none;
  color: var(--color-black);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: normal;
  padding: 0;
  font-family: inherit;
}

.comments-form-cancel:hover {
  color: #666;
  text-decoration: none;
}

.comments-form-note {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.comments-form-field {
  margin-bottom: 1.75rem;
}

.comments-form-field label {
  display: block;
  margin-bottom: 0.625rem;
  font-weight: 500;
  color: var(--color-black);
  font-size: 0.875rem;
}

.comments-form-field .required {
  color: #d32f2f;
}

.comments-form-field input[type="text"],
.comments-form-field input[type="email"],
.comments-form-field input[type="url"],
.comments-form-field textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.comments-form-field textarea {
  resize: vertical;
  min-height: 10rem;
  line-height: 1.6;
}

.comments-form-field input:focus,
.comments-form-field textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(255, 113, 68, 0.1);
}

label.comments-form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-weight: normal;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.comments-form-checkbox-label input[type="checkbox"] {
  margin-top: 0.25rem;
  cursor: pointer;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-appearance:none;
  display: inline-block;
  background: #FFFFFF;
  border: 1.5px solid #B9C2D4;
  border-radius: 4px;
}

.comments-form-checkbox-label input[type="checkbox"]:after {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.2rem;
  left: 0.5rem;
  width: 0.3rem;
  height: 0.5rem;
  border-bottom: 3px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
  transform: rotate(45deg);
}

.comments-form-checkbox-label input[type=checkbox]:checked   {
  background: #3A3976;
  outline: none;
  border: none;
}
.comments-form-checkbox-label input[type=checkbox]:focus,input[type=checkbox]:active {
  outline: none;
}

.comments-form-submit, .comments-load-more {
  background-color: #333;
  color: var(--color-white);
  border: none;
  padding: 0.875rem 2.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0.25rem;
  margin-top: 1.5rem;
  transition: background-color 0.2s;
  font-family: inherit;
  letter-spacing: 0.5px;
}

.comments-form-submit:hover, .comments-load-more:hover {
  background-color: #666;
}

.comments-form-submit:active {
  background-color: #000;
}

.comments-form-submit:disabled {
  background-color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

.comments-form-error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.comments-form-akismet {
  font-size: 0.75rem;
  color: #666;
  margin-top: 1.5rem;
  line-height: 1.6;
}

.comments-form-akismet a {
  color: #666;
  text-decoration: underline;
}

.comments-form-akismet a:hover {
  color: var(--color-black);
}

.blog-post-comments {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid #e0e0e0;
}

@media (max-width: 1024px) {
  .comments {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .comment-content {
    word-wrap: anywhere;
  }

  .comment-reply {
    padding-left: 1.5rem;
  }
}

@media (max-width: 520px) {
  .comments {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }

  .comments-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .comment-reply::after {
    width: 1rem;
  }

  .comment-reply {
    padding-left: 1rem;
  }

  .comment-header {
    flex-wrap: wrap;
  }

  .comments-form-title {
    font-size: 1.25rem;
  }

  .comments-form-submit {
    width: 100%;
    padding: 1rem;
  }
}