@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Black.woff');
    font-weight: 900;
    font-style: normal;
}
 @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Bold.woff');
    font-weight: 700;
    font-style: normal;
}
 @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Medium.woff');
    font-weight: 600;
    font-style: normal;
}

 @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff');
    font-weight: 500;
    font-style: normal;
}
 @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Light-BETA.woff');
    font-weight: 400;
    font-style: normal;
}
 @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-ExtraLight-BETA.woff');
    font-weight: 300;
    font-style: normal;
}
 @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Thin-BETA.woff');
    font-weight: 100;
    font-style: normal;
}
/* На смартфонах намертво вырезаем крутящийся бейдж, чтобы не трогать мобильную верстку */
.premium-circular-badge.desktop-only-img {
    display: none !important;
}

/* ==========================================================================
   СТИЛИ И ПОЗИЦИОНИРОВАНИЕ КРУТЯЩЕЙСЯ КНОПКИ (Только для десктопа от 1024px)
   ========================================================================== */
@keyframes spinSvgBadge {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (min-width: 1024px) {
    /* Родителю обязательно фиксируем относительные координаты для точного позиционирования */
    .main__block__image-wrapper {
        position: relative !important;
    }

    .premium-circular-badge.desktop-only-img {
        position: absolute !important;
        display: block !important; /* Проявляем строго на десктопе */
        text-decoration: none;
        width: 130px;
        height: 130px;
        z-index: 99; /* Поверх всего контента */

        /* ЭТАЛОННЫЙ ВЕРТИКАЛЬНЫЙ ЦЕНТР (Относительно высоты картинок в 480px) */
        top: 175px !important; 
        bottom: auto !important;

        /* ЭТАЛОННАЯ ТОЧКА СТЫКА (Ровно на ребре картинки пиксель в пиксель) */
        right: 678px !important; 
        left: auto !important;
        
        transform: none !important; 
    }

    .badge-spinning-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Бесконечное плавное вращение внешнего текста */
    .spinning-svg {
        animation: spinSvgBadge 16s linear infinite;
        display: block;
        width: 100%;
        height: 100%;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
    }

    /* Неподвижный центральный кружок-каркас */
    .badge-center-arrow {
        position: absolute;
        width: 38px !important;
        height: 38px !important;
        border: none !important; 
        background: transparent !important; 
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        pointer-events: none;
        color: #bbb; 
        transition: color 0.4s ease;
    }

    /* ФИКС СТРЕЛКИ: Увеличивающаяся рамка вынесена на псевдоэлемент ::before. 
       Сам кружок-подложка будет расти, а стрелка останется статичной. */
    .badge-center-arrow::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid #4d4d4d;
        border-radius: 50%;
        background: #212121;
        z-index: -1; 
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;
    }

    /* ВАША СТРЕЛКА: Намертво заблокирована от любых изменений масштаба */
    .badge-center-arrow svg {
        display: block !important;
        width: 12px !important;  
        height: 13px !important; 
        transform: none !important; 
        transition: transform 0s !important; /* Полный запрет на наследование scale */
    }

    /* ==========================================================================
       ИЗЫСКАННАЯ АНИМАЦИЯ НАВЕДЕНИЯ (ХОВЕР)
       ========================================================================== */
       
    /* Текст деликатно сжимается внутрь и становится чуть ярче */
    .premium-circular-badge:hover .spinning-svg {
        transform: scale(0.88); 
    }
    .premium-circular-badge:hover .spinning-svg text {
        fill: rgba(255, 255, 255, 0.7);
        transition: fill 0.4s ease;
    }
    
    /* Ваша стрелка просто плавно загорается белым, её размер стабилен на 100% */
    .premium-circular-badge:hover .badge-center-arrow {
        color: rgba(255, 255, 255, 1); 
    }

    /* Расширяется и подсвечивается СТРОГО внешняя рамка кружка */
    .premium-circular-badge:hover .badge-center-arrow::before {
        transform: scale(1.15); 
        border-color: rgba(255, 255, 255, 0.25);
    }
}









.desktop-only-img {
    display: none !important;
}

.collage-item,
.collage-item picture,
.collage-item img {
    border-radius: 0 !important;
    transform: none !important;
}


@media (min-width: 1024px) {
    .desktop-only-img {
        display: block !important;
    }

    .main__block__image-wrapper {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .main__block__slide_img {
        display: grid !important;
        grid-template-columns: 480px 232px !important; 
        grid-template-rows: 232px 232px !important; 
        gap: 15px !important;
        
        width: 728px !important;
        height: 480px !important;
        margin: 0 0 0 auto !important; 
        overflow: visible !important;
        z-index: 10;
    }

    /* Контейнеры теперь просто держат форму, border-radius с них убираем */
    .collage-item {
        width: 100% !important;
        height: 100% !important;
        position: relative;
        overflow: visible !important; /* Убираем баг субпиксельного рендеринга родителя */
    }

    /* Принудительно растягиваем картинки */
    .collage-item picture, 
    .collage-item img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* ФИКС АРТЕФАКТОВ: Слегка увеличиваем саму картинку (на 1%), чтобы она заходила 
       за границы и перекрывала белые пиксели, которые генерирует браузер */
    .collage-item img {
        transform: scale(1.01); 
    }

    /* ==========================================================================
       ПРИМЕНЯЕМ СКУГЛЕНИЯ НАПРЯМУЮ К КАРТИНКАМ И ОВЕРЛЕЯМ (Убивает артефакты)
       ========================================================================== */

    /* 1. Большой левый квадрат */
    .item-big,
    .item-big img,
    .item-big .parallax-overlay {
        border-radius: 120px 0 120px 0 !important;
    }
    .item-big { grid-row: 1 / 3 !important; }

    /* 2. Маленькая правая верхняя */
    .item-small-top,
    .item-small-top img,
    .item-small-top .parallax-overlay {
        border-radius: 0 60px 0 60px !important;
    }
    .item-small-top { 
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
    }

    /* 3. Маленькая правая нижняя */
    .item-small-bottom,
    .item-small-bottom img,
    .item-small-bottom .parallax-overlay {
        border-radius: 60px 0 60px 0 !important;
    }
    .item-small-bottom { 
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
    }

    /* Персональные оверлеи ложатся точно по новым границам картинок */
    .parallax-overlay {
        position: absolute !important;
        inset: -1px !important; /* Легкий нахлест оверлея наружу, чтобы спрятать края */
        background: linear-gradient(180deg, rgba(33, 33, 33, 0) 30%, rgba(33, 33, 33, 1) 100%) !important;
        z-index: 5 !important; 
        pointer-events: none;
    }
}




b, strong {
    font-weight: 600;
}
#ProjectFilter {
  scroll-margin-top: 100px; 
}
.back-to-filters-arrow {
	    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
	}
.back-to-filters {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom)); 
  left: 50%;
  transform: translate(-50%, 100px);
  opacity: 0;
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #bbbbbb;
  border-radius: 30px;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit; 
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  cursor: pointer;
  z-index: 999;
  	white-space: nowrap;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
  .back-to-filters:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
}

.back-to-filters.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

@media (max-width: 768px) {
  .back-to-filters {
    font-size: 12px;
    padding: 14px 28px; 
    width: auto;
	white-space: nowrap;
    max-width: 100%; 
    justify-content: center;
  }
}

.architect-blueprint-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    padding: 0px 0 0px;
    counter-reset: blueprint-counter; 
}
.architect-blueprint-grid-about {
    grid-template-columns: repeat(2, 1fr)!important;
}
.architect-blueprint-grid-portfolio {
    max-width: 900px;
    margin: 0 auto;
	    grid-template-columns: repeat(2, 1fr)!important;
}

.blueprint-item {
    position: relative;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.blueprint-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    padding: 0 0 10px;
}
.blueprint-meta::before {
    counter-increment: blueprint-counter;
    content: "0" counter(blueprint-counter) " /";
    font-family: 'Courier New', Courier, monospace; 
    color: #ffcc00; 
    font-size: 14px;
	    text-wrap: nowrap;
    font-weight: 700;
    letter-spacing: 1px;
}

.blueprint-category {
    font-size: 14px;
    color: #f5f5f5;
    letter-spacing: 0.05px;
    font-weight: 700;
}
.blueprint-content::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #4d4d4d;
    margin-bottom: 20px;
}
.blueprint-content {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.blueprint-title {
    font-size: 16px;
    color: #f5f5f5;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px 0;
}

.blueprint-text {
    font-size: 14px;
	    font-weight: 300;
    color: #e0e0e0; 
	    max-width: 75%;
    line-height: 1.5;
    margin: 0;
}



@media (max-width: 992px) {
    .architect-blueprint-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    .architect-blueprint-grid {
        grid-template-columns: 1fr; 
        padding: 0px 0px;
		gap: 40px;
    }
	.blueprint-text {
	    max-width: 100%;
}
	.architect-blueprint-grid-about {
    grid-template-columns: 1fr!important;
}
.architect-blueprint-grid-portfolio {
  grid-template-columns: 1fr!important;
}
}

.la-fullscreen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  background-color: #212121;
  box-sizing: border-box;
}

.la-tile-item {
  text-decoration: none;
  display: block;
  outline: none;
  box-sizing: border-box;
}

.la-tile-wrapper {
  position: relative;
  width: 100%;
  height: auto; 
  background-color: #212121;
  overflow: hidden; 
}

.la-tile-wrapper picture {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}


.la-tile-wrapper picture::before {
  content: "";
  display: block;
  width: 100%;
  /* Пропорция картинок. Если они 1200х1500 (4:5), то padding-top: 125% 
     Если они квадратные 1200х1200 (1:1), то padding-top: 100% */
  padding-top: 125%; 
}

.la-tile-image {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% + 8px); 
  top: -12px;   
  object-fit: cover;
  filter: brightness(80%);   
  transform: translateY(0) translate3d(0,0,0); 
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.2, 1), 
              filter 1.1s cubic-bezier(0.25, 1, 0.2, 1);
}

.la-tile-item:hover .la-tile-image {
  filter: brightness(93%); 
  transform: translateY(8px) translate3d(0,0,0); 
}

.la-tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  
  background: linear-gradient(
    to top,
    #212121 0%,
    rgba(33, 33, 33, 0.98) 15%,
    rgba(33, 33, 33, 0.85) 30%,
    rgba(33, 33, 33, 0.5) 50%,
    rgba(33, 33, 33, 0) 75%
  );
}

.la-tile-content {
  position: absolute;
  inset: 0;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
}
 
.la-tile-title {
  color: #ffffff;
  font-size: 24px; 
  font-weight: 300; 
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 16px 0;
}

.la-tile-desc {
  /*color: #a6a6a6;*/
      color: #bbb;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
      min-height: 3em;
  margin: 0;
  max-width: 75%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.la-arrow-box {
  position: absolute;
  right: 36px;
  bottom: 30px;
  z-index: 3;
}

@media (max-width: 1023px) {
  .la-fullscreen-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .la-tile-wrapper picture::before {
    padding-top: 115%; 
  }

  .la-tile-content {
    padding: 36px 24px;
  }

  .la-tile-title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .la-tile-desc {
    font-size: 14px;
    max-width: 75%;
  }

  .la-arrow-box {
    right: 24px;
    bottom: 24px;
  }
}


.la-info-section {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 48px;
  background-color: #212121;
  box-sizing: border-box;
}

.la-text-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px; 
}

.la-text-item {
  display: grid;
  grid-template-columns: 1fr 2.5fr; 
  gap: 40px;
  align-items: start;
}

.la-text-meta {
  color: #ffcc00; 
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.la-text-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 300; 
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.la-text-p {
  color: #a6a6a6;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  margin: 0;
}

.la-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.la-list-item {
  border-top: 1px solid #4d4d4d; 
  padding-top: 32px;
}

.la-list-title {
    color: #f5f5f5;
    font-size: 16px;
    font-weight: 700;
	line-height: 1.3;
    margin: 0 0 20px 0;
}

.la-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.la-li {
 /* color: #a6a6a6;*/
  font-size: 14px;
  color: #e0e0e0;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
}

.la-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px; 
  width: 4px;
  height: 4px;
  background-color: #ffcc00; 
}


@media (max-width: 1023px) {
  .la-info-section {
    padding: 60px 24px;
  }

  .la-text-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .la-list-grid {
    grid-template-columns: 1fr;
  }
  
  .la-list-item {
    padding-top: 24px;
  }
}


.leaflet-interactive:focus,
.zip-label:focus,
.leaflet-container :focus {
    outline: none !important;
}
.blur-zag {
	width: fit-content;
}
.blur-zag h2 {
  position: relative;
  font-size: 5rem;
  color: white;
  text-align: center;
   -webkit-mask-image: linear-gradient(to right, transparent, #212121 15%, #212121 85%, transparent);
  /* Прячем края основного текста, чтобы они не двоились под блюром */
  mask-image: linear-gradient(to right, transparent, #212121 15%, #212121 85%, transparent);
}

.blur-zag h2::before {
  content: attr(data-text); /* Дублируем текст из атрибута */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  /* Эффект размытия */
  filter: blur(8px);
  
  /* Маска: показываем блюр ТОЛЬКО по бокам */
  mask-image: linear-gradient(
    to right, 
    #212121 0%, 
    transparent 20%, 
    transparent 80%, 
    #212121 100%
  );
  pointer-events: none; /* Чтобы текст можно было выделить */
}


.digital-header span {
  display: block; 
  width: fit-content;
}

/* Контроль каждой строки */
.line-text-1 {
  align-self: flex-start; 
  color: #ff0055;
}

.line-text-2 {
  align-self: center;
  margin-left: 20px;
   color: #fff;
}

.line-text-3 {
  align-self: flex-end; 
  background: #000;
  color: #fff;
  padding: 0 15px; 
}
/* Кастомный заголовок */
.digital-header {
  display: flex;
  flex-direction: column;
}
.digital-header span {
  display: block; 
  width: fit-content;
}
.custom-text-1 {
  align-self: flex-start; 
}
.custom-text-2 {
  align-self: center;
}

.custom-text-3 {
  align-self: flex-end; 
}
.custom-text-4 {
  align-self: flex-start;
  margin-left: 10%;
}

.custom-text-5 {
	margin-right: 10%;
  align-self: flex-end; 
}


.lookbook-section {
  max-width: 600px;
  margin: 0 auto;
}

.visual-area {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.base-img { width: 100%; height: auto; border-radius: 8px; }

/* Пульсация */
.pulse-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffcc00;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
}
.pulse-marker::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; 
  height: 8px;
  background: #ffcc00;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: markerPulse 2s infinite;
}

@keyframes markerPulse {
  0% { width: 8px; height: 8px; opacity: 0.6; }
  100% { width: 30px; height: 30px; opacity: 0; }
}

/* Линия */
.connector-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

#dynamicPath {
  transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  stroke-dasharray: 4; /* Пунктир */
}

/* Карусель-эскалатор */
.feature-carousel {
  position: relative;
  margin-top: 20px;
    width: 100%;
  overflow: hidden;
  transition: height 0.5s ease;
}

.feature-node {
  position: absolute!important; 
  top: 0; 
  left: 0;
  width: 100%;
  padding: 15px;
  border-left: 2px solid transparent;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
  cursor: pointer;
  opacity: 0.2;
  box-sizing: border-box;
}

.feature-node.active {
  opacity: 1;
  border-left: 2px solid #ffcc00;
  background: #2a2a2a;
  z-index: 5;
}

.feature-zag { margin: 0 0 5px;
    font-weight: 700;
    line-height: 1.5;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;}
.feature-node p { margin: 0; font-size: 14px; color: #bbb; font-weight: 300;}
.feature-cifr {
    font-size: 14px;
    color: #bbb;
    width: 35px;
    font-weight: 700;
    letter-spacing: 2px;
}
.feature-block {
    display: flex;
    gap: 20px;
}


a:focus {
    outline: 0;
    outline-offset: 0px;
}

.parallax-container {
position: relative;
    width: 100%;
    margin: 80px 0px 80px;
}
/*.parallax-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); 
  width: 1px; 
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -5; 
  pointer-events: none; 
}*/
.parallax-num {
position: absolute;
    top: 0;
    right: 0px;
    color: #4d4d4d;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}
.parallax-num-zag {
font-family: 'Courier New', Courier, monospace;
    color: #ffcc00;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
}
.parallax-num-hero {
font-family: 'Courier New', Courier, monospace;
    color: #ffcc00;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
	text-transform: uppercase;
    margin: 0 0 30px;
    display: block;
}
.parallax-block-img {
    position: relative;
width: fit-content;
    height: fit-content;
    overflow: hidden;
    /*box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
    margin: 0 auto;
}
    .main__block__slide_img {
    position: absolute;
    width: 480px;
    z-index: 10;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
  }

    .portfolio__block__image-wrapper {
    display: flex;
    justify-content: center; /* Сдвигает картинку вправо на ПК */
    width: 100%;
    max-width: 1300px; /* Укажите здесь ширину вашего .container, чтобы выровнять по нему */
    margin: 0 auto; /* Центрирует саму обертку по экрану */
    padding: 0 15px; /* Боковые отступы, если они есть у .container */
}
  .main__block__image-wrapper {
    display: flex;
    justify-content: flex-end; /* Сдвигает картинку вправо на ПК */
    width: 100%;
    max-width: 1300px; /* Укажите здесь ширину вашего .container, чтобы выровнять по нему */
    margin: 0 auto; /* Центрирует саму обертку по экрану */
    padding: 0 15px; /* Боковые отступы, если они есть у .container */
}
 /* .main__block__slide_img::after {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -1px; 
    
    background: linear-gradient(180deg, rgba(33, 33, 33, 0) 20%, #212121 100%);
    z-index: 2;
    transition: opacity 0.5s ease;
    pointer-events: none;
}*/
  .main__block__portfolio_img {
    position: absolute;
    width: 480px;
    z-index: 10;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
  }
.parallax-block-img2 {
position: relative;
    width: 20%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
	z-index: 3;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    margin: 0 auto;
}
.parallax-block-img3 {
position: absolute;
    width: 10%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
	z-index: 5;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    margin: 0 auto;
}
.parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(33, 33, 33, 0) 20%, rgba(33, 33, 33, 1) 100%);
    z-index: 2;
    transition: opacity 0.5s ease;
}
.parallax-overlay2 {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(33, 33, 33, 0) 20%, rgba(33, 33, 33, 1) 100%);
    z-index: 4;
    transition: opacity 0.5s ease;
}
.parallax-overlay3 {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(33, 33, 33, 0) 20%, rgba(33, 33, 33, 1) 100%);
    z-index: 6;
    transition: opacity 0.5s ease;
}

.parallax-portfolio_img {
    position: relative;
    z-index: 1;
	width: 100%;
    pointer-events: none;
}
.parallax-portfolio_img2 {
    position: relative;
    width: 100%;
	pointer-events: none;
}
.parallax-portfolio_img3 {
    position: relative;
    width: 100%;
	pointer-events: none;
}

@media (max-width: 768px) {
  .parallax-portfolio_img {
    max-width: 100%;
    width: 100%; 
  }
  .parallax-num-hero {
display: none;
}
  .parallax-num {
    right: 0px!important;
	  left: auto;
}
    .main__block__image-wrapper {
        justify-content: center; 
        padding: 0;
    }
	    .portfolio__block__image-wrapper {
        justify-content: center; 
        padding: 0;
    }
    .main__block__slide_img {
    max-width: 100%;
    width: 100%; 
		position: relative;
	        margin: 0 auto;
  }

      .main__block__portfolio_img {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
		position: relative;
  }
  .parallax-block-img {
    width: 100%; 
  }
    .parallax-block-img2 {
    width: 20%; 
  }
      .parallax-block-img3 {
    width: 10%; 
  }

}
.arch-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    pointer-events: none;
    z-index: 1;
}

.arch-lines span {
    width: 1px;
    height: 100%;
    background-color: #373737; 
}

.int-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}
@media (max-width: 768px){
.int-layout {
  grid-template-columns: repeat(2, 1fr);
}
}
.int-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    padding: 30px;
    box-sizing: border-box;
    color: #fff;
}

/* Линии сетки */
.int-cell::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px; background: rgba(255, 255, 255, 0.2);
  z-index: 5;
}
.int-cell::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px; background: rgba(255, 255, 255, 0.2);
  z-index: 5;
}

/* Визуал */
.int-pic { width: 100%; height: 100%; overflow: hidden; }
.int-pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.8; }

/* Типографика */
.int-num {
    position: absolute;
    top: 30px;
    right: 30px;
    letter-spacing: 2px;
    font-size: 14px;
	line-height: 1.5;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
}

.int-name {
margin-top: auto;
    margin-bottom: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    line-height: 1.5;
    font-weight: 700;
    color: #f5f5f5;
}

.int-text {
margin-top: auto;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #f5f5f5;
    font-weight: 300;
}

@media (max-width: 768px) {
  .int-cell {
    padding: 20px;
  }



  .int-num { top: 20px; right: 20px; font-size: 12px; }
}








/* Контейнер аккордеона */
.accordion-container {
    display: flex;
    width: 100%;
    height: 500px;
    gap: 10px;
    background: #212121;
    margin: 60px 0;
}

/* Карточка-ссылка */
.acc-item {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    display: block;
    border-radius: 4px;
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.3, 1);
    will-change: flex;
}

.acc-item.active {
    flex: 4;
}

/* Изображение */
.acc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
}

.acc-item.active .acc-img {
    transform: scale(1.08);
}

/* Оверлей */
.acc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(33,33,33,0) 20%, rgba(33,33,33,1) 100%);
    z-index: 1;
}

/* Номер */
.acc-number {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    opacity: 0.3;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.acc-item.active .acc-number {
    opacity: 1;
}

/* Короткий заголовок (для закрытых) */
.acc-label-short {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    opacity: 0.7;
    transition: all 0.5s ease;
    white-space: nowrap;
}

.acc-item.active .acc-label-short {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
}

/* Контент */
.acc-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 4;
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.7s cubic-bezier(0.25, 1, 0.3, 1);
    pointer-events: none;
}

.acc-item.active .acc-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
    pointer-events: all;
}

.acc-title {
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

/* Раскрытие текста через Grid */
.acc-hidden-part {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s ease, opacity 0.4s ease;
}

.acc-item.active .acc-hidden-part {
    grid-template-rows: 1fr;
    opacity: 1;
}

.acc-desc-inner {
    overflow: hidden;
}

.acc-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    max-width: 500px;
    margin: 15px 0 25px;
}

/* СТРЕЛКА (Логика Tantallum) */
.acc-custom-arrow { 
    display: inline-block; 
}

/* При наведении на карточку запускаем диагональный вылет стрелок */
.acc-item:hover .pl-arrow-svg:not(.pl-arrow-svg--copy) {
    transform: translate(150%, -150%) !important;
}

.acc-item:hover .pl-arrow-svg--copy {
    transform: translate(0, 0) !important;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .accordion-container {
        flex-direction: column;
        height: auto;
        min-height: 600px;
        gap: 15px;
    }

    .acc-item {
        flex: 0 0 80px; 
    }

    .acc-item.active {
        flex: 0 0 450px; 
    }

    .acc-item:not(.active) .acc-label-short {
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.9;
    }

    .acc-number {
        font-size: 24px;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
    }

    .acc-item.active .acc-number {
        top: 25px;
        transform: none;
    }
}




.comparison-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9; /* Соотношение сторон */
  overflow: hidden;
  background-color: var(--bg-color);
}

/* Общие стили для обеих картинок */
.image-after, 
.image-before img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Важно: картинка не деформируется */
}

/* Контейнер для верхнего фото */
.image-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Будет меняться через JS */
  height: 100%;
  overflow: hidden; /* Обрезает картинку */
  z-index: 1;
}

/* Фикс: Картинка внутри оверлея всегда должна быть такой же ширины, как весь блок */
#before-img {
  width: 900px; /* Должно совпадать с max-width контейнера */
}

/* Невидимый ползунок поверх всего */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  appearance: none;
  cursor: ew-resize;
  z-index: 10;
  margin: 0;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 40px;
  height: 1000px;
}

/* Линия-разделитель */
.slider-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #fff;
  z-index: 5;
  pointer-events: none;
  transform: translateX(-50%);
}
.bento-item {
  position: relative;
  width: 300px;
  height: 200px;
  background: #0f1012; /* Цвет темного тантала */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Сам градиентный луч */
.glow-border {
  position: absolute;
  inset: -50%; /* Выходим за границы, чтобы вращать */
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 70%,
    #4f46e5 85%, /* Индиго */
    #ec4899 100% /* Розовый ИИ-акцент */
  );
  animation: rotate 4s linear infinite;
  z-index: 1;
}

/* Внутренняя часть, которая закрывает центр градиента */
.bento-item::after {
  content: '';
  position: absolute;
  inset: 2px; /* Толщина рамки */
  background: #0f1012;
  border-radius: 14px;
  z-index: 2;
}



@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dropdown-close-bar {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 15px;
    transition: background 0.3s;
}

/* Сама стрелочка с постоянной анимацией */
.close-arrow {
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    /* Начальный поворот + запуск анимации */
    transform: rotate(45deg); 
    margin-top: 5px;
    
    /* Название | время | плавность | бесконечно */
    animation: arrowPulse 2.5s ease-in-out infinite;
}

/* Описание анимации: движение по диагонали (из-за rotate 45) + смена цвета */
@keyframes arrowPulse {
    0%, 100% {
        /* Тусклый белый и начальная позиция */
        border-color: rgba(255, 255, 255, 0.4);
        transform: rotate(45deg) translate(0, 0);
    }
    50% {
        /* Яркий белый и движение вверх на 5px */
        border-color: rgba(255, 255, 255, 1);
        /* Поскольку стрелка повернута на 45гр, translate(-5px, -5px) движет её строго ВВЕРХ */
        transform: rotate(45deg) translate(-5px, -5px);
    }
}

/* Твоя сетка (без изменений) */
.dropdown-inner-list {
    display: grid;
    width: 100%;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.menu-card:hover p { color: #fff; }
    .menu-card:hover .menu-card__zag { color: #ffcc00; }
    .menu-card:hover .repair-count { opacity: 1;     color: #fff;   }
  .menu-card:hover .menu-card__img img {filter: grayscale(100%); }

.menu-card:hover .pl-arrow-inner {
    color: #ffcc00;
}
.menu-card:hover .pl-arrow-svg:not(.pl-arrow-svg--copy) {
    transform: translate(200%, -200%);
}

.menu-card:hover .pl-arrow-svg--copy {
    transform: translate(0, 0);
}

.menu_descktop .dropdown-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;
    padding: 30px 0px;
}

.menu-card {
    display: flex!important;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.menu-card__img {
    width: 100%;
	position: relative;
	aspect-ratio: 1 / 1;
    overflow: hidden;
}

.menu-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-card__list {
    display: grid;
	    gap: 30px;
    grid-template-columns: 1fr 2fr;
}
.menu-card__content .menu-card__zag {
    color: #f5f5f5;
    margin: 0 0 10px 0;
    position: relative;
    font-size: 12px;
    line-height: 1.5;
    width: fit-content;
    letter-spacing: 0.15em;
    font-weight: 700;
}

.menu-card__content p {
    color: #bbb;
    margin: 0;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Десктопное выпадающее меню */
.ds-dropdown-menu {
    position: absolute;
    top: 100%; 
    left: 0;
	 height: 100vh; 
    width: 100%; 
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;  
    background: #212121;
    z-index: -1; 
    padding: 20px 0;
    transform: translateY(-90px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
}

/* Показываем при клике (через JS класс .is-open) */
.menu_descktop li.is-open .ds-dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ds-dropdown-menu .dropdown-inner {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px 30px;
}

.ds-dropdown-menu a {
    font-size: 14px;
    text-decoration: none;
}
.button-all-services {
    margin: 60px auto 0;
    z-index: 12;
    display: flex;
    position: relative;
    justify-content: center;
	}
	.button-main-block {
    margin: 30px auto 0;
    z-index: 12;
    justify-content: center;
    display: flex;
    position: relative;
	}
	.btn-modal {
		 width: 100%!important;
		 justify-content: space-between!important;
		}
		@media (max-width: 768px){
		.btn-quote {
		 width: 100%!important;
		 justify-content: space-between!important;
		}
		.pl-main-btn-service {
    min-width: 70% !important;
}
		
		.btn-main-mob {
		    width: 100%!important;
    justify-content: space-between!important;
	}
		}
		.margin-btn {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.pl-main-btn-main {
	min-width: 300px!important;
	}
.pl-main-btn-contact {
	min-width: 300px!important;
	}
.pl-main-btn-footer {
	min-width: 300px!important;
	    margin: 30px auto;
	}
.pl-main-btn-service {
	min-width: 300px!important;
	}
.pl-main-btn {
    display: inline-flex!important;
    align-items: center;
	    justify-content: space-between;
    gap: 15px;
	    height: fit-content;
	   background: #212121;
	white-space: nowrap;
    padding: 8px 8px 8px 23px;
    border-radius: 50px; 
    text-decoration: none;
    border: 1px solid #bbb;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
}

.pl-btn-text {
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 500;
	transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
	    text-wrap: nowrap;
		    flex-grow: 1;
			text-align: left;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.4s ease;
	    /* overflow: hidden;*/
	    /* -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); */
    /* mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);*/
}
.header-btn {
    justify-content: space-between!important;
    width: 100%!important;
}

/* КОНТЕЙНЕР СТРЕЛКИ (из плитки) */
.pl-btn-arrow {
    width: 38px;
    height: 38px;
   /* background: #373737;*/
   background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
	 flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pl-arrow-svg {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: -6px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pl-arrow-svg--copy {
    transform: translate(-180%, 180%);
}

/* ХОВЕР ЭФФЕКТ КНОПКИ */
.pl-main-btn:hover {
    background: #2a2a2a;
    border-color: #ffcc00;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.pl-main-btn:hover .pl-btn-text {
    color: #ffcc00;
}

.pl-main-btn:hover .pl-btn-arrow {
    background: #ffcc00;
    color: #212121; /* Стрелка черная на желтом круге */
}

.pl-main-btn:hover .pl-arrow-inner {
    color: #212121;
}

/* Анимация вылета */
.pl-main-btn:hover .pl-arrow-svg:not(.pl-arrow-svg--copy) {
    transform: translate(200%, -200%);
}

.pl-main-btn:hover .pl-arrow-svg--copy {
    transform: translate(0, 0);
}

/* Мобильная версия кнопки */
@media (max-width: 600px) {
    .pl-main-btn {
        padding: 10px 10px 10px 25px;
    }
    .pl-btn-arrow {
        width: 32px;
        height: 32px;
    }
    .pl-btn-text {
        font-size: 12px;
    }
	.pl-main-btn-footer {
	min-width: 80%!important;
	    margin: 0 auto;
	}
}

#myBtnContainer {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important; 
}

#myBtnContainer .btn-f {
  flex: 0 1 auto !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  position: relative !important;
  text-align: center !important;
  
  /* Десктопные отступы: делают линию широкой на компьютерах */
  padding-left: 35px !important;  
  padding-right: 35px !important; 
}

/* Серый рельс для десктопа: ровно 100% от ширины контейнера */
#myBtnContainer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #4d4d4d;
  pointer-events: none;
  z-index: 1;
}

/* Желтый ползунок-подчеркивание */
.custom-tab-line {
  position: absolute;
  bottom: 0px;
  height: 1px;
  background-color: #ffcc00;
  width: 0;
  left: 0;
  transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s ease;
  z-index: 2;
}

/* На компьютерах кружочки-индикаторы свайпа не нужны, полностью их скрываем */
.scroll-indicator {
  display: none !important;
}


/* ==========================================================================
   2. АДАПТИВНЫЙ БЛОК ДЛЯ МОБИЛЬНЫХ (Включается только на экранах меньше 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .pl-main-btn-main {
	min-width: 80%!important;
	}
  /* Включаем скролл только на мобильном родителе */
  #myBtn .container {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #myBtn .container::-webkit-scrollbar { 
    display: none !important; 
  }

  /* Перестраиваем контейнер кнопок под горизонтальную ленту скролла */
  #myBtnContainer {
    display: flex !important;
    flex-wrap: nowrap !important; 
    justify-content: space-between !important;
    width: max-content !important; 
    min-width: 100% !important; 
	    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* Жестко фиксируем кнопки на мобилке, чтобы они не сжимались флексом */
  #myBtnContainer .btn-f {
    flex: 0 0 auto !important;
    display: inline-block !important;
    white-space: nowrap !important;
    
    /* ЖЕСТКИЙ СБРОС: полностью убираем десктопные 35px отступов у кнопок на мобилке */
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* Создаем небольшое расстояние между самими кнопками в скролл-ленте */
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
 #myBtnContainer .btn-txt {
    display: inline-block !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .scroll-indicator {
    display: none !important;
    position: sticky !important; /* Магия: кружочки прилипают к краям экрана смартфона */
    bottom: -3px; /* Ложатся ровно по центру серого рельса */
    width: 6px;
    height: 6px;
    background-color: #ffcc00; /* Золотой цвет */
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
    pointer-events: none;
    align-self: flex-end; /* Выравнивание по нижней линии флекса */
  }

  /* Левый кружок липнет к левому краю экрана */
  .left-indicator {
    left: 10px !important;
    margin-right: -6px; /* Чтобы кружок не расталкивал соседние кнопки */
  }

  /* Правый кружок липнет к правому краю экрана */
  .right-indicator {
    right: 10px !important;
    margin-left: -6px; /* Чтобы кружок не расталкивал соседние кнопки */
    order: 99; /* Сдвигаем тег в самый конец флекс-ряда */
  }

  .scroll-indicator.visible {
    opacity: 0.8; /* Подсветка */
  }
}
#myBtnContainer .btn-txt {
  display: inline-block;
  /* Добавляем 10px отступа слева и справа. Желтый ползунок расширится на эти 20px */
  padding-left: 10px !important;
  padding-right: 10px !important; 
  
  /* Опционально: если хотите, чтобы счетчик не прижимался к тексту */
  position: relative;
}
/* ЭФФЕКТ НАМЕКА НА СКРЫТЫЙ КОНТЕНТ (ГРАДИЕНТ ПО КРАЯМ) */
@media (max-width: 768px) {
  /* Обертка container получает маску, которая мягко размывает края скролла */
  #myBtn .container {
    position: relative;
    /* Создаем прозрачность по краям (на 40px слева и справа), намекающую на контент */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
}

 /* БЛОК НАПРАВЛЕНИЯ */
/* СТРЕЛКА */
.pl-arrow-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 20px;
    border-radius: 50%;
	    border: 1px solid #373737;
	/*background: rgba(255, 255, 255, 0.1);*/
    /* background: transparent;*/
    /* border: 1px solid rgba(255, 255, 255, 0.5);*/
    overflow: hidden;
    transition: border-color 0.5s ease, background-color 0.5s ease;
    z-index: 5;
}
.pl-arrow-inner {
    width: 100%;
    height: 100%;
    position: relative;
     /*color: #bbb;*/
	    color: #2a2a2a;
    transition: color 0.5s ease;
}
.pl-arrow-inner-custom {
color: #f5f5f5!important;
}
.pl-arrow-svg {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: -6px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pl-arrow-svg--copy {
    transform: translate(-180%, 180%);
}

.repair-item:hover .pl-arrow-svg:not(.pl-arrow-svg--copy) {
    transform: translate(200%, -200%);
}

.repair-item:hover .pl-arrow-svg--copy {
    transform: translate(0, 0);
}
.la-tile-item:hover .pl-arrow-svg:not(.pl-arrow-svg--copy) {
    transform: translate(200%, -200%);
}

.la-tile-item:hover .pl-arrow-svg--copy {
    transform: translate(0, 0);
}
@media (max-width: 600px) {
    .pl-arrow-box {
        width: 38px;
        height: 38px;
        margin-bottom: 15px;
    }
}
/* СЕКЦИЯ НАПРАВЛЕНИЯ */
.header-box {
    max-width: 700px; 
    margin: 0 auto 70px; 
    text-align: center;
}
.header-box-services {
    max-width: 700px; 
    margin: 0 auto 0px; 
    text-align: center;
}
.header-box-margin {
padding: 60px 0 0!important;
}
/* СТИЛЬ НОВОГО ПОДЗАГОЛОВКА */
.section-description {
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0;
}
.section-description-services {
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
max-width: 500px;
    margin: 0 auto;
}
.section-description-contact {
   text-transform: uppercase;
    color: #e0e0e0;
    line-height: 1.5;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
}
.section-description-contact span{
    margin: 0 0 30px;
    display: block;
}
.header-box-list {
    display: flex;
    gap: 30px;
    flex-direction: column;
}
/* АДАПТИВ */
@media (max-width: 600px) {
    .header-box {
        margin-bottom: 40px;
        padding: 0 0px;
    }
	.header-box-services {
   padding: 0 0px;
}
}
#GetQuote {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#ServicesBlockMain {
        padding: 30px 0 60px;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#ServicesBlockMain h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Золотая подпись сверху (Section / Category) */
#ServicesBlockMain h2::before {
    content: "Our Expertise"; 
    font-size: 12px;
    color: #FFcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServicesBlockMain h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServicesBlockMain h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
	.section-description-services {
max-width: 100%;
}
}
.services__block__appeal {
/*border: 1px solid #333;*/
padding: 45px;
    background: #2a2a2a;
    background-image: radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0px, transparent 100%), radial-gradient(at 50% 0%, rgba(108, 92, 231, 0.15) 0px, transparent 100%), radial-gradient(at 100% 0%, rgba(0, 206, 201, 0.1) 0px, transparent 100%);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    /*background-image: radial-gradient(circle at 0% 0%, rgba(0, 209, 255, 0.15) 0%, transparent 50%);*/
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
	}
	@media (max-width: 768px) {
	.services__block__appeal {
    padding: 30px;
	}
	}
#AboutBlockMain {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#AboutBlockMain h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#AboutBlockMain h2::before {
    content: "Since 2016"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#AboutBlockMain h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #AboutBlockMain h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
.block__why__choose__us_1 {
font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
	    max-width: 75%;
    color: #f5f5f5;
    letter-spacing: 0.05em;
}
.block__why__choose_block {
display: flex;
    gap: 30px;
    align-items: center;
    flex-direction: column;
}
#WhyBlockKitchen {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#WhyBlockKitchen h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Золотая подпись сверху (Section / Category) */
#WhyBlockKitchen h2::before {
    content: "Advantages"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#WhyBlockKitchen h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #WhyBlockKitchen h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
#WhyBlockMain {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#WhyBlockMain h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Золотая подпись сверху (Section / Category) */
#WhyBlockMain h2::before {
    content: "Advantages"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#WhyBlockMain h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #WhyBlockMain h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
#OverviewBlockAbout {
        padding: 30px 0 60px;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#OverviewBlockAbout h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Золотая подпись сверху (Section / Category) */
#OverviewBlockAbout h2::before {
    content: "Since 2016"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#OverviewBlockAbout h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #OverviewBlockAbout h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
#notfound {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
	.notfound {
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0px 0 30px;
		
    }
	.pl-main-btn-404 {
        min-width: 300px!important;
}
		#contacts {
        padding: 0px 0;
        margin: 0px 0 0;
		    overflow: hidden;
        -webkit-font-smoothing: antialiased;
}
	#LicenseBlockAbout {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#LicenseBlockAbout h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#LicenseBlockAbout h2::before {
    content: "Certifications"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#LicenseBlockAbout h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #LicenseBlockAbout h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
		.pl-main-btn-404 {
        min-width: 100%!important;
}
}
#ServiceOverviewHome {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceOverviewHome h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceOverviewHome h2::before {
    content: "Our Expertise"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceOverviewHome h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceOverviewHome h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ServiceOverviewCommercial {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceOverviewCommercial h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceOverviewCommercial h2::before {
    content: "Our Expertise"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceOverviewCommercial h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceOverviewCommercial h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ServiceOverviewKitchen {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceOverviewKitchen h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceOverviewKitchen h2::before {
    content: "Expert Guidance"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceOverviewKitchen h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceOverviewKitchen h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ServiceOverviewBathroom {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceOverviewBathroom h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceOverviewBathroom h2::before {
    content: "Timeless Quality"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceOverviewBathroom h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceOverviewBathroom h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#WhatWeDoExpert {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#WhatWeDoExpert h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#WhatWeDoExpert h2::before {
    content: "Our Scope"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#WhatWeDoExpert h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #WhatWeDoExpert h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#WhatWeDo {
		    position: relative;
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#WhatWeDo h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#WhatWeDo h2::before {
    content: "Our Expertise"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#WhatWeDo h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #WhatWeDo h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ServiceApart {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceApart h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceApart h2::before {
    content: "Tailored Service"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceApart h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceApart h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#Government {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#Government h2 {
    color: #fff;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300; 
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Золотая подпись сверху (Section / Category) */
#Government h2::before {
    content: "Financial Incentives"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#Government h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #Government h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ServiceApartKeyComm {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceApartKeyComm h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceApartKeyComm h2::before {
    content: "Our Upproach"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceApartKeyComm h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceApartKeyComm h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ServiceApartKey {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceApartKey h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceApartKey h2::before {
    content: "Our Expertise"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceApartKey h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceApartKey h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
#ServiceWhyThink {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceWhyThink h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceWhyThink h2::before {
    content: "Smart Planning"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceWhyThink h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceWhyThink h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
#ServiceWhy {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceWhy h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceWhy h2::before {
    content: "Our Perspective"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceWhy h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceWhy h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
#ServiceApartKeyKitchen h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceApartKeyKitchen h2::before {
    content: "Our Process"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceApartKeyKitchen h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceApartKeyKitchen h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ServiceOverview {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
	#PlitkaFilter {
        padding: 30px 0 60px;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
.kitchen__choose__list {
display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}
.kitchen__choose_text {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    gap: 5px;
    align-items: flex-start;
    position: relative;
    line-height: 1.5;
    display: flex;
}
.kitchen__choose_text::before {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 6px;
    top: 7px;
    line-height: 1;
    position: relative;
}
#ServiceWhyBathroom {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceWhyBathroom h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceWhyBathroom h2::before {
    content: "Our Upproach"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceWhyBathroom h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceWhyBathroom h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
	.kitchen__choose__list {
    grid-template-columns: 1fr;
    gap: 30px;
}
}
#ServiceWhyKitchen {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}
#ServiceWhyKitchen h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ServiceWhyKitchen h2::before {
    content: "Our Upproach"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ServiceWhyKitchen h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ServiceWhyKitchen h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#FAQ {
        padding: 60px 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
}

#FAQ h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#FAQ h2::before {
    content: "FAQ"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#FAQ h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #FAQ h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ContactFormModalH {
        padding: 0px 0 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
.section-description-form {
color: #e0e0e0;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 0px;
}
.ContactFormModalH {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ContactFormModalH::before {
    content: "Start Your Project"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
.ContactFormModalH::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    .ContactFormModalH {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
		#ContactFormModalH {
        margin: 30px 0 0;
    }
}
	#FooterUs {
        padding: 0px 0 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#FooterUs h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#FooterUs h2::before {
    content: "Get in Touch"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#FooterUs h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #FooterUs h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}	

	#MaterialHighlights {
        padding: 0px 0 0;
        margin: 0px 0 80px;
        -webkit-font-smoothing: antialiased;
    }
	.header-box-materials {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.header-box-materials::before {
    content: "Details"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
.header-box-materials::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    .header-box-materials {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
#ProjectSnapshot {
        padding: 0px 0 0;
        margin: 0px 0 80px;
        -webkit-font-smoothing: antialiased;
    }
	.header-box-snapshot {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.header-box-snapshot::before {
    content: "Specifications"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
.header-box-snapshot::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    .header-box-snapshot {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
	}
#ScopeOfWork {
        padding: 0px 0 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
	.header-box-scope {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.header-box-scope::before {
    content: "Overview"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
.header-box-scope::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    .header-box-scope {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#DesignIntent {
        padding: 0px 0 0;
        margin: 0px 0 80px;
        -webkit-font-smoothing: antialiased;
    }
	.header-box-design {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.header-box-design::before {
    content: "Concept"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
.header-box-design::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    .header-box-design {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#BeforeAfter {
        padding: 0px 0 0;
        margin: 0px 0 0px;
        -webkit-font-smoothing: antialiased;
    }
.header-box-zag {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.header-box-zag::before {
    content: "See the Change"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
.header-box-zag::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    .header-box-zag {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ContactUs {
        padding: 60px 0 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#ContactUs h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ContactUs h2::before {
    content: "Get in Touch"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ContactUs h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ContactUs h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#ContactForm {
        padding: 60px 0 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#ContactForm h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ContactForm h2::before {
    content: "Start Your Project"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#ContactForm h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #ContactForm h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
	#MapTable {
        padding: 60px 0 0;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#MapTable h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#MapTable h2::before {
    content: "Locations"; 
    font-size: 12px;
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#MapTable h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #MapTable h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
   #map {
        height: 600px;
    }
/* СЕКЦИЯ ПОРТФОЛИО */
#PortfolioOverview {
        background: #212121;
        padding: 30px 0 60px;
        margin: 0px 0 0;
        -webkit-font-smoothing: antialiased;
    }
#PortfolioOverview h2 {
    color: #f5f5f5;
    font-size: clamp(22px, 4vw, 30px); 
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin: 0 0 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#PortfolioOverview h2::before {
    content: "Our Expertise"; 
    font-size: clamp(10px, 2vw, 11px);
    color: #ffcc00;
    letter-spacing: 0.4em;
    font-weight: 700;
}

/* Тонкая декоративная линия под заголовком */
#PortfolioOverview h2::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}

/* КОРРЕКЦИЯ ДЛЯ МОБИЛОК (ниже 600px) */
@media (max-width: 768px) {
    #PortfolioOverview h2 {
        margin-bottom: 40px; /* Уменьшаем отступ до плитки на мобилках */
        letter-spacing: 0.1em; /* Чуть меньше разрядка, чтобы влезло */
    }
}
    .repair-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    line-height: 0;
    }

    /* КАРТОЧКА (БЕЗ ДВИЖЕНИЯ ДЛЯ ЧЕТКОСТИ) */
    .repair-item {
        position: relative;
        aspect-ratio: 1 / 1;
        display: block;
        text-decoration: none;
        z-index: 1;
        overflow: visible; 
        transition: box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1), outline 0.3s ease;
      /*  outline: 1px solid transparent; */
    }

    /* ИНДЕКС В УГЛУ */
    .repair-index {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 4;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    font-weight: 900;
    transition: all 0.5s ease;
    }

    /* КАРТИНКА С МЯГКИМ ЗУМОМ */
    .plitka__img_block {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
    }

    .plitka__img_block img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1.5s cubic-bezier(0.1, 0.9, 0.2, 1), filter 1s ease;
		pointer-events: none;
    }

    .repair-overlay {
        position: absolute;
        inset: 0;
		    background: linear-gradient(to top, #212121 0%, rgba(33, 33, 33, 0.98) 15%, rgba(33, 33, 33, 0.85) 30%, rgba(33, 33, 33, 0.5) 50%, rgba(33, 33, 33, 0) 75%);
		 /*background: linear-gradient(180deg, rgba(33, 33, 33, 0) 20%, rgba(33, 33, 33, 1) 100%);*/
        z-index: 2;
        transition: opacity 0.5s ease;
    }

    /* ТЕКСТОВЫЙ БЛОК */
    .repair-content {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 30px 30px;
        z-index: 3;
        color: white;
    }

    /* ЗАГОЛОВОК И СЧЕТЧИК */
    .word-wrapper {
        position: relative;
        display: inline-block;
    }

    .repair-title {
font-size: 22px;
    font-weight: 300;
    margin: 0 0 15px 0;
    color: #f5f5f5;
    text-transform: uppercase;
    /* text-shadow: 0 2px 4px rgba(33, 33, 33, 0.5); */
    letter-spacing: 0.15em;
    line-height: 1.2;
    transition: color 0.5s ease;
    }

    .repair-count {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 12px;
    font-weight: 300;
    color: #ffcc00;
    transition: opacity 0.5s ease, color 0.5s ease;
    }

    .repair-subtitle {
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    color: #bbb;
    line-height: 1.5;
    transition: opacity 0.6s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    opacity: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    .repair-line {
        width: 0;
        height: 2px;
        background: #ffcc00;
        margin-top: 15px;
        transition: width 0.7s cubic-bezier(0.1, 0.9, 0.2, 1);
        box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
    }

    /* ЭФФЕКТЫ ПРИ НАВЕДЕНИИ */
    .repair-item:hover {
        z-index: 10;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    }
    
    .repair-item:hover .repair-index { color: #f5f5f5; }
    .repair-item:hover .repair-count { opacity: 1;     color: #fff;   }
  .repair-item:hover .plitka__img_block img { /*  transform: scale(1.05);*/ filter: grayscale(1); }
    .repair-item:hover .repair-title { color: #bbb; }
    .repair-item:hover .repair-subtitle { color: #fff; }
    .repair-item:hover .repair-line { width: 50px; }

    /* АДАПТИВНОСТЬ */
    @media (max-width: 1100px) { .repair-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 768px) { 
        .repair-grid { grid-template-columns: 1fr; } 
        .repair-item:hover { outline: none; }
    }

.content { color: white; text-align: center; }
/* Настройка панелей */
.panel {
  height: 100vh;
  height: 100dvh; /* Динамическая высота для мобилок (без учета адресной строки) */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* Убираем sticky! GSAP сам всё сделает */
  overflow: hidden;
      border-radius: 0;
  background: #0f0f0f; /* Дефолтный фон, чтобы не было дырок */
}
.pin-spacer {
    margin: 0px 0px 0px;
}
/* Чтобы контент не дергался при загрузке */
.reveal { 
  opacity: 0; 
  will-change: transform, filter;
}

.parallax-item {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .panel {
    height: auto; /* На мобилках лучше давать контенту расти вниз */
    min-height: 100vh;
    padding: 50px 0;
  }
}
.wow {
  visibility: hidden;
}
.modal__content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

/* Стилизация для Chrome, Safari и Edge */
.modal__content::-webkit-scrollbar {
    width: 6px; /* Тонкая полоска */
}

.modal__content::-webkit-scrollbar-track {
    background: transparent; /* Фон дорожки */
}

.modal__content::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Цвет самого ползунка */
    border-radius: 10px; /* Закругляем */
}

/* Выравниваем цвет шрифта везде под один стандарт */
#contactFormStatic input, 
#contactFormStatic select, 
#contactFormStatic textarea {
  /*color: #bbb;*/ 
  color: #f5f5f5;
  font-family: inherit;
}

/* Цвет плейсхолдеров (делаем чуть мягче) */
#contactFormStatic ::placeholder {
  color: #86868b;
  opacity: 1;
}

/* Кастомный выпадающий список */
.select-wrapper {
  position: relative;
  width: 100%;
}

.grecaptcha-badge { 
    visibility: hidden; 
}

/* Стили для текста (чтобы не отвлекал) */
.captcha-notice {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    line-height: 1.4;
}

.captcha-notice a {
    color: #000; /* Или ваш цвет ссылок */
    text-decoration: underline;
}

/* 1. Принудительно задаем цвет текста для самого селекта */
.custom-select-wrapper select {
    color: #f5f5f5!important; /* Ставь тот же цвет, что у инпутов */
}

/* 2. Делаем первую опцию (подсказку) серой, как placeholder */
/* Для этого в HTML у первой опции должен быть атрибут disabled selected */
.custom-select-wrapper select option:first-child {
    color: #898d91; 
}

/* 3. Цвет текста внутри выпадающего списка (когда он открыт) */
.custom-select-wrapper select option {
    color: #898d91;
    background-color: inherit;
}
.form__zag {
font-size: 24px;
    font-weight: 900;
    padding: 0px 60px 0 0;
    color: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
}
.form__zag__static {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #f5f5f5;
    text-transform: uppercase;
    line-height: 1.3;
}
#contactFormStatic {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Отступы между блоками */
}
#contactFormModal {
  display: flex;
  flex-direction: column;
  margin: 0px 0 30px;
  gap: 15px; /* Отступы между блоками */
}
/* Сетка для парных полей */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.form-row1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

/* Адаптив: на мобилках в одну колонку */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr;    gap: 15px;}
   .form-row1 { grid-template-columns: 1fr;   gap: 15px;}
}


/* Общие стили для инпутов, селекта и textarea */
#contactFormStatic input, 
#contactFormStatic select, 
#contactFormStatic textarea {
width: 100%;
    padding: 15px;
    border: 1px solid #bbb!important;
    color: #e0e0e0;
    /*background: #2a2a2a;*/
	 background: inherit;
    font-size: 14px;
font-weight: 300;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
option:disabled {
    color: #fff;
}
/* Полная очистка стилей автозаполнения */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    /* Фокус: подменяем заливку браузера на внутреннюю тень нужного цвета */
    -webkit-box-shadow: 0 0 0 1000px #ffffff00 inset !important;
    /* Цвет текста */
    -webkit-text-fill-color: rgb(255 255 255 / 15%) !important;
    /* Убираем рамку, если браузер её добавил */
    border-bottom: 0px solid rgb(255 255 255 / 15%)  !important;
	 border-left: 0px solid #ccc !important;
	 border-right: 0px solid #ccc !important;
	 border-top: 0px solid #ccc !important;
}

/* Дополнительный хак через анимацию для современных браузеров */
@keyframes onAutoFillStart { from {} to {} }
input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s !important;
}

/* Эффект при клике */
#contactFormStatic input:focus, 
#contactFormStatic select:focus, 
#contactFormStatic textarea:focus {
  outline: none;
    background: inherit;
  box-shadow: none;
}
input:-internal-autofill-previewed {
    appearance: menulist-button;
    background-image: none !important;
    background-color: #f5f5f5 !important;
    color: fieldtext !important;
}
/* Стили для textarea */
#contactFormStatic textarea {
  min-height: 60px;
  resize: vertical;
}

/* Общие стили для инпутов, селекта и textarea */
#contactFormModal input, 
#contactFormModal select, 
#contactFormModal textarea {
    width: 100%;
    border: 1px solid #bbb!important;
    letter-spacing: normal;
    margin: 0;
    border-radius: 0;
    /*background: #212121;*/
	background: inherit;
    color: #e0e0e0;
    padding: 15px;
    font-size: 14px;
  font-weight: 300;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Эффект при клике */
#contactFormModal input:focus, 
#contactFormModal select:focus, 
#contactFormModal textarea:focus {
  outline: none;
  background: inherit;
  box-shadow: none;
}

/* Стили для textarea */
#contactFormModal textarea {
  min-height: 60px;
  resize: vertical;
}

  .leaflet-attribution-flag {
   opacity: 0;
    width: 0 !important;
  }
 /* Контейнер раздела Service Areas */
  .service-areas-container {
    background-color: #212121;
    color: #ffffff;
    font-family: 'Inter', sans-serif; /* Или основной шрифт вашего сайта */
    margin: 20px 0;
  }

  .service-areas-container h2 {
    color: #ffffff;
    margin-bottom: 20px;
  }

  /* Стили спойлера (details) */
  .zip-spoiler {
    border: 1px solid #4d4d4d;
    /*background-color: #2a2a2a;*/
    margin: 0px 0 30px;
   /* box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
  }

  /* Заголовок-кнопка */
  .zip-spoiler summary {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
    color: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
  }

  .zip-spoiler summary:hover {
    background-color: #333;
  }

  /* Кастомный плюс/минус вместо стрелки */
  .zip-spoiler summary::after {
    content: '>';
	content: "\f107";
    font-family: FontAwesome;
    font-size: 20px;
    color: #bbb;
	    font-weight: 300;
  }

  details[open].zip-spoiler summary::after {
    content: '^';
	content: "\f106";
    font-family: FontAwesome;
  }

  /* Сетка колонок */
  .zip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 60px;
    padding: 20px 30px;
    border-top: 1px solid #333;
  }

  /* Стили мини-таблиц */
  .mini-table {
    width: 100%;
    border-collapse: collapse;
  }

  .mini-table td {
    padding: 10px 0;
    border-bottom: 1px solid #333;
    font-size: 14px;
  }

  .city-name {
    color: #bbb;
    text-align: left;
	font-family: 'Courier New', Courier, monospace;
  }

  .zip-code {
    color: #f5f5f5;
	font-family: 'Courier New', Courier, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Адаптив для мобилок */
  @media (max-width: 768px) {
    .zip-grid {
      grid-template-columns: 1fr;
      padding: 15px 20px;
    }
    .zip-spoiler summary {
      font-size: 12px;
    }
  }
  .table-wrapper {
    width: 100%;
    margin: 60px auto;
  }

  .modern-table {
    width: 100%;
    border-collapse: collapse;
  }

  .modern-table th {
    text-align: left;
    padding: 15px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    border-bottom: 1px solid rgb(255 255 255 / 60%);
  }

  .modern-table td {
    padding: 15px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 1px;
    font-weight: 300;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    transition: all 0.2s ease;
  }

  /* Оформление колонки с индексами */
  .modern-table td:last-child {
    /*font-family: ui-monospace, monospace;*/
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.3;
    font-size: 14px;
  }
   /* 
.leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.leaflet-bar a:hover, .leaflet-bar a:focus {
    background-color: #212121;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-clip: padding-box;
}
.leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.leaflet-bar a {
    background-color: #2a2a2a;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #bbb;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
       font-size: 24px;
    font-weight: 300;
}
.leaflet-left .leaflet-control {
    margin-left: 15px;
}
.leaflet-top .leaflet-control {
    margin-top: 15px;
}
.leaflet-touch .leaflet-bar a {
    width: 40px;
    height: 40px;
    line-height: 40px;
}*/


/* .leaflet-tile-container {
    filter: saturate(0.6) brightness(1.02) contrast(0.95);
}*/
/* .leaflet-tile-container {
    filter: 
        grayscale(1)          
        brightness(1)        
        contrast(1)          
        opacity(1);          
}*/
.zip-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.6) !important; /* Полупрозрачный белый */
    font-size: 10px;
    font-weight: 300;
}

/* Убираем дефолтный "хвостик" у облачка */
.leaflet-tooltip-top:before, 
.leaflet-tooltip-bottom:before, 
.leaflet-tooltip-left:before, 
.leaflet-tooltip-right:before {
    display: none !important;
}
:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
        #preloader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
			 display: flex;
            background-color: #212121; /* Черный фон */      
            justify-content: center;
            align-items: center;
            z-index: 9999;
            overflow: hidden;
        }

        /* Размер контейнера анимации */
        #lottie-2 {
            width: 400px;
            height: auto;
        }
		  .preloader-hidden #preloader-overlay {
        display: none !important;
    }
	@media (max-width: 768px) {
    #lottie-2 {
width: 80%;
    }
	}

#lottie-2 {
    width: 400px;
    max-width: 500px;
    height: auto;
}

@media (max-width: 768px) {
    #lottie-2 { width: 80%; }
}
/* Контейнер на весь экран */
.bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a0516; /* Глубокий темный фон */
    z-index: -1;
    overflow: hidden;
}

/* Общие стили для пятен */
.blob {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: move 20s infinite alternate ease-in-out;
}

/* Цвета из нашей палитры */
.blob-1 {
    background: #5200FF; /* Индиго */
    top: -10%;
    left: -10%;
}

.blob-2 {
    background: #FF2E92; /* Маджента */
    bottom: -10%;
    right: -10%;
    animation-duration: 30s;
    animation-direction: alternate-reverse;
}

.blob-3 {
    background: #00E0FF; /* Голубой */
    top: 30%;
    left: 40%;
    width: 40vw;
    height: 40vw;
    animation-duration: 25s;
}

/* Эффект шума (создаем через SVG-фильтр прямо в CSS) */
.noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.15;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Анимация плавного плавания */
@keyframes move {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { transform: translate(15%, 10%) rotate(40deg) scale(1.1); }
}
/* Контейнер на весь экран, который не двигается */
.fx-canvas {
  /*position: fixed;*/
  /*inset: 0;*/
  /*z-index: -1;*/
  /*background-color: #0a0a0c;*/ /* Твой базовый темный */
  /*overflow: hidden;*/
  /* Подсказываем браузеру вынести это на GPU */
 /* will-change: transform;*/
}

/* Абстрактные пятна (статичные фигуры) */
.fx-spot {
  /*position: absolute;*/
  /*border-radius: 50%;*/
  /*filter: blur(80px);*/ /* Размываем саму фигуру */
  /*opacity: 0.6;*/
}

/*.fx-spot-1 {
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, #4facfe 0%, #00f2fe 100%);
  top: -10%;
  left: -5%;
}*/

/*.fx-spot-2 {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, #8a2be2 0%, #4b0082 100%);
  bottom: -15%;
  right: -10%;
}*/

/* Слой с шумом (Grain) */
/*.fx-grain {
 /*position: absolute;
  /*inset: 0;*/
   /*opacity: 0.04;*/ /* Едва заметно, чтобы убрать "пластиковость" градиента */
   /*pointer-events: none;*/
  /* Генерируем шум прямо в CSS через SVG-фильтр (самый легкий способ) */
  /* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");*/
}/*

/* Контент, который спокойно скроллится */
.content-layer {
  /*position: relative;
  z-index: 1;
  padding: 50px;
  color: white;*/
  /*min-height: 200vh;*/ /* Просто для теста скролла */
}
.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #f8f9fa;
  overflow: hidden;
  /* Убираем все лишние фильтры с контейнера */
}

.fx-spot {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.fx-spot-1 {
  width: 70vw;
  height: 70vw;
  /* Использование rgba позволяет контролировать "плотность" пятна без фильтров */
  background: radial-gradient(circle, rgba(209, 233, 255, 0.6) 0%, rgba(209, 233, 255, 0) 70%);
  top: -15%;
  right: -10%;
}

.fx-spot-2 {
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, rgba(237, 231, 246, 0.7) 0%, rgba(237, 231, 246, 0) 70%);
  bottom: -20%;
  left: -15%;
}

/* Шум: используем готовую микро-картинку вместо SVG-кода */
.fx-grain {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  /* Ссылка на готовую текстуру шума (она бесшовная и очень легкая) */
  background-image: url('https://grainy-gradients.vercel.app');
}

.content-layer {
  position: relative;
  z-index: 1;
}
/* Контейнер для полей */
/*.form-scroll-area {
    max-height: 45vh!important; 
    overflow-y: auto!important;
    padding-right: 10px;
    margin-bottom: 20px;

    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
} */

/*.form-scroll-area::-webkit-scrollbar {
    width: 6px!important; 
}

.form-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.form-scroll-area::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
.modal__content {
    overflow: hidden !important; 
    display: flex;
    flex-direction: column;
}
/*
@media (max-height: 600px) {
    .form-scroll-area {
        max-height: 35vh;
    }
    .modal__content {
        margin: 10px auto;
        padding: 20px;
    }
}*/


/* 1. Контейнер */
.modal {
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 2001;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    visibility: hidden;
    /* Плавный фон (линейно) */
    transition: visibility 0.3s linear;
}

/* 2. Оверлей (фон) — появляется отдельно */
.modal__overlay {
    position: absolute;
    inset: 0;
   background: #2a2a2a;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s linear;
}
.modal.active .modal__overlay {
    opacity: 1;
}

.modal.active {
    visibility: visible;
}

/* 3. Белое окно (Контент) */
.form__content {
     max-width: 900px;
	 margin: 0 auto;
	 position: relative;
}
.modal__content {
position: relative;
    background: #2a2a2a;
    margin: 0!important;
    z-index: 2;
    width: 100%;
   /* border: 1px solid #333;*/
    /*box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
     /*max-width: 900px;*/
    padding: 45px;
    box-sizing: border-box;
    opacity: 0;
    transform: translate(0, -25%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    overflow-y: auto;
    /*max-height: calc(100vh - 30px);*/
	    max-height: calc(100vh);
    scrollbar-width: none;
}
@media (max-width: 768px) {
  .modal__content { padding: 30px 30px 60px; }
}
/* Состояние при активации */
.modal.active .modal__content {
    opacity: 1;
    transform: translate(0, 0);
}

.modal__content::-webkit-scrollbar { display: none; }
.modal__body { width: 100%; }

/* Адаптив */
@media (max-width: 767px) {
  .modal__content { width: 100%; margin: 0px 0px !important;border: 0px;}
}

/* Контейнер для позиционирования стрелки */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

/* Стили самого селекта */
.custom-select-wrapper select {
    cursor: pointer;
    outline: none;
    /* Убираем стандартную стрелку браузера */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* РИСУЕМ СТИЛЬНУЮ ТОНКУЮ СТРЕЛКУ-ГАЛОЧКУ */
.custom-select-wrapper::after {
content: "";
    position: absolute;
    right: 8px;
    right: 15px;
    top: 23px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Добавим эффект при клике (галочка может чуть дергаться или менять цвет) */
.custom-select-wrapper select:focus + ::after {
    border-color: #000;
    opacity: 1;
}
.captcha__text {
    color: #bbb;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 300;
    text-align: center;
}
.captcha__text a{
color: #fff;
font-weight: 300;
}
.checkbox.style-e .checkbox__body a:hover {
    color: #ffcc00; 
}

.modal__close {
    position: absolute;
    top: -20px;
    right: -20px;
    padding: 30px;
    width: fit-content;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
@media (max-width: 767px) {
.modal__close {
    top: -45px;
}
}

.modal__content .modal__close {
  animation: fadeInClose 0.5s ease forwards;
  animation-delay: 0.3s; /* Появится чуть позже основного окна */
}
/* Рисуем линии крестика */
.modal__close::before,
.modal__close::after {
content: '';
    position: absolute;
    width: 24px;
    opacity: 1;
    height: 2px;
    background-color: #4d4d4d;
    border-radius: 2px;
    transition: background-color 0.3s;
}

.modal__close::before { transform: rotate(45deg); }
.modal__close::after { transform: rotate(-45deg); }

/* Анимация при наведении */
.modal__close:hover {
  transform: rotate(90deg); /* Закручиваем при наведении */
}
.block__form__zag {
    padding: 0 0 60px 0;
}

.modal__close:hover::before,
.modal__close:hover::after {
  background-color: #6c757d; /* Краснеет при наведении */
}
.custom-select-wrapper select option {
    background-color: #212121; /* Фон списка */
    color: #ffffff;             /* Цвет текста */
    font-size: 14px;
    padding: 15px;             /* Работает не во всех браузерах, но помогает */
}
/* Для всех современных браузеров */
#contactFormModal input::placeholder,
#contactFormModal textarea::placeholder {
  /*color: #bbb;*/ 
  color: #f5f5f5;
    opacity: 1;    /* Устанавливаем 1, чтобы цвет был ярким (в Firefox по умолчанию 0.5) */
}

/* Для старых версий Internet Explorer */
#contactFormModal input:-ms-input-placeholder,
#contactFormModal textarea:-ms-input-placeholder {
  /*color: #bbb;*/ 
  color: #f5f5f5;
}

/* Для Microsoft Edge */
#contactFormModal input::-ms-input-placeholder,
#contactFormModal textarea::-ms-input-placeholder {
  /*color: #bbb;*/ 
  color: #f5f5f5;
}
/* Для всех современных браузеров */
#contactFormStatic input::placeholder,
#contactFormStatic textarea::placeholder {
  /*color: #bbb;*/ 
  color: #f5f5f5;
    opacity: 1;    /* Устанавливаем 1, чтобы цвет был ярким (в Firefox по умолчанию 0.5) */
}

/* Для старых версий Internet Explorer */
#contactFormStatic input:-ms-input-placeholder,
#contactFormStatic textarea:-ms-input-placeholder {
  /*color: #bbb;*/ 
  color: #f5f5f5;
}

/* Для Microsoft Edge */
#contactFormStatic input::-ms-input-placeholder,
#contactFormStatic textarea::-ms-input-placeholder {
  /*color: #bbb;*/ 
  color: #f5f5f5;
}
/* Убираем стандартную синюю подсветку при наведении (в некоторых браузерах) */
.custom-select-wrapper select:focus option:checked {
    background: #ffcc00 linear-gradient(0deg, #ffcc00 0%, #ffcc00 100%) !important;
    color: #000 !important;
}
form button {
    width: 100%;
    background: #212121;
    color: #fff;
    padding: 10px;
    border: 0;
	}
.checkbox.style-e {
    position: relative;
    padding-left: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media (max-width: 767px) {
.checkbox.style-e {
    align-items: flex-start;
	}
}	
.checkbox.style-e a{
color: #fff;
font-weight: 300;
}

.checkbox.style-e input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Фон при включении */
.checkbox.style-e input:checked ~ .checkbox__checkmark {
    background-color: #ffcc00;
}

/* Движение ползунка */
.checkbox.style-e input:checked ~ .checkbox__checkmark:after {
    left: 22px; /* Смещаем на разницу ширины контейнера и кружка */
}

.checkbox.style-e .checkbox__checkmark {
    position: absolute;
    left: 0;
    height: 26px; /* Внешняя высота */
    width: 46px;  /* Внешняя ширина */
    background-color: #212121; /* Стартовый фон */
    transition: all 0.25s ease;
    border-radius: 13px;
    /* Обводка #fff 20% */
    border: 1px solid #bbb;
    box-sizing: border-box;
}

.checkbox.style-e .checkbox__checkmark:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px; /* Оптимальный размер ползунка */
    height: 20px;
    display: block;
    background-color: #f5f5f5;
    border-radius: 50%;
    transition: left 0.25s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Легкая тень для объема */
}

.checkbox.style-e .checkbox__body {
font-size: 12px;
    color: #bbb;
    line-height: 1.5;
    font-weight: 300;
}

.checkbox.style-e:hover .checkbox__checkmark {
    border-color: rgba(255, 255, 255, 0.4); /* Подсветка границ при наведении */
}
.formMessage {
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
	}
.form__podzag {
margin: 0px 60px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #f5f5f5;
    font-weight: 300;
}

@media (max-width: 768px) {
.form__podzag {
    margin: 0px 0px 0 0;
}
}
.checkbox__privacy {
display: flex;
    gap: 20px;
	    margin: 0 0 20px;
}	
input, select, textarea {
width: 100%;
padding: 10px;
margin: 0 0 0px;
}
.checkbox {
    position: relative!important;
	left: 0!important;
    width: fit-content;
}
input[type=checkbox], input[type=radio] {
    margin: 0px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff00 inset !important;
    -webkit-text-fill-color: #f5f5f5 !important;
	text-transform: none!important;
    border: 1px solid rgb(255 255 255 / 15%) !important;
}
#bar__show {
    margin: 60px auto;
    height: 300px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#bar__show label {
    width: 40px;
    height: 100%;
	margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

label[for="1"].bar {
    background-color: #ffffff;
    color: #000000;
}

label[for="2"].bar {
    background-color: #000000;
    color: #ffffff;
}
label[for="3"].bar {
    background-color: #ccc;
    color: #000;
}
.block__bar {
    height: 300px;
    width: 0px;
    box-shadow: none;
    overflow: hidden;
    text-align: center;
	transition: all .3s ease-out;
}

#personal {
    background-color: #ffffff;
}

#agency {
    background-color: #000000;
}
#agency1 {
    background-color: #ccc;
}

.block__bar p {
    display: inline-block;
    font-size: 18px;
    width: 250px;
    padding: 0 10px;
}

#personal p {
    color: #000000;
}

#agency p {
    color: #ffffff;
}

.block__bar img {
    width: 110px;
}

.block__bar span {
    display: block;
    width: 250px;
    margin: 10px 0;
}

.zag__bar {
    transform: rotate(-90deg);
    white-space: nowrap;
}
.block__bar span:last-of-type{
  margin:20px 0;
}
input:checked+div {
    width: 100%;
}
.nav-footer-wrapper {
    position: absolute;
    /* Универсальный расчет: 
       50% — центр огромного блока .nav, 
       50vh — спуск до низа экрана, 
       -110px — подъем кнопки выше системных панелей Safari/Chrome */
    top: calc(50% + 50vh - 130px); 
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    
    /* Состояние скрыто (твои тайминги) */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Логика появления при открытии меню */
.menu-icon:checked ~ .nav .nav-footer-wrapper {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    /* Вылетает последней после Contact Us */
    transition: opacity 350ms 1720ms ease, 
                transform 350ms 1720ms ease;
}

/* Сброс задержки при закрытии */
.menu-icon:not(:checked) ~ .nav .nav-footer-wrapper {
    transition-delay: 0ms;
}

/* Специфичные фиксы для разных экранов */
@media screen and (max-height: 740px) {
    .nav-footer-wrapper {
        /* На маленьких экранах поднимаем чуть выше, чтобы не прилипала */
        top: calc(50% + 50vh - 95px);
    }
}

/* Фикс для горизонтального режима (чтобы кнопка не перекрывала пункты меню) */
@media screen and (max-height: 450px) and (orientation: landscape) {
    .nav-footer-wrapper {
        position: relative;
        top: auto;
        margin-top: 40px;
        padding-bottom: 40px;
    }
}
.current {
   /*color: #6c757d!important;*/
  color: #bbb!important;
   pointer-events: none;
  cursor: default;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.menu-icon:checked + label { position: fixed; }
.menu-icon:checked + label,
.menu-icon:not(:checked) + label{
  /*  position: fixed;*/
 position: absolute; 
    top: 30px;
    right: 75px;
    display: block;
    width: 30px;
    height: 30px;
    z-index: 10001; /* Поверх черного пузыря */
    cursor: pointer;
}
.menu-icon:checked + label:before,
.menu-icon:not(:checked) + label:before{
  position: absolute;
  content: '';
  display: block;
  width: 30px;
  height: 20px;
  z-index: 20;
  top: 0;
  left: 0;
  border-top: 2px solid #ececee;
  border-bottom: 2px solid #ececee;
  transition: border-width 100ms 1500ms ease, 
              top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
              height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), 
              background-color 200ms ease,
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:after,
.menu-icon:not(:checked) + label:after{
  position: absolute;
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  z-index: 20;
  top: 10px;
  right: 4px;
  background-color: #ececee;
  margin-top: -1px;
  transition: width 100ms 1750ms ease, 
              right 100ms 1750ms ease,
              margin-top 100ms ease, 
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:before{
  top: 10px;
  transform: rotate(45deg);
  height: 2px;
  background-color: #ececee;
  border-width: 0;
  transition: border-width 100ms 340ms ease, 
              top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
              height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), 
              background-color 200ms 500ms ease,
              transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:after{
  width: 30px;
  margin-top: 0;
  right: 0;
  transform: rotate(-45deg);
  transition: width 100ms ease,
              right 100ms ease,  
              margin-top 100ms 500ms ease, 
              transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav {
  /* Оставляем твои базовые стили */
  position: fixed; /* МЕНЯЕМ с absolute на fixed, чтобы он всегда знал центр экрана */
  top: 15px;
  right: 15px;
  width: 60px;
  height: 60px;
  z-index: 10000;
  background-color: #212121;
  overflow: hidden;
  animation: border-transform 7s linear infinite;

  /* ТРАНЗАКЦИИ ЗАКРЫТИЯ (когда снимаем checked) */
  /* Мы добавляем задержку на top, right и transform, чтобы пузырь сначала уменьшился в центре, а потом улетел в угол */
  transition: width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
              height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
              top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),  
              right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 250ms 1100ms ease;
}
.nav.nav-scrolled {
    top: -120px;
    /* Плавность совпадает с хедером (0.3s) */
    transition: top 0.3s ease-in-out; 
}
/* Когда меню ОТКРЫТО */
.menu-icon:checked ~ .nav {
  animation-play-state: paused;
    top: 50% !important;
    right: 50% !important;
    transform: translate(50%, -50%) !important;
  width: 200%;
  height: 200%;
  
  /* ТРАНЗАКЦИИ ОТКРЫТИЯ */
  transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),  
              right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 250ms 700ms ease,
              width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
              height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Фикс для адаптива, чтобы fixed не улетел далеко */
@media screen and (max-width: 991px) {
  .nav {
    right: 15px;
    top: 10px;
  }
}
@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

.nav ul{
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 6;
  text-align: center;
  transform: translateY(-50%);
  list-style: none;
}
.nav ul li{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 10px 0;
  text-align: center;
  list-style: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 250ms linear;
}

.nav ul li:nth-child(1){
  transition-delay: 200ms;
}
.nav ul li:nth-child(2){
  transition-delay: 150ms;
}
.nav ul li:nth-child(3){
  transition-delay: 100ms;
}
.nav ul li:nth-child(4){
  transition-delay: 50ms;
}
.nav ul li a{
    font-size: 34px;
    text-transform: uppercase;
    line-height: 1.5;
    font-weight: 900;
    letter-spacing: 1px;
    display: inline-block;
    position: relative;
    color: #f5f5f5;
    transition: all 250ms linear;
}

 /*.nav ul li a:after{
  display: block;
  position: absolute;
  top: 50%;
  content: '';
  height: 8px;
  margin-top: -4px;	
  width: 0;
  left: 0;
  background-color: #353746;
  opacity: 0.8;
  transition: width 250ms linear;
}*/
@media (hover: hover) {.nav ul li a:hover:after{
  width: 100%;
}
.nav ul li a:hover{
  text-decoration: none;
   /*color: #ffeba7;*/
  color: #bbb; 
}
}
@media (max-width: 768px) {
.nav ul li a:active:after{
  width: 100%;
}
.nav ul li a:active{
  text-decoration: none;
   /*color: #ffeba7;*/
  color: #bbb; 
}
}
.nav ul li a.current:after {
  width: 100%;
}

.menu-icon:checked ~ .nav  ul li {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease,
              transform 250ms ease;
}
.menu-icon:checked ~ .nav ul li:nth-child(1){
  transition-delay: 1400ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(2){
  transition-delay: 1480ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(3){
  transition-delay: 1560ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(4){
  transition-delay: 1640ms;
}

@media screen and (max-width: 991px) {
  .menu-icon:checked + label,
  .menu-icon:not(:checked) + label{
    right: 30px;
	 /*right: 55px;*/
  }
  .nav{
    right: 15px;
	/*right: 55px;*/
  }
}
/* Скрываем для мобильных */
@media (max-width: 767px) {
    .dropdown-content { display: none !important; }
}

@media (min-width: 768px) {
    /* Хедер должен иметь фон и z-index выше меню */
    .header_logo_menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .header_logo_menu, .container, .block__header {
        overflow: visible !important;
    }

    .menu_descktop {
        display: flex;
        align-items: center;
        position: static;
    }

    .menu_descktop li {
        position: static; 
        height: 80px;     
        display: flex;
        align-items: center;
    }

    /* Сама выпадашка */
    .dropdown-content {
        display: block;      
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
            box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
        position: absolute;
        /* Прячем в нулевую точку, под хедер */
        top: 0;           
        left: 0;
        width: 100%;
        min-width: 100vw;
        background: #212121;
        
        /* Ставим z-index ниже хедера */
        z-index: 1900; 
        
        /* Эффект выезда: в покое оно скрыто за хедером */
        transform: translateY(0);
        transition: transform 0.4s ease, opacity 0.3s ease;
        padding: 25px 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    /* Появление при наведении: выезжает вниз на высоту хедера */
    .menu_descktop li:hover .dropdown-content {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(90px); /* Смещение вниз из-под хедера */
    }

    /* Контейнер внутри */
    .dropdown-inner {
        display: flex;
        justify-content: center;
        gap: 50px;
    }

    .dropdown-inner a {
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: opacity 0.2s;
    }

}


/* Tabs */
#myBtnContainer { 
display: flex;
    margin: 0px 0px 60px;
	border-top: 1px solid #4d4d4d;
    position: relative !important;
    flex-wrap: nowrap!important;
}
.all-projects-box {width: fit-content;
width: fit-content;
    cursor: pointer;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.4em;
    padding: 30px 0;
    color: #fff;
    text-transform: uppercase;
	}
	.all-projects-box:hover {
		    color: #bbb;
		}
.filter-category {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    /*color: #d9b99b;*/
	color: #bbb;
    grid-template-columns: auto 1fr;
    align-items: center;
    display: grid;
    gap: 10px;
    margin: 0 0 30px;
    line-height: 1.5;
	}

	.filter-project {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    color: #e0e0e0;
    justify-content: flex-start;
    grid-template-columns: auto 1fr;
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 0 0 30px;
    line-height: 1.5;
	}
		.ab-project {
    justify-content: center!important;
	}
.menu-project-block {
width: 100%;
	}
	.menu-project {
    /*color: #d9b99b;*/
	color: #bbb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    display: grid;
    grid-template-columns: auto 1fr; 
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    margin: 0 0 60px;
	}
	.button-project {
    margin: 30px 0 0px;
	}
	.button-to-project {
    margin: 30px 0 0px;
	        display: flex;
        justify-content: center;
	}
	@media (max-width: 768px) {
		.button-project {
        display: flex;
        justify-content: center;
	}
				.ab-project {
    justify-content: flex-start!important;
	}
			.button-to-project {
        display: flex;
        justify-content: center;
	}
	}

.btn-f {
    border: none;
    padding: 15px 0 !important;
    padding: 0;
    outline: none;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    font-weight: 500;
    background-color: transparent;
    cursor: pointer;
}

.btn-txt {
    position: relative;
}

/* .btn-txt:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 0;
    height: 2px;
    margin-bottom: 0px;
    background-color: #ffcc00;
    opacity: 0.8;
    transition: width 250ms linear;
}*/

/* 1. Показываем полоску при наведении на НЕактивные кнопки */
.btn-f:not(.active):hover .btn-txt:after {
    width: 100%;
}

/* 2. Показываем полоску ВСЕГДА для активной кнопки */
.btn-f.active .btn-txt:after {
    width: 100%;
}

/* Стили текста */
.btn-f:hover, .btn-f.active {
	    color: #ffcc00;
}

/* Блокировка кликов по активной */
.btn-f.active {
    pointer-events: none;
    cursor: default;
}

.divider {
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    opacity: 0.2;
    display: flex;
    align-items: center;
    align-self: flex-end;
    margin-bottom: 10px;
    line-height: 1;
    position: relative;
    top: 2px;
}

.parlor-button-counter {
font-size: 10px;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    position: absolute;
    align-self: flex-start;
    letter-spacing: normal;
    top: -8px;
    right: 3px;
}

/* Базовое состояние скрытого элемента */
.filterDiv {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.btn-f .parlor-button-counter {
  color: #ffcc00;               
  transition: all 0.3s ease;
}

.btn-f.active .parlor-button-counter {
  color: #ffcc00;              
}
.btn-f:hover .parlor-button-counter {
  color: #bbb;              
}

/* Состояние при показе */
.filterDiv.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Класс для самой анимации (активируется через мгновение после show) */
.filterDiv.fade-in {
  opacity: 1;
  transform: scale(1);
}
.thumb-item img{
    width: 100%;
	filter: brightness(80%);
   /* object-fit: cover;
    height: calc(100% + 12px);
    top: -12px;*/
    pointer-events: none;
    /*transform: translateY(0) translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 1.6s cubic-bezier(0.25, 1, 0.2, 1), filter 1.1s cubic-bezier(0.25, 1, 0.2, 1);*/
}
.thumb-item:hover img{
	filter: brightness(93%);
	/*transform: translateY(12px) translate3d(0, 0, 0);*/
    /*filter: grayscale(1);*/
}
.thumb-item {
    cursor: pointer;
    position: relative;
	    overflow: hidden;
	    aspect-ratio: 1 / 1;
    display: flex;
}
.thumb-item:hover {
    z-index: 10;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
}
.portfolio-page .filterDiv.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.portfolio-page .thumbnails-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
}

@media screen and (max-width: 1024px) {
    .portfolio-page .thumbnails-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media screen and (max-width: 768px) {
    .portfolio-page .thumbnails-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.thumb-item::before {
  content: '';
  position: absolute;
  top: 15px;   
  left: 15px; 
   display: none;
  width: 20px;  
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3); 
  border-radius: 50%;
  background-color: transparent;
  z-index: 10;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.thumb-item::after {
  content: '';
  position: absolute;
  top: 21px;
  display: none;
  left: 21px;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2); 
  border-radius: 50%;
  z-index: 11;
  transition: all 0.3s ease;
}

.thumb-item:hover::before {
  border-color: rgba(255, 255, 255, 0.6);
}
.thumb-item:hover::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.thumb-item.active::before {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}
.thumb-item.active::after {
  background-color: #ffffff; 
  opacity: 1;
}

.dot-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: none;
}

.dot-wrapper::before {
  content: '';
  position: absolute;
  top: 0;   
  left: 0; 
  width: 20px;  
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6); 
  border-radius: 50%;
  background-color: #373737;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.dot-wrapper::after {
  content: '';
  position: absolute;
  top: 6px; 
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: #a6a6a6; 
  border-radius: 50%;
  transition: all 0.3s ease;
}
.text-filter::before {
content: '';
    position: absolute;
    top: 20px;
    right: 15px;
    width: 20px;
    height: 20px;
    border: 1px solid #f5f5f5;
    border-radius: 50%;
    z-index: 10;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.text-filter::after {
content: '';
    position: absolute;
    top: 26px;
    right: 21px;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 11;
    transition: all 0.3s ease;
}

.thumb-item:hover .text-filter::before {
  border-color: #ffcc00;
}
.thumb-item:hover .text-filter::after {
  background-color: #ffcc00;
}

.thumb-item.active .text-filter::before {
  border-color: #ffcc00;
}
.thumb-item.active .text-filter::after {
  background-color: #ffcc00; 
  opacity: 1;
}
.btn-f:not(.active):hover .dot-wrapper::before {
  border-color: #ffcc00;
}
.btn-f:not(.active):hover .dot-wrapper::after {
  background-color: #ffcc00;
}

.btn-f.active .dot-wrapper::before {
  border-color: #ffcc00;
}
.btn-f.active .dot-wrapper::after {
  background-color: #ffcc00; 
}
 .cifr-filter  {
	 position: absolute;
    top: 15px;
    right: 15px;
	display: none;
    z-index: 4;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    font-weight: 900;
    transition: all 0.5s ease;
	}
	 .text-filter  {
position: absolute;
    font-size: 12px;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    text-transform: uppercase;
    line-height: 1.3;
    padding: 15px;
    color: #f5f5f5;
    z-index: 10;
    letter-spacing: 2px;
    font-weight: 500;
	}
.thumb-item:hover	 .cifr-filter  {position: absolute;
    color: rgba(255, 255, 255, 1);
	}
/*.thumb-item:hover {
    filter: grayscale(1);
}*/



.repair-overlay, .text-filter, .cifr-filter {
  pointer-events: none; 
}
.thumbnails-grid    {display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
	 @media (max-width: 767px) {
.thumbnails-grid    {
    grid-template-columns: 1fr 1fr;
}
.btn-f + .btn-f:before {
    display: none!important;
}
	.btn-f {
    justify-content: flex-start;
	   border-right: 0;
	    border-bottom: 1px solid #212121;
}
.btn-f:hover, .btn-f.active {
color: #ffcc00;
}

}
.category-title {
color: #f5f5f5;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 30px;
    font-size: 20px;
    font-weight: 300;
	}
/* faq */
.faq {
    border-bottom: 1px solid #4d4d4d;
	    margin: 0 0 0px;
}

.faq-question {
    /* Добавляем отступ слева 15px, чтобы освободить место для точки */
    padding: 30px 60px 30px 20px; 
    cursor: pointer;
    font-size: 14px;
    display: flex;
    margin: 0;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    color: #f5f5f5;
    transition: color 0.3s ease;
}

.faq-question::before {
    content: "";
    position: absolute;
    left: 0;
    /* top рассчитывается так: padding-top (30px) + (высота строки 24px - высота точки 4px) / 2 */
    top: 38px; 
    width: 4px;
    height: 4px;
    background-color: #ffcc00;
}
@media (max-width: 768px) {
	.faq-question {
    font-size: 14px;
}
}
.faq-question:hover {
    color: #bbb;
}

.faq-question::after {
    content: '+';
    position: absolute;    
    right: 0;
    top: 50%; /* Центрируем по вертикали */
    transform: translateY(-50%);
    font-size: 40px;
    font-weight: 100;
	    line-height: 1;
    line-height: 1;
    transition: transform 0.4s ease;
}

/* Состояние при раскрытии — поворот плюса */
.faq-question.active::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
padding: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    color: #f5f5f5;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer.active {
    max-height: 1000px; /* Увеличил запас высоты для больших текстов */
    padding: 0 0 30px 0;
}
.faq-container{
/*background: #2a2a2a;*/
     /*padding: 60px 60px 90px;*/
    /*border: 1px solid #333;*/
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    /*box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
}
@media (max-width: 768px){
.faq-container{
    padding: 0px 0px 0px;
}
}
.logo {
    position: relative;
    z-index: 10;
	    display: flex;
		max-height: 70px;
    align-items: center;
}


/* Этот блок резервирует место, чтобы контент не прыгал */
.header-placeholder {
    height: 80px; 
    width: 100%;
    display: block;
	    background-color: inherit;
}
.header_logo_menu {
    position: fixed;
    top: 0; 
    left: 0;
    display: flex;
    width: 100%;
    height: 80px;
    align-items: center;
    z-index: 2000;
	    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    background-color: #212121;
    transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Состояние, когда меню уходит вверх при скролле вниз */
.header_logo_menu.is-hidden {
    /* Уводим вверх на высоту меню */
    top: -80px; 
}

/* Фиксация меню, когда открыт мобильный бургер (чтобы не улетало) */
.header_logo_menu.menu-opened {
    top: 0 !important;
}

/* Тень при скролле вверх */
.header_logo_menu.is-sticky {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

a:hover{
    color: #adb5bd;
}
.license__about__list {
    display: grid;
    grid-template-columns: 1fr 1fr 5fr;
    gap: 20px;
	margin: 30px 0 30px;
}
.license__about__block img{
    width: 100%;
}
@media (max-width: 768px) {
	.license__about__list {
    grid-template-columns: 1fr 1fr;
}
}
body {
	font-family: 'Inter';
	font-weight: 400;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	background: #212121;
}
.fx-canvas1 {
  position: fixed;
  inset: 0;
  z-index: -1;
  
  /* Твоя картинка */
  background-image: url('/img/v980-aum-blogbanner-13-ps.jpg'); 
  
  /* Магия позиционирования */
  background-size: cover;    /* Растянуть, чтобы заполнить весь экран */
  background-position: center; /* Центрировать */
  background-repeat: no-repeat;
  
  /* Оптимизация */
  will-change: transform;
}

/* Шум можно оставить отдельным слоем сверху, если картинка слишком "гладкая" */
.fx-grain1 {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url('https://grainy-gradients.vercel.app');
  pointer-events: none;
}

.leaflet-tile-container {
   /* filter: grayscale(100%) brightness(0.8) contrast(1.5) saturate(0);*/
	  /*filter: grayscale(100%) brightness(0.9) contrast(1.1);*/
	    /*filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);*/
}

.leaflet-container {
    background: #212121;
}
/*#map::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 50, 100, 0.05); 
    pointer-events: none; 
    z-index: 1000;*/
}


/* Полностью стираем визуальный мусор Leaflet */
.leaflet-tooltip.zip-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.zip-label {
    color: #D4AF37 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 5px #000;
    background: none !important; border: none !important; box-shadow: none !important;
}

/*breadcrumb*/
.breadcrumb {
    margin: 30px 0 10px 0;
    padding: 0px 0 0px;
    background: #ffffff00;
	    display: flex;
}
/*.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #fff !important;
    opacity: 0.8 !important;
    content: "—";
}*/
.breadcrumb>li+li:before {
content: "";
    width: 30px;
    height: 1px;
    margin: 5px;
	padding: 0;
    background: #4d4d4d;
}

.last_bread {
color: #bbbbbb;
    line-height: 1.3;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
}
.breadcrumb>li a{
    color: #f5f5f5;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 1px;
}
.breadcrumb>li a:hover{
    color: #ffcc00;
}
#breadcrumb {
    background: #212121;
}
.breadcrumb>li {
    display: flex;
    align-items: center;
}
/*contact*/
.contact__block__adress {
margin: 0px 0 60px;
}

.contact__text__adress_s {
    font-size: 14px;
    line-height: 1.5;
    color: #f5f5f5;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    padding: 0 0 15px;
    margin: 0 0 30px;
    letter-spacing: 0.15em;
}
.contact__text__adress_s:after {
    content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.contact__text__adress a {
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.5;
}
.contact__text__adress a:hover, 
.contact__text__adress a:hover .lic-span {
    color: #bbb;
}
.footer__license a:hover, 
.footer__license a:hover .lic-span {
    color: #bbb;
}
.contact__adress__contacts {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    color: #f5f5f5;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 30px;
}
.contact__block__hours__list {
    gap: 20px;
    display: flex;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}
.contact__phone__contacts a{
    color: #f5f5f5;
    font-size: 30px;
    text-align: center;
	text-wrap: nowrap;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.contact__phone__contacts{
 margin: 0 auto 0px;
}
.contact__project__list{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	}
.contact__mail__contacts a{
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin: 0 0 0px;
}
.contact__mail__contacts {
    margin: 0px auto 30px;
}
.contact__block__contacts {
    margin: 0px 0 30px;
    display: grid;
    grid-template-columns: 1fr ;
}
.contact__text__adress {
margin: 0 0 30px;
    font-weight: 600;
    color: #f5f5f5;
    font-size: 14px;
    letter-spacing: 1px;
}
.contact__block__hours {
margin: 0px 0 30px;
    display: grid;
    grid-template-columns: 1fr;
}
.contact__block__hours__text {
    display: flex;
    position: relative;
    /*flex: 1;
	   align-items: center;*/
    gap: 10px;
    flex-direction: column;
}
/*.contact__footer__hours__text + .contact__footer__hours__text::before {
  content: "";
  position: absolute;
  left: -15px; 
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #4d4d4d;
}*/
/*.contact__block__hours__text + .contact__block__hours__text::before {
  content: "";
  position: absolute;
  left: -15px; 
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #4d4d4d;
}*/
@media (max-width: 768px) {
	.contact__block__hours__list {
	    max-width: 100%;
}
	.footer__block__hours__list {
    justify-content: space-around;
}
	.contact__block__hours {
    grid-template-columns: 1fr;
}

.contact__block__contacts {
        grid-template-columns: 1fr;
        margin: 0 0 30px;
}
.contact__block__hours__text {
    gap: 10px;
    flex-direction: column;
}
    .contact__block__hours {
        grid-template-columns: 1fr;
    }
}
.contact__zag__hours {
color: #343a40;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
	    align-items: center;
    display: flex;
    margin: 0 0 30px;
}

.contact__text__hours div{
    display: flex;
    align-items: center;
    font-weight: 300;
    margin: 0 0 0px;
    letter-spacing: 0.1em;
    color: #f5f5f5;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.5;
}
.contact__text__hours {
align-items: center;
    display: flex;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin: 0 0 0px;
    font-weight: 300;
    color: #f5f5f5;
    text-transform: uppercase;
}
.contact__text__hours>div+div:before {
    content: "";
    width: 30px;
    height: 1px;
    margin: 5px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
}
/*main slide*/


.main__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/*about us*/
.about__block__overview {
    margin: 30px 0 30px;
	    /* Убирает мерцание и заставляет браузер отрисовывать четче */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Исправляет "мыло" текста в Webkit браузерах */
    -webkit-font-smoothing: subpixel-antialiased;

    /* Принудительное использование 3D ускорения для стабильности */
    transform: translateZ(0) scale(1.0, 1.0);
}
#AboutBlockMain {
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.about__podzag__h2__overview {
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    margin: 30px 0 30px;
}
.about__podzag__p__overview {
    font-weight: 400;
    font-size: 14px;
    margin: 0 0 30px;
}
.about__text__overview {
color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0 0 30px;
}
.about__text__why {
color: #f5f5f5;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
}
.about__zag__why:after {
    content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.about__podzag__h2__why {
    color: #343a40;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 30px;
}
.about__block__why {
    margin: 30px 0 30px;
}
.about__zag__why {
color: #f5f5f5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    position: relative;
    line-height: 1.5;
    padding: 0 0 15px;
    text-transform: uppercase;
}
.about__list__why {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 30px 0 30px;
}
.about__block__chouse {
display: flex;
    background: #373737;
    flex-direction: column;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    padding: 40px;
    gap: 30px;
    position: relative;
}
@media (max-width: 768px) {
	.about__list__why {
    grid-template-columns: 1fr;
}
.portfolio__block__after {
 grid-template-columns: 1fr!important;
}
.portfolio__block__before {
 grid-template-columns: 1fr!important;
}
.portfolio__block__process {
 grid-template-columns: 1fr!important;
}
}
/*portfolio*/
.portfolio__zag__main {
    color: #343a40;
    font-size: 30px;
    font-weight: 900;
    margin: 0 0 10px;
}
.portfolio__block__tag {
display: flex;
    gap: 30px;
    align-items: self-start;
}



.portfolio__block__tag__list {
    display: grid;
    max-width: 900px;
    margin: 0 auto;
    gap: 30px 60px;
    grid-template-columns: 1fr 1fr 1fr;
}
.parallax__text_portfolio {
    position: absolute;
    width: 25%;
    right: 0;
    bottom: 60px;
    z-index: 10;
}
@media (max-width: 768px) {
.portfolio__block__tag__list {
    grid-template-columns: 1fr;
}
.parallax__text_portfolio {
    position: relative;
    width: 100%;
    right: auto;
    bottom: auto;
    margin: 30px 0 0;
    z-index: 10;
}
.portfolio__block__tag__list {
    gap: 30px;
}
}
.portfolio__tag__icon_block {
    width: 32px;
    z-index: 10;
    position: relative;
    height: auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    display: flex;
	}
	.main__tag__icon_block {
    width: 40px;
    z-index: 10;
    position: relative;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    display: flex;
	}
.portfolio__tag__icon_1 {
    max-width: 32px;
    max-height: 32px;
	    height: auto;
		width: auto;
    object-fit: contain;
    pointer-events: none;
}
.main__tag__icon_1 {
    max-width: 40px;
    max-height: 40px;
	    height: auto;
		width: auto;
    object-fit: contain;
    pointer-events: none;
}
.portfolio__tag__icon {
    width: 40px;
	pointer-events: none;
}
.portfolio__block__after {
    display: grid;
	gap: 30px;
 grid-template-columns: 1fr 1fr 1fr;
  margin: 0 0 60px;
}
.portfolio__block__before {
    display: grid;
	gap: 30px;
 grid-template-columns: 1fr 1fr 1fr;
 margin: 0 0 60px;
}
.portfolio__block__process {
    display: grid;
	gap: 30px;
 grid-template-columns: 1fr 1fr 1fr;
  margin: 0 0 60px;
}
.portfolio__block__before img{
    width: 100%;
	/*box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
}
.portfolio__block__after img{
    width: 100%;
	/*box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
}
.portfolio__block__process img{
    width: 100%;
	/*box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
}
.portfolio__block__materials {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.parallax__zag {
display: flex;
    flex-direction: column;
    gap: 12px;
}
.portfolio__zag_left {
    justify-content: start!important;
}
.portfolio__zag_right {
    justify-content: end!important;
}
.portfolio__zag_center {
    justify-content: center!important;
}

.portfolio__zag {
color: #ffcc00;
    font-size: 12px;
    z-index: 10;
    position: relative;
    font-weight: 700;
    margin: 0 auto;
    letter-spacing: 0.4em;
    justify-content: center;
    display: flex;
    grid-template-columns: auto 1fr;
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
}
.portfolio__cifr__work {
    font-size: 40px;
    line-height: 1;
    min-width: 70px;
    font-weight: 900;
    color: #f5f5f5; 
	    align-self: start;
    opacity: 0;
    transform: translateY(30px);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 100%); 
    transition: 
        opacity 1.5s ease-out, 
        transform 1.5s ease-out, 
        mask-image 1.5s ease-out, 
        -webkit-mask-image 1.5s ease-out;
}

.portfolio__cifr__work.visible {
    opacity: 1;
    transform: translateY(0);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #ffffff 100%);
    mask-image: linear-gradient(to top, transparent 0%, #ffffff 100%);
}
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    backface-visibility: hidden;
    will-change: opacity, transform;
}
.reveal-item.visible {
    opacity: 1;
    transform: translateY(0); 
}
.reveal-slide {
    opacity: 0;
    transform: translateX(-50px); /* Выезд слева */
    filter: blur(5px); /* Легкое размытие в начале для киноэффекта */
    transition: all 1s ease-out;
}

.reveal-slide.visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}
.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px); /* Выезд справа (положительное значение) */
    filter: blur(5px);
    transition: all 1s ease-out;
}

.reveal-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}
.reveal-zoom {
    opacity: 0;
    transform: scale(1.15); /* Начинаем с чуть увеличенного */
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-zoom.visible {
    opacity: 1;
    transform: scale(1);
}
.reveal-card {
    opacity: 0;
    transform: perspective(1000px) rotateX(-10deg) scale(0.9);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: top;
}

.reveal-card.visible {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) scale(1);
}
.reveal-focus {
    opacity: 0;
    filter: blur(10px);
    letter-spacing: 10px;
    transition: opacity 1.5s ease, filter 1.5s ease, letter-spacing 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-focus.visible {
    opacity: 1;
    filter: blur(0);
}
.reveal-clip {
    opacity: 0;
    clip-path: inset(0 0 100% 0); /* Скрыт снизу вверх */
    transform: translateY(20px);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1), 
                opacity 1.2s ease, 
                transform 1.2s ease;
}

.reveal-clip.visible {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
    transform: translateY(0);
}
.reveal-flip {
    opacity: 0;
    transform: perspective(1000px) rotateY(-15deg) translateX(-20px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-flip.visible {
    opacity: 1;
    transform: perspective(1000px) rotateY(0) translateX(0);
}
.reveal-expand {
    opacity: 0;
    transform: scale(0.8);
    filter: saturate(0); /* Добавим обесцвечивание для интереса */
    transition: all 1.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* С легким пружинистым эффектом */
}

.reveal-expand.visible {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1);
}
.reveal-slide-line-left {
    opacity: 0;
    transform: translateX(-200px); /* Выезд слева */
    transition: all 1s ease-out;
}

.reveal-slide-line-left.visible {
    opacity: 1;
    transform: translateX(-0px);
    filter: blur(0);
}
.reveal-slide-line-right {
    opacity: 0;
    transform: translateX(200px); /* Выезд справа (положительное значение) */
    transition: all 1s ease-out;
}

.reveal-slide-line-right.visible {
    opacity: 1;
    transform: translateX(0px);
    filter: blur(0);
}
.reveal-slide-line-top {
    opacity: 0;
    transform: translateY(200px); /* Выезд справа (положительное значение) */
    transition: all 1s ease-out;
}

.reveal-slide-line-top.visible {
    opacity: 1;
    transform: translateY(0px);
    filter: blur(0);
}
.reveal-slide-line-bottom {
    opacity: 0;
    transform: translateY(-200px); /* Выезд справа (положительное значение) */
    transition: all 1s ease-out;
}

.reveal-slide-line-bottom.visible {
    opacity: 1;
    transform: translateY(-0px);
    filter: blur(0);
}
.portfolio-quote {
position: relative;
    max-width: 700px;
    margin: 60px auto;
    padding: 45px 30px;
    text-align: center;
}
.reveal-mask {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); /* Полностью скрыт слева */
    transform: translateX(-40px) skewX(10deg);
    transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1), 
                transform 1.4s cubic-bezier(0.19, 1, 0.22, 1), 
                opacity 1.4s ease;
}

.reveal-mask.visible {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0) skewX(0deg);
}
.reveal-glow {
    opacity: 0;
    transform: translateY(40px);
    filter: brightness(0.5) blur(2px);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-glow.visible {
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1) blur(0);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05); 
}
.reveal-diagonal {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

.reveal-diagonal.visible {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.reveal-up-wrapper {
    overflow: hidden;
    display: block;
}

.reveal-up {
    display: inline-block;
    opacity: 0;
    transform: translateY(110%); /* Полностью уходит вниз */
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1s ease;
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Базовый контейнер для блока типографики */
.typography-section {
    overflow: hidden;
    position: relative;
}

/* Общие стили для всех параллакс-элементов (начальное состояние) */
.parallax-left, 
.parallax-right, 
.parallax-vertical, 
.parallax-line-top, 
.parallax-line-bottom {
    opacity: 1;
	/*opacity: 0;*/
    will-change: transform, opacity, filter;
    transition: transform 0.1s ease-out, opacity 0.4s ease-out, filter 0.6s ease-out;
}

/* Десктопные позиции (по умолчанию) */
.parallax-left { transform: translateX(-150px); clip-path: inset(0% -100% 0% -100%); }
.parallax-right { transform: translateX(150px); clip-path: inset(0% -100% 0% -100%); }
.parallax-vertical { transform: translateY(20px); }
.parallax-line-top { transform: translateY(50px); }
.parallax-line-bottom { transform: translateY(-50px); }

/* Линии (Divider Lines) */
.parallax-line {
    width: 0;
    height: 1px;
    background-color: #f5f5f5;
    margin: 40px 0;
    opacity: 0;
    filter: blur(5px);
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease, filter 1s ease;
}

.parallax-line.visible {
    width: 100%;
    opacity: 1;
    filter: blur(0);
}

/* --- АДАПТИВ ДЛЯ МОБИЛЬНЫХ (Правка дистанции) --- */
@media (max-width: 768px) {
    .parallax-left { transform: translateX(-50px); }
    .parallax-right { transform: translateX(50px); }
    .parallax-vertical { transform: translateY(20px); }
    .parallax-line-top { transform: translateY(20px); }
    .parallax-line-bottom { transform: translateY(-20px); }

    /* Уменьшаем отступы в линиях для компактности */
    .parallax-line { margin: 20px 0; }
}

.portfolio-quote::before,
.portfolio-quote::after {
    position: absolute;
    content: ""; 
    width: 30px; 
    height: 30px; 
    padding: 10px;
    z-index: 10;
    opacity: 1 !important;
}
/* Общие стили для кавычек-символов */
/*.portfolio-quote::before,
.portfolio-quote::after {
    position: absolute;
    font-family: "FontAwesome";
	content: "\f10d";
    font-size: 40px;
    padding: 10px;
    color: #bc9c6a;
    background: #212121;
    line-height: 1;
    z-index: 10;
    opacity: 1 !important;
}
/* Открывающая (сверху слева) */
.portfolio-quote::before {
	    background: #212121 url("/img/icon/quote_marks.svg") no-repeat center / contain; 
    top: -20px;
	content: ""; 
    left: 20px;
}

/* Закрывающая (снизу справа) */
.portfolio-quote::after {
	    background: #212121 url("/img/icon/quote_marks_1.svg") no-repeat center / contain; 
    bottom: -20px; 
	content: ""; 
    right: 20px;
}

.quote-text {
position: relative;
    z-index: 2;
    font-size: 14px;
    line-height: 1.5;
    color: #f5f5f5;
    font-weight: 300;
    margin: 0;
}
.portfolio__block__01  {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    margin: 30px 0 30px;
	    padding: 80px 0;
}
.portfolio__grid__work {
    display: grid;
    /*align-items: center;*/
	position: relative;
    /*margin: 0 0 45px;*/
    grid-template-columns: auto 1fr;
    gap: 30px;
}
 /*.portfolio__grid__work:after {
    content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 100px;
    margin-top: 15px;
    background: #4d4d4d;
}*/
.parallax__text__block {
    position: absolute;
    width: 25%;
    display: flex;
    bottom: 90px;
    left: 0;
    gap: 30px;
    z-index: 12;
    flex-direction: column;
}
.portfolio__block__tag__list_main {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 25%;
		display: none;
	gap: 15px;
    top: 30px;
    right: 0;
}
.parallax__block_relative {
position: relative;
    min-height: 480px;
}
.main__block_new {
position: relative;
    min-height: 480px;
}
.portfolio__podzag {
color: #f5f5f5;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: 0.1em;
	/*text-shadow: 0 2px 4px rgba(33, 33, 33, 0.5);*/
    font-weight: 300;
	position: relative;
	z-index: 4;
    text-transform: uppercase;
}

.parallax-main-list {
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr;
}
@media (max-width: 768px) {
.portfolio__podzag {
    font-size: 30px;
}
  .main__block_new {
    position: relative;
    min-height: 0;
}
.parallax__block_relative {
position: relative;
    min-height: 0px;
}
.portfolio__block__tag__list_main {
    position: relative;
    width: 100%;
	margin: 30px 0 0;
}
.parallax-main-list {
    gap: 30px;
    grid-template-columns: 1fr;
}
.portfolio__grid__work__list {
    grid-template-columns: 1fr!important;
}
.parallax__text__block {
position: relative;
    width: 100%;
	 bottom: auto;
}
.parallax__text__margin {
        margin: -60px 0 0;
}
}
@media screen and (min-width: 769px) and (max-width: 1100px)  {
.portfolio__podzag {
    font-size: 30px;
}

.main__block__portfolio_img {
    width: 400px;
}
.parallax__block_relative {
    min-height: 400px;
}
}
.portfolio__block__overview {
padding: 80px 0;
}
.portfolio__zag__glav__overview {
color: #f5f5f5;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.4em;
    margin: 0 0 30px;
}
.portfolio__zag__overview {
    color: #f5f5f5;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
}
.portfolio__text__overview {
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
	position: relative;
	z-index: 4;
    margin: 0 0 0px;
}
.portfolio__zag__work {
    color: #ffcc00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4em;
    display: grid;
    grid-template-columns: auto 1fr; 
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    margin: 0 0 60px;
}
.reveal-line {
    height: 1px;
    /*background: rgba(255, 255, 255, 0.2);*/
	background: #4d4d4d;
    display: block;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left; 
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); 
}

.reveal-line.visible {
    transform: scaleX(1);
}
.portfolio__block__work {
    padding: 0px 0 80px;
}
.portfolio__grid__work__list {
display: grid;
    max-width: 900px;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    gap: 30px 60px;
}
.portfolio__block__material {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 30px 60px;
    grid-template-columns: 1fr 1fr;
}
.portfolio__block__design {
margin: 0 0 30px;
}
.portfolio__text__work {
color: #e0e0e0;
    font-size: 14px;
    font-weight: 300;
    position: relative;
    display: flex;
    line-height: 1.5;
    flex-direction: column;
}
.HeroBlockZag {
      box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    z-index: 100;
    background: #212121;
    position: relative;
	min-height: 40px;
}


.portfolio__zag__project {
color: #f5f5f5;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-wrap: nowrap;
    display: none;
    justify-content: flex-start;
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
    margin: 0 0 30px;
}

.portfolio__zag__project_hero {
    position: absolute;
    align-items: flex-start;
    display: flex;
    top: 30px;
	    text-transform: uppercase;
    gap: 0;
    flex-direction: column;
	    line-height: 1.5;
		    color: #f5f5f5;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
}
.portfolio__zag__materials {
    color: #ffcc00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4em;
    display: grid;
    grid-template-columns: auto 1fr; 
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    margin: 0 0 60px;
}
.portfolio__podzag__materials {
color: #f5f5f5;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}
.portfolio__text__materials {
color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
}
.portfolio__zag__design {
    color: #ffcc00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4em;
    display: grid;
    grid-template-columns: auto 1fr; 
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    margin: 0 0 60px;
}
.portfolio__text__design {
    color: #f5f5f5;
	border: 1px solid #4d4d4d;
    padding: 30px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 30px;
}
.portfolio__text__tag {
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.3;
	    min-height: 2.6em;
    font-weight: 300;
}
.portfolio__zag__tag {
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1;
    margin: 0 0 8px;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.portfolio__zag__glav__tag {
    color: #ffcc00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4em;
    display: grid;
    grid-template-columns: auto 1fr; 
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    margin: 0 0 30px;
}
.portfolio__block__tags_main {
    position: relative;
	    z-index: 10;
}
/* Базовые стили секции */
.portfolio-section {
 /* background-color: #0d0d0d;*/
  padding: 0px 20px 80px;
  overflow: hidden;
}

.portfolio-container {
  max-width: 1440px;
  margin: 0 auto;
}

.section-title {
  font-size: 20px;
  font-weight: 300;
  color: #f5f5f5;
  letter-spacing: 2px;
  margin-bottom: 50px;
  text-transform: uppercase;
}

/* Карусель (Десктоп) */
.carousel-wrapper {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 30px;
  cursor: default; /* Возвращаем обычный курсор стрелочки */
}

/* Скрытие дефолтного скроллбара для чистоты */
.carousel-wrapper::-webkit-scrollbar {
  display: none;
}

/* Карточки */
.portfolio-card {
 width: calc(30% - 20px); 
  min-width: calc(30% - 20px);
  flex-shrink: 0; 
  flex-grow: 0; 
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.4s ease;
}

.card-image-wrapper {
  width: 100%;
  height: 450px;
  overflow: hidden;
  background-color: #1a1a1a;
}

.card-image-wrapper img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: brightness(0.85);
}

/* Эффекты при наведении */
/*.portfolio-card:hover .card-image-wrapper img {
  transform: scale(1.05);
  filter: brightness(1);
}*/

/* Контент внутри карточки */
.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(33,33,33,1) 0%, rgba(0,0,0,0) 100%);
  transform: translateY(10px);
  transition: transform 0.4s ease;
}

/*.portfolio-card:hover .card-content {
  transform: translateY(0);
}*/

.card-meta {
font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f5f5f5;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}


.card-content-zag {
  font-size: 12px;
 /* color: #a0a0a0;*/
 color: #bbb;
  font-weight: 300;
  margin: 0;
}
/* Класс для автоматического скрытия навигации на десктопе */
.carousel-controls.is-hidden {
  display: none !important;
}
/* Линия прогресса — теперь она на всю ширину контейнера на десктопе */
.carousel-controls {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.progress-bar {
width: 100%;
    max-width: 200px;
    height: 2px;
    background-color: #4d4d4d;
    position: relative;
    cursor: pointer;
}
.carousel-buttons {
  display: flex;
  gap: 15px;
}
.carousel-btn {
background: none;
color: #f5f5f5;
    position: relative;
    font-size: 14px;
    display: flex;
    align-items: center;
    border-radius: 50px;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    border: 1px solid #bbb;
    width: 38px;
    height: 38px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.carousel-btn-left {
    width: 10px;
    transform: rotate(-135deg);
	}
	.carousel-btn-right {
    width: 10px;
    transform: rotate(45deg);
	}
.carousel-btn:hover {
  opacity: 1;
      border: 1px solid;
      color: #ffcc00;
  transform: scale(1.05);
}
.carousel-btn:focus {
  opacity: 1;
border: 1px solid;
      color: #ffcc00;
  transform: scale(1.05);
}
.carousel-btn:focus-visible {
  transform: scale(1);
  color: #f5f5f5;
  border: 1px solid #bbb;
}
/* .carousel-btn:focus:not(:focus-visible) {
  transform: scale(1);
  color: #f5f5f5;
  border: 1px solid #4d4d4d;
}*/
.progress-fill {
  position: absolute;   /* Привязываем белую полосу к сетке трека */
  left: 0;
  top: 0;
  height: 100%;         /* Высота точно 2px, как у родителя */
  background-color: #fff; /* Белый цвет ползунка */
  transition: width 0.2s ease-out;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .portfolio-card {
width: calc(30% - 20px);
    min-width: calc(30% - 20px);
    height: 400px; 
  }
  .thumbnails-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.la-fullscreen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 769px) {
  .carousel-wrapper.is-centered {
    justify-content: center;
  }
}
/* АДАПТИВНОСТЬ: МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
  .portfolio-section {
    padding: 0px 15px 80px;
  }
  .portfolio__zag__project_hero {
    display: none;
}
  .portfolio__zag__project {
color: #f5f5f5;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-wrap: nowrap;
    display: flex;
    justify-content: flex-start;
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
    margin: 0 0 30px;
}
  .portfolio__text__tag {
	    min-height: 1.3em;
}
  
  .portfolio__block__material {
    grid-template-columns: 1fr;
}

  .section-title {
    margin-bottom: 30px;
  }

  .carousel-wrapper {
    gap: 15px;
    /* Включаем жесткую привязку свайпа к карточкам на мобильных */
    scroll-snap-type: x mandatory; 
  }

  .portfolio-card {
    /* Показываем 1 карточку + намек на следующую */
 width: 85vw;
    min-width: 85vw;
    scroll-snap-align: start;
  }

  .card-image-wrapper {
    height: 400px; /* Уменьшаем высоту для мобильных экранов */
  }

  .card-content {
    transform: translateY(0); /* На мобильных текст виден сразу */
    padding: 20px;
  }

  .card-content-zag {
    font-size: 12px;
  }


}
/* Общие стили для всех линий */
.line {
  position: absolute;
  background-color: #4d4d4d;
}

/* Горизонтальные линии (верх и низ) */
.line-top {
  left: -15px;
  width: 100%;
  height: 1px;
}
.line-bottom {
  right: -15px;
  width: 100%;
  height: 1px;
}
.line-top { top: 0; }
.line-bottom { bottom: 0; }

/* Вертикальные линии (лево и право) */
.line-left {
  top: -15px;
  width: 1px;
  height: 100%;
}
.line-right {
  bottom: -15px;
  width: 1px;
  height: 100%;
}
.line-left { left: 0; }
.line-right { right: 0; }

/*full home*/
.services__full__zag__deal {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.services__full__podzag__deal {
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.5;
    position: relative;
    padding: 0 0 15px;
    letter-spacing: 0.15em;
    color: #f5f5f5;
}
.services__full__podzag__deal:after {
content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.services__full__text__deal {
    font-size: 14px;
    font-weight: 300;
    color: #f5f5f5;
    line-height: 1.5;
    margin: 0;
}

.services__full__block__deal {
    margin: 30px 0 30px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
.services__full__block__overview {
    margin: 0px 0 30px;
}
.services__full__block__programm {
    margin: 30px 0 30px;
}
.services__full__text__overview {
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0 0 30px;
}
.services__full__zag__programm {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.services__full__podzag__programm {
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    color: #f5f5f5;
    position: relative;
    line-height: 1.5;
    padding: 0 0 15px;
    letter-spacing: 0.15em;
}
.services__full__podzag__programm:after {
content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.services__full__text__programm1 {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: #f5f5f5;
    margin: 0 0 30px;
}
.services__full__text__programm {
font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: #f5f5f5;
    margin: 0;
}
.services__full__block__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 0 0 30px;
}
.services__full__list__deal {
display: flex;
    flex-direction: column;
    background: #2a2a2a;
    padding: 40px;
    gap: 30px;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
}

.services__full__list__block {
display: flex;
    gap: 30px;	
	z-index: 1;
	background: #2a2a2a;
	position: relative;
    padding: 40px;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    justify-content: space-between;
    flex-direction: column;
}
@media (max-width: 768px) {
	.services__full__block__list {
 grid-template-columns: 1fr;
}
.services__full__block__deal {
    grid-template-columns: 1fr;
}
}
/*Bathroom*/
.bathroom__text__overview  {
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0 0 30px;
}
.bathroom__block__overview  {
    margin: 0 0 30px;
}
.bathroom__block__why  {
    margin: 0 0 30px;
}
.bathroom__zag__overview  {
    color: #f5f5f5;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
	position: relative;
    margin: 0 0 30px;
	padding: 0 0 15px;
    line-height: 1.5;
}
.bathroom__zag__overview:after {
content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.bathroom__podzag__why  {
font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 0.1em;
    margin: 0 0 30px;
}
.bathroom__text__why__list  {
display: flex;
    background: #2a2a2a;
    padding: 40px;
    position: relative;
    gap: 30px;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
}
.bathroom__text__why__glav  {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.15em;
    position: relative;
    line-height: 1.5;
    color: #f5f5f5;
    text-transform: uppercase;
    padding: 0 0 15px;
}
.bathroom__text__why__glav:after {
content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.bathroom__text__why__dop  {
    font-size: 14px;
    font-weight: 300;
    color: #f5f5f5;
    line-height: 1.5;
    margin: 0;
}
.bathroom__zag__why  {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.bathroom__text__why  {
font-size: 14px;
    font-weight: 300;
    color: #f5f5f5;
    line-height: 1.5;
    margin: 0 0 30px;
}
.bathroom__text__now  {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #f5f5f5;
    margin: 0 0 30px;
}
.bathroom__zag__now  {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.bathroom__podzag__now  {
font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    padding: 0 0 15px;
    color: #f5f5f5;
    position: relative;
    text-transform: uppercase;
    margin: 0 0 30px;
    letter-spacing: 0.15em;
}
.bathroom__podzag__now:after {
content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.bathroom__block__now  {
    margin: 0 0 30px;
}
.bathroom__block__market  {
    margin: 0 0 30px;
}
.bathroom__podzag__market  {
font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0 0 30px;
}
.bathroom__text__market  {
font-size: 14px;
    font-weight: 300;
    margin: 0 0 30px;
    line-height: 1.5;
    color: #bbb;
}
/*Kitchen*/
.kitchen__text__overview  {
color: #f5f5f5;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 30px;
}
.kitchen__block__why  {
    margin: 0 0 30px;
}
.kitchen__block__overview  {
    margin: 0 0 30px;
}
.kitchen__zag__why  {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.kitchen__text__why  {
    font-size: 14px;
    font-weight: 300;
    margin: 0 0 30px;
    color: #f5f5f5;
    line-height: 1.5;
}
.kitchen__podzag__why  {
font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0 0 30px;
}
.kitchen__zag__overview  {
    color: #f5f5f5;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 0.15em;
    font-weight: 300;
	position: relative;
	padding: 0 0 15px;
    margin: 0 0 30px;
}
.kitchen__zag__overview:after {
content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.kitchen__text__why__list  {
display: flex;
    gap: 30px;
    flex-direction: row;
}
.kitchen__block__why__list {
display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    margin: 0 auto;
    gap: 30px 60px;
}
@media (max-width: 768px) {
.kitchen__block__why__list {
    grid-template-columns: 1fr;
}
}
.kitchen__text__why__glav  {
    position: relative;
    padding: 0 0 14px;
    font-size: 14px;
    color: #f5f5f5;
    align-items: center;
    gap: 10px;
    display: flex;
    letter-spacing: 0.05px;
    font-weight: 700;
}
.kitchen__text__why__glav:after {
counter-increment: blueprint-counter;
    content: " /";
    font-family: 'Courier New', Courier, monospace;
    color: #ffcc00;
    font-size: 14px;
    text-wrap: nowrap;
    font-weight: 700;
    letter-spacing: 1px;
}
.kitchen__text__why__dop  {
    font-size: 14px;
    font-weight: 300;
    color: #e0e0e0;
    line-height: 1.5;
    margin: 0;
}
.kitchen__text__now  {
    font-size: 14px;
    font-weight: 300;
    color: #f5f5f5;
    line-height: 1.5;
    margin: 0 0 30px;
}
.kitchen__zag__now  {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.kitchen__podzag__now  {
font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #f5f5f5;
    letter-spacing: 0.15em;
    position: relative;
    text-transform: uppercase;
    padding: 0 0 15px;
    margin: 0 0 30px;
}
.kitchen__podzag__now:after {
content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.kitchen__block__now  {
    margin: 0 0 30px;
}
.kitchen__block__market  {
    margin: 0 0 30px;
}
.kitchen__podzag__market  {
font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0 0 30px;
}
.kitchen__text__market  {
font-size: 15px;
    font-weight: 300;
    margin: 0 0 30px;
    line-height: 1.5;
    color: #f5f5f5;
}
.whatmedo_text_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
}
.whatmedo_text {
font-size: 14px;
    font-weight: 300;
    color: #f5f5f5;
    gap: 10px;
    align-items: flex-start;
    position: relative;
    line-height: 1.5;
    display: flex;
}
.whatmedo_text_block {
    gap: 10px;
    display: flex;
	    position: relative;
    flex-direction: column;
	}
.whatmedo_text_zag {
font-size: 12px;
    color: #f5f5f5;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin: 0 0 20px;
	}
.whatmedo_text::before {
    /*content: "\f111";*/
	content: "\f0c8";
    font-family: FontAwesome;
    font-size: 6px;
    top: 7px;
    line-height: 1;
    position: relative;
}
@media (max-width: 768px) {
.whatmedo_text_list {
    grid-template-columns: 1fr;
}
}
/*Commercial*/
.commercial__text__overview  {
color: #f5f5f5;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 30px;
}
.commercial__block__overview  {
    margin: 0 0 30px;
}
.commercial__podzag__why  {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
}
.commercial__text__why__list  {
    display: flex;
    flex-direction: column;
    padding: 40px;
    position: relative;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
    background: #2a2a2a;
    gap: 30px;
}
.commercial__text__why__glav  {
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    position: relative;
    padding: 0 0 15px;
    color: #f5f5f5;
}
.commercial__text__why__glav:after {
    content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.commercial__text__why__dop  {
    font-size: 14px;
    font-weight: 300;
    color: #f5f5f5;
    line-height: 1.5;
    margin: 0;
}
.commercial__block__why  {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
.commercial__text__remodel  {
font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: #bbb;
    margin: 0 0 30px;
}
.commercial__zag__remodel  {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.commercial__text__remodel__list  {
display: flex;
    gap: 30px;
    padding: 30px;
    position: relative;
    /*box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);*/
    background: #2a2a2a;
    /*justify-content: space-between;*/
    flex-direction: column;
}
.commercial__text__remodel__glav  {
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.15em;
    position: relative;
    padding: 0 0 15px;
    color: #f5f5f5;
}
.commercial__text__remodel__glav:after {
    content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.commercial__text__remodel__dop  {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #f5f5f5;
    margin: 0 0 0px;
}
.commercial__block__remodel  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
}
@media (max-width: 768px) {
.commercial__block__remodel {
    grid-template-columns: 1fr;
}
.commercial__block__why  {
    grid-template-columns: 1fr;
}
.commercial__block__now  {
    grid-template-columns: 1fr!important;
}
}
.commercial__text__now  {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #f5f5f5;
    margin: 0 0 30px;
}
.commercial__zag__now  {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.commercial__text__now__list  {
display: flex;
    padding: 40px;
    background: #2a2a2a;
    justify-content: space-between;
    flex-direction: column;
    gap: 30px;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
}
.commercial__text__now__glav  {
font-size: 14px;
    line-height: 1.5;
    display: flex;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
    position: relative;
    padding: 0 0 15px;
    color: #f5f5f5;
}
.commercial__text__now__glav:after {
    content: "";
    width: 40px;
    position: absolute;
    height: 1px;
    top: 100%;
    left: 0;
    background: #4d4d4d;
}
.commercial__text__now__dop  {
font-size: 14px;
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    color: #f5f5f5;
}
.commercial__block__now  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
	    margin: 0 0 60px;
}
.commercial__block__market  {
    margin: 0 0 30px;
}
.commercial__podzag__market  {
font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0 0 30px;;
}
.commercial__text__market  {
font-size: 15px;
    font-weight: 300;
    margin: 0 0 30px;
    line-height: 1.5;
    color: #f5f5f5;
}
/*adu*/
.adu__zag__why {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.adu__block__numbers {
    margin: 30px 0 30px;
}
.adu__zag__numbers {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 0px;
}
.adu__podzag__numbers {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.adu__block__numbers__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.adu__text__numbers__glav  {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px;
}
.adu__text__numbers__dop  {
  font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
}
.adu__text__numbers  {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px;
}
.adu__text__overview  {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0 0 30px;
}
.adu__block__overview  {
    margin: 0 0 30px;
}
.adu__block__why  {
    margin: 0 0 30px;
}
.adu__text__why__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.adu__text__why__glav  {
    color: #6c757d;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
}
.adu__text__why__dop  {
    color: #6c757d;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px;
}
/*footer*/
footer {
	margin: 0px 0 0;
	padding: 30px 0 30px;
}
.footer_link {
color: #f5f5f5;
    text-transform: uppercase;
    font-weight: 700;
    width: fit-content;
    line-height: 1.3;
    letter-spacing: 1px;
    font-size: 30px;
    position: relative;
}
/*.footer_link:after{
  display: block;
  position: absolute;
  top: 50%;
  content: '';
  height: 6px;
  margin-top: -3px;
  width: 0;
  left: 0;
  background-color: #353746;
  opacity: 0.8;
  transition: width 250ms linear;
}*/

.footer_link.current:after {
  width: 100%;
}
.footer_contact_phone:hover {
color: #adb5bd;
}
.footer_contact_mail {
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    letter-spacing: 0.1em;
    justify-content: center;
    position: relative;
    text-transform: uppercase;
    margin: 0 auto 0px;
}
.footer-contact-us {
    margin: 0 0 30px;
}
.footer_contact_mail a{
color: #f5f5f5;
}
.footer_contact {
font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    color: #e0e0e0;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 30px auto 30px;
    flex-direction: column;
}
.footer_contact::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-top: 5px;
}
.footer_contact a{
color: #fff;
}
.footer_phone {
justify-content: center;
    display: flex;
}
.footer__link__block {
    display: flex;
    gap: 20px;
	    align-items: center;
    flex-direction: column;
}
.footer__list {
display: grid;
    grid-template-columns: 1fr;
    gap: 0 120px;
    padding: 30px 0 0px;
}
.footer__list__contacts {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 120px;
}

@media (hover: hover) {
.footer_link:hover:after{
  width: 100%;
}
.footer_link:hover {
color: #ffcc00;
}
}
@media (max-width: 768px) {
.footer_link:active:after{
  width: 100%;
}
.footer_link:active{
  text-decoration: none;
  color: #b0b0b0; 
}
.footer__list__contacts {
    grid-template-columns: 1fr;
	gap: 60px;
}
.footer__list {
display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 60px 0;
    padding: 30px 0 30px;
}
}
.footer_phone a{
    color: #f5f5f5;
    font-weight: 700;
    line-height: 1.5;
	text-wrap: nowrap;
    letter-spacing: 0.1em;
    position: relative;
    font-size: 30px;
}
.footer_phone a:hover{
color: #ffcc00;
}
/*.footer_phone a:after {
    display: block;
    position: absolute;
    top: 50%;
    content: '';
    height: 6px;
    margin-top: -3px;
    width: 0;
    left: 0;
    background-color: #353746;
    opacity: 0.8;
    transition: width 250ms linear;
}*/
	.footer_phone a:hover:after {
        width: 100%;
    }
		.contact_hours_zag {
	    text-transform: uppercase;
    font-size: 12px;
    color: #ffcc00;
    display: flex;
    justify-content: center;
    margin: 0 auto 12px;
    letter-spacing: 0.4em;
    font-weight: 700;
	 }
	.footer_hours_zag {
	    text-transform: uppercase;
    font-size: 12px;
    color: #ffcc00;
    display: flex;
    justify-content: center;
    margin: 0 auto 12px;
    letter-spacing: 0.4em;
    font-weight: 700;
	 }
.contact__footer__hours__list {
    margin: 0 0 30px;
    gap: 30px;
    justify-content: center;
    display: flex;
}
.contact__footer__hours__text {
    display: flex;
    gap: 10px;
    /*flex: 1;
	align-items: center;*/
    justify-content: center;
    position: relative;
    margin: 0 0 20px;
    flex-direction: column;
}
.contact__footer__days {
color: #f5f5f5;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    display: flex;
    text-transform: uppercase;
    font-weight: 300;
}
.contact__footer__hours {
    color: #f5f5f5;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    display: flex;
    text-transform: uppercase;
    font-weight: 300;
}
.contact__footer__days div{
    display: flex;
    align-items: center;
}
.contact__footer__hours div{
    display: flex;
    align-items: center;
}
.contact__footer__days>div+div:before {
    content: "";
    width: 30px;
    height: 1px;
    margin: 5px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
}
.contact__footer__hours>div+div:before {
    content: "";
    width: 30px;
    height: 1px;
    margin: 5px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
}
.footer_copyright {
    color: #f5f5f5;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    padding: 0px 0 0;
}
.lic-span {
  color: #ffcc00;
}
.lic-span:hover {
  color: #bbb;
}
.span-hours {
  white-space: nowrap;
}
.contact__button {
  margin: 0 auto 30px;
  	    display: flex;
}
.contact__license {
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
	    text-align: center;
    font-weight: 300;
	    justify-content: center;
    align-items: center;
	display: flex;
    gap: 12px;
	    flex-direction: column;
    font-size: 12px;
}
.contact__license::before {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-bottom: 5px;
}
.footer__license {
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
	    text-align: center;
    font-weight: 300;
    font-size: 12px;
}
.footer__license {
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
	    text-align: center;
		    color: #e0e0e0;
    font-weight: 500;
	    justify-content: center;
    align-items: center;
	display: flex;
    gap: 12px;
	    flex-direction: column;
    font-size: 12px;
}

.footer__license::before {
    content: "";
    width: 40px;
    height: 1px;
    background: #4d4d4d;
    margin-bottom: 5px;
}
.footer__license a{
color: #f5f5f5;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.5;
}
.contact-title {
    /*color: #d9b99b;*/
	color: #bbb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    display: grid;
    grid-template-columns: auto 1fr; 
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    margin: 0 0 30px;
}
.footer-title {
    /*color: #d9b99b;*/
	color: #bbb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    display: grid;
    grid-template-columns: auto 1fr; 
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    line-height: 1.5;
    margin: 0 0 30px;
}
.footer__license__links {
	margin: 0px 0 0;
}
.footer__underline__list {
display: grid;
border-top: 1px solid #4d4d4d;
    grid-template-columns: 1fr 1fr;
 gap: 20px;
    margin: 30px 0 0;
    padding: 30px 0 0;
}
@media (max-width: 768px) {

.footer__underline__list {
    grid-template-columns: 1fr;
}
}
/*services*/
.services__zag__appeal {
    color: #f5f5f5;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 30px;
}

.services__text__appeal {
color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0 0 30px;
}
.services__text__appeal_button {
    color: #f5f5f5;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 300;
    margin: 0 0 30px;
}
.services__button {
    color: #fff;
    background: #212121;
    padding: 10px 15px;
    display: grid;
    width: 200px;
    position: relative;
    text-align: center;
    margin: 30px 0 0px;
}
.services__podzag__questions {
color: #343a40;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
}
.services__text__questions_block {
    margin: 30px 0 30px;
}
.services__text__questions {
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    margin: 0 0 0px;
}
.services__zag__questions {
    color: #343a40;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 30px;
}
.services__block__questions {
    margin: 30px 0 0px;
}
.services__point__text {
    color: #6c757d;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px;
    gap: 10px;
    display: flex;
}
.services__point__text::before {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 8px;
    position: relative;
    color: #6c757d;
}
.services__block__point {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 20px;
}
@media (max-width: 768px){
.services__block__point {
    grid-template-columns: 1fr;
	   gap: 0px;
           margin: 0 0 20px;
}
.services__podzag__point {
    margin: 0 0 0px;
}
.services__text__point {
    margin: 0 0 0px!important;
}
}
.services__podzag__point {
font-size: 14px;
    font-weight: 300;
    color: #f5f5f5;
    margin: 0 0 10px;
    line-height: 1.5;
}
.services__text__point {
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 300;
    margin: 0 0 10px;
    line-height: 1.5;
}
/*header*/
header {
	margin: 0px 0 0;
	padding: 0px 0 0px;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    margin: 0 0 10px;
    background-color: #f5f5f5;
    background-image: none;
    border: 1px solid #f5f5f5;
    border-radius: 0px;
   box-shadow: none; 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
    border-color: #ffffff00;
    outline: 0;
    box-shadow: none;
}
.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-general {
  margin: 0 auto;
  width: 100%;
}
.container-general .gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  /*height: 70vh;*/
height: 400px;
}
.container-general .gallery-wrap .item {
  flex: 1;
  height: 100%;
      overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: all 0.8s ease;
}
.container-general .gallery-wrap .item:hover {
  flex: 7;
}

/*
.wrap-effect-1 .item:first-of-type {
  background-image: url("https://cdn.dribbble.com/users/729829/screenshots/4185141/galshir-cactus-coffee.png");
}
*/
.wrap-effect-1 .item:first-of-type {
  background-image: url('/img/test-001.jpg')
}
/*
.wrap-effect-1 .item:nth-of-type(2) {
  background-image: url("https://cdn.dribbble.com/users/729829/screenshots/6146136/galshir-tea-biscuit_2x.png");
}
*/
.wrap-effect-1 .item:nth-of-type(2) {
  background-image: url('/img/test-002.jpg')
}
/*
.wrap-effect-1 .item:nth-of-type(3) {
  background-image: url("https://cdn.dribbble.com/users/729829/screenshots/4473482/galshir-dog-walker.gif");
}
*/
.wrap-effect-1 .item:nth-of-type(3) {
  background-image: url('/img/test-003.jpg')
}
/*
.wrap-effect-1 .item:nth-of-type(4) {
  background-image: url("https://cdn.dribbble.com/users/729829/screenshots/5743606/gal-shir-scooter_2x.png");
}
.wrap-effect-1 .item:last-of-type {
  background-image: url("https://cdn.dribbble.com/users/729829/screenshots/4738104/galshir-storytime.png");
}
*/
.wrap-effect-1 .item:last-of-type {
   background-image: url('/img/test-004.jpg')
}
.block__geo__overview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr  1fr;
    margin: -10px -10px -10px;
	padding: 0 0 30px;
}
.block__geo__overview_1 {
    position: relative;
    margin: 10px;
}
.block__portfolio__overview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: -10px -10px -10px;
	padding: 0 0 30px;
}
.block__portfolio__overview_1 {
    position: relative;
    margin: 10px;
}
.portfolio_img  {
    width: 100%;
	pointer-events: none;
 box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1);
}
.main__block__slide
.block__contact__overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px 120px;
}
.block__contact__form
{
    /*border: 1px solid #4d4d4d;*/
    /*padding: 45px;*/
    /* box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 1); */
    width: 100%;
    margin: 0 auto;
    max-width: 900px;
    /*background: #2a2a2a;*/
	}
	@media (max-width: 768px) {
.block__contact__form{
    /*padding: 30px;*/
	}
	}
/*social links*/
.wrapper__block {
  display: flex;
  list-style: none;
  gap: 15px;
      justify-content: center;
  padding: 0;
  margin: 0 0 30px;
}
.wrapper__block_contact {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 15px;
  padding: 0;
  margin: 0 0 30px;
}

.icon1 {
position: relative;
    width: 44px;
    height: 44px;
    background: inherit;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);*/
}

.icon1 i {
  /*color: #eeeeee;  Матовый белый, очень заметный */
  /*color: rgb(255 255 255 / 60%);*/
  color: #bbb;
  font-size: 18px;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Состояние при наведении (на десктопе) и нажатии (на мобильных) */
.icon1:hover, .icon1:active {
  background: #282828;
  border-color: rgba(255, 255, 255, 0.3);
	    transform: translateY(-5px); /* Поднимает иконку на 5px вверх */
    background: rgb(255 255 255 / 20%); /* Опционально: делаем чуть светлее */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Добавляем тень для глубины */
}

/* Деликатный цветовой отклик */
.facebook:hover i, .facebook:active i   { color: #4267B2; }
.facebook:hover { border-color: rgba(66, 103, 178, 0.5); }

.instagram:hover i, .instagram:active i { color: #E1306C; }
.instagram:hover { border-color: rgba(225, 48, 108, 0.5); }

.yelp:hover i, .yelp:active i           { color: #D32323; }
.yelp:hover { border-color: rgba(211, 35, 35, 0.5); }

.google:hover i, .google:active i       { color: #4285F4; }
.google:hover { border-color: rgba(66, 133, 244, 0.5); }

/* Адаптив: на мобильных убираем подъем, оставляем только свет */
@media (max-width: 768px) {
  .icon1:hover {
    transform: none;
  }
  .icon1 {
    width: 42px; /* Чуть компактнее для мобильных */
    height: 42px;
  }
}

.icon1 a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/*services*/
#HeroBlockMain  {
    background: #212121;
    position: relative;
    min-height: 480px;
	    margin: 0 0 60px;
}
#HeroBlockPortfolio  {
    background: #212121;
    position: relative;
    min-height: 480px;
	    margin: 0px 0px 80px;
}
#HeroBlockPortfolioMain  {
overflow: hidden;
    margin: 60px 0 0;
}

.services__zag_01 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px;
}
.services__zag_01_text {
color: #fff;
    font-size: 16px;
    opacity: 0.8;
    line-height: 1.3;
    font-weight: 400;
    margin: 0 0 60px;
}
.services__zag_h2 {
        color: #343a40;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 30px;
}
.services__zag_02_text::before {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 8px;
    position: relative;
    color: #6c757d;
}
/*.contact__block__hours__list::before  {
    content: "\f073";
    font-family: FontAwesome;
    font-size: 28px;
    position: relative;
    color: #bbb;
}*/
.services__zag_02_text {
    color: #6c757d;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px;
	gap: 10px;
    display: flex;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
}

.services_h1 {
text-align: left;
    font-size: 60px;
    margin-bottom: 30px;
}
.plitka__img {
    z-index: 1;
    opacity: 1;
    position: absolute;
    max-height: 100%;
    left: 0;
    width: 100%;
    overflow: hidden;
    bottom: 0;
}
.plitka__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease; /* Плавность для фото */
}
.block__services__overview_1:hover .plitka__img img {
    transform: scale(1.1); /* Картинка слегка увеличивается */
}
.logo img{
width: 100%;
}
ul {
  list-style-type: none;
}
.main__img {
    width: 100%;
    max-height: 70px; 
    object-fit: contain;  
    pointer-events: none;
}
.name_item{
    position: relative;
    font-size: 28px;
    color: #343a40;
    z-index: 100;
	line-height: 1;
    font-weight: 700;
    padding: 20px 20px 0px;
}
.name_item span{
font-size: 16px;
    font-weight: 700;
	color: #343a40;
}

.block__header {
    display: grid;
    grid-template-columns: 2fr 7fr 2fr;
    margin: 0px;
    gap: 30px;
align-items: center;
 justify-content: space-between;
flex-wrap: nowrap;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
 .block__header {
grid-template-columns: 1fr 3fr;
}
}
.menu_descktop {
display: flex;
    gap: 30px;
	margin: 0;
    padding: 0;
    justify-content: center;
}
.menu__descktop_1 {
    font-weight: 800;
    color: #6c757d;
	 text-transform: uppercase;
}

.menu_descktop a{
font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
	      transform: translateZ(0);
    -webkit-transform: translateZ(0);
	    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    color: #f5f5f5;
    line-height: 1.5;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}
.btn-d.current:after {
  width: 100%;
  		    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}

.btn-d:after{
display: block;
    position: absolute;
     /*top: 50%;*/
    content: '';
    height: 1px;
    /* margin-top: -2px;*/
	margin-bottom: 0px;
    width: 100%;
    left: 0;
    background-color: #ffcc00;
    /* background-color: #353746; */
    /*transition: width 250ms linear;*/
	    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
    transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
	
}
    .btn-d:hover:after {
		    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    }
.btn-d:hover {
 color: #bbb;
}
.btn-d:focus {
 color: #bbb;
}
.btn-d:hover{
  width: 100%;
}
.main__block {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 60px;
}
.main__block_1 {
    margin: 5px;
}
.main__block__h1{
    font-size: 34px;
    font-weight: 300;
    position: relative;
    z-index: 11;
    line-height: 1.1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f5f5f5;
}
.main__block__slide_text {
position: absolute;
    width: 40%;
	    top: 90px;
}
@media (max-width: 768px) {
.main__block__h1 {
font-size: 30px;
}
.main__block__slide_text {
position: relative;
    width: 100%;
	top: auto;
	        margin: -60px 0 0;
			bottom: 0;
}
}
@media (max-width: 991px) {
.main__block__h1 {
font-size: 30px;
}
}
.main__block__h2{
line-height: 1.5;
    z-index: 11;
    color: #e0e0e0;
    font-size: 14px;
    position: relative;
    text-align: center;
    width: 50%;
    font-weight: 500;
    margin: 0 auto;
    letter-spacing: 0.05em;
}

a:focus, a:hover {
    color: #ffcc00;
    text-decoration: none;
}
h1 {
font-weight: 300;
    font-size: 30px;
    line-height: 1.3;
	    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0px 0 30px;
    color: #fff;
}
h1 {
    font-weight: 300;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0px 0 30px;
    color: #f5f5f5;
}
@media (max-width: 768px) {
h1 {
	    letter-spacing: 0.1em;
}
.main__block__h2{
width: 100%;
    max-width: 75%;
}
}
h2 {
font-weight: 700;
    font-size: 20px;
	color: #212121;
}
p {
font-weight: 400;
    font-size: 14px;
	color: #212121;
}
.main__button {
color: #fff;
    background: #212121;
    padding: 10px 15px;
    display: grid;
    position: relative;
    text-align: center;
    margin: 30px 0 30px;
}
.menu__button {
color: #fff;
    background: #212121;
    padding: 10px 15px;
    display: grid;
    width: 100%;
	border-radius: 20px;
    position: relative;
    text-align: center;
    margin: 0px 0 0px;
}
.about__preview__button {
color: #fff;
    background: #212121;
    padding: 10px 15px;
    display: grid;
    position: relative;
    text-align: center;
    margin: 30px 0 30px;
}
.services__overview__button {
color: #fff;
    background: #212121;
    padding: 10px 15px;
    display: grid;
    position: relative;
    text-align: center;
    margin: 30px 0 30px;
}
.svg__img1 {
    width: 20px;
    right: 42px;
    height: 20px;
    fill: #f8f9fa;
    bottom: 0px;
    z-index: 120;
    position: absolute;
}
.plitka__img {
    z-index: 1;
    opacity: 1;
    position: absolute;
    max-height: 100%;
    left: 0;
    width: 100%;
    overflow: hidden;
    bottom: 0;
}
.block__about__preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0px;
}
.block__services__overview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: -5px -5px -5px;
	padding: 0 0 30px;
}
.block__services__overview a{
    overflow: hidden;
}
.block__services__overview_1:after {
    content: '';
    display: block;
    padding-top: 100%;
}
.block__services__overview_1 {
    position: relative;
    margin: 5px;
    height: 350px;
	overflow: hidden;
    border-radius: 20px 20px 0 20px;
    background: #cfdeca;
}
.block__services__overview_1__link {
    display: block;
    border-radius: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
	background: #f5f5f5;
}
.block__why__choose__us {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0px;
	    gap: 30px;
}
.block__why__choose__us_kitchen {
display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0px;
    gap: 30px 60px;
}
.social_link {
	font-weight: 400;
    font-size: 14px;
		color: #fff;
	}
.btn-3 {
    justify-content: space-between;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
	    width: fit-content;
    background-color: #212121;
    color: #fff;
    border-radius: 10rem;
    font-weight: 400;
    font-size: 14px;
    padding: 8px 8px 8px 16px !important;
    white-space: nowrap;
    overflow: hidden;
	height: 40px;
    text-overflow: ellipsis;
    transition: background-color 0.3s;
}
.btn-3:hover .button__icon-svg:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}
.btn-3:hover .button__icon-svg--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}
.btn-3:hover .button__icon-wrapper {
    color: #212121;
}
.btn-3 .button__icon-wrapper {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    position: relative;
    color: #212121;
    background-color: #f8f9fa;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.btn-3 .button__icon-svg--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}
.arrow__container {
    background: #f8f9fa;
    padding: 21px;
    right: 0;
    z-index: 100;
    border-radius: 20px 0 0 0;
    bottom: 0;
    position: absolute;
}
.arrow__link {
    background: #212121;
    width: 36px;
    border-radius: 50%;
    height: 36px;
    z-index: 100;
    position: absolute;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
}
.btn-4 .button__icon-wrapper {
    flex-shrink: 0;
    width: 36px;
    left: 0;
    height: 36px;
    bottom: 0;
    z-index: 100;
    position: absolute;
    color: #fff;
    background-color: #212121;
    border-radius: 50%;
    display: block;
    place-items: center;
    overflow: hidden;
}
.btn-4 .button__icon-svg {
   display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px; 
    margin-left: -6px; 
}
.btn-4 .button__icon-svg--copy {
    position: absolute;
    transform: translate(-150%, 150%);
	will-change: transform, opacity;
}
.block__services__overview_1__link:hover .button__icon-svg:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}

.block__services__overview_1__link:hover .button__icon-svg--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}
.svg__img {
    width: 20px;
    height: 20px;
	fill: #f8f9fa;
    right: 0;
    z-index: 120;
    bottom: 42px;
    position: absolute;
}
.svg__img1 {
    width: 20px;
    right: 42px;
    height: 20px;
	fill: #f8f9fa;
    bottom: 0px;
    z-index: 120;
    position: absolute;
}
.menu__button_btn-3 {
    overflow: visible !important;
    width: 100%;
    min-width: 0;
}
.btn-7 {
justify-content: space-between;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #212121;
    height: 40px;
    text-decoration: underline;
    text-decoration-color: #495057;
    border-radius: 10rem;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 8px 8px 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.3s;
}
.btn-7 .button__icon-wrapper {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    position: relative;
    color: #212121;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.btn-7 .button__icon-svg--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}
.btn-7:hover .button__icon-svg:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}
.btn-7:hover .button__icon-svg--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}
/*desktop*/
@media (min-width: 1300px) {
    .container {
        width: 1300px;
    }
}
/*mobile*/
@media (max-width: 768px) {
	.block__about__preview {
    grid-template-columns: 1fr;
}
.services__block__questions {
    margin: 30px 0 0px;
}
.footer__list {
    grid-template-columns: 1fr;
    padding: 30px 0 30px;
}
.portfolio__block__01  {
    grid-template-columns: 1fr;
}
.block__header {
        display: grid;
        align-items: start;
}
.block__contact__overview {
        grid-template-columns: 1fr;
        display: grid;
        gap: 60px 0;
}
.block__geo__overview {
    grid-template-columns: 1fr 1fr 1fr;
}
.block__portfolio__overview {
    grid-template-columns: 1fr;
}
.block__services__overview {
    grid-template-columns: 1fr;
}
.block__why__choose__us {
    grid-template-columns: 1fr;
}
.block__why__choose__us_kitchen {
    grid-template-columns: 1fr;
}
.block__header {
    grid-template-columns: 3fr 1fr;
}
.main__block {
    grid-template-columns: 1fr;
}
.block__services__overview {
    grid-template-columns: 1fr;
}
	}