/* ============= 1. Глобальные переменные (root) ============= */
:root {
   --font-main: "Segoe UI", "Roboto", "Arial", sans-serif;
   --c-bg: #ffffff;
   --radius-medium: 1.5rem;
   --transition-fast: 0.1s;
   --transition-slow: 0.4s;
}

/* ============= 2. ГЛАВНАЯ СТРАНИЦА ============= */

/* Контейнер всех услуг */
.all-services {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2.5rem 2rem;
   padding: 2rem 1rem;
   max-width: 1900px;
   margin: 0 auto;
   box-sizing: border-box;
}
.nettoyage-article {
   flex: 0 0 calc(20% - 2rem);
   max-width: calc(20% - 2rem);
   display: flex;
   justify-content: center;
   margin-bottom: 2rem;
   z-index: 0;
}
/* Заголовок секции услуг */
.title-services {
   font-size: 2.3rem;
   color: rgb(64, 58, 66);
   font-weight: 800;
   text-align: center;
   width: 100%;
   margin-bottom: 3rem;
   margin-top: 0rem;
   letter-spacing: 0.1em;
}

/* Карточка услуги */
.service {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: rgb(255, 255, 255);
   border-radius: var(--radius-medium);
   box-shadow: 0 0 12px 3px rgb(33, 30, 34);
   height: 160px;
   width: 160px;
   text-align: center;
   text-decoration: none;
   color: black;
   opacity: 0;
   transform: translateY(40px) scale(0.1);
   transition:
      opacity 0.5s cubic-bezier(0.1, 0.1, 0.1, 0.1),
      transform 0.5s cubic-bezier(0.1, 0.1, 0.1, 0.1);
}

.service.visible {
   opacity: 1;
   transform: translateY(0) scale(1);
}

/* Hover эффект для карточки */
.service:hover {
   transform: translateY(-15px);
   background-color: var(--c-bg);
   box-shadow: 0 0 12px 3px rgb(33, 30, 34);
}

/* --- Hover эффект для карточки Credit impot --- */

.credit-service .service img {
   width: 90px;
   height: 90px;
   margin-bottom: -2rem;
}

.credit-service .service {
   box-shadow:
      0 0 12px rgba(255, 85, 85, 0.4),
      0 0 20px rgba(255, 50, 50, 0.5),
      inset 0 0 10px rgba(255, 50, 50, 0.2);
   transition:
      box-shadow 0.9s ease,
      transform var(--transition-slow),
      background-color var(--transition-slow);
}

.credit-service .service:hover {
   box-shadow:
      0 0 18px rgba(255, 0, 0, 0.6),
      0 0 30px rgba(255, 0, 0, 0.7),
      inset 0 0 14px rgba(255, 0, 0, 0.3);
}
.credit-service .service:hover img {
   filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.5));
}
/* Изображение внутри карточки */
.service img {
   width: 90px;
   height: 90px;
   margin-bottom: -2rem;
}

/* Название услуги */
.service h3 {
   font-size: 1.2rem;
   margin: auto;
}

/* ============= 3. СЕРВИСНЫЕ СТРАНИЦЫ ============= */
body {
   background-color: #d6d2cb;
}
.style-service-page {
   max-width: 1080px;
   margin: 0 auto;
   padding: 4rem 2rem;
   background-color: #fdfdfd;
   font-family: var(--font-main);
   color: #333;
}

.title-for-service {
   font-size: 2.5rem;
   text-align: center;
   color: #6b5c4d;
   font-weight: 700;
   margin-bottom: 3rem;
}

.section {
   margin-bottom: 4rem;
   padding: 2rem;
   background-color: #ffffff;
   border: 1px solid #e4e4e4;
   border-radius: 1rem;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
   transition: box-shadow 0.3s ease;
}

.section:hover {
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

.subtitle-for-description {
   font-size: 2rem;
   color: #6b5c4d;
   margin-bottom: 1.2rem;
   font-weight: 600;
}

.section p {
   font-size: 1.5rem;
   margin-bottom: 1.2rem;
   color: #444;
}

.service-list {
   display: grid;
   gap: 0.75rem;
   padding: 1rem 0;
   list-style: none;
}

.service-list li {
   position: relative;
   padding-left: 2rem;
   background-color: #f8f6f4;
   border-radius: 0.5rem;
   padding: 0.8rem 1rem 0.8rem 2.5rem;
   border: 1px solid #e0dbd4;
   font-size: 1.2rem;
}

.service-list li::before {
   content: "✓";
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   color: #4c4cf1;
   font-weight: bold;
}

/* ========== Адаптивность на всех устройствах ========== */

@media (max-width: 768px) {
   .service:hover {
      transform: none !important;
      background-color: rgb(255, 255, 255) !important;
      box-shadow: 0 0 12px 3px rgb(33, 30, 34) !important;
   }
   .nettoyage-article {
      flex: 0 0 calc(50% - 1rem);
      max-width: calc(50% - 1rem);
   }

   .service {
      width: 150px;
      height: 150px;
   }

   .title-services {
      font-size: 1.5rem;
   }
   .title-for-service {
      font-size: 1.2rem;
   }
   .subtitle-for-description {
      font-size: 1.2rem;
   }

   .section {
      padding: 1.5rem;
   }

   .service-list li {
      font-size: 0.95rem;
      padding: 0.7rem 1rem 0.7rem 2rem;
   }
   .footer-logo-box {
      margin: 2rem auto 0 auto;
      justify-content: center;
      align-items: center;
   }
}
@media (min-width: 769px) {
   .all-services {
      gap: 2.8rem 2.5rem;
      padding: 3rem 2rem;
      max-width: 1920px;
   }
   .nettoyage-article {
      flex: 0 0 calc(20% - 2.2rem);
      max-width: calc(20% - 2.2rem);
      margin-bottom: 3rem;
   }
   .service {
      width: 200px;
      height: 200px;
      font-size: 1.15rem;
   }
   .service img {
      width: 110px;
      height: 110px;
      margin-bottom: -2rem;
   }
   .title-services {
      font-size: 2.8rem;
      margin-bottom: 4rem;
   }
   .title-for-service {
      font-size: 2.7rem;
      margin-bottom: 3.2rem;
   }
   .subtitle-for-description {
      font-size: 2.1rem;
   }
   .section {
      padding: 3rem;
      margin-bottom: 4.5rem;
      border-radius: 1.5rem;
   }
   .service-list li {
      font-size: 1.4rem;
      padding: 1.1rem 1.5rem 1.1rem 3rem;
   }
}