/* -----------------------------------------------------------------------------------
 01. Google fonts
 02. Basics style
 03. Preloader style
 04. Selection style 
 05. Owl-Theme custom style
 06. Section style
 07. Navbar style
 08. Header style
 09. Slider style
 10. Slider Services Box style
 11. Parallax Slider style
 12. Page Header style
 13. Top Banner Footer style
 14. About style 
 15. Team style
 16. Services style
 17. Projects 1 style
 18. Projects 2 style
 19. Pricing style
 20. FAQS style
 21. Error Page 404 style
 22. Gallery style
 23. Play video style
 24. Clients style
 25. Testimonials style
 26. Homepage Blog style
 27. Blog style
 28. Blog2 style
 29. Post style
 30. Contact style
 31. Buttons style
 32. Footer style
 33. toTop Button style
 34. Coming Soon style
 35. Responsive (Media Query)
 36. Overlay Effect Bg image 
 37. Arrow down
 38. Pop-up message
 39. About style table
 40. Pop-up window
 41. Выравнивание заголовка на страницах main
 21. Error Page 404 style
 42. Trade stats table


----------------------------------------------------------------------------------- */

/* ======= Google fonts (Khand-en) (Fira Sans Condensed-ru) ======= */
@import url('https://fonts.googleapis.com/css2?family=Khand:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&family=Roboto+Condensed&family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unbounded&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');



/* ======= Basic style ======= */
html,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    word-wrap: break-word;
}
body {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75em;
    color: #555;
    overflow-x: hidden !important;
    background: #fff;
}
p {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75em;
    color: #555;
    margin-bottom: 20px;
    letter-spacing: 0.25px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0 0 20px 0;
    color: #272727;
}
h1 { font-size: 60px; }
h2 { font-size: 50px; }
h3 { font-size: 40px; }
h4 { font-size: 30px; }
h5 { font-size: 20px; }
h6 { font-size: 17px; }

img {
    width: 100%;
    height: auto;
}
img {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    color: #323232;
}

/* Глобально: span и a как inline-block, без стандартного подчёркивания */
span,
a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

/* В текстовых блоках span и a ведут себя как обычный текст,
   чтобы не ломать переносы строк и не дёргаться при hover */
p span,
p a,
p a:hover,
.mtc-page-text span,
.mtc-page-text a,
.mtc-page-text a:hover,
.text span,
.text a,
.text a:hover,
.content span,
.content a,
.content a:hover,
.accordion-box .text span,
.accordion-box .text a,
.accordion-box .text a:hover {
    display: inline;
}

/* ===== Подчёркивание с «разрывами» по контуру букв ===== */

/* 1) Явно подчёркнутый текст: <u> или inline text-decoration: underline */
u,
span[style*="underline"],
a[style*="underline"] {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: currentColor;   /* линия = цвет текста на этом элементе */
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;        /* расстояние линии от текста */
    text-decoration-skip-ink: auto;       /* разрывы по контуру букв */
}

/* обычные ссылки – линия только при hover */
a[href]:not(.mtc-popup-trigger):not([style*="underline"]) {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: transparent;   /* скрыта по умолчанию */
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: auto;
    transition: text-decoration-color .22s ease-out, color .18s ease-out;
}

a[href]:not(.mtc-popup-trigger):not([style*="underline"]):hover {
    text-decoration-color: currentColor;  /* появляется при наведении */
}

/* ===== Цветные фрагменты ===== */

/* Если задали цвет на span, то b/strong/a внутри наследуют именно его,
   а не общий #c5a47e/#555 */
span[style*="color"] b,
span[style*="color"] strong,
span[style*="color"] a {
    color: inherit !important;
}

/* Подчёркнутый текст внутри цветного span — линия того же цвета */
span[style*="color"] u,
span[style*="color"] a u {
    color: inherit !important;
    text-decoration-color: currentColor !important;
}

/* При hover внутри цветного span не уходим в чёрный */
span[style*="color"] a:hover {
    color: inherit !important;
    text-decoration-color: currentColor !important;
}

/* ===== Прочее ===== */

b {
    font-weight: 400;
    color: #c5a47e;
}

.mb-15 { margin-bottom: 15px; }
.mb-30 { margin-bottom: 30px; }
.mb-60 { margin-bottom: 60px; }

.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-60 { margin-top: 60px; }
.mt-90 { margin-top: 90px; }

/* text field */
button,
input,
optgroup,
select,
textarea {
    font-family: 'Khand', sans-serif;
}
input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    outline: none;
}
input[type="password"],
input[type="email"],
input[type="text"],
input[type="file"],
textarea {
    max-width: 100%;
    margin-bottom: 10px;
    padding: 10px 0;
    height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-width: 0 0 1px;
    border-style: solid;
    display: block;
    width: 100%;
    line-height: 1.5em;
    font-family: 'Khand', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #555;
    background-image: none;
    border-bottom: 1px solid #ede3d8;
    border-color: ease-in-out .15s, box-shadow ease-in-out .15s;
}
input:focus,
textarea:focus {
    border-bottom-width: 1px;
    border-color: #c5a47e;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.75em;
    color: #fff;
    background: #c5a47e;
    border: 1px solid transparent;
    padding: 12px 24px 9px 24px;
    position: relative;
    font-size: 17px;
    letter-spacing: 4px;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
    text-transform: uppercase;
    border-radius: 0;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    background-color: #b19371;
    color: #fff;
    border: 1px solid transparent;
}

.alert-success {
    background: transparent;
    color: #555;
    border: 1px solid #c5a47e;
    border-radius: 0px;
}

select {
    padding: 10px;
    border-radius: 5px;
}
th,
tr,
td {
    padding: 10px 0;
}
input[type="radio"],
input[type="checkbox"] {
    display: inline;
}

/* placeholder */
::-webkit-input-placeholder {
    color: #555;
    font-size: 17px;
    font-weight: 400;
}
:-moz-placeholder {
    color: #555;
}
::-moz-placeholder {
    color: #555;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #555;
}

.bg-color { background: #323232; }
.bg-wht   { background: #fff; }
.o-hidden { overflow: hidden; }
.position-re { position: relative; }
.full-width  { width: 100%; }

.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.bg-img2 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}
.bg-fixed { background-attachment: fixed; }
.pattern  { background-repeat: repeat; background-size: auto; }

.bold  { font-weight: 500; }
.count { font-family: 'Khand', sans-serif; }

.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.v-bottom {
    position: absolute;
    width: 100%;
    bottom: 5%;
    left: 0;
    -webkit-transform: translate(0%, -5%);
    transform: translate(0%, -5%);
}
.js .animate-box { opacity: 0; }

.line-vr-section {
    position: relative;
    margin: -37px auto;
    border: 0;
    border-left: 1px solid;
    border-color: #c5a47e;
    width: 2px;
    height: 75px;
    z-index: 10;
}
hr {
    margin-top: 5px;
    margin-bottom: 30px;
    border: 0;
    border-top: 1px solid #444;
}

.container {
    padding-right: 60px;
    padding-left: 60px;
}

/* ==== ЖЁСТКОЕ выравнивание по ширине в основном контенте (в т.ч. на мобилках) ==== */
#savoye-main p,
#savoye-main .text p,
#savoye-main .content p,
#savoye-main .accordion-box .text p {
    text-align: justify !important;
    text-justify: inter-word;
}

/* ======= Preloader style ======= */
/* Скрыть элементы до загрузки страницы */
.hidden-before {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.hidden-before.show {
  opacity: 1;
  visibility: visible;
}

/* Фикс для style.css */
.hidden-before {
  display: none;
}

#main-content.show {
  display: block !important;
}


/* Preloader style */
#main-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
#main-content.show {
  opacity: 1;
  visibility: visible;
}

#preloader {
  position: fixed;
  inset: 0;
  background: white;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 1;
  transition: opacity 0.4s ease;
}
#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

.logo-wrapper {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  display: block;
}

.loader-logo {
  width: 100px;
  opacity: 0;
  transform: scale(0.8);
  animation: logoZoom 2s ease forwards;
  display: block;
}

.loader-logo {
  width: 100px;
  opacity: 0;
  animation: logoZoom 2s ease forwards;
}

@keyframes logoZoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
} 

/* Всплывающее окно */
#popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#popup-overlay.show {
  display: flex !important;
  align-items: flex-start; /* ???Выравнивание по верхнему краю */
  opacity: 1;
  padding-top: 60px; /* Отступ сверху */
  visibility: visible;
}

.popup {
  background: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.popup button {
  margin-top: 20px;
  padding: 10px 24px;
  background-color: #c5a47e;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.popup button:hover {
  background-color: #a8865e;
}

/* ======= Selection style ======= */
::-webkit-selection {
    color: #555;
    background: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
    color: #555;
    background: rgba(0, 0, 0, 0.1);
}
::selection {
    color: #555;
    background: rgba(0, 0, 0, 0.1);
}


/* ======= Scrollbar ======= */

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #171717;
}

::-webkit-scrollbar-thumb:hover {
    background: #171717;
}



/* ======= Owl-Theme custom style Кнопка Колонка?  ======= */
.owl-theme .owl-dots .owl-dot span {
    background-color: #e2d1be;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #c5a47e;
}
.owl-theme .owl-dots .owl-dot.active {
    border-color: #c5a47e;
}
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 30px;
    margin-bottom: 30px;
}
.owl-theme .owl-dots .owl-dot {
    position: relative;
    background-color: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 0 4px;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #e2d1be;
    display: inline-block;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
}
.owl-theme .owl-dots .owl-dot span {
    width: 4px;
    height: 4px;
    margin: 0;
    background: 1px solid #e2d1be;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.owl-theme .owl-dots .owl-dot.active {
    border: 1px solid #c5a47e;
}
.owl-theme .owl-dots .owl-dot:hover {
    border: 1px solid #c5a47e;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #c5a47e;
}
.owl-theme .owl-dots .owl-dot:focus {
    outline: none;
}
@media (max-width: 992px) {
    .owl-theme .owl-nav.disabled + .owl-dots {
        bottom: 0;
    }
}


/* ======= Section style ======= */
.section-padding {
    padding: 40px 0;
}
.section-title {
    font-size: 50px;
    font-weight: 500;
    line-height: 1em;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    color: #272727;
    position: relative;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.section-subtitle {
    color: #c5a47e;
    font-family: 'Khand', sans-serif;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 4px;
    align-items: center;
    display: inline-flex;
}
.section-subtitle::before {
    position: relative;
    top: 0px;
    content: '';
    background-color: #c5a47e;
    width: 40px;
    height: 1px;
    margin-right: 15px;
}

/* ===== Ссылки в основном текстовом блоке (как в аккордеоне по цвету линии) ===== */
.mtc-page-text a {
    color: #0183c2;                    /* цвет текста ссылки = как в span */
    text-decoration: underline;        /* подчёркивание включено */
    text-decoration-color: currentColor; /* линия того же цвета, что и текст */
}

.mtc-page-text a:hover,
.mtc-page-text a:focus {
    text-decoration: underline;        /* на всякий случай оставляем подчёркивание */
    text-decoration-color: currentColor;
}



/* ======= Sidebar styles ======= */
#savoye-page {
    width: 100%;
    overflow: hidden;
    position: relative;
}
#savoye-aside {
    padding: 10px 40px;
    width: 20.9%;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    overflow-x: hidden;
    z-index: 1001;
    background: #fff;
    transition: 0.5s;
    border: none;
    border-right: 1px solid #f6f6f6;
    display: flex;                 /* Гибкий контейнер */
    flex-direction: column;        /* Вертикальная колонка: логотип, меню, футер */
    scrollbar-width: none;
}

@media screen and (max-width: 1200px) {
    #savoye-aside {
        width: 30%;
    }
}

@media screen and (max-width: 768px) {
    #savoye-aside {
        width: 270px;
        -moz-transform: translateX(-270px);
        -webkit-transform: translateX(-270px);
        -ms-transform: translateX(-270px);
        -o-transform: translateX(-270px);
        transform: translateX(-270px);
        padding: 10px 30px; /* На мобильных: сверху 10px, сбоку 30px */
    }
}


/* logo */
#savoye-aside .savoye-logo {
    text-align: center;
    margin-bottom: 10px; /* Отступ под логотипом */
    display: block;
}

#savoye-aside .savoye-logo .logo-img {
    width: 60px;
    margin-bottom: 5px;
}

#savoye-aside .savoye-logo a {
    display: inline-block;
    text-align: center;
    text-decoration: none; /* ?Отступ сверхуКолонка */
    color: inherit; /* Наследуем цвет текста */
}

#savoye-aside .savoye-logo h2 {
    font-family: 'PT Sans Narrow', sans-serif; /* Шрифт логотипа */
    font-size: 50px; /* Размер первой строчки под лого */
    font-weight: 500; 
    display: block;
    width: 100%;
    position: relative;
    color: #000; /* Черный цвет */
    letter-spacing: 5px;
    margin-bottom: 0;
    text-transform: uppercase;
}

#savoye-aside .savoye-logo h5 {
    font-family: 'PT Sans Narrow', sans-serif; /* Кнопка Черный цвет? */
    font-size: 21px; /* Размер второй строчки под лого */
    font-weight: 400;
    display: block;
    width: 100%;
    position: relative;
    color: #000; /* Черный цвет */
    
    margin-top: 0;
}

#savoye-aside .savoye-logo span {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 12px;
    color: #555;
    font-weight: 400;
    letter-spacing: 6px;
    display: block;
    margin-top: 0px;
    margin-left: 5px;
    line-height: 1.5em;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    #savoye-aside .savoye-logo {
        margin-bottom: 10px;
    }
}

/* ????Черный цвет? Кнопка ??? ???Отступ сверху ??? ???? */
html[lang="zh"] #savoye-aside .savoye-logo h3,
html[lang="zh"] #savoye-aside .savoye-logo h5 {
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

html[lang="zh"] #savoye-aside .savoye-logo h3 {
    font-size: 36px;   
}

html[lang="zh"] #savoye-aside .savoye-logo h5 {
    font-size: 17px;   
}




/* ========================
   Menu Base
   Базовые стили меню
======================== */
#savoye-aside .savoye-main-menu,
#savoye-aside .savoye-main-menu ul,
#savoye-aside .savoye-main-menu ul li,
#savoye-aside .savoye-main-menu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: block;
    position: relative;
    box-sizing: border-box;
}

#savoye-aside .savoye-main-menu {
    margin-bottom: 90px;
}

/* ========================
   Submenu Base (hidden)
======================== */
#savoye-aside .savoye-main-menu ul ul {
    display: none;
}

#savoye-aside .savoye-main-menu ul ul li:last-of-type {
    border-bottom: 1px solid #f6f6f6;
    padding-bottom: 13px;
}

/* ========================
   Top-level Links
======================== */
#savoye-aside .savoye-main-menu > ul > li > a {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.25em;
    color: #555;
    margin-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid #ececec; /* Стиль линии под основным пунктом меню */
    text-decoration: none;
}

#savoye-aside .savoye-main-menu > ul > li:last-child > a {
    border-bottom: none;
}

/* ========================
   Active & Hover States
======================== */
#savoye-aside .savoye-main-menu > ul > li > a:hover,
#savoye-aside .savoye-main-menu > ul > li.active > a,
#savoye-aside .savoye-main-menu > ul > li.open > a {
    color: #c5a47e;
}

#savoye-aside .savoye-main-menu > ul > li.open > a {
    border-bottom: none;
}

/* ========================
   Submenu Links
======================== */
#savoye-aside .savoye-main-menu ul ul li a {
    padding: 8px 0 8px 15px;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25em;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #ececec; /* Стиль линии под вспомогательным пунктом меню */
}

#savoye-aside .savoye-main-menu ul ul li:last-child a {
    border-bottom: none;
}

#savoye-aside .savoye-main-menu ul ul li:hover > a,
#savoye-aside .savoye-main-menu ul ul li.open > a,
#savoye-aside .savoye-main-menu ul ul li.active > a {
    color: #c5a47e;
}

/* ========================
   Chinese Version
======================== */
html[lang="zh"] #savoye-aside .savoye-main-menu > ul > li > a {
    font-size: 19px;
}

html[lang="zh"] #savoye-aside .savoye-main-menu ul ul li a {
    font-size: 17px;
    line-height: 1em;
}

/* ========================
   Submenu Arrow
======================== */
.savoye-sub > a i {
    font-size: 0.7em;
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.3s ease;
}

.savoye-sub.open > a i {
    transform: rotate(180deg);
}


/* ==========================================================
   MOBILE OFFCANVAS (iOS SAFE) + CLOSE BUTTON ALWAYS VISIBLE
   - закрыто: полностью за экраном
   - открыто: 100% ширины
   - крестик: всегда поверх, кликабелен на iOS
========================================================== */
@media screen and (max-width: 768px) {

    /* 1) Aside как полноценный overlay */
    #savoye-aside{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;

        /* iOS: 100dvh + fallback */
        height: 100vh;
        height: 100dvh;

        background: #fff;

        /* ниже чем крестик, но выше страницы */
        z-index: 9998;

        /* закрыто */
        transform: translate3d(-100%, 0, 0);
        transition: transform .35s ease;
        will-change: transform;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* чтобы внутри fixed/transform iOS не глючил клики */
        -webkit-transform: translate3d(-100%, 0, 0);
    }

    /* 2) Открыто (оставляем несколько селекторов — не мешают) */
    body.savoye-aside-open #savoye-aside,
    body.nav-open #savoye-aside,
    body.menu-open #savoye-aside,
    #savoye-aside.open{
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    /* 3) Внутренние отступы меню + safe-area */
    #savoye-aside .savoye-main-menu{
        width: auto;
        max-width: none;
        margin: 0 0 30px 0;

        padding-top: calc(52px + env(safe-area-inset-top)); /* место под крестик */
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        box-sizing: border-box;
    }

    #savoye-aside .savoye-main-menu ul,
    #savoye-aside .savoye-main-menu ul li,
    #savoye-aside .savoye-main-menu ul ul{
        width: 100%;
        max-width: none;
    }

    #savoye-aside .savoye-main-menu ul ul li a{
        padding-left: 25px;
    }

    /* ----------------------------------------------------------
       4) КРЕСТИК: делаем "железобетонно" видимым и кликабельным
       ВАЖНО: крестик может быть:
       - внутри #savoye-aside
       - или где-то рядом в DOM (в шаблоне)
       Поэтому даем 2 группы селекторов: внутри и глобально.
    ---------------------------------------------------------- */

    /* внутри aside */
    #savoye-aside .savoye-nav-close,
    #savoye-aside .savoye-aside-close,
    #savoye-aside .savoye-close,
    #savoye-aside .menu-close,
    #savoye-aside .nav-close,
    #savoye-aside .close,
    #savoye-aside .close-button,
    #savoye-aside button.close,
    #savoye-aside .btn-close{
        position: fixed !important;
        top: calc(12px + env(safe-area-inset-top)) !important;
        right: calc(12px + env(safe-area-inset-right)) !important;
        z-index: 10005 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        /* чтобы надёжно ловил тап на iOS */
        width: 44px;
        height: 44px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* если крестик ВНЕ aside (часто в Savoye/темплейтах) */
    .savoye-nav-close,
    .savoye-aside-close,
    .savoye-close,
    .menu-close,
    .nav-close{
        z-index: 10005 !important;
        pointer-events: auto !important;
    }

    /* на всякий случай: если на кнопку повешен i */
    #savoye-aside .savoye-nav-close i,
    #savoye-aside .savoye-aside-close i,
    #savoye-aside .savoye-close i,
    #savoye-aside .menu-close i,
    #savoye-aside .nav-close i{
        pointer-events: none;
    }
}


/* ================================
   Соцсети в левом сайдбаре (MTC)
   База: белый фон, пиктограмма #3E438A
   Ховер: фон #3E438A, пиктограмма белая
   Ряд иконок — по центру и приподнят
   Размер кнопок: 34×34
=================================== */

/* Поднимаем блок иконок ещё выше от нижней границы */
#savoye-aside .savoye-footer {
  position: relative;
  bottom: 44px;              /* было 28px → подняли ещё выше */
  padding-top: 10px;
}

/* Контейнер ряда иконок: по центру */
#savoye-aside .savoye-footer .social {
  display: flex;
  justify-content: center;   /* центр по горизонтали */
  align-items: center;
  gap: 10px;                 /* расстояние между кнопками */
  width: 100%;
}

/* Кнопка соцсети: квадрат 34×34 */
#savoye-aside .savoye-footer .social a {
  width: 34px;
  height: 34px;
  line-height: 34px;         /* fallback */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  /* базовая палитра */
  background-color: #ffffff; /* белый фон */
  border: 1px solid #ebebeb; /* светлая рамка (как в pwe) */
  color: #3E438A;            /* цвет для <i>/inline-SVG */
  font-size: 16px;           /* размер глифа (для <i>) */
  text-align: center;
  outline: none;
  box-shadow: none;

  /* не используем shorthand background */
  background-repeat: no-repeat;
  background-position: center;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    filter .2s ease;
}

/* Наведение: инверсия палитры */
#savoye-aside .savoye-footer .social a:hover {
  background-color: #3E438A; /* фон — акцент */
  color: #ffffff;            /* пиктограмма — белая (для <i>/inline-SVG) */
  border-color: #3E438A;     /* рамка в тон фону */
}

/* Inline-SVG / шрифтовые иконки берут currentColor */
#savoye-aside .savoye-footer .social a svg {
  width: 1em; height: 1em; display: block;
}
#savoye-aside .savoye-footer .social a svg,
#savoye-aside .savoye-footer .social a svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Если внутри <img> (PNG/внешний SVG) — насильно красим в #3E438A */
#savoye-aside .savoye-footer .social a img,
#savoye-aside .savoye-footer .social img {
  display: block;
  width: 20px;               /* визуальный размер глифа внутри 34×34 */
  height: 20px;

  /* Жёстко перекрашиваем «чёрные» иконки в #3E438A */
  filter:
    invert(22%) sepia(16%) saturate(1540%)
    hue-rotate(213deg) brightness(92%) contrast(95%) !important;
}

/* На ховере <img> становится белым на тёмном фоне */
#savoye-aside .savoye-footer .social a:hover img,
#savoye-aside .savoye-footer .social a:hover > img {
  filter: brightness(0) invert(1) !important;
}

/* Адаптив: чуть меньше подъём на узких экранах */
@media (max-width: 768px) {
  #savoye-aside .savoye-footer { bottom: 32px; }
}


/* Убираем подчёркивание у кнопок соцсетей (и на hover тоже) */
#savoye-aside .savoye-footer .social a,
#savoye-aside .savoye-footer .social a:hover,
#savoye-aside .savoye-footer .social a:focus,
#savoye-aside .savoye-footer .social a:active,
#savoye-aside .savoye-footer .social a:visited {
  text-decoration: none !important;
}



/* ======= Content styles ======= */
#savoye-main {
    width: 79.2%;
    float: right;
	background-color: #f6f6f6; /* ← Цвет фона в текстовом поле */	
    box-shadow: -14px 0 32px rgba(0, 0, 0, 0.06); /* тень-разделитель  */
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
@media screen and (max-width: 1200px) {
    #savoye-main {
        width: 70%;
    }
}
@media screen and (max-width: 768px) {
    #savoye-main {
        width: 100%;
    }
    .container {
        padding-right: 30px;
        padding-left: 30px;
    }
}


/* ======= Navigation styles ======= */

.savoye-main-menu {
    margin-bottom: 90px;
}

/* ======= Burger button base ======= */
.savoye-nav-toggle {
    cursor: pointer;
    text-decoration: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    opacity: 1;
    visibility: hidden; /* ?? ???Черный цвет? ?? Колонка? */
    padding: 11px 15px;
    background: #c5a47e;
    margin: 15px 30px;
    border-radius: 50%;
    transition: 0.5s;
}

/* Кнопка Кнопка меню-бургер-???? */
.savoye-nav-toggle i {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 1px;
    background: #fff;
    transition: all 0.2s ease-out;
    top: -5px;
}
.savoye-nav-toggle i::before,
.savoye-nav-toggle i::after {
    content: '';
    width: 20px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    transition: 0.2s;
}
.savoye-nav-toggle i::before {
    top: -7px;
}
.savoye-nav-toggle i::after {
    bottom: -7px;
}

/* hover-Колонка? */
.savoye-nav-toggle:hover i::before {
    top: -10px;
}
.savoye-nav-toggle:hover i::after {
    bottom: -10px;
}

/* Колонка?? active (Колонка) */
.savoye-nav-toggle.active i {
    background: transparent;
}
.savoye-nav-toggle.active i::before {
    top: 0;
    transform: rotateZ(45deg);
}
.savoye-nav-toggle.active i::after {
    bottom: 0;
    transform: rotateZ(-45deg);
}

/* Отступ сверху Кнопка меню-бургер */
.savoye-nav-toggle.dark i,
.savoye-nav-toggle.dark i::before,
.savoye-nav-toggle.dark i::after {
    background: #171717;
}
.savoye-nav-toggle.dark.active i::before,
.savoye-nav-toggle.dark.active i::after {
    background: #171717;
}

/* ======= Mobile view ======= */
@media screen and (max-width: 768px) {
    .savoye-main-menu {
        margin-bottom: 60px;
    }
    .savoye-nav-toggle {
        opacity: 1;
        visibility: visible; /* Черный цвет? */
    }
}


/* =========================================================
   Header style — DEFAULT CENTER
========================================================= */

.header{
    min-height: 100vh;
    overflow: hidden;
}

/* Центрируем весь текстовый блок */
.header .caption{
    text-align: center;
}

/* o-hidden — для анимаций, центрируем как колонку */
.header .caption .o-hidden{
    display: inline-block;
}

/* Подзаголовок (h2) */
.header .caption h2{
    font-weight: 400;
    font-size: 30px;
}

/* Маленький заголовок над H1 */
.header .caption h6{
    font-family: 'Khand', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #c5a47e;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Линия перед h6 */
.header .caption h6::before{
    content: '';
    width: 30px;
    height: 1px;
    margin-right: 15px;
    background-color: #c5a47e;
}

/* Основной заголовок */
.header .caption h1{
    position: relative;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 85px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

/* Текст под заголовком */
.header .caption p{
    font-size: 17px;
    margin-bottom: 0;
    color: #fff;
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}

/* Разделители в тексте */
.header .caption p span{
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 5px;
    padding-right: 14px;
    position: relative;
}

.header .caption p span:last-child{
    padding-right: 0;
}

.header .caption p span:last-child::after{
    display: none;
}

.header .caption p span::after{
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #272727;
    opacity: .5;
}

/* Кнопка */
.header .caption .btn{
    margin: 20px 0;
    color: #fff;
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}

/* Социальные иконки */
.header .social a{
    color: #eee;
    font-size: 20px;
    margin: 10px 15px;
}





/* ======= Slider style ======= */
.slider .owl-item,
.slider-fade .owl-item {
    height: 100vh;
    position: relative;
}
.slider .item,
.slider-fade .item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.slider .item .caption,
.slider-fade .item .caption {
    z-index: 9;
}
.slider .owl-theme .owl-dots,
.slider-fade .owl-theme .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 20%;
    right: 12%;
    text-align: right;
}
/* owl-nav next and prev */
.owl-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.owl-prev {
    float: left;
}
.owl-next {
    float: right;
}
.owl-theme .owl-nav [class*=owl-] {
    width: 40px;
    height: 40px;
    line-height: 34px;
    background: transparent;
    border-radius: 0;
    color: #fff;
    font-size: 20px;
    margin-right: 15px;
    margin-left: 15px;
    cursor: pointer;
    border: 0px solid rgba(255, 255, 255, 0.2);
}
.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
    border: 1px solid #c5a47e;
    color: #fff;
}
@media screen and (max-width: 768px) {
    .owl-nav {
        display: none;
    }
}


/* ======= Slider Services Box style  ======= */
.slider-services-wrapper {
    position: relative;
}
.slider-box-content.box-up {
    z-index: 28;
    position: relative;
    padding: 0;
    margin-top: -159px;
}
.slider-services-box {
    text-align: center;
    border: none;
}
.slider-services-box.b-left {
    border-left: 1px solid #f6f6f6;
}
.slider-services-box.b-right {
    border-right: 1px solid #f6f6f6;
}
.slider-services-box.b-top {
    border-top: 1px solid #f6f6f6;
}
.slider-services-box.b-bottom {
    border-bottom: 1px solid #f6f6f6;
}
.slider-services-box a {
    display: block
}
.slider-services-box a:hover {
    text-decoration: none
}
.slider-services-box .slider-services-box-info {
    text-decoration: none;
    padding: 25px;
    background-color: #fff;
}
.slider-services-box .slider-services-box-info:hover {
    background-color: #f3ece5;
}
.slider-services-box-info h5 {
    font-family: 'Khand', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #555;
}
.slider-services-box .slider-services-box-empty {
    text-decoration: none;
    padding: 23px;
    background-color: red;
}
.slider-services-box-empty h4 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 0;
    text-transform: uppercase;
    color: #fff;
}
.slider-services-box-empty h4 span {
    font-size: 17px;
    margin-left: 5px;
}
.slider-services-box-empty h6 a {
    font-size: 17px;
    margin-bottom: 0;
    border-bottom: 1px solid red;
}

.services-icon {
    height: 68px;
    width: 68px;
    margin-bottom: 0;
}
.no-line {
    margin: 0 auto 0px;
    border: none;
}



/* ======= Parallax Slider style ======= */
/* parallax header */
.parallax-header {
    min-height: 85vh;
    overflow: hidden;
}
.parallax-header .caption .o-hidden {
    display: inline-block;
}
.parallax-header .caption h2 {
    position: relative;
    margin-bottom: 0px;
    font-weight: 500;
    font-size: 95px;
    text-transform: uppercase;
    line-height: 1.1em;
    color: #fff;
}
.parallax-header .caption h2 span {
    color: #c5a47e;
    display: initial;
}
.parallax-header .caption h6 {
    font-family: 'Khand', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #c5a47e;
    text-align: left;
    margin-bottom: 5px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    text-transform: uppercase;
    letter-spacing: 4px;
    align-items: center;
    display: inline-flex;
}
.parallax-header .caption h6::before {
    position: relative;
    top: 0px;
    content: '';
    background-color: #c5a47e;
    width: 30px;
    height: 1px;
    margin-right: 15px;
}
.parallax-header .caption p {
    font-family: 'Khand', sans-serif;
    font-size: 20px;
    margin-bottom: 0;
    color: #c5a47e;
}
.parallax-header .caption p span {
    color: #c5a47e;
}
.parallax-header .caption p span:last-child {
    padding: 0;
}
.parallax-header .caption p span:last-child:after {
    display: none;
}
.parallax-header .caption p span:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #272727;
    position: absolute;
    top: 10px;
    right: 0;
    opacity: .5;
}
.parallax-header .caption .butn-light {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    margin-right: 15px;
}



/* =========================================================
   Page Header style (banner-header)
   Default: CENTER
   main.php only: LEFT (.main-page)
========================================================= */

.banner-header.full-height{
    height: 100vh;
}

.banner-header{
    height: 70vh;
    background-attachment: inherit;
    background-position: top;
}

/* ---------- DEFAULT (all pages): CENTER ---------- */
.banner-header .caption{
    text-align: center;
}

.banner-header h6{
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}

.banner-header h6 a:hover{
    color: #fff;
}

.banner-header h6 i{
    margin: 0 15px;
    font-size: 10px;
}

.banner-header h5{
    font-size: 18px;
    font-family: 'Khand', sans-serif;
    font-weight: 400;
    margin-bottom: 20px;
}

.banner-header h5 a{
    color: #c5a47e;
}

.banner-header h1,
.banner-header .caption h1{
    font-size: clamp(36px, 7vw, 70px);
    font-weight: 500;
    color: #fff;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 1.1;
	letter-spacing: 3px;

    /* центр по умолчанию */
    text-align: center;

    /* защита от нежелательных переносов */
    hyphens: none;
}

.banner-header p{
    margin-bottom: 0;
}

.banner-header p a{
    color: #c5a47e;
}

/* ---------- MAIN PAGE ONLY (main.php): LEFT ---------- */
/* Требует:
   <div id="savoye-main" class="main-page"> */
.main-page .banner-header .caption{
    text-align: left;
}

.main-page .banner-header .o-hidden{
    display: block;
    width: 100%;
    text-align: left;
}

.main-page .banner-header h1,
.main-page .banner-header .caption h1,
.main-page .banner-header h4,
.main-page .banner-header h5,
.main-page .banner-header h6,
.main-page .banner-header p{
    text-align: left;
}

/* Кнопка на главной — без float */
.main-page .banner-header .float-btn{
    float: none;
    display: inline-block;
}

/* ---------- Mobile (≤ 767px) ---------- */
@media screen and (max-width: 767px){

    .banner-header{
        height: 70vh;
        padding: 10px 0 30px;
    }

    .banner-header .caption.mt-90{
        margin-top: 20px !important;
    }

    .banner-header h6{
        font-size: 12px;
        margin-bottom: 10px;
    }

    .banner-header h1,
    .banner-header .caption h1{
        font-size: 42px !important;
        line-height: 1.1;
    }
}

/* ---------- Very small (≤ 360px) ---------- */
@media screen and (max-width: 360px){
    .banner-header h1,
    .banner-header .caption h1{
        font-size: 36px !important;
    }
}



/* =========================================================
   Top Banner Footer style
========================================================= */

.topbanner-footer{
    position: relative;
}

.topbanner-footer h6{
    color: #fff;
    font-size: 17px;
    font-family: 'Khand', sans-serif;
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.topbanner-footer h5{
    color: #fff;
    font-size: 24px;
    font-family: 'Khand', sans-serif;
    margin-bottom: 20px;
}

.topbanner-footer h5 a{
    color: #c5a47e;
}

.topbanner-footer h1{
    font-size: 45px;
    font-family: 'Khand', sans-serif;
    color: #fff;
    position: relative;
    margin-bottom: 20px;
    line-height: 1.25em;
}

.topbanner-footer p{
    font-size: 17px;
    font-weight: 400;
    color: #fff;
    line-height: 1.75em;
}

/* =========================================================
   Overlay for footer banner image
   ВАЖНО: псевдо-элемент НЕ должен перехватывать hover/click
========================================================= */

.topbanner-footer .banner-img{
    position: relative; /* обязательно, чтобы ::after был привязан к блоку */
    overflow: hidden;   /* можно оставить; если обрезает анимации — поменяем на visible */
}

.topbanner-footer .banner-img::after{
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.5) 100%,
        rgba(255, 255, 255, 0.2) 100%
    );

    /* КЛЮЧ: overlay не блокирует наведение/клики */
    pointer-events: none;

    /* чтобы overlay был поверх фона, но под контентом */
    z-index: 1;
}

/* Поднимаем контент выше overlay */
.topbanner-footer .banner-img > .container{
    position: relative;
    z-index: 2;
}

/* Страховка для hover/клика по кнопке */
.topbanner-footer .vid-area,
.topbanner-footer .play-button{
    position: relative;
    z-index: 3;
}

/* =========================================================
   Mobile
========================================================= */
@media screen and (max-width: 767px){
    .topbanner-footer h6{
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 10px;
    }
}


/* ======= About style ======= */
.about {}
.about .about-img img:hover {
    transform: scale(0.95);
}
.about .about-img {
    position: relative;    
}
.about .about-img .img {
    position: relative;
}
.about .about-img .img img {
    position: relative;
    z-index: 2;
}
.about-img-2 {
    position: relative
}
.about-img .about-img-2 {
    width: 40% !important;
    position: absolute;
    bottom: 0px;
    right: 95px;
    z-index: 3;
    padding: 15px 15px;
    color: #fff;
    /* text-transform: uppercase; */
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 400;
    /* letter-spacing: 3px; */
    font-size: 17px;
    line-height: 1.5em;
    text-align: center;
	
}
.about-since {
    background: #c5a47e;
}


/* ======= Team style ======= */
.team .item {
  padding: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid #f6f6f6;
}
.team .item:hover {
  background: #f3ece5;
  border: 1px solid #f6f6f6;
}
.team .img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
.team .info {
  margin-left: 140px;
}
.team .info h6 {
 color: #272727;
  margin-right: 7px;
  font-size: 21px;
  display: inline-block;
    margin-bottom: 15px;
}
.team .info span {
  margin-left: 7px;
  color: #c5a47e;
  font-size: 16px;
  display: inline-block;
}
.team .info p {
  font-size: 17px;
  margin-top: 0px;
}
.team .info .social {
  margin-top: 10px;
}
.team .info .social a {
    text-align: center;
    width: 35px;
    height: 35px;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid #e7dacb;
    color: #555;
    font-size: 12px;
    margin-left: 3px;
}
.team .info .social a:hover {
  border: 1px solid #c5a47e;
  color: #555;
}
.team .toright .img {
  float: right;
}
.team .toright .info {
  margin-left: 0;
  margin-right: 160px;
  text-align: right;
}
.team .toright .info .social a {
  margin-right: 0;
  margin-left: 0;
}
@media screen and (max-width: 991px) {
.team .item, .team .toright .info {
    text-align: center;
  }
  .team .img {
    margin: auto;
    float: none !important;
  }
  .team .info {
    margin: 30px 0 0 0 !important;
  }
}



/*** 12. Services styles (полная версия, фиксированный размер иконок) ***/

/* Палитра секции + фиксированный бокс иконки */
.services {
  --svc-base:   #364574;  /* базовый цвет */
  --svc-accent: #c5a47e;  /* цвет при наведении */
  --icon-box:   56px;     /* ЕДИНЫЙ размер иконки (строго одинаковый везде) */
}

/* Фон секции и контейнер */
.services,
.bg-color { background: #f6f6f6 !important; }
.services-container {
  max-width: 92%;
  margin: 0 auto;
  padding: 0 15px;
}

/* Отступы секции */
.services.section-padding {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Заголовок секции */
.services .section-title,
.services .section-title h2 {
  margin-bottom: 24px;
  line-height: 1.3;
  color: var(--svc-base);
}

/* Сетка */
.services .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.services .row > [class*="col-"] {
  display: flex;
  flex: 0 0 33.333%;
  max-width: 33.333%;
  padding: 0 15px;
}

/* Плитка */
.services .item {
  flex: 1 1 auto;
  padding: 26px 16px 32px;
  background: #f6f6f6;
  margin-bottom: 20px;
  position: relative;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;

  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  transition: transform .4s ease, box-shadow .4s ease, background-color .4s ease;

  --icon-w: 52px; /* ширина линии под заголовком */
}

.services .item a {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Отключаем подчеркивание ссылок ТОЛЬКО в блоке услуг
   (перебивает глобальный a:hover { text-decoration: underline; }) */
.services .item a,
.services .item a:hover,
.services .item a:focus,
.services .item a:active {
  text-decoration: none !important;
}

/* Hover / Active эффекты плитки */
.services .item:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.15), 0 8px 12px rgba(0,0,0,.10);
}
.services .item:active {
  background: #f1f1f9;
  transform: scale(.97);
  box-shadow: 0 4px 8px rgba(0,0,0,.10);
}

/* === ЕДИНЫЙ размер иконки (работает для шрифтовых и mask-иконок) === */
.services .item .icon {
  width: var(--icon-box);
  height: var(--icon-box);
  display: inline-grid;       /* центрирование содержимого */
  place-items: center;
  line-height: 1;
  color: var(--svc-base);
  margin-bottom: 12px;
  transition: color .3s ease;
}
/* Шрифтовые (glyph via ::before) */
.services .item .icon::before {
  font-size: calc(var(--icon-box) * 0.86);
  line-height: 1;
}
/* Mask-иконки (Extras: color = currentColor из CSS пакета) */
.services .item .icon[class^="icon-extras-"],
.services .item .icon[class*=" icon-extras-"] {
  width: var(--icon-box) !important;
  height: var(--icon-box) !important;
}

/* Линия под заголовком */
.services .item .line {
  display: block;
  height: 1px;
  width: var(--icon-w);
  background: var(--svc-base);
  margin: 0 0 16px 0;
  transition: width .6s ease-in-out .15s, background-color .3s ease;
}

/* Заголовок услуги */
.services .item h5 {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--svc-base);
  margin: 0 0 12px 0;
  line-height: 1.4;
  transition: color .3s ease;
}

/* Текст (подпись) */
.services .item p {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  color: var(--svc-base);
  margin: 0 0 12px 0;
  line-height: 1.5;
  text-align: justify;
  max-width: 100%;
  transition: color .3s ease;
}

/* Номер/подпись внизу — базовый цвет */
.services .item .numb {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--svc-base);
  opacity: 1;
}

/* ЕДИНЫЕ эффекты наведения */
.services .item:hover .icon,
.services .item:hover h5,
.services .item:hover p {
  color: var(--svc-accent);
}
.services .item:hover .line {
  width: 100%;
  background: var(--svc-accent);
}

/* ======= Адаптив (иконка остаётся ТОГО ЖЕ размера) ======= */
/* планшеты */
@media (max-width: 991.98px) {
  .services-container {
    max-width: 95%;
    padding: 0 20px;
  }
  .services.section-padding {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .services .section-title,
  .services .section-title h2 {
    margin-bottom: 20px;
  }
  .services .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .services .item {
    min-height: 250px;
    padding: 22px 14px 28px;
    margin-bottom: 16px;
  }
  .services .item h5 {
    font-size: 22px;
    font-weight: 700;
  }
  .services .item p {
    font-size: 17px;
  }
}

/* мобильные */
@media (max-width: 575.98px) {
  .services-container {
    max-width: 100% !important;
    padding: 0 25px;
  }
  .services.section-padding {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  .services .section-title,
  .services .section-title h2 {
    margin-bottom: 18px;
  }
  .services .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .services .item {
    min-height: 240px;
    padding: 20px 14px 24px;
    margin-bottom: 16px;
  }
  .services .item h5 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
  }
  .services .item p {
    font-size: 18px;
    text-align: justify;
  }
  .services .item .line {
    margin-bottom: 12px;
  }
}



/* ========================
   FOOTER — оставлен как был
======================== */
footer,
.site-footer,
.page-footer,
.footer,
.footer-section,
#footer {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

footer.section-padding,
.site-footer.section-padding,
.page-footer.section-padding,
.footer.section-padding,
#footer.section-padding {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

footer .section-title,
.site-footer .section-title,
.page-footer .section-title,
#footer .section-title {
  margin-bottom: 30px !important;
}





/* ========================
   FOOTER — прежние размеры
======================== */
footer,
.site-footer,
.page-footer,
.footer,
.footer-section,
#footer {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

footer.section-padding,
.site-footer.section-padding,
.page-footer.section-padding,
.footer.section-padding,
#footer.section-padding {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

footer .section-title,
.site-footer .section-title,
.page-footer .section-title,
#footer .section-title {
  margin-bottom: 30px !important;
}



/* help */
.sidebar .help .widget-inner {
    background: #f3ece5;
    color: #555;
}
.sidebar .help .phone .icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #c5a47e;
  font-size: 24px;
  padding-right: 15px;
}
.sidebar .help .phone a {
  position: relative;
  color: #555;
  position: relative;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 400;
}
.sidebar .help .phone a:hover {
  text-decoration: none;
}


/* ======= Projects 1 style ======= */
.savoye-project {}
.savoye-project-section {
    padding-top: 120px;
}
.savoye-project-page-section {
    padding-bottom: 80px;
}
.savoye-project-items .col-md-6:nth-child(2) {
    margin-top: 75px;
}
.savoye-project-filter {
    width: 100%;
    padding-bottom: 30px;
    padding-left: 0px;
    position: relative;
}
.savoye-project-filter li {
    margin-right: 15px;
    display: inline-block;
    font-size: 24px;
    cursor: pointer;
    color: #272727;
    font-family: 'Khand', sans-serif;
    font-weight: 400;
}
.savoye-project-filter li:last-child {
    margin-right: 0;
}
.savoye-project-filter li.active {
    color: #c5a47e;
    content: "";
    left: 0;
    bottom: -4px;
    border-bottom: 1px solid;
    -webkit-transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
    -o-transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.savoye-project-filter li:hover {
    color: #c5a47e;
}
.savoye-project-wrap {
    padding-bottom: 90px;
    padding-right: 0;
    padding-left: 90px;
    position: relative;
}
.savoye-project-wrap:hover img {
    -ms-transform: scale(0.95, 0.95);
    /* IE 9 */
    -webkit-transform: scale(0.95, 0.95);
    /* Safari */
    transform: scale(0.95, 0.95);
}
.savoye-project-wrap h3 {
    font-family: 'Khand', sans-serif;
    font-size: 24px;
    line-height: 1.25em;
    color: #272727;
    margin-bottom: 0px;
}
.savoye-project-wrap p {
    color: #c5a47e;
    font-size: 17px;
    margin-bottom: 5px;
    align-items: center;
    display: inline-flex;
}
.savoye-project-content {
    position: absolute;
    left: 50px;
    bottom: 89px;
    background-color: #fff;
    padding: 20px 20px 20px 0;
    margin-right: 20px;
}
.savoye-project-link {
    color: #c5a47e;
    font-size: 17px;
    font-weight: 400;
    position: relative;
    padding-right: 40px;
    line-height: 1.75em;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    padding-left: 80px;
}
.savoye-project-link:before {
    content: '';
    display: inline-block;
    width: 80px;
    height: 1px;
    background: #c5a47e;
    position: absolute;
    left: 0;
    bottom: 15px;
    transition: all 0.3s ease-in-out;
}
.savoye-project-link:before:hover {
    padding-left: 5px;
    color: #c5a47e;
    transition: all 0.3s ease-in-out;
}
.savoye-project-link i {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}
.savoye-project-link:hover i {
    padding-left: 5px;
    color: #c5a47e;
    transition: all 0.3s ease-in-out;
}
.savoye-project-link:hover {
    color: #c5a47e;
}
@media (max-width: 991px) {
    .savoye-project-wrap {
        padding-left: 20px;
    }
    .savoye-project-wrap h3 {
        font-size: 22px;
    }
    .savoye-project-content {
        left: 0px;
        bottom: 0px;
    }
}
@media all and (max-width: 767px) {
    .savoye-project-items .col-md-6:nth-child(2) {
        margin-top: 0;
    }
}
@media all and (max-width: 575px) {
    .savoye-project-filter li {
        margin-right: 10px;
        font-size: 17px;
    }
    .savoye-project-filter li:last-child {
        margin-right: 0;
    }
    .savoye-project-items .single-item {
        padding-bottom: 30px;
    }
    .savoye-project-wrap {
        padding: 0;
    }
}


/* ======= Project 2 style ======= */
/* project masonry style */
.project-masonry-wrapper-padding {}
.project-masonry-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 30px;
}
.project-masonry-wrapper .project-masonry-item-img-link {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.project-masonry-wrapper .project-masonry-item-img-link:hover .project-masonry-item-img {
  -webkit-transform: translateY(-40px);
      -ms-transform: translateY(-40px);
          transform: translateY(-40px);
}
.project-masonry-wrapper .project-masonry-item-img-link:hover .project-masonry-item-img:after {
  opacity: 0.3;
}
.project-masonry-wrapper .project-masonry-item-img-link:hover .project-masonry-item-content {
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition-delay: .15s;
       -o-transition-delay: .15s;
          transition-delay: .15s;
}
.project-masonry-wrapper .project-masonry-item-img img {
  max-width: 100%;
	-webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
}
.project-masonry-item-img-link:hover img {
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.project-masonry-wrapper .project-masonry-item-content {
  position: absolute;
  left: 0;
  bottom: -11px;
  max-width: 80%;
  background-color: #fff;
  padding-top: 25px;
  padding-right: 40px;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.5s linear;
  transition: -webkit-transform 0.5s linear;
  -o-transition: transform 0.5s linear;
  transition: transform 0.5s linear;
  transition: transform 0.5s linear, -webkit-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-masonry-wrapper .project-masonry-item-title {
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
    font-size: 24px;
	color: #272727;
}
.project-masonry-wrapper .project-masonry-item-category {
  font-size: 17px;
  line-height: 1.5em;
  color: #555;
}
@media only screen and (max-width: 991px) {
  .project-masonry-wrapper .project-masonry-item-content {
    padding-top: 15px;
    padding-right: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .project-masonry-wrapper {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
  }
  .project .items {
    padding: 12px;
	}
}
@media only screen and (max-width: 400px) {
  .project-masonry-wrapper {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* prev/next project */
.projects-prev-next {
    padding: 40px 0;
    border: none;
    border-top: 1px solid #f6f6f6;
}
@media (max-width: 576px) {
    .projects-prev-next {
        text-align: center;
    }
    .projects-prev-next-left {
        margin-bottom: 10px;
    }
}
.projects-prev-next a {
    display: inline-block;
    font-size: 17px;
    color: #555;
    line-height: 1em;
}
.projects-prev-next a i {
    font-size: 17px;
}
.projects-prev-next a:hover {
    color: #c5a47e;
}
.projects-prev-next .projects-prev-next-left a i {
    margin-right: 5px;
    font-size: 12px;
}
.projects-prev-next .projects-prev-next-right a i {
    font-size: 12px;
    margin-left: 0;
    margin-left: 5px;
}


/* ======= Pricing style ======= */
.price .pricing-tables {
  padding: 0;
}
.price .item {
  padding: 30px;
  background: #f3ece5;
  margin-bottom: 30px;
}
.price .item .type {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.price .item .type img {
  position: absolute;
  bottom: -10px;
  left: -30px;
  width: calc(100% + 60px);
}
.price .item .type h4 {
    font-size: 24px;
    margin-bottom: 0px;
    color: #272727;
}
.price .item .value {
  margin: 30px 0;
}
.price .item .value h3 {
  font-size: 75px;
  color: #272727;
line-height: 1em;
    margin-bottom: 0;
}
.price .item .value h3 span {
  font-size: 17px;
}
.price .item .value .per {
  font-size: 17px;
  color: #272727;
}
.price .item .features {
  text-align: left;
  overflow: hidden;
  padding: 15px 0;
}
.price .item .features ul {
  margin-bottom: 0;
}
.price .item .features li {
  margin-bottom: 10px;
}
.price .item .features li:last-child {
  margin-bottom: 0;
}
.price .item .features li .true {
  color: #c5a47e;
}
.price .item .features li .false {
  color: #c5a47e;
}
.price .item .features i {
  float: right;
  font-size: 11px;
}
.price .item .order {
    margin-top: 30px;
    display: inline-block;
}
.price .item .order .btn {
  -webkit-box-shadow: none;
          box-shadow: none;
    color: #fff;
}
.price .item.active {
  color: #fff;
  position: relative;
  -webkit-transform: scale(1.05, 1.05);
          transform: scale(1.05, 1.05);
  z-index: 2;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
}
.price .item.active:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f3ece5;
  z-index: -1;
  opacity: .95;
}
.price .item.active .value .per {
  color: #272727;
}

.price .item.active .features li {
    color: #272727;
}


/* ================= FAQ / Accordion ================= */

/* ---------- Обертка отдельного блока FAQ ---------- */
.faq-group-block{
  margin-bottom: 50px;
}

.faq-group-block:last-child{
  margin-bottom: 0;
}

/* ---------- Заголовок группы FAQ ---------- */
.faq-group-title{
  margin-bottom: 30px;
}

.faq-group-title h4{
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #272727;
}

.faq-group-title p{
  font-size: 14px;
  line-height: 1.6;
  color: #777;
  margin: 0;
}

/* ---------- Список аккордеона ---------- */
.accordion-box{
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Один пункт аккордеона ---------- */
.accordion-box .block{
  position: relative;
  background: #f3ece5;
  border-radius: 0;
  margin-bottom: 16px;
  overflow: hidden;
  transition: background-color .3s ease, border-color .3s ease;
}

.accordion-box .block:last-child{
  margin-bottom: 0;
}

/* ---------- Активный пункт ---------- */
.accordion-box .block.active-block{
  background-color: #f3ece5;
  border-bottom: 1px solid #c5a47e;
}

/* ---------- Кнопка заголовка ---------- */
.accordion-box .block .acc-btn{
  position: relative;
  display: block;
  cursor: pointer;

  padding: 20px 20px;
  padding-right: 50px;

  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #272727;

  background-color: #f3ece5;
  transition: color .3s ease, background-color .3s ease;
}

/* ---------- Номер слева ---------- */
.accordion-box .block .acc-btn .count{
  color: #c5a47e;
  padding-right: 6px;
}

/* ---------- Иконка справа: плюс ---------- */
.accordion-box .block .acc-btn:before{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

  width: 30px;
  height: 30px;

  font-family: "Themify";
  font-size: 12px;
  font-weight: normal;
  line-height: 30px;
  text-align: center;

  content: "\e61a";
  color: #c5a47e;

  transition: transform .3s ease, color .3s ease, opacity .3s ease;
}

/* ---------- Hover ---------- */
.accordion-box .block .acc-btn:hover{
  background-color: #efe4d7;
}

/* ---------- Активный заголовок ---------- */
.accordion-box .block .acc-btn.active{
  background-color: #f3ece5;
  color: #c5a47e;
}

.accordion-box .block .acc-btn.active .count{
  color: #c5a47e;
}

/* ---------- Иконка в активном состоянии: минус ---------- */
.accordion-box .block .acc-btn.active:before{
  content: "\e622";
  color: #c5a47e;
  transform: translateY(-50%) rotate(180deg);
}

/* ---------- Контент ---------- */
.accordion-box .block .acc-content{
  position: relative;
  display: none;
}

/* ---------- Внутренний блок ---------- */
.accordion-box .block .content{
  position: relative;
  padding: 10px 20px 24px;
  background-color: #f3ece5;
  color: #555;
}

.accordion-box .block .content .text{
  position: relative;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.accordion-box .block .content .text p{
  margin: 0 0 12px;
}

.accordion-box .block .content .text p:last-child{
  margin-bottom: 0;
}

/* ================= Планшет и ниже ================= */
@media (max-width: 991.98px){

  .faq-group-block{
    margin-bottom: 35px;
  }

}

/* ================= Мобильная версия ================= */
@media (max-width: 575.98px){

  .faq-group-block{
    margin-bottom: 30px;
  }

  .faq-group-title{
    margin-bottom: 20px;
  }

  .faq-group-title h4{
    font-size: 20px;
    line-height: 1.3;
  }

  .faq-group-title p{
    font-size: 14px;
    line-height: 1.5;
  }

  .accordion-box{
    margin-top: 6px;
    margin-left: -20px;
    margin-right: -20px;
  }

  .accordion-box .block .acc-btn{
    font-size: 18px;
    line-height: 24px;
    padding: 18px 16px;
    padding-right: 44px;
  }

  .accordion-box .block .acc-btn:before{
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  .accordion-box .block .acc-btn.active:before{
    transform: translateY(-50%) rotate(180deg);
  }

  .accordion-box .block .content{
    padding: 10px 16px 18px;
  }

  .accordion-box .block .content .text,
  .accordion-box .block .content .text p{
    font-size: 17px;
    line-height: 1.7;
  }

}






/* ========================================
   Gallery Masonry — Modern Links Gallery
   fixed card size + full-bleed image (fit to frame) + compact corner text
   + spacing (desktop rows + mobile cards)
   ======================================== */

/* =========================
   SPACING between tiles
   ========================= */

.savoye-photos .portfolio-item-wrapp{ margin-bottom:10px; }

@media (min-width:992px){
  .savoye-photos .portfolio-item-wrapp{ margin-bottom:40px; }
}

@media (max-width:767px){
  .savoye-photos .portfolio-item-wrapp{ margin-bottom:42px; }
}

/* =========================
   WRAPPER inside card
   ========================= */

.gallery-masonry-wrapper{
  width:100%;
  height:100%;
  position:relative;
}

/* =========================
   CARD BASE (fixed size)
   ========================= */

.portfolio-item{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;

  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.06);

  /* фикс микрополосы на радиусах */
  overflow:hidden;
  clip-path: inset(0 round 14px);
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  transform:translateZ(0);

  transition:transform .3s ease,
             box-shadow .3s ease,
             border-color .3s ease;
}

.portfolio-item:hover{
  transform:translateY(-8px) translateZ(0);
  box-shadow:0 18px 46px rgba(0,0,0,.14);
  border-color:rgba(0,0,0,.10);
}

@media (hover:none){
  .portfolio-item:hover{ transform:translateZ(0); }
}

/* =========================
   IMAGE (fit to frame, no distortion)
   ========================= */

.gallery-masonry-item-img-link{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  line-height:0;

  /* чтобы край изображения совпадал с маской карточки */
  border-radius:14px;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

/* ВАЖНО: фото подгоняется под рамку карточки */
.gallery-masonry-item-img-link img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;          /* ← подгоняем под рамку (обрезка без искажений) */
  object-position:center;    /* центрируем кадр */

  transform:translate3d(0,0,0) scale(1);
  will-change:transform;
  backface-visibility:hidden;

  transition:transform .45s ease;
}

.portfolio-item:hover .gallery-masonry-item-img-link img{
  transform:translate3d(0,0,0) scale(1.06);
}

/* overlay */
.gallery-masonry-item-img-link::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.20), rgba(0,0,0,0));
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.portfolio-item:hover .gallery-masonry-item-img-link::after{
  opacity:1;
}

/* =========================
   TEXT BOX
   ========================= */

.gallery-masonry-item-content{
  position:absolute;
  left:0;
  bottom:0;
  z-index:2;

  width:fit-content;
  min-width:140px;
  max-width:55%;

  background:#fff;
  padding:6px 10px 4px 10px;

  border-top-right-radius:14px;

  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:box-shadow .25s ease;
}

.portfolio-item:hover .gallery-masonry-item-content{
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* =========================
   TITLE / CATEGORY
   ========================= */

.gallery-masonry-item-title{
  font-size:18px;
  line-height:1.15;
  color:#1f1f1f;
  margin:0;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  transition:color .2s ease;
}

.portfolio-item:hover .gallery-masonry-item-title{
  color:var(--svc-accent);
}

.gallery-masonry-item-category{
  margin-top:2px;
  font-size:13px;
  line-height:1.2;
  color:#555;

  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================
   Accent line
   ========================= */

.gallery-masonry-item-content::after{
  content:"";
  display:block;
  height:2px;
  width:0;
  background:var(--svc-accent);
  border-radius:2px;
  margin-top:6px;
  transition:width .3s ease;
}

.portfolio-item:hover .gallery-masonry-item-content::after{
  width:100%;
}

/* =========================
   TABLET / MOBILE
   ========================= */

@media (max-width:991px){
  .gallery-masonry-item-title{ font-size:17px; }
  .gallery-masonry-item-content{ max-width:60%; }
}

@media (max-width:767px){
  .gallery-masonry-item-title{ font-size:19px; }
  .gallery-masonry-item-category{ font-size:15px; }

  .gallery-masonry-item-content{
    min-width:150px;
    max-width:75%;
    padding:7px 11px 5px 11px;
  }
}

/* =========================
   Touch
   ========================= */

@media (hover:none){
  .portfolio-item:hover .gallery-masonry-item-img-link img{
    transform:translate3d(0,0,0) scale(1);
  }
  .portfolio-item:hover .gallery-masonry-item-content::after{
    width:0;
  }
}




/* ======= Play video style ======= */
/* play button */
.vid-area {
    padding: 0 0 30px 0;
}
.vid-area h5 {
    font-size: 24px;
    line-height: 1.5em;
    font-weight: 400;
    color: #fff;
}
.play-button {
    position: relative;
    width: 85px;
    height: 85px;
    margin: auto;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    z-index: 4;
    margin-left: 5px;
}
.play-button svg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.circle-fill circle {
    opacity: 1;
    fill: rgba(255, 255, 255, 0.8);
}
.polygon {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 95px;
    font-size: 35px;
    z-index: 2;
    padding-left: 0;
}
.play-button svg.circle-fill {
    z-index: 1;
    stroke-dasharray: 322;
    stroke-dashoffset: 322;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.play-button:hover svg.circle-fill {
    stroke-dashoffset: 38.5;
}
.play-button svg.circle-track {
    z-index: 0;
}
.play-button.color {
    color: #c5a47e;
}
.play-button.color .circle-fill circle {
    fill: #c5a47e;
}
/* video gallery */
.vid-area .vid-icon {
    position: relative;
    overflow: hidden;
}
.vid-area:hover .vid-icon > img {
    transform: scale(1.05);
}
.video-gallery-button {
    position: relative;
    margin: auto;
    z-index: 4;
    margin-left: 15px;
    float: right;
}
.video-gallery-polygon {
    z-index: 2;
    padding-left: 5px;
    display: inline-block;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: #c5a47e;
    border-radius: 50%;
    border: 1px solid #c5a47e;
    color: #fff;
    padding: 15px 14px 15px 16px;
    line-height: 0;
}
.video-gallery-polygon:hover {
    background: #272727;
    border: 1px solid #272727;
}
.video-gallery-polygon i {
    font-size: 20px;
}



/* ======= Clients style ======= */

.clients {
    /* padding: 60px 0; */
}

.clients .clients-wrap {
    border-top: 3px solid #f6f6f6;
    border-left: 3px solid #f6f6f6;
    margin-bottom: 30px;
}

/* Карточка логотипа */
.clients .client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 3px solid #f6f6f6;
    border-bottom: 3px solid #f6f6f6;
    overflow: hidden;
    background: transparent;
    height: 180px;
    padding: 15px;
    transition: background 0.3s ease;
}

/* Картинка внутри */
.clients .client-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease-in-out;
}

/* Hover */
.clients .client-logo:hover {
    background: #f3ece5;
}

.clients .client-logo:hover img {
    transform: scale(1.05);
}

/* ======= Mobile ======= */
@media (max-width: 767px) {
    .clients .client-logo {
        height: 100px;
        padding: 10px;
    }
}


/* =======  Testimonials style  ======= */
.testimonials .item-box {
  background-color: #fff;
  padding: 45px 25px;
  position: relative;
  border: 1px solid #f6f6f6;
}
.testimonials .item-box p {
  font-style: normal;
}
.testimonials[data-overlay-dark] p {
    color: #555;
}
.testimonials .item-box .quote {
    position: absolute;
    right: 30px;
    bottom: 60px;
    width: 90px;
    opacity: 0.1;
}
.testimonials .item-box .info {
  margin-top: 30px;
  overflow: hidden;
}
.testimonials .item-box .info .author-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
.testimonials .item-box .info .cont {
      margin-left: 85px;
    margin-top: 10px;
}
.testimonials .item-box .info .cont h6 {
    color: #272727;
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1em;
}
.testimonials .item-box .info .cont span {
    font-size: 15px;
    color: #c5a47e;
}
.testimonials .owl-stage-outer {
  padding: 15px 0;
}
.testimonials .owl-item {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: .7;
  -webkit-transition: all .3s;
  transition: all .3s;
    border-bottom: 3px solid transparent;
}
.testimonials .owl-item.active.center {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
    border-bottom: 1px solid #c5a47e;
}


/* ======= Homepage Blog style ======= */
.blog .item .post-img .img {
    overflow: hidden;
}
.blog .item .post-img:hover img {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.blog .item .post-img img {
    -webkit-transition: all .5s;
    transition: all .5s;
}
.blog .item .cont {
    position: relative;
    padding: 20px;
    width: 97%;
    margin-left: 0%;
    margin-top: 0px;
    -webkit-transition: all .4s;
    transition: all .4s;
    margin-top: -60px;
    background-color: #fff;
    margin-left: 20px;
    margin-bottom: 20px;
}
.blog .item .info {
    margin-bottom: 0px;
    position: relative;
}
.blog .item .info a {
    color: #555;
    font-size: 15px;
}
.blog .item .info a:last-of-type {
    margin-right: 0;
    color: #555;
}
.blog .item .info a i,
.blog .item .info a span {
    margin-right: 10px;
}
.blog .item .info a span {
    color: #555;
}
.blog .item .info a span:after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    margin-inline-start: 1.364em;
    border-radius: 50em;
    background-color: currentColor;
    vertical-align: middle;
    opacity: .35;
}
.blog .item h4 {
    color: #272727;
    font-size: 24px;
    font-family: 'Khand', sans-serif;
    line-height: 1.4em;
    font-weight: 400;
    margin-bottom: 10px;
}
.blog .item .more {
    color: #555;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px solid #ccc;
}


/* ======= Blog style ======= */
.savoye-blog .img {
    position: relative;
    overflow: hidden;
}
.savoye-blog .img:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.savoye-blog .img img {
    -webkit-transition: all .5s;
    transition: all .5s;
}
.savoye-blog .content {
    width: 100%;
    padding: 30px 45px;
}
.savoye-blog .content .date {
    display: table-cell;
    position: relative;
    width: 80px;
    z-index: 2;
    padding-top: 20px;
}
.savoye-blog .content .date h1 {
    font-size: 75px;
    font-weight: 500;
    color: #c5a47e;
    margin-bottom: 0px;
    line-height: 1em;
}
.savoye-blog .content .date h6 {
    color: #555;
    letter-spacing: 2px;
    font-size: 12px;
    font-family: 'Khand', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    padding-right: 3px;
}
.savoye-blog .content .cont {
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
}
.savoye-blog .content .cont h5 {
    margin: 15px 0;
    font-size: 24px;
    color: #272727;
    font-weight: 400;
    line-height: 1.5em;
}
.savoye-blog .content .cont .more {
    font-size: 17px;
    font-weight: 400;
    color: #555;
    padding-left: 40px;
    position: relative;
}
.savoye-blog .content .cont .more:after {
    content: '';
    width: 30px;
    height: 1px;
    background: #c5a47e;
    position: absolute;
    top: 45%;
    left: 0px;
}
.savoye-blog .content .cont .more:hover {
    color: #c5a47e;
}
.savoye-blog .content .info h6 {
    font-size: 12px;
    letter-spacing: 2px;
    color: #555;
    font-family: 'Khand', sans-serif;
    text-transform: uppercase;
}
.savoye-blog .content .info .tags {
    color: #c5a47e;
}
@media screen and (max-width: 991px) {
    .savoye-blog .content {
        padding: 0 30px;
        margin-top: 40px;
    }
    .savoye-blog .content .cont h4 {
        line-height: 1.25em;
    }
    .order2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
    }
    .order1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }
}
@media screen and (max-width: 480px) {
    .savoye-blog .content {
        padding: 0 15px;
    }
    .savoye-blog .content .date {
        width: 60px;
    }
    .savoye-blog .content .info .tags {
        margin: 5px 0 0;
    }
    .savoye-blog .content .date h3 {
        font-size: 40px;
    }
}


/* =========================
   Blog 2 (без фото слева)
========================= */

/* === ПАРАМЕТРЫ ПОДЪЁМА (меняй при необходимости) === */
:root{
  --lift-mobile: 72px;   /* ↑ подъём на телефонах/планшетах */
  --lift-desktop: 28px;  /* ↑ подъём на ≥ 992px */
}

/* Карточка поста */
.savoye-blog2 .item { margin-bottom: 30px; }

/* ФОТО СЛЕВА ОТКЛЮЧЕНО */
/* ↓↓↓ Чтобы ВКЛЮЧИТЬ обратно, добавьте НИЖЕ переопределение:
   .restore-covers .savoye-blog2 .post-img,
   .restore-covers .savoye-blog2 .post-img a,
   .restore-covers .savoye-blog2 .post-img img{
     display:block !important; width:auto !important; height:auto !important; overflow:visible !important;
   }
   и повесьте класс .restore-covers на обёртку/<body>;
   ЛИБО просто удалите эти 4 строки с display/width/height/overflow. */
.savoye-blog2 .post-img,
.savoye-blog2 .post-img a,
.savoye-blog2 .post-img img{
  display: none !important;   /* ← для включения: display:block !important (см. переопределение выше) */
  width: 0 !important;        /* ← для включения: width:auto !important */
  height: 0 !important;       /* ← для включения: height:auto !important */
  overflow: hidden !important; /* ← для включения: overflow:visible !important */
}

/* Текстовый контейнер поста (если нужны иные отступы — меняй здесь) */
.savoye-blog2 .post-cont{ padding: 0 0 15px 0; }

/* Метка / заголовок / дата */
.savoye-blog2 .post-cont .tag{
  display:block; font-weight:400; font-size:13px; letter-spacing:2px;
  color:#c5a47e; text-transform:uppercase; margin-bottom:5px;
}
.savoye-blog2 .post-cont h5{
  color:#272727; font-size:27px; margin:0 0 15px 0; font-weight:400; text-align:left;
}
.savoye-blog2 .post-cont h5 a{ color:#272727; }
.savoye-blog2 .post-cont .date{
  margin-top:0; font-size:12px; text-align:right; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:5px;
}
.savoye-blog2 .post-cont .date a{ color:#c5a47e; }
.savoye-blog2 .post-cont i{ color:#777; margin:0 10px; font-size:12px; }

/* ЛЕВАЯ КОЛОНКА: выравнивание текста по ширине */
.savoye-blog2 .post-cont p{
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  -moz-text-align-last: left;
  hyphens: auto;
  overflow-wrap: break-word;
  line-height: 1.75;
  margin: 0 0 16px 0;
}

/* Поднимаем первую карточку (слева) */
@media (max-width: 991.98px){
  .savoye-blog2 .item:first-child{ margin-top: calc(-1 * var(--lift-mobile)); }
}
@media (min-width: 992px){
  .savoye-blog2 .item:first-child{ margin-top: calc(-1 * var(--lift-desktop)); }
}

/* =========================
   Sidebar (справа, без миниатюр)
========================= */

.blog-sidebar .widget{
  background:#f3ece5; padding:30px; margin-bottom:30px; overflow:hidden;
}
.blog-sidebar .widget-title{ margin-bottom:20px; }
.blog-sidebar .widget-title h6{
  padding-bottom:5px; border-bottom:1px solid #f6f6f6;
  font-size:27px; line-height:1.5em; color:#272727;
}

/* Общие списки */
.blog-sidebar .widget ul{ margin-bottom:0; padding:0; }
.blog-sidebar .widget ul li{
  margin-bottom:15px; color:#555; font-size:16px; line-height:1.5em;
}
.blog-sidebar .widget ul li:last-child{ margin-bottom:0; }
.blog-sidebar .widget ul li a{ color:#555; text-decoration:none; }
.blog-sidebar .widget ul li a.active,
.blog-sidebar .widget ul li a:hover{ color:#c5a47e; }
.blog-sidebar .widget ul li i{ font-size:9px; margin-right:10px; }

/* recent — БЕЗ КАРТИНОК, текст на всю ширину и по ширине */
.blog-sidebar .widget .recent li{ display:block; overflow:visible; }
.blog-sidebar .widget .recent .thum{
  display:none !important; width:0 !important; height:0 !important;
  float:none !important; overflow:hidden !important;
}
.blog-sidebar .widget .recent a{
  display:block; margin-left:0 !important; width:100%;
  white-space:normal; overflow-wrap:break-word; hyphens:auto; line-height:1.7;
  text-align: justify; text-justify: inter-word; text-align-last: left; -moz-text-align-last: left;
}

/* Поднимаем первый виджет (справа) */
@media (max-width: 991.98px){
  .blog-sidebar .widget:first-child{ margin-top: calc(-1 * var(--lift-mobile)); }
}
@media (min-width: 992px){
  .blog-sidebar .widget:first-child{ margin-top: calc(-1 * var(--lift-desktop)); }
}

/* =========================
   Pagination (как было)
========================= */
.savoye-pagination-wrap{ padding:0; text-align:center; }
.savoye-pagination-wrap li{ display:inline-block; margin:0 5px; }
.savoye-pagination-wrap li a{
  background:transparent; display:inline-block; width:40px; height:40px;
  line-height:38px; text-align:center; color:#555; font-weight:400;
  border:1px solid #f6f6f6; font-size:17px;
}
.savoye-pagination-wrap li a i{ font-size:11px; }
.savoye-pagination-wrap li a:hover{
  opacity:1; text-decoration:none; background:transparent;
  border:1px solid #c5a47e; color:#c5a47e;
}
.savoye-pagination-wrap li a.active{
  background-color:transparent; border:1px solid #c5a47e; color:#c5a47e;
}

/* === (опционально) Готовый сниппет для быстрого включения фото обратно.
      Просто СНИМИТЕ комментарий и добавьте класс .restore-covers на <body> или обёртку. ===
.restore-covers .savoye-blog2 .post-img,
.restore-covers .savoye-blog2 .post-img a,
.restore-covers .savoye-blog2 .post-img img{
  display:block !important; width:auto !important; height:auto !important; overflow:visible !important;
}
*/






/* pagination */
.savoye-pagination-wrap {
    padding: 0;
    text-align: center;
}
.savoye-pagination-wrap li {
    display: inline-block;
    margin: 0 5px;
}
.savoye-pagination-wrap li a {
    background: transparent;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    color: #555;
    font-weight: 400;
    border: 1px solid #f6f6f6;
    font-size: 17px;
}
.savoye-pagination-wrap li a i {
    font-size: 11px;
}
.savoye-pagination-wrap li a:hover {
    opacity: 1;
    text-decoration: none;
    background: transparent;
    border: 1px solid #c5a47e;
    color: #c5a47e;
}
.savoye-pagination-wrap li a.active {
    background-color: transparent;
    border: 1px solid #c5a47e;
    color: #c5a47e;
}
@media screen and (max-width: 768px) {
    .savoye-pagination-wrap {
        padding: 0;
        margin: 0;
        text-align: center;
    }
}


/* ======= Post style ======= */
.savoye-post-section {
    padding-top: 120px;
}
.savoye-comment-section {
    padding-top: 60px;
    margin-bottom: 0px;
}
.savoye-comment-section h6 {
    font-size: 24px;
    color: #272727;
    font-weight: 400;
}
.savoye-comment-section h6 span {
    font-size: 14px;
    color: #555;
    font-weight: 400;
    margin-left: 15px;
}
.savoye-post-comment-wrap {
    display: flex;
    margin-bottom: 60px;
}
.savoye-user-comment {
    margin-right: 30px;
    flex: 0 0 auto;
}
.savoye-user-comment img {
    border-radius: 100%;
    width: 100px;
}
.savoye-user-content {
    margin-right: 26px;
}
.savoye-repay {
    font-size: 15px;
    color: #c5a47e;
    margin: 0;
    font-weight: 400;
}
/* prev/next post */
.savoye-post-prev-next {
    padding: 40px 0;
    border: none;
    border-top: 1px solid #f6f6f6;
}
@media (max-width: 576px) {
    .savoye-post-prev-next {
        text-align: center;
    }
    .savoye-post-prev-next-left {
        margin-bottom: 10px;
    }
}
.savoye-post-prev-next a {
    display: inline-block;
    font-size: 17px;
    color: #555;
    line-height: 1em;
}
.savoye-post-prev-next a i {
    font-size: 20px;
}
.savoye-post-prev-next a:hover {
    color: #c5a47e;
}
.savoye-post-prev-next .savoye-post-prev-next-left a i {
    margin-right: 5px;
    font-size: 12px;
}
.savoye-post-prev-next .savoye-post-prev-next-right a i {
    font-size: 12px;
    margin-left: 0;
    margin-left: 5px;
}


/* ======= Contact style ======= */
.contact h5 {
    color: #272727;
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.contact p {
    margin-bottom: 15px;
}

/* ======= Yandex form ======= */
.ya-form-wrap {
    position: relative;
    width: 100%;
    height: 760px;
    overflow: hidden;
    background: transparent;
}

.ya-form-frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 760px;
    border: 0;
    background: transparent;
}

/* Маска кладется НЕ в самый низ контейнера,
   а на ту высоту, где у тебя видна строка Яндекса */
.ya-form-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 438px;
    height: 62px;
    background: #f3f3f3;
    pointer-events: none;
    z-index: 5;
}

/* ======= Button style ======= */
.btn {
    padding: 12px 24px 9px 24px;
    position: relative;
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 0;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

.trsp-btn {
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
}

.trsp-btn:before,
.flat-btn:before {
    background: #fff;
}

.flat-btn {
    color: #fff;
    background: #c5a47e;
}

a.flat-btn {
    color: #fff;
}

.float-btn {
    float: left;
}

.btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px;
    height: 1px;
    width: 0;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

.btn:hover:before {
    width: 30px;
}

.btn:hover {
    padding-left: 60px;
}

/* ======= Button line ======= */
.btn-line {
    position: relative;
    line-height: 1em;
}

.btn-line a {
    display: inline-block;
    background: transparent;
    border: none;
    border-bottom: 1px solid #888;
    color: #555;
    padding: 5px 0;
    margin: 0;
    font-weight: 400;
    font-size: 17px;
    position: relative;
}

.btn-line a:hover {
    color: #c5a47e;
    border-bottom: 1px solid transparent;
}

.btn-line a:last-child {
    margin-right: 0;
}

/* ======= Mobile-only ======= */
.mobile-only {
    display: none !important;
}

@media (max-width: 991px) {
    .ya-form-wrap,
    .ya-form-frame {
        height: 860px;
    }

    .ya-form-mask {
        top: 520px;
        height: 68px;
    }
}

@media (max-width: 768px) {
    .mobile-only {
        display: inline-flex !important;
    }

    .ya-form-wrap,
    .ya-form-frame {
        height: 980px;
    }

    .ya-form-mask {
        top: 610px;
        height: 72px;
    }
}


/* ======= Footer style ======= */
.main-footer {
    padding: 0;
}
.main-footer.dark {
    position: relative;
    background: #fff;
    color: #555;
}
.main-footer p,
.main-footer .abot p {
    color: #555;
}
.main-footer .abot .logo img {
    width: 150px;
    height: 45px;
    width: auto;
    display: block;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.main-footer .abot .social-icon {
    margin-top: 20px;
}
.main-footer .abot .social-icon a {
    font-size: 17px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.7);
}
.main-footer .abot .social-icon a:hover {
    color: #c5a47e;
}
.main-footer .usful-links ul {
    margin: 0;
    padding: 0;
}
.main-footer .usful-links ul li {
    margin-bottom: 5px;
}
.main-footer .usful-links ul li:hover {
    color: #fff;
}
.main-footer .usful-links ul li i {
    font-size: 7px;
    color: #fff;
    margin-right: 3px;
}
.main-footer .usful-links ul li a {
    color: rgba(255, 255, 255, 0.7);
}
.main-footer .usful-links ul li a:hover {
    color: #c5a47e;
}
.main-footer .fothead h6 {
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 500;
}
.main-footer .fotcont .fothead h6 {
    position: relative;
}
.main-footer .fotcont p {
    margin-bottom: 0px;
    color: rgba(255, 255, 255, 0.7);
}
.main-footer .sub-footer {
    padding: 20px 0;
    border-top: 1px solid #f6f6f6;
}
.main-footer .sub-footer p {
    font-size: 15px;
    color: #555;
    margin-bottom: 0;
}
.main-footer .sub-footer p a {
    color: color: rgba(255, 255, 255, 0.7);
}
.main-footer .sub-footer p a:hover {
    color: #c5a47e;
}
.main-footer .sub-footer p span {
    color: rgba(255, 255, 255, 0.1);
    padding: 0 10px;
}
.main-footer .logo h2 {
    font-weight: normal;
    font-size: 30px;
    color: #fff;
    line-height: 1.25em;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.main-footer .logo span {
    display: block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 9px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    line-height: 1.25em;
}
.main-footer .sub-footer .text-right-left {
    text-align: right !important;
}


/* ======= toTop Button style ======= */
.progress-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.progress-wrap::after {
    position: absolute;
    font-family: 'themify';
    content: '\e648';
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    font-weight: 400;
    color: #c5a47e;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap svg path {
    fill: none;
}
.progress-wrap svg.progress-circle path {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap {
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.progress-wrap::after {
    color: #c5a47e;
}
.progress-wrap svg.progress-circle path {
    stroke: #c5a47e;
}


/* ======= Coming Soon style ======= */
.comming {
    min-height: 100vh;
    height: auto;
    position: relative;
    background-blend-mode: overlay;
    background: rgba(27, 27, 27, .6);
    background-image: url("../img/slider/2.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
}
@media (max-width: 767px) {
    .comming {
        min-height: 200vh;
    }
}
.comming .item {
    background-color: rgba(27, 27, 27, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 15px;
    margin-bottom: 30px;
}
.comming h6 {
    color: #c5a47e;
    font-size: 17px;
    font-family: 'Khand', sans-serif;
    text-transform: uppercase;
    margin-bottom: 0px;
    letter-spacing: 4px;
    font-weight: 400;
}
.comming h3 {
    font-size: 75px;
    font-weight: 500;
    line-height: 1.25em;
    font-family: 'Khand', sans-serif;
    color: #fff;
    position: relative;
    margin-bottom: 0px;
}
.comming h1 {
    font-size: 75px;
    line-height: 1em;
    font-weight: 500;
    font-family: 'Khand', sans-serif;
    color: #fff;
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.comming p {
    color: #fff;
    font-size: 17px;
}
/* coming form */
.comming form {
    margin-top: 30px;
    position: relative;
}
.comming form input {
    width: 100%;
    padding: 13px 50px 15px 11px;
    background-color: transparent;
    border: 1px solid #c5a47e;
    border-radius: 0px;
    color: #fff;
    margin-bottom: 15px;
    outline: none;
}
.comming form button {
    background-color: #c5a47e;
    padding: 10px 20px 6px 20px;
    border-radius: 0px;
    color: #fff;
    border: 0;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    font-family: 'Khand', sans-serif;
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400
    outline: none;
}
.comming form button:hover {
    background-color: #c5a47e;
    color: #fff;
    outline: none;
}

.comming form input::placeholder {
   color: #fff; 
}

/* go home */
.go-back {
    margin-top: 45px;
}
.go-back a {
    color: #fff;
    display: inline-block;
    font-size: 17px;
    font-family: 'Khand', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.go-back a:hover {
    color: #c5a47e;
}
.go-back a span {
    transition: all .5s;
}
.go-back a span i {
    color: #fff;
    font-size: 14px;
}
.go-back a:hover span {
    padding-right: 15px;
}


/* ======= Responsive style ======= */
@media screen and (max-width: 991px) {
    .bg-fixed {
        background-attachment: scroll !important;
    }
    .header {
        background-attachment: scroll !important;
        background-position: 50% 0% !important;
    }
    .header .caption h1 {
        font-size: 70px;
    }
    .slider-services-box .slider-services-box-info {
    padding: 10px;
}
    .slider-box-content.box-up {
            margin-top: 0px;
    }
    .slider-services-box-info h5 {
    font-size: 15px;
}  
}
@media screen and (max-width: 767px) {
    .header .caption h1 {
       font-size: 70px;
    margin-bottom: 15px;
    line-height: 1em;
    }
    .header .caption h1 span {
        font-size: 50px;
    }
    .parallax-header .caption h2 {
        margin-bottom: 0px;
        font-size: 70px;
        line-height: 1em;
    }
    .header .caption h6 {
        font-size: 15px;
    }
    .about .about-img .img {
        padding: 0 0px 20px 0px;
        position: relative;
    }
    .about-img .about-img-2 {
        width: 40% !important;
        position: absolute;
        bottom: 0px;
        right: 15px;
        z-index: 3;
        padding: 15px;
    }
    .header .caption p {
        font-size: 17px;
        margin-right: 10px;
    }
    .header .caption .btn {
        margin-top: 30px;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }
    .project-texts {
        padding: 20px
    }
    .savoye-comment-section h3 span {
        margin-left: 0px;
    }
    .main-footer .sub-footer p.right {
        text-align: left;
    }
    .main-footer .abot .social-icon {
        text-align: left;
        margin-bottom: 15px;
    }
    .main-footer .sub-footer .text-right-left {
    text-align: left!important;
    }
    .footer .logo {
        padding: 0;
        width: auto;
        margin: 0px 0;
    }
}
@media screen and (max-width: 480px) {
    .footer {
        padding: 60px 0;
    }
    .text-left {
        text-align: center;
    }
    .text-center {
        text-align: center;
    }
    .text-right {
        text-align: center;
    }
}


/* ======= Overlay Effect Bg image style ======= */
[data-overlay-dark],
[data-overlay-darkgray],
[data-overlay-light]{
    position:relative;
}

/* Контент всегда выше overlay */
[data-overlay-dark] .container,
[data-overlay-darkgray] .container,
[data-overlay-light] .container{
    position:relative;
    z-index:2;
}

/* Сам overlay */
[data-overlay-dark]::before,
[data-overlay-darkgray]::before,
[data-overlay-light]::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none; /* КЛЮЧ */
}

/* Цвета overlay */
[data-overlay-dark]::before{background:#000;}
[data-overlay-darkgray]::before{background:#272727;}
[data-overlay-light]::before{background:#fff;}

/* Цвет текста */
[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span,
[data-overlay-dark] p{
    color:#fff;
}

[data-overlay-darkgray] h1,
[data-overlay-darkgray] h2,
[data-overlay-darkgray] h3,
[data-overlay-darkgray] h4,
[data-overlay-darkgray] h5,
[data-overlay-darkgray] h6,
[data-overlay-darkgray] span{
    color:#fff;
}

[data-overlay-darkgray] p{color:rgba(255,255,255,.7);}

[data-overlay-light] h1,
[data-overlay-light] h2,
[data-overlay-light] h3,
[data-overlay-light] h4,
[data-overlay-light] h5,
[data-overlay-light] h6,
[data-overlay-light] span{
    color:#272727;
}

[data-overlay-light] p{color:#555;}

/* Управление прозрачностью через атрибут */
[data-overlay-dark="0"]::before,
[data-overlay-darkgray="0"]::before,
[data-overlay-light="0"]::before{opacity:0;}

[data-overlay-dark="1"]::before,
[data-overlay-darkgray="1"]::before,
[data-overlay-light="1"]::before{opacity:.1;}

[data-overlay-dark="2"]::before,
[data-overlay-darkgray="2"]::before,
[data-overlay-light="2"]::before{opacity:.2;}

[data-overlay-dark="3"]::before,
[data-overlay-darkgray="3"]::before,
[data-overlay-light="3"]::before{opacity:.3;}

[data-overlay-dark="4"]::before,
[data-overlay-darkgray="4"]::before,
[data-overlay-light="4"]::before{opacity:.4;}

[data-overlay-dark="5"]::before,
[data-overlay-darkgray="5"]::before,
[data-overlay-light="5"]::before{opacity:.5;}

[data-overlay-dark="6"]::before,
[data-overlay-darkgray="6"]::before,
[data-overlay-light="6"]::before{opacity:.6;}

[data-overlay-dark="7"]::before,
[data-overlay-darkgray="7"]::before,
[data-overlay-light="7"]::before{opacity:.7;}

[data-overlay-dark="8"]::before,
[data-overlay-darkgray="8"]::before,
[data-overlay-light="8"]::before{opacity:.8;}

[data-overlay-dark="9"]::before,
[data-overlay-darkgray="9"]::before,
[data-overlay-light="9"]::before{opacity:.9;}

[data-overlay-dark="10"]::before,
[data-overlay-darkgray="10"]::before,
[data-overlay-light="10"]::before{opacity:1;}



/* === Всплывающее окно (Колонка) === */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7); /* ?Отступ сверхуКолонка? ??? */
  backdrop-filter: blur(10px); /* Колонка? ??? */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  z-index: 10000;
}

.popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Popup window */
.popup {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 30px 40px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  font-family: 'PT Sans Narrow', sans-serif;
  color: #333;
  text-align: center;
  animation: fadeInUp 0.5s ease forwards;
}

/* ??Всплывающее окно (Колонка ??? popup) */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 2000;
}

.popup h2 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 28px;
  letter-spacing: 0.03em;
}

.popup p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 25px;
  color: #555;
}

.popup button {
  background: #c5a47e;
  border: none;
  padding: 12px 26px;
  font-size: 17px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.3s ease;
  letter-spacing: 0.05em;
}

.popup button:hover {
  background: #a8865e;
}

@keyframes fadeInUp {
  from {
    transform: translateY(25px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.popup-overlay.show {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}


/* === ?Отступ сверхуКнопка (About table) === */
.table-wrapper {
  margin-top: 20px;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  overflow-x: auto;
}

.employee-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.employee-table thead {
  background-color: #403F80; /* ????Черный цвет? */
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.employee-table th,
.employee-table td {
  padding: 14px 20px;
  text-align: left;
}

.employee-table tbody tr {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.employee-table tbody tr:nth-child(even) {
  background-color: #e0edff; /* Колонка ??? ??? Черный цвет? */
}

.employee-table tbody tr:hover {
  background-color: #c1ddff; /* ??Белый фон для секции??? */
  transform: scale(1.01);
  cursor: pointer;
}


/* === ?Отступ сверху?? (Facebook + Telegram) === */

/* Кнопка Колонка? */
.news-widgets .widget-card {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  transition: transform .4s ease, box-shadow .4s ease, border-color .2s ease;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Кнопка   ??? ? .services .item */
.news-widgets .widget-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.15),
              0 8px 12px rgba(0,0,0,.1);
}

/* ???? Колонка???? ?? Кнопка меню-бургер */
.news-widgets .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Facebook: Кнопка + Всплывающее окно?? */
.fb-col .widget-card .fb-page,
.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
  width: 100% !important;
  max-width: 500px !important; /* ????Отступ сверху??? ?? Колонка? */
  border: none !important;
  margin: 0 auto !important;
  display: block !important;
  background: transparent !important;
}

/* Telegram: Кнопка + Всплывающее окно?? */
.telegram-col .widget-card .telegram-container,
.telegram-col .widget-card iframe,
.telegram-col .widget-card script {
  width: 100% !important;
  max-width: 500px !important;
  border: none !important;
  margin: 0 auto !important;
  display: block;
  background: transparent !important;
}

/* FB: центрируем внутри широкой карточки */
#fb-card{
  display:flex;
  justify-content:center;
}

#fb-iframe{
  width:100%;
  max-width:500px; /* лимит Facebook */
  display:block;
  border:0;
}

/* Колонка?? */
@media (max-width: 768px) {
  .telegram-col, .fb-col {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
  }
  .telegram-col .widget-card,
  .fb-col .widget-card {
    border-radius: 18px;
    height: auto;
  }
  .fb-col .widget-card .fb-page,
  .telegram-col .widget-card iframe {
    max-width: 100% !important; /* ?? Кнопка меню-бургер   ?? ??? Кнопка меню-бургер */
  }
}


/* ???Отступ сверху? Кнопка меню-бургер ? Кнопка Колонка? */
.news-widgets.section-padding {
  padding-top: 30px !important;   /* ???? ~90px */
  padding-bottom: 60px;           /* ?Отступ сверху? Кнопка */
}

/* ??? ???Отступ сверху ??? Кнопка меню-бургер */
@media (max-width: 768px) {
  .news-widgets.section-padding {
    padding-top: 20px !important;
    padding-bottom: 40px;
  }
}


/* ======= ??Отступ сверху??? (offcanvas) ======= */
body.offcanvas #savoye-aside {
    transform: translateX(0); /* ??Черный цвет */
}

body.offcanvas #savoye-main {
    transform: translateX(270px); /* ??Отступ сверху? */
}

/* ======= ???Отступ сверхуКнопка ======= */
@media screen and (max-width: 768px) {
    #savoye-main {
        width: 100%;
        float: none;
    }
}


/* Соцсети: жёстко наследуем цвет для шрифтовых иконок */
#savoye-aside .savoye-footer .social a {
  color: #3E438A !important;       /* базовый цвет глифа */
}

#savoye-aside .savoye-footer .social a i,
#savoye-aside .savoye-footer .social a i::before {
  color: currentColor !important;   /* иконка берёт цвет ссылки */
}

/* Инверсия на ховере (фон -> #3E438A, глиф -> белый) */
#savoye-aside .savoye-footer .social a:hover {
  background-color: #3E438A;
  border-color: #3E438A;
  color: #fff !important;
}

#savoye-aside .savoye-footer .social a:hover i,
#savoye-aside .savoye-footer .social a:hover i::before {
  color: currentColor !important;   /* оставляем наследование и на ховере */
}




/* 40. Pop-up window style
   ======================== */

/* Триггер попапа в тексте */
#savoye-main .mtc-popup-trigger {
  cursor: pointer;
  color: #0183c2;

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: transparent;   /* линия скрыта по умолчанию */
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;

  transition: text-decoration-color .22s ease-out, color .18s ease-out;
}

#savoye-main .mtc-popup-trigger:hover {
  color: #0183c2;
  text-decoration-color: currentColor;
}

/* ===== Оверлей попапа (фон, затемнение) ===== */

#mtcServicePopup {
  position: fixed;
  inset: 0;                          /* top:0; right:0; bottom:0; left:0 */
  z-index: 9999;

  display: flex;
  align-items: center;               /* окно по центру по вертикали */
  justify-content: center;           /* и по горизонтали */

  padding: 24px 16px;                /* отступы от краёв экрана (десктоп) */
  background: rgba(0, 0, 0, 0.35);

  /* сам оверлей не скроллится, скролл только внутри окна */
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease;
}

/* состояние "открыто" */
#mtcServicePopup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===== Белое окно (карточка) ===== */

#mtcServicePopup .popup {
  width: 100%;
  max-width: 640px;

  /* окно не выше экрана, внутри него — вертикальный flex */
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;

  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  position: relative;
}

/* Заголовок окна */

#mtcPopupTitle {
  margin: 0;
  padding: 22px 24px 10px 24px;
  text-align: center;

  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 400;
  color: #272727;
}

/* Тело окна (прокручиваемый текст) */

#mtcPopupBody {
  padding: 6px 24px 10px 24px;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  line-height: 1.75em;
  color: #555;

  /* ключ: именно тело скроллится */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#mtcPopupBody p {
  margin-bottom: 14px;
  text-align: justify;
  text-justify: inter-word;
}

#mtcPopupBody p:last-child {
  margin-bottom: 0;
}

/* Ссылки внутри попапа — как в основном тексте */

#mtcPopupBody a[href]:not([style*="underline"]) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color .22s ease-out, color .18s ease-out;
}

#mtcPopupBody a[href]:not([style*="underline"]):hover {
  text-decoration-color: currentColor;
}

/* Цветные фрагменты внутри попапа */

#mtcPopupBody span[style*="color"] b,
#mtcPopupBody span[style*="color"] strong,
#mtcPopupBody span[style*="color"] a {
  color: inherit !important;
}

/* ===== Кнопка закрытия — внизу, стиль как у .popup button ===== */

button[data-mtc-popup-close] {
  /* расположение внизу по центру */
  margin: 12px auto 18px auto;
  align-self: center;
  position: static;
  display: inline-block;

  /* визуальный стиль */
  background: #c5a47e;
  border: none;
  padding: 12px 26px;
  font-size: 17px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-family: 'PT Sans Narrow', sans-serif;
  line-height: 1.2;
  transition: background-color 0.3s ease;
}

button[data-mtc-popup-close]:hover {
  background: #a8865e;
  color: #fff;
}

/* ===== Адаптация на мобильных ===== */

@media (max-width: 575.98px) {
  /* минимальные внешние отступы от краёв экрана */
  #mtcServicePopup {
    padding: 2px 0;                 /* окно практически во всю ширину */
    align-items: flex-start;
  }

  #mtcServicePopup .popup {
    border-radius: 12px;
    max-height: calc(100vh - 4px);
  }

  /* минимальные внутренние поля у заголовка и текста */
  #mtcPopupTitle {
    padding: 8px 2px 4px 2px;
    font-size: 24px;
  }

  #mtcPopupBody {
    padding: 3px 2px 5px 2px;
    font-size: 17px;
  }

  button[data-mtc-popup-close] {
    margin: 8px auto 10px auto;
    font-size: 16px;
    padding: 10px 22px;
  }
}

/* источник контента модалки */
.mtc-popup-source {
  display: none;
}

/* уважение к reduce-motion */
@media (prefers-reduced-motion: reduce) {
  #mtcServicePopup {
    transition: none;
  }
}

/* =========================================================
   Banner Header — DEFAULT CENTER (all pages)
========================================================= */
.banner-header .caption{
    text-align: center;
}

.banner-header h1,
.banner-header .caption h1,
.banner-header h4,
.banner-header h5,
.banner-header h6,
.banner-header p{
    text-align: center;
}

/* =========================================================
   MAIN PAGE ONLY — LEFT ALIGN (main.php)
   Работает ТОЛЬКО при наличии .main-page в HTML
========================================================= */
.main-page .banner-header .caption{
    text-align: left;
}

.main-page .banner-header .o-hidden{
    display: block;
    width: 100%;
    text-align: left;
}

.main-page .banner-header h1,
.main-page .banner-header .caption h1,
.main-page .banner-header h4,
.main-page .banner-header h5,
.main-page .banner-header h6,
.main-page .banner-header p{
    text-align: left;
}

/* Кнопка на главной — без float */
.main-page .banner-header .float-btn{
    float: none;
    display: inline-block;
}


/* ===============================
   Маркеры UL и нумерация OL
   ТОЛЬКО в контенте CouchCMS
   =============================== */

/* Общие настройки списков в контенте (чтобы меню не затронуть) */
.accordion-box .acc-content .content .text ol,
.accordion-box .acc-content .content .text ul,
.section-padding .container .col-md-12 ol,
.section-padding .container .col-md-12 ul {
  list-style-position: outside;
  margin: 0 0 1em 1.5em; /* увеличен отступ слева */
  padding: 0;
}

/* Типы маркеров */
.accordion-box .acc-content .content .text ol,
.section-padding .container .col-md-12 ol {
  list-style-type: decimal;
}

.accordion-box .acc-content .content .text ul,
.section-padding .container .col-md-12 ul {
  list-style-type: disc;
}

/* Возвращаем маркеры темам, которые сбрасывают list-style у li */
.accordion-box .acc-content .content .text ol > li,
.accordion-box .acc-content .content .text ul > li,
.section-padding .container .col-md-12 ol > li,
.section-padding .container .col-md-12 ul > li {
  list-style: inherit;
  padding-left: 0.3em; /* больше расстояние между маркером и текстом */
}

/* На случай, если маркеры убиты через ::marker */
.accordion-box .acc-content .content .text li::marker,
.section-padding .container .col-md-12 li::marker {
  color: inherit;
}

/* ==================================================
   ERROR 404 — FINAL (single source of truth)
   вставить В КОНЕЦ style.css
================================================== */

/* overlay не должен мешать hover */
[data-overlay-dark]::before,
[data-overlay-darkgray]::before,
[data-overlay-light]::before{
  pointer-events:none;
}

/* ===== wrapper ===== */
#savoye-main .error-wrapper{
  position:relative;
  z-index:10;
  color:#fff;
}

/* ===== 404 text ===== */
#savoye-main .error-wrapper .error-block{
  display:inline-flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  color:#fff;
}
#savoye-main .error-wrapper .error-code{font-size:120px;font-weight:300}
#savoye-main .error-wrapper .error-divider{width:3px;height:120px;background:#fff}
#savoye-main .error-wrapper .error-text{font-size:24px;line-height:1.6;text-align:left}

/* ===== buttons row ===== */
#savoye-main .error-wrapper .error-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  margin-top:32px;
  flex-wrap:wrap;
}

/* reset link styles */
#savoye-main .error-wrapper a.error-btn,
#savoye-main .error-wrapper a.error-btn:link,
#savoye-main .error-wrapper a.error-btn:visited,
#savoye-main .error-wrapper a.error-btn:hover,
#savoye-main .error-wrapper a.error-btn:focus,
#savoye-main .error-wrapper a.error-btn:active{
  color:#fff !important;
  text-decoration:none !important;
  background-image:none !important;
  border-bottom:0 !important;
}

/* button base (transparent) */
#savoye-main .error-wrapper .error-buttons a.error-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:14px 34px !important;
  border:2px solid rgba(255,255,255,.95) !important;
  border-radius:14px !important;

  background:transparent !important;

  /* базовая тень статичная (НЕ анимируем) */
  box-shadow:0 6px 14px rgba(0,0,0,.22) !important;

  position:relative !important;
  overflow:visible !important;

  transform:translate3d(0,0,0) !important;
  will-change:transform !important;
  transition:transform .4s ease !important; /* только transform */
}

/* contour glow via opacity only — усилено */
#savoye-main .error-wrapper .error-buttons a.error-btn::before{
  content:"" !important;
  position:absolute !important;
  inset:-4px !important;              /* чуть шире зона свечения */
  border-radius:inherit !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.40) inset,  /* внутренняя чёткая линия */
    0 0 26px rgba(255,255,255,.55),         /* ближний яркий ореол */
    0 0 50px rgba(255,255,255,.35),         /* средний */
    0 0 80px rgba(255,255,255,.20) !important;  /* внешний мягкий */

  opacity:0 !important;
  transition:opacity .35s ease !important;
  pointer-events:none !important;
}

/* hover-buffer (prevents flicker) */
#savoye-main .error-wrapper .error-buttons a.error-btn::after{
  content:"" !important;
  position:absolute !important;
  inset:-18px !important;
  background:transparent !important;
  z-index:0 !important;
}
#savoye-main .error-wrapper .error-buttons a.error-btn > *{
  position:relative !important;
  z-index:1 !important;
}

/* hover like services tiles */
#savoye-main .error-wrapper .error-buttons a.error-btn:hover{
  transform:translateY(-10px) !important;
}
#savoye-main .error-wrapper .error-buttons a.error-btn:hover::before{
  opacity:1 !important;
}

/* active */
#savoye-main .error-wrapper .error-buttons a.error-btn:active{
  transform:translateY(-5px) !important;
}

/* ===== responsive ===== */
@media (max-width:768px){
  #savoye-main .error-wrapper .error-code{font-size:80px}
  #savoye-main .error-wrapper .error-divider{height:80px}
  #savoye-main .error-wrapper .error-text{font-size:20px}
}
@media (max-width:480px){
  #savoye-main .error-wrapper .error-block{flex-direction:column;gap:10px}
  #savoye-main .error-wrapper .error-divider{width:60px;height:3px}
  #savoye-main .error-wrapper .error-code{font-size:60px}
  #savoye-main .error-wrapper .error-text{font-size:18px;text-align:center}
  #savoye-main .error-wrapper .error-buttons{gap:12px}
}

/* 42. ===== Trade block ===== */
/* =========================
   TRADE BLOCK: ОБЩАЯ СЕКЦИЯ
========================= */

.trade-section{
    padding-top: 0; /* верхний отступ секции */
}

.trade-section .container{
    max-width: 1380px; /* максимальная ширина всего блока */
}

.trade-block{
    width: 100%; /* ширина всего блока */
    background: #fff; /* фон блока */
    border: 1px solid rgba(197,164,126,.20); /* рамка блока */
    box-shadow: 0 10px 30px rgba(0,0,0,.05); /* тень блока */
}


/* =========================
   ШАПКА БЛОКА
========================= */

.trade-block-head{
    padding: 42px 42px 24px 42px; /* внутренние отступы шапки */
    border-bottom: 1px solid #f1e7db; /* нижняя линия */
}

.trade-block-title{
    margin: 0 0 12px 0; /* отступ снизу */
    font-size: 34px; /* размер главного заголовка */
    line-height: 1.2; /* межстрочный интервал заголовка */
    color: #272727; /* цвет заголовка */
}

.trade-block-subtitle{
    margin: 0;
    color: #666; /* цвет подзаголовка */
    line-height: 1.8; /* межстрочный интервал */
    max-width: 900px; /* максимальная ширина текста */
}


/* =========================
   КНОПКИ ПЕРЕКЛЮЧЕНИЯ
========================= */

.trade-toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* расстояние между кнопками */
    padding: 24px 42px 0 42px; /* отступы вокруг кнопок */
}

.trade-btn{
    min-width: 150px; /* минимальная ширина кнопки */
    position: relative;
    font-size: 15px; /* размер текста кнопки */
    line-height: 1.2;
    padding: 14px 20px; /* внутренние отступы кнопки */
    background: #fff; /* фон кнопки */
    border: 1px solid #d8c3a8; /* рамка кнопки */
    color: #272727; /* цвет текста */
    transition: all .25s ease; /* плавность эффектов */
    cursor: pointer;
    text-align: center;
}

.trade-btn:hover,
.trade-btn.active{
    background: #c5a47e; /* фон активной кнопки */
    border-color: #c5a47e; /* рамка активной кнопки */
    color: #fff; /* цвет текста активной кнопки */
}


/* =========================
   СЕТКА ДВУХ КОЛОНОК
========================= */

.trade-grid{
    display: grid;
    grid-template-columns: 1.7fr 0.9fr; /* ширина левой и правой колонок */
    gap: 24px; /* расстояние между колонками */
    padding: 20px 42px 42px 42px; /* внутренние отступы сетки */
    align-items: stretch; /* правая колонка тянется до низа левой */
}

.trade-left{
    display: flex;
    flex-direction: column;
    gap: 16px; /* расстояние между плитками и таблицей */
    min-width: 0;
}

.trade-right{
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%; /* правая колонка на высоту левой */
}


/* =========================
   ПЛИТКИ СО СТАТИСТИКОЙ
========================= */

.trade-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 плитки в ряд */
    gap: 12px; /* расстояние между плитками */
    padding: 0; /* без внешних внутренних отступов */
}

.trade-stat{
    border: 1px solid #eee3d6; /* рамка плитки */
    background: #fffdfa; /* фон плитки */
    padding: 16px 18px; /* внутренние отступы плитки */
    min-height: 96px; /* минимальная высота плитки */
}

.trade-stat-label{
    font-size: 12px; /* размер подписи в плитке */
    line-height: 1.5;
    color: #777; /* цвет подписи */
    text-transform: uppercase;
    margin-bottom: 8px; /* расстояние до значения */
}

.trade-stat-value{
    font-size: 26px; /* размер значения в плитке */
    line-height: 1.2;
    color: #272727; /* цвет значения */
    font-weight: 500; /* делает EN визуально плотнее и ближе к RU */
    word-break: break-word; /* перенос длинного текста */
}


/* =========================
   КАРТОЧКИ ТАБЛИЦЫ И ГРАФИКА
========================= */

.trade-card{
    background: #fffdfa; /* фон карточки */
    border: 1px solid #eee3d6; /* рамка карточки */
    min-width: 0;
    overflow: hidden;
}

.trade-right .trade-card{
    display: flex;
    flex-direction: column;
    height: 100%; /* карточка графика растягивается по высоте */
}

.trade-card-head{
    padding: 20px 20px 12px 20px; /* внутренние отступы шапки карточки */
    border-bottom: 1px solid #f1e8de; /* нижняя линия */
}

.trade-card-head h4{
    margin: 0;
    font-size: 24px; /* размер заголовка карточки */
    line-height: 1.25;
    color: #272727;
}

.trade-card-note{
    margin: 7px 0 0 0;
    font-size: 13px; /* размер поясняющего текста */
    line-height: 1.6;
    color: #777;
}


/* =========================
   ТАБЛИЦА
========================= */

.trade-table-wrap{
    overflow-x: hidden; /* отключение горизонтального скролла */
    overflow-y: visible;
    max-height: none;
}

.trade-table{
    width: 100%; /* ширина таблицы */
    min-width: 0;
    table-layout: fixed; /* фиксированная сетка колонок */
    border-collapse: collapse;
}

.trade-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: #faf6f0; /* фон заголовков таблицы */
    color: #272727;
    font-size: 14px; /* размер текста заголовков */
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 12px 10px; /* внутренние отступы заголовков */
    border-bottom: 1px solid #ebdfd1;
    text-align: center;
    white-space: nowrap; /* запрет переноса заголовков */
    line-height: 1.3;
}

.trade-table tbody td{
    padding: 12px 10px; /* внутренние отступы ячеек */
    border-bottom: 1px solid #f1e8de;
    font-size: 16px; /* размер текста в ячейках */
    color: #272727;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap; /* запрет переноса чисел */
    line-height: 1.35;
    font-variant-numeric: tabular-nums; /* ровное выравнивание цифр */
    font-weight: 500; /* делает английские значения визуально менее тонкими */
}

.trade-table tbody tr{
    cursor: pointer;
    transition: background .2s ease;
}

.trade-table tbody tr:hover{
    background: #faf4ec; /* фон строки при наведении */
}

.trade-table tbody tr.active-row{
    background: #f4eadf; /* фон активной строки */
}

/* Ширина колонок таблицы */
.trade-table thead th:nth-child(1),
.trade-table tbody td:nth-child(1){
    width: 72px; /* ширина колонки "Год" */
    text-align: left;
}

.trade-table thead th:nth-child(2),
.trade-table tbody td:nth-child(2){
    width: 22%; /* ширина колонки "Экспорт" */
}

.trade-table thead th:nth-child(3),
.trade-table tbody td:nth-child(3){
    width: 22%; /* ширина колонки "Импорт" */
}

.trade-table thead th:nth-child(4),
.trade-table tbody td:nth-child(4){
    width: 24%; /* ширина колонки "Товарооборот" */
}

.trade-table thead th:nth-child(5),
.trade-table tbody td:nth-child(5){
    width: 16%; /* ширина колонки "Сальдо" */
}


/* =========================
   ЛЕГЕНДА ГРАФИКА
========================= */

.trade-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px; /* расстояние между элементами легенды */
    padding: 12px 16px 12px 16px; /* внутренние отступы легенды */
    color: #777;
    font-size: 13px; /* размер текста легенды */
}

.trade-legend-item{
    display: flex;
    align-items: center;
    gap: 8px; /* расстояние между точкой и текстом */
}

.trade-legend-dot{
    width: 10px; /* размер цветной точки */
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}


/* =========================
   ОБЛАСТЬ ГРАФИКА
========================= */

.trade-chart-panel{
    padding: 0 12px 12px 12px; /* внутренние отступы вокруг графика */
    margin-top: 0;
    display: flex;
    flex: 1 1 auto; /* график занимает оставшееся пространство */
}

.trade-chart-box{
    position: relative;
    border: 1px solid #eee3d6; /* рамка области графика */
    background: linear-gradient(180deg, #fff 0%, #fcfaf7 100%);
    overflow: hidden;
    width: 100%; /* ширина области графика */
    min-height: 0; /* убираем лишнюю принудительную высоту */
    height: 100%; /* низ графика привязан к низу правой колонки */
    display: flex;
}

.trade-chart-box svg{
    display: block;
    width: 100%; /* график тянется на всю ширину */
    height: 100%; /* SVG занимает всю высоту области графика */
}

.trade-tooltip{
    position: absolute;
    display: none;
    pointer-events: none;
    background: rgba(34,34,34,.95); /* фон всплывающей подсказки */
    color: #fff;
    padding: 10px 12px; /* внутренние отступы подсказки */
    font-size: 13px; /* размер текста подсказки */
    line-height: 1.5;
    min-width: 170px; /* минимальная ширина подсказки */
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    z-index: 10;
}

.trade-tooltip strong{
    display: block;
    margin-bottom: 4px;
}

.trade-empty{
    padding: 40px 20px;
    color: #777;
    text-align: center;
}


/* =========================
   АДАПТИВ: ПЛАНШЕТ
========================= */

@media (max-width: 1199px){
    .trade-grid{
        grid-template-columns: 1fr; /* одна колонка */
        align-items: start;
    }

    .trade-right{
        height: auto; /* отключение привязки по высоте */
    }

    .trade-right .trade-card{
        height: auto; /* естественная высота карточки */
    }

    .trade-chart-panel{
        display: block;
        flex: none;
    }

    .trade-chart-box{
        min-height: 300px; /* нормальная высота графика на одной колонке */
        height: auto;
    }

    .trade-chart-box svg{
        height: auto;
    }
}


/* =========================
   АДАПТИВ: МОБИЛЬНЫЕ
========================= */

@media (max-width: 767px){
    .trade-block-head{
        padding: 24px 18px 18px 18px; /* отступы шапки на мобиле */
    }

    .trade-block-title{
        font-size: 28px; /* размер главного заголовка на мобиле */
    }

    .trade-block-subtitle{
        max-width: none;
    }

    .trade-toolbar{
        display: grid;
        grid-template-columns: 1fr 1fr; /* кнопки в 2 колонки */
        gap: 10px;
        padding: 18px 18px 0 18px;
    }

    .trade-btn{
        min-width: 0;
        width: 100%;
        padding: 13px 12px; /* внутренние отступы кнопок на мобиле */
        font-size: 14px; /* размер текста кнопок на мобиле */
    }

    .trade-grid{
        padding: 18px; /* отступы сетки на мобиле */
        gap: 18px;
    }

    .trade-stats{
        grid-template-columns: 1fr; /* плитки в один столбец */
        gap: 10px;
    }

    .trade-stat{
        min-height: 0;
        padding: 14px;
    }

    .trade-stat-value{
        font-size: 22px; /* размер значений в плитках на мобиле */
    }

    .trade-card-head{
        padding: 18px 16px 12px 16px; /* отступы шапки карточки на мобиле */
    }

    .trade-card-head h4{
        font-size: 22px; /* размер заголовков карточек на мобиле */
    }

    .trade-table thead th{
        padding: 10px 6px; /* отступы заголовков таблицы на мобиле */
        font-size: 13px; /* размер заголовков таблицы на мобиле */
    }

    .trade-table tbody td{
        padding: 10px 6px; /* отступы ячеек таблицы на мобиле */
        font-size: 14px; /* размер текста таблицы на мобиле */
    }

    .trade-table thead th:nth-child(1),
    .trade-table tbody td:nth-child(1){
        width: 58px; /* ширина колонки "Год" на мобиле */
    }

    .trade-legend{
        padding: 0 16px 10px 16px; /* отступы легенды на мобиле */
    }

    .trade-chart-panel{
        padding: 0 10px 10px 10px; /* отступы области графика на мобиле */
    }
}