@font-face {
  font-family: 'YauzaTygra';
  src: url('../static/fonts/yauzatygra.woff2') format('woff2'),
      url('../static/fonts/yauzatygra.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TriodPostnaja';
  src: url('../static/fonts/TriodPostnaja.woff2') format('woff2'),
      url('../static/fonts/TriodPostnaja.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Pelagy';
  src: url('../static/fonts/pelagy.woff2') format('woff2'),
      url('../static/fonts/pelagy.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



body {
    background: #f8f8f8;
    font-family: 'Cormorant SC', serif;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.font-yauza {
  font-family: 'YauzaTygra', cursive !important;
}

.font-triod {
  font-family: 'TriodPostnaja', cursive !important;
}

.font-pelagy {
  font-family: 'Pelagy', cursive !important;
}

/* Hero Section */
.hero-section {
    background: white;
    color: #972820;
    padding-top: 0; /* убираем отступ сверху */
    padding-bottom: 2rem;
    position: relative;
}

.hero-image img {
    width: 100%;
    height: auto;
    object-fit: contain; /* или cover, если нужно */
    max-height: 60vh; /* по умолчанию */
}

@media (min-width: 1024px) {
    .hero-image img {
        max-height: 50vh; /* уменьшаем на больших мониторах */
    }
}

@media (min-width: 1440px) {
    .hero-image img {
        max-height: 40vh; /* для больших экранов */
    }
}

/* Countdown */
.countdown-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.45rem 0.45rem;
    border-radius: 0.5rem;
}

/* Location Section */
.location-section {
    padding: 2rem 1rem;
    background: #972820;
    color: white;
}

/* Program Section */
.program-section {
    padding: 2rem 1rem;
    background: white;
    color: #972820;
}

.program-timeline {
    position: relative;
}

.program-timeline::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
    .program-timeline::before {
        left: 50%;
    }
}

.comment-section {
    padding: 2rem 1rem;
    background: #972820;
    color: white;
}

.gallery-section {
    padding: 2rem 1rem;
    background: white;
    color: #972820;
}

/* Dress Code Section */
.dresscode-section {
    padding: 2rem 1rem;
    background: #972820;
    color: white;
}

/* RSVP Section */
.rsvp-section {
    padding: 2rem 1rem;
    background: white;
    color: #972820;
}

.rsvp_form-section {
    padding: 2rem 1rem;
    background: white;
    color: #972820;
}

/* Organizer Section */
.organizer-section {
    padding: 2rem 1rem;
    background: #972820;
    color: white;
}

/* Footer */
.wedding-footer {
    background: white;
    color: #972820;
    padding: 2.5rem 1rem;
    text-align: center;
}


.social-icon {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 9999px;
    transition: background 0.3s;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Form Styles */
.wedding-form input[type="text"],
.wedding-form input[type="tel"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: white;
    border: 1px solid black;
}

.wedding-form input:focus {
    outline: none;
    ring: 2px;
    ring-color: black;
}

.wedding-form button {
    width: 100%;
    background: white;
    color: #972820;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: bold;
    border: 1px solid black;
    transition: background 0.3s;
}

.wedding-form button:hover {
    background: #f1f1f1;
}

/* Перезапишем padding секции только для Location */
.location-section {
    padding-top: 0 !important; /* убираем верхний отступ */
    padding-bottom: 5rem;
    background: #972820;
    color: white;
}

/* SVG вверху секции */
.location-section .top-svg {
    width: 100%;
    height: 8rem;
    object-fit: cover;
}

@media (min-width: 768px) {
    .location-section .top-svg {
        height: 12rem;
    }
}

@media (min-width: 1024px) {
    .location-section .top-svg {
        height: 16rem;
    }
}

/* Изображение места проведения */
.location-section .venue-image {
    width: 100%;
    max-height: 300px; /* уменьшаем высоту */
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.location-section .map-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* центрируем горизонтально */
    background: white;
    color: #972820;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: bold;
    border: 1px solid #972820;
    transition: background 0.3s, color 0.3s;
    text-decoration: none;
}

.location-section .map-button:hover {
    background: #f1f1f1;
    color: #972820;
}

.comment-section .highlight {
    color: #D02E26; /* основной цвет сайта */
    font-weight: bold;
}

/* Уменьшаем отступы только у футера */
.wedding-footer-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.custom-button {
    color: #972820;
    border-color: #972820;
    transition: all 0.3s;
}
.custom-button:hover {
    color: #ffffff;
    background-color: #972820; /* эквивалент red-700 */
}


/* Универсальные отступы для всех секций */
section {
    padding-top: 5rem;   /* одинаковый верхний отступ */
    padding-bottom: 5rem; /* одинаковый нижний отступ */
}

/* Если нужно чуть меньше на мобильных */
@media (max-width: 768px) {
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

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

.spin-slow {
  animation: spin 40s linear infinite;
}

.spin-fast {
  animation: spin 20s linear infinite;
}

@keyframes swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(4deg); }
  40%  { transform: rotate(-3deg); }
  60%  { transform: rotate(2deg); }
  80%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

.swing {
  animation: swing 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: 50% 50%; /* вращение по центру */
}

.gap-5 {
    gap: 3rem !important;
}

@media (max-width: 480px) {
  #gallery .mobile-expand {
    height: 55rem !important; /* можно увеличить/уменьшить */
  }
  /* Фото 1 */
  .style-photo-1 { left: 1% !important; top: 2% !important; width: 13rem !important; }

  /* Фото 2 */
  .style-photo-2 { left: 70% !important; top: 5% !important; transform: translateX(-50%) !important; width: 13rem !important; }

  /* Фото 3 — центральное */
  .style-photo-3 { left: 35% !important; top: 20% !important; transform: translateX(-50%) !important; width: 15rem !important; }

  /* Фото 4 */
  .style-photo-4 { left: 3% !important; top: 55% !important; width: 12rem !important; }

  /* Фото 5 */
  .style-photo-5 { right: -5% !important; top: 30% !important; width: 13rem !important; }

  /* Фото 6 */
  .style-photo-6 { right: -5% !important; top: 60% !important; width: 13rem !important; }

  /* Фото 7 */
  .style-photo-7 { right: 30% !important; top: 75% !important; width: 12rem !important; }

  /* Фото 8 */
  .style-photo-8 { right: -8% !important; top: 96% !important; width: 10rem !important; }

  /* Фото 9 */
  .style-photo-9 { left: 50% !important; top: 82% !important; width: 11rem !important; }

  /* Фото 10 */
  .style-photo-10 { left: -3% !important; top: 94% !important; width: 13rem !important; }

}