/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  --title-font-family          : "CormorantGaramond-VariableFont", sans-serif;
  --text-font-family           : "CormorantGaramond-Italic", sans-serif;
  --alt-font-family            : "GreatVibes", sans-serif;
  --date-font-family           : "EBGaramond", sans-serif;
  --title-font-weight          : 400;
  --text-font-weight           : 400;
  --title-font-size            : 76px;
  --text-font-size             : 20px;
  --title-line-height          : 140%;
  --text-line-height           : 120%;
  --titleSize                  : 64px;
  --text-clr-1                 : #000;
  --mod-clr                    : #b89671;
  --placeholder-input-font-size: 20px;
  --placeholder-input-clr      : rgba(55, 79, 103, 0.5);
  --section-padding            : 70px 0;
  --section-bg-clr-1           : #fff;
  --section-bg-clr-2           : #c5dcbd;
  --btn-bg                     : #386737;
  --btn-clr                    : #fef7ed;
  --btn-hover-bg               : #2aa000;
  --btn-hover-clr              : #fcfcfc;
  --btn-transition             : background-color 0.2s, color 0.2s;
  --clr-base                   : #000;
  --clr-att                    : #a80306;
  --clr-att-hover              : #7a0305;
}

/* ==========================================================================
   RESPONSIVE: Большие экраны (1536px+)
   ========================================================================== */
@media (min-width: 1536px) {
  :root {
    --titleSize      : 64px;
    --section-padding: 100px 0;
  }
  .container {
    max-inline-size: 1536px;
  }
  /* Все базовые стили остаются без изменений,
     так как они уже оптимизированы для больших экранов */


}
sup{
  color: rgba(139,0,0,1);
}
/* Enhanced Envelope Overlay Styles */
.invite-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2500px;
  background: radial-gradient(circle at center, #f4eee8 0%, #d8cfc4 100%);
  z-index: 9999;
  transition: opacity 1.8s ease;
}

.envelope {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(135deg, #EAD8C6 0%, #D7C1AC 100%);
  box-shadow:
      inset 0 0 120px rgba(0,0,0,0.09),
      0 60px 120px rgba(0,0,0,0.3);
  overflow: hidden;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* Paper texture overlay */
.envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/photo-1586075010923-2dd4570fb338.png");
  background-size: cover;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.15;
}

/* Top flap */
.flap {
  position: absolute;
  inline-size: 100%;
  block-size: 60%;
background: linear-gradient(135deg, #D2B8A1 0%, #BFA187 100%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: top;
  transition: transform 1.8s cubic-bezier(.77,0,.18,1);

  z-index: 4;
}

/* Inner letter */
.paper {
  position: absolute;
  inline-size: 70%;
  background: #fffdfb;
  inset-inline-start: 15%;
  inset-block-end: -90%;
  border-radius: 8px;

  transition: bottom 2s cubic-bezier(.77,0,.18,1);
  z-index: 2;
}

/* Letter content */
.paper-content {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #a80306;
  opacity: 0;
  transition: opacity 1.5s ease 1s;
}

/* Wax seal */
.seal {
  position: absolute;
  inline-size: 250px; 
  block-size: 250px; 
  background: url("/wax-seal.png") no-repeat center / cover;

  inset-block-start: 55%; 
  inset-inline-start: 50%; 
  transform: translate(-50%, -50%);

  transition: transform .8s ease, opacity .8s ease;
  z-index: 6;
}

/* Open text */
.open-text {
  position: absolute;
  inset-block-end: 60px;
  inline-size: 100%;
  text-align: center;
  font-size: 24px;
  letter-spacing: 4px;
  color: #444;
  animation: glow 2.5s infinite ease-in-out;
}

/* Hover subtle lift */
.envelope:hover {
  filter: brightness(1.02);
}

/* Open state */
.envelope.open .flap {
  transform: rotateX(180deg);
}

.envelope.open .seal {
  transform: translate(-50%, -50%) scale(1.4) rotate(15deg);
  opacity: 0;
}

.envelope.open .paper {
  inset-block-end: 5%;
}

.envelope.open .paper-content {
  opacity: 1;
}

.invite-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Main content */
#mainContent {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s ease, transform 1.8s ease;
}

#mainContent.visible {
  opacity: 1;
  transform: scale(1);
}

/* Animations */
@keyframes glow {
  0%,100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Mobile */
@media (max-width:768px){
  .paper-content{
    font-size:32px;
  }
  .seal{
    inline-size:80px;
    block-size:80px;
  }
  .open-text{
    font-size:18px;
  }
}



/* Mobile */
@media (max-width:768px){
  .paper-content{
    font-size:32px;
  }
  .seal{
    inline-size:80px;
    block-size:80px;
  }
  .open-text{
    font-size:18px;
  }
}

/* Section Decorations */
.section--decor-1::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='186' viewBox='0 0 1920 186' fill='none'%3E%3Cpath d='M1988.5 0.0615234C1966.5 178.562 604.719 82.5615 351.501 82.5615C-28.4992 82.5615 -130.499 184.562 -269.5 184.562' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.section--decor-2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='186' viewBox='0 0 1920 186' fill='none'%3E%3Cpath d='M1988.5 0.0615234C1966.5 178.562 604.719 82.5615 351.501 82.5615C-28.4992 82.5615 -130.499 184.562 -269.5 184.562' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.section--decor-3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='186' viewBox='0 0 1920 186' fill='none'%3E%3Cpath d='M1988.5 0.0615234C1966.5 178.562 604.719 82.5615 351.501 82.5615C-28.4992 82.5615 -130.499 184.562 -269.5 184.562' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.section--decor-4::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='186' viewBox='0 0 1920 186' fill='none'%3E%3Cpath d='M1988.5 0.0615234C1966.5 178.562 604.719 82.5615 351.501 82.5615C-28.4992 82.5615 -130.499 184.562 -269.5 184.562' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center 30%;
  background-repeat: no-repeat;
}

/* Enhanced Envelope Overlay Styles */
.invite-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2500px;
  background: radial-gradient(circle at center, #f4eee8 0%, #d8cfc4 100%);
  z-index: 9999;
  transition: opacity 1.8s ease;
}


#mainContent.visible {
  opacity: 1;
  transform: scale(1);
}

/* Animations */
@keyframes glow {
  0%,100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Mobile */
@media (max-width:768px){
  .paper-content{
    font-size:32px;
  }
  .seal{
    inline-size:80px;
    block-size:80px;
  }
  .open-text{
    font-size:18px;
  }
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */

body {
  block-size: 100%;
  font-family               : var(--text-font-family);
  color                     : var(--text-clr-1);
  transition-property       : transform, opacity, translate, color, background-color;
  transition-duration       : 2s, 2s, 2s, 0.5s, 0.5s;
  transition-timing-function: ease-in-out;
}
body { 
  background: url(/img/bg.svg) right / cover no-repeat ;
  background-position: 0 100px;
  z-index: 0;
}

a {
  text-decoration: none;
  color          : inherit;
}

/* ==========================================================================
   Block: container
   ========================================================================== */
.container {
  width          : 100%;
  margin         : 0 auto;
  padding        : var(--section-padding);
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
}



/* ==========================================================================
   Block: btn (Button)
   ========================================================================== */
.btn {
  display        : inline-flex;
  vertical-align : top;
  align-items    : center;
  justify-content: center;
  inline-size    : auto;
  min-inline-size: 300px;
  block-size     : 40px;
  line-height    : 31px;
  padding        : 0 35px;
  border         : 0;
  background     : var(--clr-att);
  font-size      : 18px;
  letter-spacing : -0.05em;
  border-radius  : 0;
  text-transform : uppercase;
  font-weight    : 500;
  margin         : 0;
  color          : #fff;
  font-family    : var(--title-font-family);
  cursor         : pointer;
  transition     : var(--btn-transition);
}

.btn:hover {
  background: var(--clr-att-hover);
  color     : #fff;
}

.btn--primary {
  background-color: var(--btn-bg);
  color           : var(--btn-clr);
}

.btn--primary:hover {
  background-color: var(--btn-hover-bg);
  color           : var(--btn-hover-clr);
}

.btn--secondary {

  border    : 1px solid var(--clr-att);

  inline-size: 100%;
  font-size: 16px;
  font-weight: 600;

}

.btn--secondary:hover {
  background: var(--clr-att-hover);
}

.btn--mobile {
  display: none;
}

/* ==========================================================================
   Block: section
   ========================================================================== */
.section {
  padding : var(--section-padding);
  /* min-block-size: 1000px; */
  block-size: 100%;
  position: relative;
}
.main .section>:first-child {
  padding-block-start: 0;
}
.main .section:last-child {
  padding-block-end: 0;
}
/* Section Decor Modifiers
.section--decor-1,
.section--decor-2,
.section--decor-3,
.section--decor-4,
.section--decor-5,
.section--decor-6,
.section--decor-7,
.section--decor-8,
.section--decor-9 {
  position: relative;
}

.section--decor-1::before,
.section--decor-2::before,
.section--decor-3::before,
.section--decor-4::before,
.section--decor-5::before,
.section--decor-6::before,
.section--decor-7::before,
.section--decor-8::before,
.section--decor-9::before {
  content            : "";
  display            : block;
  position           : absolute;
  inset-block-start  : 0;
  inset-block-end    : 0;
  inset-inline-start : 0;
  inset-inline-end   : 0;
  z-index            : 0;
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : 1920px auto;
  pointer-events     : none;
} */

.section--decor-1::before {
  /* background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1304' height='559' viewBox='0 0 1304 559' fill='none'%3E%3Cpath d='M1332.84 543.855C1322.56 438.033 250.838 514.855 256.838 558.855M390.839 481.356C181.839 517.856 -242.355 157.831 182.335 213.356C323.835 231.856 487.301 323.496 595.335 304.856C1006.84 233.856 831.339 -82.1447 1332.84 20.8553' stroke='%23B30E0B' stroke-width='0.812825'/%3E%3C/svg%3E"); */
  background-size    : contain;
  background-position: 700px 100px;
}

.section--decor-2::before {
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='685' viewBox='0 0 1920 685' fill='none'%3E%3Cpath d='M-74 618.04C485.5 798.54 2034 618.04 1974 0.0393066' stroke='%23B30E0B' stroke-width='0.812825'/%3E%3C/svg%3E");
  background-size    : contain;
  background-position: right -230px;
}

.section--decor-3::before {
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='681' viewBox='0 0 1920 681' fill='none'%3E%3Cpath d='M0.232422 125.092C213.732 43.1231 1266.25 -58.2116 1119.03 43.1239C971.804 144.459 1509.4 92.5908 1560.73 160.091C1642.52 267.64 1484.7 437.313 1322.18 478.103C1119.03 529.089 448.062 423.768 455.232 524.147C460.809 602.22 1748.73 785.147 1950.23 598.147' stroke='%23B30E0B' stroke-width='1.2951'/%3E%3C/svg%3E");
  background-size    : contain;
  background-position: left center;
}

.section--decor-4::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='186' viewBox='0 0 1920 186' fill='none'%3E%3Cpath d='M1988.5 0.0615234C1966.5 178.562 604.719 82.5615 351.501 82.5615C-28.4992 82.5615 -130.499 184.562 -269.5 184.562' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center 30%;
}


.section--decor-5::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='843' viewBox='0 0 1920 843' fill='none'%3E%3Cpath d='M-323.5 0.0898438C-281.226 230.904 1096.32 231.99 736.5 158.589C160.5 41.0893 -169.08 501.607 278.499 683.59C687.999 850.09 2024 702.09 2024 842.59' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center 0%;
  background-repeat: no-repeat;
}


.section--decor-6::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='900' viewBox='0 0 1920 900' fill='none'%3E%3Cpath d='M1847.69 0C1847.69 325.5 252.187 542.5 33.6869 471C-291.797 364.491 1886.19 409.001 1800.19 817.001L1776.69 392.5' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: 400px center;
  background-repeat: no-repeat;
}


.section--decor-7::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1607' height='603' viewBox='0 0 1607 603' fill='none'%3E%3Cpath d='M1662.16 182.057C1448.66 100.089 314.14 -69.3017 461.364 32.0338C608.587 133.369 70.9915 81.5007 19.6582 149.001C-62.1325 256.55 136.639 350.268 299.158 391.057C502.307 442.044 1662.16 501.512 1662.16 602.147' stroke='%23B30E0B' stroke-width='1.2951'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: right 60%;
  background-repeat: no-repeat;
}


.section--decor-8::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='810' viewBox='0 0 1920 810' fill='none'%3E%3Cpath d='M-447.066 66.2149C-404.793 297.029 840.319 87.6154 480.501 14.2149C-95.4991 -103.285 -292.646 567.732 154.933 749.715C564.433 916.215 2135.5 666.715 2135.5 807.215' stroke='%23A80306'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}


.section--decor-9::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='168' viewBox='0 0 1920 168' fill='none'%3E%3Cpath d='M-49.5 83.0564C510 263.556 2133.61 114.056 2149.5 0.0557404' stroke='%23B30E0B' stroke-width='0.812825'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center 38%;
  background-repeat: no-repeat;
}
.section__text {
  position: relative;
  z-index : 1;
}

/* ==========================================================================
   Block: title
   ========================================================================== */
.title {
  font-family   : var(--title-font-family);
  font-size     : var(--titleSize);
  line-height   : 1;
  font-weight   : var(--title-font-weight);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin        : 0 0 10px;
  color         : var(--clr-base);
  text-align    : center;
}

.title--secondary {
  font-size: var(--titleSize);
}

/* ==========================================================================
   Block: subtitle
   ========================================================================== */
.subtitle {
  font-family   : var(--alt-font-family);
  font-size     : 32px;
  line-height   : normal;
  letter-spacing: normal;
  margin        : 0 0 10px;
  color         : var(--clr-att);
}

.subtitle--secondary {
  font-weight: 400;
}

.subtitle--left {
  text-align: start;
}

.subtitle--right {
  text-align: end;
}

/* ==========================================================================
   Block: text
   ========================================================================== */
.text {
  font-family   : var(--text-font-family);
  font-size     : 26px;
  font-weight   : 400;
  line-height   : 1.25;
  max-inline-size: 500px;
  color         : var(--clr-base);
  display       : block;
  margin        : 0 auto;
  text-wrap     : balance;
}

.text--location {
  max-inline-size: 440px;
  text-align     : center;
}

.text--bye {
  text-transform: uppercase;
}

.text--love {
  font-style: italic;
}

/* ==========================================================================
   Block: image
   ========================================================================== */
.image {
  position: relative;
  display : block;
}

.image img {
  display: block;
  width  : 100%;
  height : auto;
}

.image__item {}

.image__wrapper {
  inline-size: 650px;
  position: relative;
}

.image-container {
  position: relative;
}

/* ==========================================================================
   SECTION: Lead (Hero)
   ========================================================================== */
.section--lead {
  text-align: center;
}

/* Date */
.lead__date {
  display        : flex;
  justify-content: center;
  align-items    : center;
  font-family: var(--date-font-family);
  gap            : 27px;
  margin-bottom  : 25px;
  font-size      : 36.8px;
  text-transform : uppercase;
  letter-spacing : -0.05em;
  line-height    : normal;
  position       : relative;
  z-index        : 2;
  
}


.date__item {
  display    : block;
  flex-shrink: 0;
  position   : relative;
}

.date__item::before {
  content      : "";
  display      : block;
  width        : 5px;
  height       : 5px;
  border-radius: 50%;
  background   : currentColor;
  position     : absolute;
  top          : 50%;
  left         : 100%;
  margin-left  : 11px;
  margin-top   : -3px;
}

.date__item:last-child::before {
  display: none;
}

.date__item--day {}

.date__item--month {}

.date__item--year {}

/* Names */
.lead__names {
  position: relative;
}

.names__content {
  position: relative;
}

.names__content .item-animation {
  display: inline-block;
}

.names__person {
  margin-block-end: 10px;
  line-height  : 1;
}

.names__person:last-child {
  margin-block-end: 0;
}

.names__item {
  font-family   : var(--title-font-family);
  font-size     : 78px;
  font-weight   : var(--title-font-weight);
  line-height   : 0.8;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin-bottom : 5px;
}

.names__item--groom {}

.names__item--bride {}

.names__ampersand {
  font-family: SMTextsFontAlt;
  font-size: 58px;
  color      : var(--clr-att);
}

/* Lead Image */
.lead__image {
  display : block;
  position: relative;
  width   : 500px;
  margin  : 50px auto 0;
}

.lead__image img {
  display: block;
  width  : 100%;
  height : auto;
}

.lead__subtitle {
  inline-size: 500px;
  margin-top : 10px;
  text-align : right;
}

/* Helper */
.lead__helper {
  margin-block-start: 40px;
}

.helper {
  display    : block;
  inline-size: 100%;
  text-align : center;
  line-height: 1;
}

.helper__button {
  display         : inline-flex;
  align-items     : center;
  block-size      : 18px;
  padding         : 0;
  gap             : 5px;
  border-radius   : 0;
  border          : 0;
  border-block-end: 1px solid var(--clr-att);
  text-transform  : uppercase;
  color           : var(--clr-att);
  font-family     : var(--title-font-family);
  font-size       : 14px;
  font-weight     : 400;
  background      : transparent;
  cursor          : pointer;
}

.button__title {
  flex-shrink   : 0;
  display       : block;
  letter-spacing: 0.05em;
}

.button__icon {
  flex-shrink: 0;
  display: block;
  animation: arotate ease-in-out 1.8s infinite;
  -webkit-animation: arotate ease-in-out 1.8s infinite;
}

/* ==========================================================================
   SECTION: Datetime
   ========================================================================== */
.section--datetime {
  text-align: center;
}

.email-outer {
  display        : flex;
  flex-direction : column;
  justify-content: center;
  aspect-ratio   : 611/497;
  padding-top    : 30%;
  padding-right  : 2%;
  text-align     : center;
  background     : url(/img/email.png) center no-repeat;
  background-size: 100% auto;
  margin-top     : -50px;
  width          : 811px;
  margin-left    : auto;
  margin-right   : auto;
}

/* Date Table / Calendar */
.date-table {
  margin  : 60px auto 70px;
  width   : 600px;
  position: relative;
}

.sm-health-svg {
  display       : block;
  width         : 235px;
  position      : absolute;
  aspect-ratio  : 235/286;
  top           : 50%;
  left          : 50%;
  transform     : translate(-54%, -46%);
  pointer-events: none;
  z-index       : 2;
}

.sm-health-svg.item-active path {
  animation      : drawHeart 5s ease infinite;
  animation-delay: 1s;
}

.item-animation {}

.item-active {}

.stop-color-derescode {
  color: var(--clr-att);
  font-weight: 600;
}

/* Table */
.table {
  width          : 100%;
  table-layout   : fixed;
  margin         : 0;
  border-collapse: collapse;
}

.table__header {
  padding       : 5px 5px 2px;
  border        : 1px solid #000;
  text-align    : center;
  font-size     : 14px;
  font-weight   : 400;
  text-transform: uppercase;
  font-family   : var(--title-font-family);
  line-height   : normal;

  vertical-align: top;
}

.table__cell {
  padding       : 15px 10px;
  border        : 1px solid #000;
  text-align    : center;
  font-size     : 24px;
  font-weight   : 400;
  line-height   : normal;

  vertical-align: top;
  font-family   : var(--text-font-family);
}

.table__cell:first-child,
.table__header:first-child {
  border-inline-start: none;
}

.table__cell:last-child,
.table__header:last-child {
  border-inline-end: none;
}

.week__item {
  display : block;
  position: relative;
  z-index : 6;
}

.week__item--yes {
  color      : var(--clr-att);
  font-weight: 700;
}

.month__item {
  display : block;
  position: relative;
  z-index : 6;
}

.month__item--yes {
  color      : var(--clr-att);
  font-weight: 700;
}

.date__main {
  display       : block;
  font-size     : 108px;
  text-transform: uppercase;
  line-height   : 1;
  font-weight   : 400;
  font-family   : var(--title-font-family);
  margin-top    : 10px;
  position      : relative;
  z-index       : 6;
}

.date__main--yes {
  color: var(--clr-att);
}

/* ==========================================================================
   SECTION: Location
   ========================================================================== */
.section--location {
  text-align: center;
  position  : relative;
  overflow  : hidden;
}

.location__image {
  min-inline-size: 300px;
  margin   : 50px auto 0;
  padding  : 0;
  position : relative;
}

.location__image img {
  display      : block;
  width        : 100%;
  height       : auto;
  border-radius: 0;
}

.section--location .btn {
  margin-block-start: 40px;
}

/* ==========================================================================
   SECTION: Timing
   ========================================================================== */
.section--timing {
  text-align: center;
}

.timing__items {
  display        : flex;
  justify-content: center;
  gap            : 50px;
  margin         : 45px 0 0;
  padding        : 0;
}

.timing__item {
  flex-shrink: 0;
  width      : 157px;
  margin     : 0;
}

.timing__time {
  font-family   : var(--alt-font-family);
  font-size     : 32px;
  font-weight   : 400;
  text-transform: uppercase;
  text-align    : center;
  width         : 100%;
  letter-spacing: normal;
  line-height   : var(--text-line-height);
}

.timing__title {
  font-family    : var(--text-font-family);
  font-weight    : var(--text-font-weight);
  font-size      : var(--text-font-size);
  line-height    : var(--text-line-height);
  max-inline-size: 199px;
  margin         : 0 auto;
  text-align     : center;
}

/* ==========================================================================
   SECTION: Dresscode
   ========================================================================== */
.section--dresscode {
  text-align: center;
}

.title__wrap {
  position: relative;
}

.dresscode__colors {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 12px;
  width          : 100%;
  margin         : 40px auto 0;
}

.color__item {
  display      : block;
  width        : 50px;
  height       : 50px;
  flex-shrink  : 0;
  border-radius: 50%;
  overflow     : hidden;
  position     : relative;
}

.color__item>div {
  width        : 100%;
  height       : 100%;
  border-radius: 50%;
  border       : 1px solid var(--text-clr-1);
}

/* Photos */
.photos__outer-wrap {
  display        : flex;
  justify-content: space-evenly;
  margin         : 0 auto;
  position       : relative;
  min-width      : 100%;
  block-size: 100%;
 
}

.photos__section-wrap {
  margin : 0;
  padding: 0;
  width  : 40%;
}

.photos__section-wrap--woman {
 
}

.photos__section-wrap--man .subtitle {
  margin-inline-start: auto;
  text-align : right;
}

.gallery__wrap {
  max-inline-size: 456px;
  
  position : relative;
  margin   : 0;
}

.photos__section-wrap:last-child .gallery__wrap {
  margin: 0 0 0 auto;
}

.photo {
  display     : block;
  position    : absolute;
  top         : 0;
  left        : 0;
  overflow    : hidden;
  aspect-ratio: 1;
}

.photo img {
  display   : block;
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.photo--active {}

/* Woman section photos positions */
.photos__section-wrap--woman .gallery__wrap {
  block-size: 567px;
}

.photos__section-wrap--woman .photo:nth-child(1) {
  aspect-ratio: 512/847;
  width       : 129px;
  left        : -24px;
  top         : 67px;
}

.photos__section-wrap--woman .photo:nth-child(2) {
  z-index     : 4;
  aspect-ratio: 513/718;
  width       : 241px;
  left        : 126px;
  top         : 36px;
}

.photos__section-wrap--woman .photo:nth-child(3) {
  z-index     : 5;
  aspect-ratio: 512/768;
  width       : 100px;
  top         : 0;
  left        : 331px;
}

.photos__section-wrap--woman .photo:nth-child(4) {
  z-index     : 5;
  aspect-ratio: 513/769;
  width       : 160px;
  top         : 327px;
  left        : 65px;
}

.photos__section-wrap--woman .photo:nth-child(5) {
  z-index     : 5;
  aspect-ratio: 513/769;
  width       : 160px;
  top         : 207px;
  left        : 296px;
}

/* Man section photos positions */
.photos__section-wrap--man .gallery__wrap {
  block-size: 553px;
}

.photos__section-wrap--man .photo:nth-child(1) {
  z-index     : 5;
  aspect-ratio: 513/769;
  width       : 100px;
  top         : 117px;
  left        : 39px;
}

.photos__section-wrap--man .photo:nth-child(2) {
  z-index     : 4;
  aspect-ratio: 513/719;
  width       : 242px;
  top         : 55px;
  left        : 105px;
}

.photos__section-wrap--man .photo:nth-child(3) {
  z-index     : 3;
  aspect-ratio: 513/846;
  width       : 145px;
  left        : 306px;
  top         : 14px;
}

.photos__section-wrap--man .photo:nth-child(4) {
  z-index     : 6;
  aspect-ratio: 513/769;
  width       : 160px;
  top         : 313px;
  left        : 30px;
}

.photos__section-wrap--man .photo:nth-child(5) {
  z-index     : 7;
  aspect-ratio: 513/898;
  width       : 143px;
  top         : 269px;
  left        : 283px;
}

/* ==========================================================================
   SECTION: Time (Countdown)
   ========================================================================== */
.section--time {
  position: relative;
}

.box {
  position       : relative;
  z-index        : 7;
  border         : 1px solid var(--clr-att);
  background     : #fff url(/img/bg-decor.jpg) center;
  background-size: 1055px auto;
  text-align     : center;
  padding        : 60px 190px;
  margin         : 0 auto;
  max-width      : 1055px;
}

.time__box {
  display        : flex;
  justify-content: center;
  white-space    : nowrap;
  font-size      : 16px;
  line-height    : normal;
  letter-spacing : -0.8px;
  font-weight    : 300;
  gap            : 15px;
  margin         : 30px 0 0;
  padding        : 0;
  position       : relative;
}

.time__item {
  flex     : 1;
  max-inline-size: 80px;
  padding  : 0;
  margin   : 0;
}

.time__number {
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 32px;
  font-weight    : 400;
  letter-spacing : -0.05em;
  line-height    : 1;
}

.time__number * {
  font-weight: inherit;
  font-size  : inherit;
}

.timer__number {
  display: inline-block;
}

.timer__number-span {
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  font-size  : 60px;
  line-height: 60px;
  text-align : center;
}

.time__title {
  font-size     : 16px;
  line-height   : inherit;
  font-weight   : inherit;
  letter-spacing: -0.05em;
  margin        : 5px 0 0;
  text-align    : center;
}

/* ==========================================================================
   SECTION: Wishes
   ========================================================================== */
.section--wishes {
  position  : relative;
  overflow  : hidden;
  text-align: center;
}

.section--wishes::after,
.section--wishes::before {
  content          : "";
  display          : block;
  inline-size      : 441px;
  block-size       : 113px;
  position         : absolute;
  inset-block-start: 0;
  background-image : url(/img/section-decor.webp);
  background-repeat: no-repeat;
}

.section--wishes::before {
  inset-inline-start: -75px;
  transform         : rotate(-13deg);
}

.section--wishes::after {
  inset-inline-end: -67px;
  transform       : rotate(19deg);
}

.slider__wrap {
  margin-block-start: 32px;
  position  : relative;
}

.slider {}

.slider--wishes {}

.wishes__slide {
  text-align     : center;
  font-weight    : var(--text-font-weight);
  font-size      : 24px;
  line-height    : 29.26px;
  max-inline-size: 440px;
  margin         : 0 auto;
}

.wishes__content {}

.slick-track {
  opacity    : 1;
  inline-size: 2184px;
  transform  : translate3d(-312px, 0px, 0px);
}

/* ==========================================================================
   SECTION: Contact
   ========================================================================== */
.section--contact {
  padding: 60px 0 100px;
}

.contact__box {
  position  : relative;
  text-align: center;

}

.contact__box::after,
.contact__box::before {
  content            : "";
  display            : block;
  position           : absolute;
  z-index            : 0;
  background-repeat  : no-repeat;
  background-position: 50%;
}

.contact__box::before {
  inline-size       : 826px;
  min-block-size    : 300px;
  inset-block-start : -30px;
  inset-block-end   : -100px;
  inset-inline-start: 46%;
  background-image  : url(/img/sections-decor/sm-contact/image-decor-1.webp);
  transform         : translateX(-50%);
  background-size   : 100% 100%;
}

.contact__box::after {
  inline-size      : 173px;
  block-size       : 176px;
  inset-block-start: -60px;
  inset-inline-end : 210px;
  background-image : url(/img/sections-decor/sm-contact/image-decor-2.webp);
  background-size  : contain;
}

.section--contact .text,
.section--contact .title {
  position: relative;
  z-index : 1;
}

.section--contact .text {
  max-inline-size: 375px;
  margin         : 0 auto;
}

.contact__photo {
  position: relative;
  z-index : 1;
}

.contact__info {
  font-family       : var(--title-font-family);
  font-size         : 36px;
  line-height       : var(--text-line-height);
  text-align        : center;
  margin-block-start: 100px;
  text-transform    : uppercase;
  z-index: 4;
}


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

}

.contact__soc {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
}

.contact__soc svg,
.contact__soc svg * {
  fill: var(--clr-att);
}

.contact__soc--active {}

.section--contact .btn {
  margin-block-start: 20px;
}

/* ==========================================================================
   SECTION: Questionnaire
   ========================================================================== */
.section--questionnaire {
  padding: 150px 0 100px;

}

.modal.sm-open {
  position          : fixed;
  inset-block-start : 0;
  inset-inline-end  : 0;
  inset-inline-start: 0;
  inset-block-end   : 0;
  z-index           : 999;
  overflow          : auto;
  display           : block;
}

.questionnaire__head {
  text-align: center;
}

.questionnaire__date {
  font-family       : var(--date-font-family);
  font-weight       : 500;
  font-size         : 32px;
  line-height       : 40px;
  text-align        : center;
  margin-block-start: 10px;
  text-transform    : uppercase;
}

.section--questionnaire .text {
  max-inline-size: 430px;
  margin         : 10px auto 0;
}

/* Form */
.questionnaire__form {
  margin         : 60px auto 0;
  max-inline-size: 680px;
}

.form {}

.form__block {
  margin-block-start: 40px;
}

.form__block:first-child {
  margin-block-start: 0;
}

.form__block--submit {
  margin-block-start: 40px;
}

.form__block-title {
  font-family: var(--title-font-family);
  font-weight: 400;
  font-size  : 32px;
  line-height: var(--text-line-height);
}

.form__input {
  font-family       : var(--text-font-family);
  border            : 1px solid var(--text-clr-1);
  border-radius     : 5px;
  background        : none;
  padding           : 0 15px;
  inline-size       : 100%;
  block-size        : 59px;
  margin-block-start: 10px;
  font-size         : var(--placeholder-input-font-size);
  font-weight       : var(--text-font-weight);
  line-height       : var(--text-line-height);
  text-align        : start;
  color             : var(--text-clr-1);
}

.form__input::placeholder {
  font-size  : var(--placeholder-input-font-size);
  font-weight: var(--text-font-weight);
  line-height: var(--text-line-height);
  text-align : start;
  cursor     : pointer;
  color      : var(--placeholder-input-clr);
}

.form__item {
  margin-block-start: 10px;
}

/* Checkbox */
.form__checkbox {
  display            : flex;
  align-items        : center;
  margin-inline-start: 30px;
  font-size          : 24px;
  font-weight        : 300;
  line-height        : 29.26px;
  text-align         : start;
  cursor             : pointer;
}

.form__checkbox:not(:first-child) {
  margin-block-start: 10px;
}

.form__checkbox-input {
  -webkit-appearance: none;
  -moz-appearance   : none;
  appearance        : none;
  position          : absolute;
}

.form__checkbox-box {
  position           : absolute;
  inline-size        : 20px;
  block-size         : 20px;
  background-repeat  : no-repeat;
  margin-inline-start: -30px;
  border             : 1px solid var(--text-clr-1);
  cursor             : pointer;
  border-radius      : 5px;
  overflow           : hidden;
}

.form__checkbox-input:checked+.form__checkbox-box {
  background-color: var(--text-clr-1);
}

/* Drinks */
.form__drinks {
  margin-block-start: 20px;
}

.form__drinks-check {
  margin-block-start: 20px;
}

.section--questionnaire .btn {
  margin-block-start: 40px;
  inline-size       : 100%;
}

/* ==========================================================================
   SECTION: Footer
   ========================================================================== */
.section--footer {
  padding   : 60px 0 184px;
  text-align: center;
}

.section--footer .text--bye {
  font-family   : var(--title-font-family);
  font-weight   : 500;
  font-size     : 32px;
  line-height   : var(--text-line-height);
  text-align    : center;
  text-transform: uppercase;
}

.footer__names {
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  font-size  : 100px;
  white-space: nowrap;
  line-height: 135%;
  z-index    : 1;
}

.footer__image {
  position  : relative;
  margin-block-start: 40px;
}

.footer__image img {
  /* inline-size  : 1000px; */
  block-size   : 700px;
}

.footer__image::before {
  content : "";
  display : block;
  position: absolute;
}

.footer__image::before {
  z-index           : 10;
  display: block;
  background-image  : url(/img/heart_moving-2.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  inline-size       : 200px;
  block-size        : 200px;
  inset-inline-start: 150px;
  inset-block-start : 550px;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes show-r-l {
  0% {
    opacity  : 0;
    transform: translate(30px, 0);
  }

  to {
    opacity  : 1;
    transform: translate(0);
  }
}

@keyframes show-l-r {
  0% {
    opacity  : 0;
    transform: translate(-30px, 0);
  }

  to {
    opacity  : 1;
    transform: translate(0);
  }
}

@keyframes show-b-t {
  0% {
    opacity  : 0;
    transform: translate(0, -30px);
  }

  to {
    opacity  : 1;
    transform: translate(0);
  }
}

@keyframes show-t-b {
  0% {
    opacity  : 0;
    transform: translate(0, 30px);
  }

  to {
    opacity  : 1;
    transform: translate(0);
  }
}

@keyframes arotate {

  0%,
  to {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(5px);
  }
}

@keyframes drawHeart {
  0% {
    stroke-dashoffset: 2000;
    fill             : transparent;
  }

  56%,
  to {
    stroke-dashoffset: 0;
    fill             : #9d1e11;
  }
}

/* ==========================================================================
   RESPONSIVE: Mobile (до 479px)
   ========================================================================== */
@media (max-width: 479px) {
  :root {
    --titleSize      : 42px;
    --title-font-size: 28px;
    --text-font-size : 16px;
    --section-padding: 40px 0;
  }

.flap {
  position: absolute;
  min-block-size: 35%;
  min-inline-size: 600px;
  inline-size: 300%;
  left: -100%;
  block-size: 30%;
}
  
/* Wax seal */
.seal {
  position: absolute;
  inline-size: 160px; 
  block-size: 160px; 
  inset-block-start: 35%; 
  inset-inline-start: 50%; 
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

  .container {
    padding-inline: 0px;
  }


.image__wrapper {
    inline-size: 100%;
}

  .btn--mobile {
    display: inline-flex;
  }

  .btn {
    min-inline-size: 100%;
    font-size      : 18px;
    padding        : 0 20px;
  }

  /* Lead Section */
  .lead__date {
    font-size    : 28px;
    gap          : 10px;
    margin-block-end: 15px;
  }

  .date__item::before {
    width      : 4px;
    height     : 4px;
    margin-inline-start: 5px;
  }

  .names__item {
    font-size  : 52px;
    line-height: 1;
  }
.section {
    padding-block-start: 20px;
}
  .lead__image {
    width     : 70%;
    margin-block-start: 10px;
  }

  .lead__subtitle {
        font-size: 22px;
        max-inline-size: 100%;
        margin-inline-end: 60px;
  }

  .lead__helper {
    margin-block-start: 25px;
  }

  .helper__button {
    font-size: 18px;
  }
.section__text {
    inline-size: 100%;
}

.text {
    font-size: var(--text-font-size);
    max-inline-size: 270px;
    line-height: 1.05;
}
  /* Datetime Section */
  .email-outer {
    width      : 100%;
    margin-top : -30px;
    padding-block-start: 30%;
  }

  .date-table {
    width    : 90%;

    margin   : 40px auto 50px;
  }

  .table__header {
    font-size: 10px;
    padding  : 3px 2px 1px;
  }

  .table__cell {
    font-size: 18px;
    padding  : 8px 4px;
  }

  .date__main {
    font-size: 48px;
  }

  .sm-health-svg {
    inline-size: 120px;
  }

  /* Location Section */
  .location__image {
    width     : 70%;
    min-width : 200px;
    margin-block-start: 25px;
  }

  .section--location .btn {
    margin-block-start: 25px;
  }

  .text--location {
    font-size      : 18px;
    max-inline-size: 280px;
  }

  /* Timing Section */
  .timing__items {
    flex-direction: column;
    gap           : 25px;
    margin-top    : 30px;
  }

  .timing__item {
    inline-size: 100%;
  }

  .timing__time {
    font-size: 28px;
  }

  .timing__title {
    font-size      : 20px;
    max-inline-size: 100%;
  }

  /* Dresscode Section */
  .dresscode__colors {
    gap       : 8px;
    margin-block-start: 25px;
  }

  .color__item {
    width : 36px;
    block-size: 36px;
  }

  /* Photos */
  .photos__outer-wrap {
    flex-direction: column;
    gap           : 30px;
    min-inline-size: 100%;
    margin-block-start: 30px;
  }

  .photos__section-wrap {
    inline-size: 100%;
  }
.photos__section-wrap--woman .photo:nth-child(1),
.photos__section-wrap--woman .photo:nth-child(2),
.photos__section-wrap--man .photo:nth-child(1),
.photos__section-wrap--man .photo:nth-child(2){
    inline-size: 45%;
}



  .photos__section-wrap--man .subtitle {
    margin-inline-start: 0;
    text-align : center;
  }
 .subtitle--left{
        text-align: center;
 }
  .gallery__wrap {

    display       : flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap           : 15px;
  }

  .photos__section-wrap:last-child .gallery__wrap {
    margin: 0;
  }

  .photos__section-wrap--woman .gallery__wrap,
  .photos__section-wrap--man .gallery__wrap {
    block-size: auto;
  }

  .photo {
    position    : relative;
    top         : auto !important;
    left        : auto !important;
    width       : 100%;
    aspect-ratio: 3/4 !important;
  }

  .photo:nth-child(n+3) {
    display: none;
  }

  /* Time Section (Countdown) */
  .box {
    padding        : 30px 15px;
    margin: 0 10px;
    background-size: cover;
  }

  .time__box {
    flex-wrap : wrap;
    gap       : 10px;
    margin-block-start: 20px;
  }

  .time__item {
   
    max-inline-size: calc(50% - 5px);
  }

  .timer__number-span {
    font-size  : 32px;
    line-height: 32px;
  }

  .time__title {
    font-size: 18px;
  }

  /* Wishes Section */
  .section--wishes::after,
  .section--wishes::before {
    inline-size: 200px;
    block-size : 60px;
  }

  .section--wishes::before {
    inset-inline-start: -50px;
  }

  .section--wishes::after {
    inset-inline-end: -50px;
  }

  .wishes__slide {
    font-size      : 18px;
    line-height    : 22px;
    max-inline-size: 280px;
  }

  .slider__wrap {
    margin-block-start: 20px;
  }


  
  /* Contact Section */
  .section--contact {
    padding: 40px 0 80px;
  }

  .contact__box::before {
    inline-size       : 100%;
    inset-inline-start: 50%;
  }

  .contact__box::after {
    display: none;
  }

  .contact__info {
    font-size         : 20px;
    margin-block-start: 40px;
  }

  .contact__socials {
    gap       : 10px;
    margin-block-start: 15px;
  }

  .section--contact .text {
    font-size      : 18px;
    max-inline-size: 280px;
  }

  /* Questionnaire Section */
  .section--questionnaire {
    padding: 80px 0 80px;
  }

  .questionnaire__date {
    font-size  : 20px;
    line-height: 28px;
  }

  .section--questionnaire .text {
    font-size      : 18px;
    max-inline-size: 280px;
  }

  .questionnaire__form {
    margin-block-start: 40px;
  }

  .form{
    margin: 10px 10px 0 10px;
  }
  .form__block {
    margin-block-start: 25px;
  }

  .form__block-title {
    font-size: 24px;
  }

  .form__input {
    block-size: 48px;
    font-size : 22px;
  }

  .form__input::placeholder {
    font-size: 22px;
  }

  .form__checkbox {
    font-size          : 22px;
    margin-inline-start: 25px;
  }

  .form__checkbox-box {
    inline-size        : 22px;
    block-size         : 18px;
    margin-inline-start: -25px;
  }
  .form__block--submit{
    font-size: 22px;
  }

  .section--questionnaire .btn {
    margin-block-start: 30px;
  }

  /* Footer Section */
  .section--footer {
    padding: 40px 0 120px;
  }

  .section--footer .text--bye {
    font-size: 20px;
  }

  .footer__names {
    font-size  : 36px;
    line-height: 120%;
  }

  .footer__image {
    margin-block-start: 25px;
  }

  .footer__image img {
    inline-size  : 70%;
    margin: 0 auto;
    block-size   : 70%;
    /* border-radius: 60px 0 0 0; */
  }

  .footer__image::before {
    /* inline-size       : 550px; */
    block-size        : 150px;
    inset-inline-start: 100px;
    inset-block-start : 320px;
    background-size   : contain;
  }


  /* Section Decors */
  .section--decor-1::before,
  .section--decor-2::before,
  .section--decor-3::before {
    background-size: 600px auto;
  }
}


/* ==========================================================================
   RESPONSIVE: Телефоны (360px - 767px)
   ========================================================================== */
@media (min-width: 360px) and (max-width: 767px) {
  .title--secondary {
    font-size: 24px;
  }
}

  .section--questionnaire .text {
    max-inline-size: 350px;
  }

  .questionnaire__form {
    margin-block-start: 50px;
  }

  .form__block-title {
    font-size: 24px;
  }

  .form__checkbox {
    font-size: 18px;

  /* Section Decors */
  .section--decor-1::before,
  .section--decor-2::before,
  .section--decor-3::before {
    background-size: 900px auto;
  }
}

/* ==========================================================================
   RESPONSIVE: Планшеты (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --titleSize      : 52px;
    --title-font-size: 64px;
    --text-font-size : 18px;
    --section-padding: 70px 0;
  }
.section__text {
    inline-size: 100%;
}
  .container {
    max-inline-size: 720px;
    padding-inline: 30px;
  }
  .text {
    font-size: 28px !important;
  }
  /* Lead Section */
  .lead__date {
    font-size: 28px;
    gap      : 18px;
  }

  .names__item {
    font-size: 60px;
  }

  .lead__image {
    /* width     : 280px; */
    margin-block-start: 40px;
  }

  .lead__subtitle {
    max-inline-size: 480px;
  }

  /* Datetime Section */
  .email-outer {
    /* inline-size: 500px; */
    /* inline-size: 100%; */
    width          : 100%;
  }
.section__text {
    inline-size: 100%;
}
  .date-table {
    width : 450px;
    margin: 50px auto 60px;
  }

  .table__cell {
    font-size: 20px;
    padding  : 12px 8px;
  }

  .date__main {
    font-size: 80px;
  }

  .sm-health-svg {
    inline-size: 180px;
  }

  /* Location Section */
  .location__image {
    width    : 100%;
    min-inline-size: 280px;
  }

  .text--location {
    max-inline-size: 400px;
  }

  /* Timing Section */
  .timing__items {
    gap       : 35px;
    /* flex-wrap : wrap; */
    margin-block-start: 40px;
  }

  .timing__item {
    inline-size: 140px;
  }

  .timing__time {
    font-size: 28px;
  }

  /* Dresscode Section */
  .dresscode__colors {
    gap: 10px;
  }

  .color__item {
    width : 45px;
    block-size: 45px;
  }

  /* Photos */
  .photos__outer-wrap {
    gap      : 30px;
    max-inline-size: 720px;
  }

  .photos__section-wrap {
    inline-size: 50%;
  }

  .gallery__wrap {
    max-inline-size: 340px;
  }

  .photos__section-wrap--woman .gallery__wrap {
    block-size: 420px;
  }

  .photos__section-wrap--man .gallery__wrap {
    block-size: 410px;
  }

  /* Scale photos for tablet */
  .photos__section-wrap--woman .photo:nth-child(1) {
    inline-size: 96px;
    left : -18px;
    top  : 50px;
  }

  .photos__section-wrap--woman .photo:nth-child(2) {
    inline-size: 180px;
    left : 94px;
    top  : 27px;
  }

  .photos__section-wrap--woman .photo:nth-child(3) {
    inline-size: 75px;
    left : 247px;
    top  : 0;
  }

  .photos__section-wrap--woman .photo:nth-child(4) {
    inline-size: 120px;
    left : 48px;
    top  : 243px;
  }

  .photos__section-wrap--woman .photo:nth-child(5) {
    inline-size: 120px;
    left : 220px;
    top  : 154px;
  }

  .photos__section-wrap--man .photo:nth-child(1) {
    inline-size: 75px;
    left : 29px;
    top  : 87px;
  }

  .photos__section-wrap--man .photo:nth-child(2) {
    inline-size: 180px;
    left : 78px;
    top  : 41px;
  }

  .photos__section-wrap--man .photo:nth-child(3) {
    inline-size: 108px;
    left : 228px;
    top  : 10px;
  }

  .photos__section-wrap--man .photo:nth-child(4) {
    inline-size: 120px;
    left : 22px;
    top  : 232px;
  }

  .photos__section-wrap--man .photo:nth-child(5) {
    inline-size: 107px;
    left : 211px;
    top  : 200px;
  }

  /* Time Section */
  .box {
    padding: 50px 80px;
  }

  .time__box {
    gap: 12px;
  }

  .time__item {
    max-inline-size: 70px;
  }

  .timer__number-span {
    font-size  : 48px;
    line-height: 48px;
  }

  /* Wishes Section */
  .section--wishes::after,
  .section--wishes::before {
    inline-size: 340px;
    block-size : 90px;
  }

  .wishes__slide {
    font-size      : 20px;
    line-height    : 26px;
    max-inline-size: 400px;
  }

  /* Contact Section */
  .contact__box::before {
    inline-size: 650px;
  }

  .contact__box::after {
    inline-size     : 130px;
    block-size      : 130px;
    inset-inline-end: 100px;
  }

  .contact__info {
    font-size         : 28px;
    margin-block-start: 70px;
  }

  .section--contact .text {
    max-inline-size: 340px;
  }

  /* Questionnaire Section */
  .section--questionnaire {
    padding: 120px 0 90px;
  }

  .questionnaire__date {
    font-size: 28px;
  }

  .questionnaire__form {
    max-inline-size: 550px;
  }

  .form__block-title {
    font-size: 28px;
  }

  .form__checkbox {
    font-size: 20px;
  }

  /* Footer Section */
  .section--footer {
    padding: 50px 0 160px;
  }

  .section--footer .text--bye {
    font-size: 28px;
  }

  .footer__names {
    font-size: 72px;
  }

  .footer__image img {
    inline-size: 100%;
    /* block-size : 360px; */
  }

  .footer__image::before {
    inline-size       : 250px;
    /* block-size        : 530px; */
    inset-inline-start: 110px;
    inset-block-start : 580px;
  }

  /* Section Decors */
  .section--decor-1::before,
  .section--decor-2::before,
  .section--decor-3::before {
    background-size: 1400px auto;
  }
}

/* ==========================================================================
   RESPONSIVE: Ноутбуки (1024px - 1279px)
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --titleSize      : 58px;
    --title-font-size: 70px;
    --section-padding: 80px 0;
  }

  .container {
    max-inline-size: 960px;
    padding-inline: 40px;
  }

  /* Lead Section */
  .lead__date {
    font-size: 32px;
    gap      : 22px;
  }

  .names__item {
    font-size: 68px;
  }

  .lead__image {
    /* width     : 290px; */
    margin-block-start: 45px;
  }

  .lead__subtitle {
    max-inline-size: 520px;
  }

  /* Datetime Section */
  .email-outer {
    /* inline-size: 550px; */
     /* inline-size: 100%; */
  }

  .date-table {
    inline-size: 480px;
  }

  .date__main {
    font-size: 90px;
  }

  .sm-health-svg {
    inline-size: 200px;
  }

  /* Timing Section */
  .timing__items {
    gap: 40px;
  }

  .timing__item {
    inline-size: 150px;
  }

  .timing__time {
    font-size: 30px;
  }

  /* Dresscode Section */
  .color__item {
    width : 48px;
    block-size: 48px;
  }

  /* Photos */
  .photos__outer-wrap {
    max-inline-size: 900px;
  }

  .gallery__wrap {
    max-inline-size: 400px;
  }

  .photos__section-wrap--woman .gallery__wrap {
    block-size: 500px;
  }

  .photos__section-wrap--man .gallery__wrap {
    block-size: 490px;
  }

  /* Scale photos */
  .photos__section-wrap--woman .photo:nth-child(1) {
    inline-size: 113px;
    left : -21px;
    top  : 59px;
  }

  .photos__section-wrap--woman .photo:nth-child(2) {
    inline-size: 211px;
    left : 110px;
    top  : 31px;
  }

  .photos__section-wrap--woman .photo:nth-child(3) {
    inline-size: 88px;
    left : 290px;
    top  : 0;
  }

  .photos__section-wrap--woman .photo:nth-child(4) {
    inline-size: 140px;
    left : 57px;
    top  : 287px;
  }

  .photos__section-wrap--woman .photo:nth-child(5) {
    inline-size: 140px;
    left : 260px;
    top  : 181px;
  }

  .photos__section-wrap--man .photo:nth-child(1) {
    inline-size: 88px;
    left : 34px;
    top  : 102px;
  }

  .photos__section-wrap--man .photo:nth-child(2) {
    inline-size: 212px;
    left : 92px;
    top  : 48px;
  }

  .photos__section-wrap--man .photo:nth-child(3) {
    inline-size: 127px;
    left : 268px;
    top  : 12px;
  }

  .photos__section-wrap--man .photo:nth-child(4) {
    inline-size: 140px;
    left : 26px;
    top  : 274px;
  }

  .photos__section-wrap--man .photo:nth-child(5) {
    inline-size: 125px;
    left : 248px;
    top  : 236px;
  }

  /* Time Section */
  .box {
    padding: 55px 140px;
  }

  .timer__number-span {
    font-size  : 54px;
    line-height: 54px;
  }

  /* Wishes Section */
  .section--wishes::after,
  .section--wishes::before {
    inline-size: 380px;
    block-size : 100px;
  }

  .wishes__slide {
    font-size      : 22px;
    line-height    : 28px;
    max-inline-size: 420px;
  }

  /* Contact Section */
  .contact__box::before {
    inline-size: 720px;
  }

  .contact__box::after {
    inline-size     : 150px;
    block-size      : 150px;
    inset-inline-end: 160px;
  }

  .contact__info {
    font-size         : 32px;
    margin-block-start: 85px;
  }

  /* Questionnaire Section */
  .section--questionnaire {
    padding: 130px 0 95px;
  }

  .questionnaire__date {
    font-size: 30px;
  }

  .questionnaire__form {
    max-inline-size: 620px;
  }

  .form__block-title {
    font-size: 30px;
  }

  /* Footer Section */
  .footer__names {
    font-size: 85px;
  }

  .footer__image img {
    /* inline-size: 400px;
    block-size : 400px; */
  }

  .footer__image::before {
    /* inline-size       : 780px; */
    /* block-size        : 590px; */
    inset-inline-start: 140px;
    inset-block-start : 560px;
  }

  /* Section Decors */
  .section--decor-1::before,
  .section--decor-2::before,
  .section--decor-3::before {
    background-size: 1600px auto;
  }
}

/* ==========================================================================
   RESPONSIVE: Десктопы (1280px - 1535px)
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1535px) {
  :root {
    --titleSize      : 62px;
    --section-padding: 90px 0;
  }
  .container {
    max-inline-size: 1280px;
  }
  /* Lead Section */
  .lead__date {
    font-size: 34px;
    gap      : 25px;
  }

  .names__item {
    font-size: 74px;
  }

  .lead__image {
    /* inline-size: 305px; */
  }

  /* Datetime Section */
  .email-outer {
     /* inline-size: 100%; */
  }

  .date-table {
    inline-size: 500px;
  }

  .date__main {
    font-size: 100px;
  }

  .sm-health-svg {
    inline-size: 220px;
  }

  /* Photos */
  .photos__outer-wrap {
    max-inline-size: 1000px;
  }

  .gallery__wrap {
    max-inline-size: 440px;
  }

  .photos__section-wrap--woman .gallery__wrap {
    block-size: 540px;
  }

  .photos__section-wrap--man .gallery__wrap {
    block-size: 530px;
  }

  /* Time Section */
  .box {
    padding: 58px 170px;
  }

  .timer__number-span {
    font-size  : 58px;
    line-height: 58px;
  }

  /* Contact Section */
  .contact__box::before {
    inline-size: 780px;
  }

  .contact__box::after {
    inline-size     : 160px;
    block-size      : 165px;
    inset-inline-end: 190px;
  }

  .contact__info {
    font-size         : 34px;
    margin-block-start: 90px;
  }

  /* Footer Section */
  .footer__names {
    font-size: 92px;
  }

  .footer__image img {
    /* inline-size: 420px;
    block-size : 420px; */
  }

  .footer__image::before {
    /* inline-size       : 830px;
    block-size        : 630px; */
    inset-inline-start: 150px;
    inset-block-start : 550px;
  }

  /* Section Decors */
  .section--decor-1::before,
  .section--decor-2::before,
  .section--decor-3::before {
    background-size: 1800px auto;
  }
}

/* ==========================================================================
   RESPONSIVE: Большие экраны (1536px+)
   ========================================================================== */
@media (min-width: 1536px) {
  :root {
    --titleSize      : 64px;
    --section-padding: 100px 0;
  }
  .container {
    max-inline-size: 1536px;
  }
  /* Все базовые стили остаются без изменений,
     так как они уже оптимизированы для больших экранов */


}