/* === Общие стили === */

* { box-sizing: border-box; margin:0; padding:0; font-family:'Roboto', sans-serif; }
  body { line-height:1.6; color:#333; overflow-x:hidden; }

/* === Header и навигация === */
header { position: sticky; top:0; background:#1e3a8a; color:#fff; z-index:1000; padding:20px 0; }
header .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; max-width:1200px; margin:0 auto; padding:0 20px; }
header h1 { font-size:1.8rem; }

#nav-menu { display:flex; gap:20px; align-items:center; z-index:1101; transition:all 0.4s ease; }
#nav-menu a { color:#fff; text-decoration:none; font-weight:500; }
#nav-menu a:hover { color:#fbbf24; transform:translateY(-2px); transition:0.3s; }

.menu-toggle { display:none; font-size:1.8rem; background:none; border:none; color:#fff; cursor:pointer; z-index:1102; }
.menu-toggle:hover { transform:scale(1.1); color:#fbbf24; }

/* === Секции === */
section { padding:60px 20px; opacity:0; transform:translateY(30px); transition:all 0.8s ease; }
section.visible { opacity:1; transform:translateY(0); }

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

/* === Hero === */
.hero { position: relative; background: url('hero-image.jpg') center/cover no-repeat; color: #fff; padding: 120px 20px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.hero::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.55); z-index:0; }
.hero-container { position: relative; z-index: 1; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; max-width:1200px; margin:0 auto; }
.hero-text, .hero-description { flex:1 1 45%; }
.hero-description { background:rgba(255,255,255,0.08); padding:25px; border-radius:10px; backdrop-filter:blur(5px); }
.hero h2 { font-size:2.6rem; margin-bottom:20px; }
.hero p { font-size:1.1rem; line-height:1.6; color:#f3f4f6; }
.hero a { display:inline-block; margin-top:20px; background:#fbbf24; color:#111; padding:15px 30px; font-weight:600; text-decoration:none; border-radius:8px; transition:all 0.3s ease; }
.hero a:hover { background:#f59e0b; transform:translateY(-3px); }

.fade-in { opacity:0; transform:translateY(30px); animation:fadeUp 1.2s ease forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

@media (max-width:768px){
.hero-container { flex-direction:column; text-align:center; }
.hero h2 { font-size:2rem; }
}

/* === Блоки === */
.about, .video-section, .gallery, .contact { background:#f5f5f7; border-radius:10px; margin-bottom:40px; padding:40px 20px; box-shadow:0 10px 25px rgba(0,0,0,0.05); }
h2.section-title { text-align:center; font-size:2rem; margin-bottom:40px; color:#1e3a8a; }
.about p { max-width:800px; margin:0 auto 20px; text-align:justify; }

.video-section iframe, .video-section video { display:block; margin:0 auto; max-width:100%; border-radius:10px; transition:0.3s; }
.video-section video:hover { transform:scale(1.02); }

/* === Галерея === */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; max-width:1200px; margin:0 auto 60px; padding:40px 20px; }
.gallery img { width:100%; border-radius:10px; transition: transform 0.3s, box-shadow 0.3s; }
.gallery img:hover { transform:scale(1.05); box-shadow:0 15px 35px rgba(0,0,0,0.15); }

/* Галерея с большим фото и миниатюрами */
.gallery-container { display:grid; grid-template-columns:60% 40%; gap:20px; max-width:1200px; margin:0 auto; align-items:start; }
.gallery-large img { width:100%; height:auto; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,0.08); cursor:pointer; transition: transform 0.3s, filter 0.3s; }
.gallery-large img:hover { transform: scale(1.02); filter: brightness(1.05); }

.gallery-grid { display:grid; grid-template-columns:1fr; gap:20px; justify-self:stretch; }
@media (min-width:576px){ .gallery-grid { grid-template-columns:repeat(2,1fr); } }

.gallery-item { position: relative; overflow:hidden; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,0.08); cursor:pointer; transform:translateY(20px); opacity:0; transition: all 0.6s ease; }
.gallery-item.visible { transform:translateY(0); opacity:1; }
.gallery-item img { width:100%; height:190px; object-fit:cover; border-radius:10px; cursor:pointer; transition: transform 0.3s, filter 0.3s; }
.gallery-item img:hover { transform:scale(1.05); filter: brightness(1.1); }

@media (max-width:768px){
.gallery-container { grid-template-columns:1fr; }
.gallery-grid { grid-template-columns:1fr 1fr; gap:15px; justify-self:center; }
.gallery-item img { height:150px; }
.gallery-large { justify-self:center; }
}

/* === Видеообращение владельца === */
#owner-video { max-width:900px; margin:0 auto 60px; padding:20px; background:#f9fafb; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,0.05); }
#owner-video video { width:100%; max-width:100%; border-radius:10px; }

/* === Footer === */
footer { background:#111827; color:#fff; padding:40px 20px; text-align:center; }
footer a { color:#fbbf24; text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* === Telegram button === */
.telegram-button { background:#fbbf24; color:#333; padding:15px 30px; text-decoration:none; font-weight:500; border-radius:5px; transition:0.3s; }
.telegram-button:hover { background:#f59e0b; transform:translateY(-3px); }

/* === Overlay === */
#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); z-index:1040; display:none; }

/* === Lightbox === */
.lightbox { display:none; position:fixed; z-index:2000; padding-top:60px; left:0; top:0; width:100%; height:100%; background-color: rgba(0,0,0,0.9); }
.lightbox-content { margin:auto; display:block; max-width:90%; max-height:80%; border-radius:10px; }
.lightbox-close { position:absolute; top:20px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; transition:color 0.3s; }
.lightbox-close:hover { color:#fbbf24; }

/* === Иконка "Домик" === */
.home-icon { font-size:30px; color:#ff6600; margin-right:15px; transition: transform 0.3s; }
.home-icon:hover { transform:scale(1.2); }

/* === Адаптив === */
@media (max-width:992px){ nav a { font-size:0.9rem; } }
@media (max-width:768px){
.menu-toggle { display:block; }
#nav-menu { flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#1e3a8a; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height 0.4s ease, opacity 0.4s ease; }
#nav-menu.active { max-height:500px; opacity:1; pointer-events:auto; }
#nav-menu a { display:block; text-align:center; margin:12px 0; font-size:1.1rem; }
}

/* === Контакты === */
.contact form { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.contact input, .contact textarea { padding:5px; border-radius:5px; border:1px solid #ccc; font-size:1rem; transition:0.3s; }
.contact input:focus, .contact textarea:focus { border-color:#1e3a8a; box-shadow:0 0 10px rgba(30,58,138,0.2); }
.contact button { padding:15px; background:#1e3a8a; color:#fff; font-size:1rem; font-weight:500; border:none; border-radius:5px; cursor:pointer; transition:0.3s; }
.contact button:hover { background:#2563eb; transform:translateY(-2px); }

#contactForm textarea {
  height: 80px; /* меньше, чем стандартные 120-150px */
}


/* --- Контактная форма адаптивная --- */
/*.contact form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ffffff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.contact form:hover {
  transform: translateY(-3px);
}
*/
.contact label {
  font-weight: 500;
  margin-bottom: 5px;
  color: #1e3a8a;
}

.contact input, .contact textarea {
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.contact input:focus, .contact textarea:focus {
  border-color: #1e3a8a;
  box-shadow: 0 0 10px rgba(30,58,138,0.2);
}

.contact button {
  padding: 15px;
  background: #1e3a8a;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.contact button:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

#contactForm input,
#contactForm textarea,
#contactForm button {
  padding: 10px; /* меньше, чем обычно */
  font-size: 16px; /* чуть меньше текста */
  margin-bottom: 5px;
  width: 100%;
  box-sizing: border-box;
}

/* reCAPTCHA центрирование */
.g-recaptcha {
  display: flex;
  justify-content: center;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
  .contact form {
    padding: 20px;
  }
  .contact input, .contact textarea {
    font-size: 0.95rem;
  }
  .contact button {
    font-size: 0.95rem;
  }
}
.form-success-message,
.form-error-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 25px;
  border-radius: 6px;
  z-index: 9999;
  font-family: sans-serif;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  opacity: 0;
}

.form-success-message {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-error-message {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* === Мобильная оптимизация анимаций === */
@media (max-width: 768px) {
  section,
  .gallery-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* === Соцсети в шапке с фирменными цветами === */
.header-socials {
  display: flex;
  gap: 15px;
  align-items: center;
}

.header-socials .social {
  display: inline-flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Фирменные цвета */
.social-telegram { background: #26a5e4; }
.social-vk { background: #4c75a3; }
.social-instagram { background: #e1306c; }
.social-pinterest { background: #bd081c; }
.social-whatsapp { background: #25D366; }

/* Hover */
.header-socials .social:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
}

.header-socials .social i {
  font-size: 20px;
}

/* === Плавающая кнопка Telegram сбоку === */
.telegram-button-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #26a5e4;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 999;
}

.telegram-button-fixed:hover {
  transform: scale(1.1);
}

.telegram-button-fixed i {
  font-size: 20px;
}

/* === Адаптив === */
@media (max-width: 768px) {
  .header-socials { gap: 10px; }
  .header-socials .social { width: 35px; height: 35px; }
  .header-socials .social i { font-size: 18px; }
  .telegram-button-fixed { width: 45px; height: 45px; }
  .telegram-button-fixed i { font-size: 20px; }
}

@media (max-width: 480px) {
  .header-socials { gap: 8px; }
  .header-socials .social { width: 32px; height: 32px; }
  .header-socials .social i { font-size: 16px; }
  .telegram-button-fixed { width: 40px; height: 40px; }
  .telegram-button-fixed i { font-size: 18px; }
}

/* === Улучшенный Футер === */
footer {
  background: #111827;
  color: #fff;
  padding: 50px 20px;
  text-align: center;
  border-top: 3px solid #1e3a8a;
}

.footer-contacts {
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.footer-contacts strong {
  color: #fbbf24;
}

.footer-contact-item {
  margin: 8px 0;
  display: block;
  font-size: 1.15rem;
}

.footer-contact-item i {
  margin-right: 10px;
  color: #fbbf24;
}

.footer-socials {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.footer-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1e3a8a;
  color: #fff;
  font-size: 20px;
  transition: 0.3s;
  text-decoration: none;
}

.footer-socials a:hover {
  transform: scale(1.1);
  background: #2563eb;
}

/* Адаптив футера */
@media (max-width: 480px) {
  .footer-contact-item {
    font-size: 1rem;
  }
  .footer-socials a {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* === Мультивиджет Telegram + WhatsApp (плавающий) === */
.floating-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.fab-main {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #1e3a8a;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
  transition: 0.3s ease;
}

.fab-main:hover {
  transform: scale(1.1);
}

/* Кнопки внутри */
.fab-option {
  position: absolute;
  width: 48px;
  height: 48px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: all 0.35s ease;
}

/* Цвета */
.fab-telegram { background: #26a5e4; }
.fab-whatsapp { background: #25D366; }

/* Раскрытие */
.floating-widget.active .fab-telegram {
  bottom: 70px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-5px);
}

.floating-widget.active .fab-whatsapp {
  bottom: 130px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-5px);
}

/* Адаптив */
@media (max-width: 480px) {
  .fab-main { width: 50px; height: 50px; font-size: 22px; }
  .fab-option { width: 44px; height: 44px; }
}

/* === Баннер согласия с персональными данными === */
#pd-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e3a8a;
  color: #fff;
  padding: 20px;
  border-top: 3px solid #fbbf24;
  z-index: 99999;
  display: none;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
}

#pd-consent-banner .pd-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

#pd-consent-banner p {
  font-size: 1rem;
  line-height: 1.5;
}

#pd-consent-banner a {
  color: #fbbf24;
  text-decoration: underline;
}

#pd-consent-banner a:hover {
  color: #f59e0b;
}

/* Фирменная кнопка */
#pd-consent-banner .btn-primary {
  background: #fbbf24;
  color: #333;
  padding: 12px 26px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
}

#pd-consent-banner .btn-primary:hover {
  background: #f59e0b;
  transform: translateY(-2px);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  #pd-consent-banner {
    padding: 15px;
  }
  #pd-consent-banner p {
    font-size: 0.95rem;
  }
  #pd-consent-banner .btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* Кнопка-крестик */
.pd-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  background: #ffffff;
  color: #333;
  font-size: 24px;
  line-height: 24px;
  font-weight: bold;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
  transition: background 0.2s, color 0.2s;
}

.pd-close-btn:hover {
  background: #d60000;
  color: #fff;
}

/* Чтобы контейнер позволял позиционирование */
.pd-container {
  position: relative;
}

/* ===== Кнопка согласия с пульсацией ===== */
#pd-accept {
  background: #1e3a8a;      /* основной цвет кнопки */
  color: #fff;
  padding: 15px 30px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: pulse-red 1.5s infinite; /* пульсация */
  box-shadow: 0 0 10px red;           /* начальное свечение */
}

/* Hover эффект */
#pd-accept:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px red;
}

/* ===== Анимация пульсации ===== */
@keyframes pulse-red {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px red;
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 25px red;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px red;
  }
}

/* ===== Мобильная адаптация ===== */
@media (max-width: 768px) {
  #pd-accept {
    padding: 12px 25px;
    font-size: 0.95rem;
    animation: pulse-red-mobile 1.5s infinite;
    box-shadow: 0 0 8px red;
  }

  @keyframes pulse-red-mobile {
    0% {
      transform: scale(1);
      box-shadow: 0 0 6px red;
    }
    50% {
      transform: scale(1.08);
      box-shadow: 0 0 14px red;
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 6px red;
    }
  }
}