:root {
    --header-bg-color: #36272D;
    --main-bg-color: #1E1822;
    --footer-bg-color: #36272D;
    --main-text-color: #F6DBC1;
    --link-text-color: #FFFFFF;
    --button-text-color: #FCF4EB;
    --button-bg-color: #885A44;
    --button-second-bg-color: #885A44;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Noto Sans Nushu, sans-serif;
    line-height: 1.6;
    color: var(--main-text-color);
}

button {
    font-family: Noto Sans Nushu, sans-serif;
    cursor: pointer;
    border: none !important;
}

a {
    color: var(--link-text-color);
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: none;
    color: var(--link-text-color);
}

h1, h2, h3, h4 {
    color: var(--main-text-color);
}

h1 {
  font-size: 45px;
  font-weight: 900;
  line-height: 45px;
  margin-bottom: 30px;
  text-align: center;
}
@media screen and (max-width: 992px) {
  h1 {
    font-size: 30px;
    line-height: 42px;
  }
}

h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 54px;
  margin-bottom: 30px;
}
@media screen and (max-width: 992px) {
  h2 {
    font-size: 30px;
    line-height: 44px;
  }
}

h3 {
  font-size: 30px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 30px;
}
@media screen and (max-width: 992px) {
  h3 {
    font-size: 24px;
    line-height: 32px;
  }
}

p {
  font-size: 16px;
  letter-spacing: normal;
  font-weight: 400;
  margin-bottom: 10px;
  line-height: 24px;
}
@media screen and (max-width: 992px) {
    p {
        font-size: 14px;
        line-height: 29px;
    }
}

strong {
    font-weight: 600;
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    display: block;
    overflow-x: auto;
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

table p {
    margin: 0;
}

tbody {
    width: calc(100% - 2px);
    display: table;
}

th {
    background: var(--footer-bg-color);
}

th, td {
    border: 1px solid var(--main-text-color);
    padding: 8px;
    box-sizing: border-box;
}

th:first-child {
    border-top-left-radius: 10px;
}

th:last-child {
    border-top-right-radius: 10px;
}

tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

table::-webkit-scrollbar {
    height: 8px;
}

table::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

table::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

footer, header, nav, section, main {
    display: block;
    position: relative;
}

main {
    flex: 1 0 auto;
    background-color: var(--main-bg-color);
}

section {
    padding: 20px 0;
}

@media screen and (max-width: 768px) {
    section {
        padding: 20px 0;
    }
}

.MaBarbeHommecomContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1200px) {
    .MaBarbeHommecomContainer {
        max-width: 100%;
        padding: 0 15px;
    }
}

img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}


.MaBarbeHommecomRow {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.MaBarbeHommecomCol:first-child {
    width: 820px;

}
.MaBarbeHommecomCol:last-child {
    flex: 0 0 330px;
}
@media (max-width: 1030px) {
    .MaBarbeHommecomRow {
        flex-wrap: wrap;
        justify-content: center;
    }
    .MaBarbeHommecomCol:first-child, .MaBarbeHommecomCol:last-child {
        width: 100%;
        flex: auto;
    }
}

.MaBarbeHommecomJcEnd {
    justify-content: end !important;
}

.MaBarbeHommecomJcCenter {
    justify-content: center;
}

.MaBarbeHommecomBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: inherit;
    height: auto;
    padding: 12px 24px;
    border-radius: 11px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.MaBarbeHommecomBtn:hover {
    transform: scale(1.1);
}
.MaBarbeHommecomBtn__wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media screen and (max-width: 768px) {
    .MaBarbeHommecomBtn__wrapper {
        gap: 20px;
    }
}
.MaBarbeHommecomBtnPrimary {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
}

.MaBarbeHommecomBtnPrimary:hover {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
}

.MaBarbeHommecomBtnSecondary {
    color: var(--button-text-color);
    background-color: var(--button-second-bg-color);
}

.MaBarbeHommecomBtnSecondary:hover {
    color: var(--button-text-color);
    background-color: var(--button-second-bg-color);
}

.MaBarbeHommecomBtnPulse {
    animation: pulse 1.5s infinite;
}

.MaBarbeHommecomBtnUppercase {
    text-transform: uppercase;
}


.MaBarbeHommecomHeader {
    display: none;
    background-color: var(--header-bg-color);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.MaBarbeHommecomHeader ul, .MaBarbeHommecomHeader ol, .MaBarbeHommecomHeader li,
.MaBarbeHommecomFooter ul, .MaBarbeHommecomFooter ol, .MaBarbeHommecomFooter li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
}
.MaBarbeHommecomHeader__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.MaBarbeHommecomHeader__innerPrimary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: auto;
}

.MaBarbeHommecomHeader__innerSecond {
    display: flex;
    align-items: center;
    gap: 10px;
}

.MaBarbeHommecomHeader__row {
    flex-direction: row;
    height: 80px;
}

.MaBarbeHommecomHeader__innerSecond .MaBarbeHommecomHeader__row {
    flex-direction: row;
    gap: 10px;
    height: auto;
}

.MaBarbeHommecomHeader__col {
    flex-direction: column;
}

.MaBarbeHommecomHeader__innerSecond.MaBarbeHommecomHeader__col {
    padding: 10px 0;
}

.MaBarbeHommecomHeader__logo {
    display: flex;
    max-height: 60px;
    height: 100%;
}

.MaBarbeHommecomHeader__logo a {
    text-decoration: none;
    display: flex;
}
.MaBarbeHommecomHeader__logo img {
    object-fit: contain;
    border-radius: initial;
}

.MaBarbeHommecomHeader__nav {
    display: flex;
}
.MaBarbeHommecomHeader__nav ul {
    display: flex;
    gap: 10px;
    height: 100%;
    align-items: center;
    list-style-type: none;
    padding: 0;
}

.MaBarbeHommecomHeader__nav ul li {
    display: flex;
    align-items: center;
    height: 100%;
}

.MaBarbeHommecomHeader__nav ul li a {
    color: var(--link-text-color);
    text-decoration: none;
    padding: 10px;
}

.MaBarbeHommecomHeader__nav ul li a:hover {
    opacity: .2;
}

.MaBarbeHommecomSection img  {
    max-width: 961px;
    display: block;
    margin: auto;
}

.MaBarbeHommecomSectionMain .MaBarbeHommecomContainer > :not(:last-child) {
    margin-bottom: 30px;
}

.MaBarbeHommecomBtn__wrapperMain {
    max-width: 300px;
    width: 100%;
    margin: auto;
}

.MaBarbeHommecomBtn__wrapperMain .MaBarbeHommecomBtnPrimary {
    padding: 20px 70px;
    border-radius: 17px;
}

.MaBarbeHommecomBurgerMenu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
}

.MaBarbeHommecomBurgerMenu span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--main-text-color);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.MaBarbeHommecomBurgerMenu.MaBarbeHommecomActive span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.MaBarbeHommecomBurgerMenu.MaBarbeHommecomActive span:nth-child(2) {
    opacity: 0;
}

.MaBarbeHommecomBurgerMenu.MaBarbeHommecomActive span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.MaBarbeHommecomSectionContent h1:first-of-type,
.MaBarbeHommecomSectionContent h2:first-of-type,
.MaBarbeHommecomSectionContent h3:first-of-type,
.MaBarbeHommecomSectionContent h4:first-of-type {
    margin-top: 0;
    margin-bottom: 30px;
}

.MaBarbeHommecomSectionContent h1:not(:first-of-type),
.MaBarbeHommecomSectionContent h2:not(:first-of-type),
.MaBarbeHommecomSectionContent h3:not(:first-of-type),
.MaBarbeHommecomSectionContent h4:not(:first-of-type) {
    margin: 30px 0;
}

.MaBarbeHommecomSectionContent .MaBarbeHommecomUpdatePost {
    display: flex;
    align-items: center;
}

.MaBarbeHommecomSectionContent .MaBarbeHommecomUpdatePost p {
    width: 100%;
    margin: 0;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--main-text-color);
}

footer {
    flex-shrink: 0;
    background-color: var(--footer-bg-color);
    color: var(--main-text-color);
}

.MaBarbeHommecomFooter__wrapper {
    display: flex;
    flex-direction: column;
    justify-self: center;
    padding: 20px 0;
    gap: 17px;
}

.MaBarbeHommecomFooter__nav, .MaBarbeHommecomFooter__icons, .MaBarbeHommecomFooter__inner {
    display: flex;
    justify-content: center;
}

.MaBarbeHommecomFooter__iconsLink img {
    border-radius: initial;
}

.MaBarbeHommecomFooter__navList {
    display: flex;
    list-style-type: none;
    justify-content: center;
    gap: 42px;
}

.MaBarbeHommecomFooter__navLink {
    text-decoration: none;
    color: var(--link-text-color);
    font-size: 14px;
}
.MaBarbeHommecomFooter__navLink:hover {
    color: var(--link-text-color);
    opacity: .2;
}

.MaBarbeHommecomFooter__icons {
    gap: 24px;
    flex-wrap: wrap;
}

.MaBarbeHommecomFooter__inner p {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
}

.MaBarbeHommecomBreadcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 1em 0;
    font-size: 0.95em;
    gap: 0.5em;
}

.MaBarbeHommecomBreadcrumbs li {
    display: flex;
    align-items: center;
}

.MaBarbeHommecomBreadcrumbs li a {
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.MaBarbeHommecomBreadcrumbs li::after {
    content: "›";
    margin: 0 0.5em;
}

.MaBarbeHommecomBreadcrumbs li:last-child::after {
    content: "";
    margin: 0;
}

.MaBarbeHommecomContent__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
}

.MaBarbeHommecomContent__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1;
}

.MaBarbeHommecomContent__col.MaBarbeHommecomContent__colImg {
    max-width: 550px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--button-bg-color);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px 8px var(--button-bg-color);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--button-bg-color);
    }
}

.MaBarbeHommecomLayout {
    display: flex;
}

.MaBarbeHommecomSidebar {
    position: relative;
    width: 172px;
    background-color: var(--header-bg-color);
    color: #fff;
    padding: 20px;
    flex-shrink: 0;
    z-index: 10000;
}

.MaBarbeHommecomSidebar__wrapper {
    position: fixed;
    width: 172px;
}

.MaBarbeHommecomHeader__sidebar {
    flex-direction: column;
    row-gap: 60px;
}

.MaBarbeHommecomHeader__sidebar .MaBarbeHommecomBtn__wrapper {
    flex-direction: column;
    width: 100%;
}

.MaBarbeHommecomHeader__sidebar .MaBarbeHommecomHeader__nav ul {
    flex-direction: column;
    width: 100%;
}

.MaBarbeHommecomHeader__sidebar .MaBarbeHommecomHeader__navWrapper {
    width: 100%;
}

.MaBarbeHommecomHeader__sidebar .MaBarbeHommecomHeader__nav ul li {
    width: 100%;
    justify-content: center;
}

.MaBarbeHommecomHeader__sidebar .MaBarbeHommecomHeader__nav ul li a {
    width: 100%;
    text-align: center;
    padding: 20px 10px;
}

#MaBarbeHommecomMain {
    flex: 1;
}

.MaBarbeHommecomFooter {
    margin-top: auto;
}

.MaBarbeHommecomFooter__row {
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.MaBarbeHommecomFooter__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.MaBarbeHommecomFooter__col:first-child {
    flex: 2;
}

.MaBarbeHommecomFooter__col:last-child {
    flex: 1;
}

.MaBarbeHommecomFooter__logo {
    max-width: 132px;
}
.MaBarbeHommecomFooter__logo img {
    border-radius: 0;
}
.MaBarbeHommecomFooter__icons {
    justify-content: flex-start;
}


.MaBarbeHommecomFooter__navList {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.MaBarbeHommecomFooter__navList li {
    flex: 0 0 calc(50% - 20px);
}

.MaBarbeHommecomFooter__navList li:nth-child(odd) {
    flex: auto;
}

.MaBarbeHommecomErrorPage {
    align-content: center;
}
.MaBarbeHommecomErrorPage__wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.MaBarbeHommecomErrorPage .MaBarbeHommecomErrorPage__wrapper h1, .MaBarbeHommecomErrorPage .MaBarbeHommecomErrorPage__wrapper p {
    margin-bottom: 0;
}

@media screen and (max-width: 992px) {
    .MaBarbeHommecomContent__wrapper {
        flex-direction: column;
    }

    .MaBarbeHommecomContent__col.MaBarbeHommecomContent__colImg {
        max-width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .MaBarbeHommecomLayout {
        display: block;
    }
    .MaBarbeHommecomSidebar {
      display: none;
    }

    .MaBarbeHommecomHeader {
        display: block;
    }
    .MaBarbeHommecomBurgerMenu {
        display: flex;
        order: 1;
    }
    .MaBarbeHommecomBurgerMenuRev {
        order: -1;
    }
    .MaBarbeHommecomHeader__inner {
        justify-content: space-between;
        gap: 20px;
    }
    .MaBarbeHommecomHeader__logo {
        max-height: 50px;
    }
    .MaBarbeHommecomHeader__logo img {
        max-width: 100px;
    }

   #MaBarbeHommecomNavMenu {
       position: absolute;
       top: 68px;
       left: 0;
       width: 100%;
       height: 100vh;
       background-color: var(--header-bg-color);
       flex-direction: column;
       align-items: center;
       justify-content: flex-start !important;
       display: none;
   }

    .MaBarbeHommecomHeader__nav ul {
        flex-direction: column;
        text-align: center;
        width: 100%;
        height: auto;
        padding: 20px 0;
    }

    .MaBarbeHommecomHeader__nav ul li {
        padding: 10px 0;
    }

    .MaBarbeHommecomHeader .MaBarbeHommecomBtn {
        padding: 9px 21px;
    }

    #MaBarbeHommecomNavMenu.MaBarbeHommecomActive {
        display: flex;
    }

    .MaBarbeHommecomHeader__row {
       height: 68px;
    }

    .MaBarbeHommecomHeader__innerSecond.MaBarbeHommecomHeader__col {
        flex-direction: row;
    }

    .MaBarbeHommecomFooter__navList {
        gap: 20px;
        justify-content: center;
        text-align: center;
    }

    .MaBarbeHommecomFooter__row {
        flex-direction: column;
        align-items: center;
    }

    .MaBarbeHommecomFooter__logo {
        margin: auto;
    }

    .MaBarbeHommecomFooter__icons {
        justify-content: center;
    }

    .MaBarbeHommecomBreadcrumbs {
        font-size: 0.75em;
    }
}



















/* Random Images Block */
.MaBarbeHommecomShowcase__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
    justify-content: space-between;
}

.MaBarbeHommecomShowcase__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 270px;
}

.MaBarbeHommecomShowcase__image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 270px;
    height: 200px;
}

.MaBarbeHommecomShowcase__image img {
    max-width: 100%;
    display: initial;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.MaBarbeHommecomShowcase__imageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MaBarbeHommecomShowcase__image:hover .MaBarbeHommecomShowcase__imageOverlay {
    opacity: 1;
    visibility: visible;
}

.MaBarbeHommecomShowcase__image .MaBarbeHommecomBtn__wrapper {
    z-index: 2;
}

.MaBarbeHommecomShowcase__desc {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 10px;
    left: 15px;
}
.MaBarbeHommecomShowcase__desc p, .MaBarbeHommecomShowcase__desc span {
    margin: 0;
}
.MaBarbeHommecomShowcase__desc span {
    font-size: 14px;
}

.MaBarbeHommecomShowcase__desc p {
    font-weight: 700;
    font-size: 16px;
}

@media screen and (max-width: 1210px) {
    .MaBarbeHommecomShowcase__block {
        width: calc(25% - 20px);
    }
    .MaBarbeHommecomShowcase__image {
        width: auto;
    }
}

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

    .MaBarbeHommecomShowcase__image {
        height: 120px;
    }

    .MaBarbeHommecomShowcase__desc span {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .MaBarbeHommecomShowcase__wrapper {
        justify-content: center;
    }
    .MaBarbeHommecomShowcase__block {
        width: calc(50% - 10px);
    }
    .MaBarbeHommecomShowcase__image {
        width: auto;
        height: 120px;
    }
    .MaBarbeHommecomShowcase__image .MaBarbeHommecomBtn__wrapper .MaBarbeHommecomBtn {
        padding: 9px 20px;
        font-size: 12px;
    }
    .MaBarbeHommecomShowcase__desc{
        bottom: 0;
        left: 10px;
    }
    .MaBarbeHommecomShowcase__desc p {
        font-size: 14px;
    }
    .MaBarbeHommecomShowcase__desc span {
        line-height: 0;
    }
}

/* TOC Styles */
.MaBarbeHommecomToc {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px 0 40px;
    margin: 0;
    display: block;
    column-count: 2;
    column-gap: 40px;
}

.MaBarbeHommecomToc li {
    break-inside: avoid;
    margin-bottom: 10px;
}

.MaBarbeHommecomToc li::marker {
    color: var(--link-text-color);
}

.MaBarbeHommecomTocWrapper {
    max-width: 580px;
    margin: 20px auto;
    border-radius: 10px;
    border: 1px solid var(--main-text-color);
}

.MaBarbeHommecomTocTitle {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.MaBarbeHommecomToc.MaBarbeHommecomIsOpen {
    margin: inherit;
    margin-top: 0;
    padding: 0 20px 20px 40px;
    max-height: 2000px !important;
}

.MaBarbeHommecomTocArrow {
    width: 20px;
    height: 21px;
    order: -1;
    display: inline-block;
    background-color: var(--main-text-color);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 21'><path d='M5.55054 7.1665L14.4489 7.1665C14.7429 7.1665 14.9777 7.26655 15.1534 7.46665C15.3291 7.66592 15.417 7.89882 15.417 8.16534C15.417 8.24899 15.4058 8.33632 15.3834 8.42735C15.3619 8.51756 15.3287 8.60407 15.284 8.6869L10.8114 15.8743C10.7076 16.0269 10.5886 16.1417 10.4544 16.2188C10.321 16.295 10.1697 16.3332 10.0003 16.3332C9.83099 16.3332 9.67963 16.295 9.54624 16.2188C9.41285 16.1425 9.29384 16.0277 9.1892 15.8743L4.71665 8.6869C4.67272 8.60407 4.63957 8.51674 4.61721 8.42489C4.59484 8.33304 4.58366 8.24571 4.58366 8.16288C4.58366 7.89554 4.67152 7.66264 4.84724 7.46419C5.02297 7.26573 5.2574 7.1665 5.55054 7.1665Z'/></svg>") no-repeat center/contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: transform 0.3s ease;
}

.MaBarbeHommecomTocArrow.MaBarbeHommecomRotated {
    transform: rotate(180deg);
    margin-bottom: -4px;
}

@media (max-width: 500px) {
    .MaBarbeHommecomToc {
        column-count: 1;
    }
}