/* Основной контент */
.main-content {
  margin-top: 7.5rem; /* 120px */
}

/* Контейнер */
.container {
  width: 90%; /* Резиновая ширина */
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  padding: 0 1.25rem; /* 20px */
}

/* Заголовки секций */
.section-title {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.5rem); /* Масштабируется от 32px до 56px */
  margin-bottom: 3.125rem; /* 50px */
  color: #ffd700;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -0.625rem; /* -10px */
  left: 50%;
  transform: translateX(-50%);
  width: 5rem; /* 80px */
  height: 0.1875rem; /* 3px */
  background: linear-gradient(45deg, #ffd700, #d4af37);
  border-radius: 0.125rem; /* 2px */
}

/* Кнопки CTA */
.cta-button {
  display: inline-block;
  background: linear-gradient(45deg, #ffd700, #d4af37);
  color: #0a1428;
  padding: 0.9375rem 1.875rem; /* 15px 30px */
  text-decoration: none;
  border-radius: 1.875rem; /* 30px */
  font-weight: bold;
  font-size: clamp(1rem, 2vw, 1.2rem); /* 16px–19.2px */
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

/* Секция услуги */
.service-details {
  padding: clamp(3rem, 10vw, 5rem) 0; /* 48px–80px */
  background: rgba(26, 39, 68, 0.3);
}

.service-photo {
  width: calc(80vw - 4vw); /* 1.5–2 см отступы */
  max-width: 46.25rem; /* 740px */
  min-width: 17.5rem; /* 280px */
  height: clamp(15rem, 50vw, 31.25rem); /* 240px–500px */
  border-radius: 1.25rem; /* 20px */
  background: linear-gradient(45deg, #1a2744, #2a3a5a);
  border: 3px solid #ffd700;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.5rem, 5vw, 3rem); /* 24px–48px */
  color: #ffd700;
  margin: 0 auto 2.5rem; /* 40px */
  animation: fadeInUp 1s ease-out;
}

.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* или 'cover' если хочешь заполнить блок */
  border-radius: inherit;
}

.service-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem; /* 30px */
  margin-bottom: 2.5rem; /* 40px */
}

.service-description {
  width: 80vw;
  max-width: 50rem; /* 800px */
  min-width: 18.75rem; /* 300px */
  min-height: 12.5rem; /* 200px */
  height: auto; /* Растягивается под текст */
  background: rgba(10, 20, 40, 0.6);
  padding: 1.5625rem; /* 25px */
  border-radius: 1.25rem; /* 20px */
  border: 1px solid rgba(255, 215, 0, 0.2);
  backdrop-filter: blur(10px);
  animation: slideInLeft 1s ease-out;
}

.service-cta {
  width: 60vw;
  max-width: 37.5rem; /* 600px */
  min-width: 15.625rem; /* 250px */
  min-height: 9.375rem; /* 150px */
  height: auto; /* Растягивается под текст */
  background: rgba(10, 20, 40, 0.6);
  padding: 1.5625rem; /* 25px */
  border-radius: 1.25rem; /* 20px */
  border: 1px solid rgba(255, 215, 0, 0.2);
  backdrop-filter: blur(10px);
  animation: slideInRight 1s ease-out;
}

.service-description h3 {
  font-size: clamp(1.6rem, 4vw, 2.2rem); /* 25.6px–35.2px */
  color: #ffd700;
  margin-bottom: 0.9375rem; /* 15px */
}

.service-description p {
  font-size: clamp(1.1rem, 3vw, 1.4rem); /* 17.6px–22.4px */
  color: #c8c8c8;
  line-height: 1.8;
}

.service-cta h3 {
  font-size: clamp(1.4rem, 3.5vw, 1.8rem); /* 22.4px–28.8px */
  color: #ffd700;
  margin-bottom: 0.9375rem; /* 15px */
}

.service-cta p {
  font-size: clamp(1rem, 2.5vw, 1.2rem); /* 16px–19.2px */
  color: #c8c8c8;
  line-height: 1.8;
}

.service-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem; /* 20px */
  margin-bottom: 2.5rem; /* 40px */
}

.consult-button, .request-button {
  width: 100%;
  max-width: 18.75rem; /* 300px */
  text-align: center;
}

.service-navigation {
  display: flex;
  justify-content: center;
  gap: 1.25rem; /* 20px */
}

.nav-button {
  width: 3.75rem; /* 60px */
  height: 3.75rem;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid #ffd700;
  color: #ffd700;
  font-size: 1.5rem; /* 24px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-button:hover {
  background: #ffd700;
  color: #0a1428;
  transform: scale(1.1);
}

/* Футер */
.footer {
  background: rgba(10, 20, 40, 0.95);
  padding: 2.5rem 0 1.25rem; /* 40px 20px */
  border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); /* 250px */
  gap: 1.875rem; /* 30px */
  margin-bottom: 1.875rem; /* 30px */
}

.footer-section h3 {
  color: #ffd700;
  margin-bottom: 1.25rem; /* 20px */
}

.footer-section p, .footer-section a {
  color: #b8b8b8;
  text-decoration: none;
  margin-bottom: 0.625rem; /* 10px */
  display: block;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: #ffd700;
}

.footer-bottom {
  text-align: center;
  padding-top: 1.25rem; /* 20px */
  border-top: 1px solid rgba(255, 215, 0, 0.1);
  color: #888;
}

/* Плавающие виджеты */
.floating-widgets {
  position: fixed;
  bottom: clamp(0.9375rem, 1.25vw, 1.25rem);
  right: clamp(0.9375rem, 1.25vw, 1.25rem);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9375rem, 0.9375vw, 0.9375rem);
}

/* Добавляем смещение конкретно для иконки WhatsApp */
.whatsapp-widget {
  transform: translate(-11px, -75px); /* Влево на 3мм (~11px), вверх на 2см (~75px) */
}

.floating-widget {
  width: 5.625rem; /* 90px */
  height: 5.625rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem; /* 36px */
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.whatsapp-widget {
  background: #25D366;
}

.chat-widget {
  background: linear-gradient(45deg, #ffd700, #d4af37);
  color: #0a1428;
}

.floating-widget:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.chat-popup {
  position: fixed;
  bottom: 6.25rem; /* 100px */
  right: 1.25rem; /* 20px */
  width: clamp(15rem, 80vw, 18.75rem); /* 240px–300px */
  height: 25rem; /* 400px */
  background: rgba(10, 20, 40, 0.95);
  border-radius: 1.25rem; /* 20px */
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 1.25rem; /* 20px */
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s ease;
  backdrop-filter: blur(15px);
}

.chat-popup.active {
  transform: translateY(0);
  opacity: 1;
}

.chat-popup h3 {
  color: #ffd700;
  margin-bottom: 0.9375rem; /* 15px */
  text-align: center;
}

.chat-popup p {
  color: #c8c8c8;
  text-align: center;
  font-size: 0.875rem; /* 14px */
}

/* Адаптивность для маленьких экранов */
@media (max-width: 768px) {
  
  .main-content {
    margin-top: 6.25rem; /* 100px */
  }

  .service-details {
    padding: 3.75rem 0; /* 60px */
  }

  .service-actions {
    gap: 0.9375rem; /* 15px */
  }

  .consult-button, .request-button {
    max-width: 15.625rem; /* 250px */
  }

  .nav-button {
    width: 3.125rem; /* 50px */
    height: 3.125rem;
    font-size: 1.25rem; /* 20px */
  }

  .footer {
    padding: 1.875rem 0 0.9375rem; /* 30px 15px */
  }

  .footer-content {
    gap: 1.25rem; /* 20px */
  }

  .floating-widgets {
    bottom: 0.9375rem; /* 15px */
    right: 0.9375rem; /* 15px */
  }

  .floating-widget {
    width: 3.75rem; /* 98px */
    height: 3.75rem;
    font-size: 2.4375rem; /* 39px */
  }

  .chat-popup {
    width: calc(100vw - 1.875rem); /* 30px */
    right: 0.9375rem; /* 15px */
    height: 21.875rem; /* 350px */
  }
}

@media (max-width: 480px) {
 
  .container {
    padding: 0 0.75rem; /* 12px */
  }

  .section-title {
    font-size: clamp(1.5rem, 4vw, 1.8rem); /* 24px–28.8px */
    margin-bottom: 2.5rem; /* 40px */
  }

  .service-details {
    padding: 3.125rem 0; /* 50px */
  }

  .service-actions {
    gap: 0.625rem; /* 10px */
  }

  .consult-button, .request-button {
    max-width: 12.5rem; /* 200px */
  }

  .nav-button {
    width: 2.8125rem; /* 45px */
    height: 2.8125rem;
    font-size: 1.125rem; /* 18px */
  }

  .footer {
    padding: 1.5625rem 0 0.625rem; /* 25px 10px */
  }

  .fade {
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  .fade.fade-out {
    opacity: 0;
  }
  /* ✅ Отображение переносов строк (\n) и отступов (пробелы в начале строки) */
  .service-description p,
  .service-cta p {
    white-space: pre-linе;
  }
}