/* ======= Общий фон для body (класс background) ======= */
body {
   margin: 0;
   padding: 0;
   background: whitesmoke;
   overflow-x: hidden;
}
.hero-video-wrapper {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
}

.hero-video-wrapper video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   z-index: 0;
}

.hero-overlay {
   position: absolute;

   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: rgba(0, 0, 0, 0.35);
}

/* ======= Базовые стили для ссылок ======= */
a {
   text-decoration: none;
   color: inherit;
}

/* =========== HEADER — Шапка сайта =========== */

.main-content {
   padding-top: 70px;
}

#main-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100000;
   padding: 1.5rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: transparent;
   transition: all 0.3s ease;
   transform: translateY(0%);
   padding: 0.1rem 1rem;
}

/* Появляется при скролле вверх */
#main-header.header-visible {
   background-color: rgba(141, 118, 118, 0.95);
   backdrop-filter: blur(8px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transform: translateY(0%);
   padding: 0.1rem 1rem;
   max-height: 60px;
}

/* Скрывается при скролле вниз */
#main-header.header-hidden {
   transform: translateY(-100%);
}

.header-grid {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
   padding: 0rem 1vw;
   box-sizing: border-box;
}

.header-left {
   justify-content: flex-start;
   color: rgb(255, 255, 255);
   text-shadow: 0 0 5px rgb(0, 0, 0);
   font-size: 1.4rem;
}

.header-right {
   justify-content: flex-end;
   color: white;
   text-shadow: 0 0 5px rgb(255, 255, 255);
   font-size: 1.1rem;
   margin-right: 1rem;
}
.button-white {
   display: inline-block;
   padding: 0.8rem 2rem;
   background-color: rgba(255, 255, 255, 0.25);
   color: white;
   text-shadow: 0 1px 4px rgb(0, 0, 0);
   font-size: 1.2rem;
   font-weight: 600;
   border-radius: 1rem;
   box-shadow: 0 4px 12px rgb(0, 0, 0);
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
   text-align: center;
}

.button-white:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.header-center {
   font-size: 1.1rem;
   color: white;
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   text-shadow: 0 0 5px rgb(0, 0, 0);
}

/* --- Кнопка "Demander" по центру фото --- */
.hero-center-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 100%;
   max-width: 900px;
   padding: 0.1rem;
   display: flex;
   justify-content: center;
}

.title-demander {
   background-color: rgba(0, 0, 0, 0.65);
   color: white;
   border-radius: 25px;
   padding: 2rem 2.5rem;
   text-align: center;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
   margin-bottom: 1rem;
   font-weight: 500;
   font-size: 1.3rem;
}

.button-demander {
   margin-top: 1rem;
   display: inline-block;
   background-color: transparent;
   color: white;
   border: 1px solid white;
   padding: 0.5rem 1.5rem;
   border-radius: 20px;
   font-style: italic;
   transition: 0.3s ease;
}

.button-demander:hover {
   background-color: white;
   color: black;
}

/* =========== НАШИ ЦЕННОСТИ (Values) =========== */

.background-section {
   background-image: url("Images/Zosim-Clean.png");
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 6rem 2rem;
   position: relative;
}
.values-title {
   text-align: center;
   font-size: 3.5rem;
   color: white;
   text-shadow: 0 0 5px rgb(0, 0, 0);
   padding: 0 10rem;
   letter-spacing: 0.1em;
}

.values-wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   width: 100%;
   margin: 0 auto;
   gap: 2.5rem;
   align-items: stretch;
}

.values-wrapper article {
   background-color: rgba(255, 255, 255, 0.85);
   border-radius: 2rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   text-align: center;
   aspect-ratio: 1 / 1;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-width: 110px;
   max-width: 300px;
   margin: 0 auto;
   padding: 1rem 0.6rem 0.6rem 0.6rem;
   overflow: hidden;
   margin-top: 15rem;
}

.values-wrapper img {
   margin-top: 1.1rem;
   margin-bottom: 0.7rem;
   max-width: 100px;
   height: auto;
   display: block;
}

.values-subtitle {
   font-size: 1.9rem;
   font-weight: 600;
   color: #3d3b3b;
   margin-bottom: 0.5rem;
}

.subtitle-text {
   font-size: 1.3rem;
   color: black;
   line-height: 1.5;
   padding: 1rem 1rem;
}

/* =========== ГОРОДА — где мы работаем =========== */
.our-city {
   text-align: center;
   border-radius: 3rem;
   margin-top: 10rem;
   margin-bottom: 20rem;
}
.nowrap {
   white-space: nowrap;
}
.title-our-city {
   font-size: 2.7rem;
   margin-bottom: 10rem;
   color: #403a42;
   font-weight: 800;
   letter-spacing: 0.1em;
   line-height: 1.18;
   text-align: center;
   text-shadow: 0 2px 16px #e2dfd760;
   padding: 0 0.5rem;
   border-radius: 1rem;
}

/* --- Контейнер для всех городов --- */
.city-wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8rem;
   margin-top: 10rem;
}

/* --- Одна карточка города --- */
.city {
   opacity: 0;
   transform: translateY(40px) scale(0.96);
   transition:
      opacity 1.1s cubic-bezier(0.51, 1.13, 0.42, 1.05),
      transform 1.1s cubic-bezier(0.51, 1.13, 0.42, 1.05);
}
.city.visible {
   opacity: 1;
   transform: translateY(0) scale(1);
   transition-delay: var(--delay, 0s);
}
.city:nth-child(1) {
   animation-delay: 0.2s;
}
.city:nth-child(2) {
   animation-delay: 0.4s;
}
.city:nth-child(3) {
   animation-delay: 0.6s;
}
.city:nth-child(4) {
   animation-delay: 0.8s;
}

.photo-city {
   width: 240px;
   height: 240px;
   object-fit: cover;
   border-radius: 50%;
   border: 4px solid #e2dfd7;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
}

.photo-city:hover {
   transform: scale(1.05);
}

.city-title {
   font-size: 1.5rem;
   color: #5b422a;
}

/* ===========     FOOTER            =========== */
footer {
   position: relative;
   z-index: 10;
}
.footer-page {
   background: linear-gradient(135deg, #e5e5e5 0%, #e5e5e5 100%);
}
.footer-section {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: flex-start;
   gap: 7rem;
   padding: 0.5rem;
   max-width: 100%;
   margin: 0rem;
}

.footer-section ul {
   list-style: none;
   padding-left: 0;
}

/* --- Логотип в футере — неоновый эффект --- */
.footer-logo {
   font-size: 2.6rem;
   line-height: 1;
   font-weight: 700;
   color: #ffffff;
   text-shadow:
      0 0 6px #87cefa,
      0 0 10px #1e90ff,
      0 0 20px #00bfff;
   opacity: 1;
   white-space: nowrap;
   transform: none;
   animation: none;
   padding: 0;
   margin: 0;
   cursor: default;
}

.footer-logo:hover {
   text-shadow:
      0 0 6px #00bfff,
      0 0 12px #1e90ff,
      0 0 20px #2600ff,
      0 0 28px #2600ff;
   transform: scale(1.02);
}

@keyframes neonFadeIn {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* --- Мини-бокс под логотип футера --- */
.footer-logo-box {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0.6rem 2.2rem;
   border-radius: 2rem;
   background-color: rgba(255, 255, 255, 0.5);
   box-shadow:
      0 0 15px rgba(0, 191, 255, 0.3),
      0 0 25px rgba(0, 191, 255, 0.4),
      inset 0 0 5px rgba(255, 255, 255, 0.2);
   margin-top: 6rem;
   margin-left: 2rem;

   animation: glowPulse 4s ease-in-out infinite;
   transition: box-shadow 0.4s ease;
   flex: 0 1 auto;
}

.footer-logo-box:hover {
   box-shadow:
      0 0 12px rgba(0, 191, 255, 0.5),
      0 0 20px rgba(30, 144, 255, 0.5),
      inset 0 0 10px rgba(38, 0, 255, 0.2);
}

@keyframes glowPulse {
   0% {
      box-shadow:
         0 0 10px rgba(0, 191, 255, 0.3),
         0 0 20px rgba(30, 144, 255, 0.3),
         inset 0 0 10px rgba(38, 0, 255, 0.1);
   }
   50% {
      box-shadow:
         0 0 18px rgba(0, 191, 255, 0.6),
         0 0 30px rgba(30, 144, 255, 0.6),
         inset 0 0 15px rgba(38, 0, 255, 0.2);
   }
   100% {
      box-shadow:
         0 0 10px rgba(0, 191, 255, 0.3),
         0 0 20px rgba(30, 144, 255, 0.3),
         inset 0 0 10px rgba(38, 0, 255, 0.1);
   }
}

/* --- Списки в футере --- */
.footer-box {
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
   padding: 0;
   margin: 0;
   align-items: flex-start;
   flex: 1 1 200px;
   max-width: 100%;
}
/*--- Заголовки в подвале --- */
.titles-footer {
   color: #444;
   font-size: 1.5em;
   font-weight: 700;
   text-align: center;
   margin-bottom: 0.1em;
}
.footer-copyright {
   background: #e5e5e5;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   width: 100%;
   margin-top: -10rem;
   padding-top: 0;
   color: #2d2d2d;
}

.footer-subtitle {
   font-size: 1.5rem;
   color: #6b5c4d;
}

/* --- Социальные иконки --- */
.social-logo-list {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   padding: 0;
   margin: 1rem 0 0 0;
   justify-content: flex-start;
   align-items: center;
}
.social-logo-list li {
   display: flex;
}
.social-logo img {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   transition: transform 0.4s;
   transition: box-shadow 0.4s;
}
.social-logo img:hover {
   transform: scale(1.15);
   box-shadow: 0 0 10px #d4a373;
}

.icon {
   border-radius: 10px !important;
}
/* --- Контакты в футере --- */
.footer-contacts {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
   font-style: normal;
   margin-top: 1rem;
}

.contact-item {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   color: #2d2d2d;
   font-size: 1.5rem;
   line-height: 1.4;
   transition: 0.2s ease;
}
.contact-item:hover {
   color: #004aad;
   text-decoration: none;
}
.contact-item img.icon {
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   object-fit: contain;
   transition: transform 0.2s ease;
}
.contact-item img.icon:hover {
   transform: scale(1.1);
}

/* --- Телефоны, e-mail и соцсети в футере --- */
.tel-number {
   color: #6b5c4d;
   font-weight: 500;
}
.gmail {
   color: #6b5c4d;
   font-weight: 500;
}
.instagram {
   color: #6b5c4d;
   font-weight: 500;
}
.facebook {
   color: #6b5c4d;
   font-weight: 500;
}
.footer-story-link {
   display: flex;
   justify-content: center;
   margin-bottom: 0.6rem;
   margin-top: 6rem;
}

.footer-story-button {
   display: inline-block;
   padding: 0.6rem 1.8rem;
   font-size: 1.1rem;
   font-weight: 600;
   text-decoration: none;
   border-radius: 2rem;
   color: #ffffff;
   background-color: #0c0c0c;
   border: 2px solid #00aaff;
   box-shadow:
      0 0 10px #00aaff,
      0 0 20px #00aaff;
   transition: all 0.3s ease-in-out;
   text-align: center;
   margin-top: 5rem;
}

.footer-story-button:hover {
   background-color: #00aaff;
   color: #000000;
   box-shadow:
      0 0 20px #00aaff,
      0 0 40px #00aaff;
}
/* =============  4. Медиа адаптивность  ============= */

@media (max-width: 768px) {
   .hero-video-wrapper {
      position: relative;
      height: 100vh;
   }

   .hero-video-wrapper video {
      object-fit: cover;
      object-position: center;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
   }

   .hero-overlay {
      background-color: rgba(0, 0, 0, 0.4);
      position: relative;
      z-index: 1;
   }
   .hero-center-content {
      padding: 1rem;
      position: relative;
      z-index: 2;
   }

   .title-demander {
      font-size: 1rem;
      padding: 1.5rem 1.5rem;
   }

   .button-demander,
   .button-white {
      font-size: 0.85rem;
      padding: 0.4rem 1rem;
   }

   .header-left,
   .header-center,
   .header-right {
      font-size: 1rem;
      flex-direction: column;
      text-align: center;
   }

   .values-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 0.5rem;
   }
   .values-wrapper article {
      margin-top: 4rem;
      max-width: 100%;
      width: 100%;
      padding: 4.1rem 0.1rem;
      aspect-ratio: unset;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
   }
   .values-wrapper img {
      max-width: 70px;
      margin: 0 0 2.9rem 0;
   }
   .values-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 1.5rem;
      margin-bottom: 1.2rem;
      padding: 0 0.3rem;
      text-align: center;
   }
   .values-subtitle {
      font-size: 1.5rem;
      margin: 0 0 0.17rem 0;
      margin-bottom: 2rem;
   }
   .subtitle-text {
      font-size: 0.92rem;
      padding: 0.15rem 0.25rem;
      margin: 0;
      line-height: 1.28;
      flex: 1 1 auto;
      overflow-wrap: anywhere;
   }

   .background-section {
      padding: 3rem 1rem;
   }
   .title-our-city {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 1.5rem;
      margin-bottom: 1.6rem;
      text-align: center;
      padding: 0 0.2rem;
   }
   .city-wrapper {
      gap: 2rem;
   }

   .city {
      flex: 0 0 calc(50% - 1rem);
      max-width: calc(50% - 1rem);
   }

   .photo-city {
      width: 100%;
      max-width: 160px;
      height: auto;
      aspect-ratio: 1 / 1;
   }

   .footer-logo-box {
      flex-direction: column;
      margin-top: 2rem;
      margin-left: 1.6rem;
   }

   .footer-section {
      flex-direction: column;
      gap: 1rem;
   }
}
@media (min-width: 769px) and (max-width: 1200px) {
   .values-wrapper {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
   }
   .values-title {
      padding: 0 2rem;
      font-size: 2.2rem;
   }
   .values-wrapper article {
      margin-top: 8rem;
      max-width: 340px;
      aspect-ratio: unset;
      min-height: 220px;
   }
   .subtitle-text {
      font-size: 1.3rem;
      padding: 2rem 1rem;
   }
}