/* =========================================
   RESET
========================================= */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    background:#f4efe7;
    color:#2e2d2b;
    font-family:"Cormorant Garamond",serif;
    font-weight:400;
    line-height:1.8;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

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

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

ul{
    list-style:none;
}

button{
    border:none;
    background:none;
    cursor:pointer;
}

/* =========================================
   VARIABLES
========================================= */

:root{

--bg:#f5f0e8;

--paper:#faf7f2;

--olive:#2d3225;

--olive-light:#596248;

--text:#2e2b28;

--gold:#b89f73;

--line:#d8d1c4;

--container:1320px;

--transition:.45s cubic-bezier(.2,.7,.1,1);

}

/* =========================================
   LAYOUT
========================================= */

.page{
    width:100%;
    overflow:hidden;
}

.layout{
    width:min(var(--container),90%);
    margin:auto;
}

.layout-grid{

    width:min(var(--container),90%);

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(12,minmax(0,1fr));

    column-gap:42px;

}

section{

    position:relative;

}

/* =========================================
   TYPOGRAPHY
========================================= */

.section-label{

    display:inline-block;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.45em;

    color:var(--olive-light);

    margin-bottom:28px;

}

h1{

    font-family:"Italiana",serif;

    font-weight:400;

}

h2{

    font-family: "Cormorant Garamond", serif;

    font-weight:400;

    font-size:64px;

    line-height:1.1;

    margin-bottom:32px;

}

h3{

    font-family:"Cormorant Garamond",serif;

    font-weight:400;

}

p{

    font-size:22px;

    color:#504c48;

}

.hero__script{

    font-family:"Great Vibes",cursive;

    font-size:74px;

    color:#fff;

}

/* =========================================
   HERO
========================================= */

.hero{

position:relative;

width:100%;
height:100vh;

min-height:900px;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:#20231a;

}

.hero__background{

position:absolute;
inset:0;
z-index:1;

}

.hero__background img{

width:100%;
height:100%;

object-fit:cover;
object-position:center;

}

.hero__overlay{

position:absolute;

inset:0;

background:
linear-gradient(
rgba(20,25,18,.45),
rgba(20,25,18,.55)
);

z-index:2;

}

.hero__content{

position:relative;

z-index:10;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:20px;

width:100%;

}



.hero__script{

font-family:"Great Vibes";

font-size:clamp(95px,4vw,80px);

margin-bottom:20px;

color:white;

opacity:1;

}

.hero__title{ /*VOT ETO*/

font-family:"Forum",serif;

font-size:clamp(90px,8vw,190px);

line-height:1;

color:white;

text-transform:uppercase;

margin-bottom:30px;

}

.hero__title span{

display:block;

}

.hero__title .amp{

font-size:60px;

margin:15px 0;

}

.hero__divider{

width:120px;
height:1px;

background:white;

margin:30px auto;

opacity:.5;

}

.hero__date{

color:white;

letter-spacing:.3em;

text-transform:uppercase;

font-size:20px;

margin-bottom:15px;

}

.hero__location{

color:white;

margin-bottom:40px;

font-size:20px;

}

.hero__button{

display:flex;

justify-content:center;
align-items:center;

width:260px;
height:64px;

border:1px solid rgba(255,255,255,.4);

color:white;

transition:.4s;

}

.hero__button:hover{

background:white;

color:black;

}



.hero__flower{

position:absolute;

z-index:15;

pointer-events:none;

}

.hero__flower img{

width:100%;

height:auto;

}

.hero__flower--left{

position:absolute;
left:0;
bottom:0;
width:830px;
z-index:10;
transform: translate(-220px, 200px);
}

.hero__flower--right{
position:absolute;
right:0;
bottom:0;
width:620px;
transform: translate(100px, 25px);

z-index:10;

}
/* =========================================
   INTRO
========================================= */

.intro{

    padding:50px 0;

    background:var(--paper);

}

.intro .layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;

}

.intro__left h2{

    max-width:650px;

}

.intro__right{

    padding-top:60px;

}

.intro__right p{

    max-width:520px;

    font-size:26px;

    line-height:1.8;

}

/* =========================================
   STORY
========================================= */

.story{

    padding:100px 0;

    position:relative;

    overflow:hidden;

}

.story::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:#efebe2;

    right:-250px;

    top:0;

}

.story__text{

    grid-column:1/6;

    position:relative;

    z-index:3;

}

.story__text h2{

    max-width:600px;

}

.story__text p{

    max-width:520px;

    margin-bottom:30px;

}

.story__signature{

    margin-top:40px;

    font-family:"Great Vibes";

    font-size:58px;

    color:var(--olive);

}

.story__image{

    grid-column:7/13;

    position:relative;

}

.image-frame{

    position:relative;

    overflow:hidden;

}

.image-frame::before{

    content:"";

    position:absolute;

    inset:20px;

    border:1px solid rgba(255,255,255,.3);

    z-index:2;

}

.image-frame img{

    width:100%;

    height:820px;

    object-fit:cover;

}

.story__flower{

    position:absolute;

    width:240px;

    right:-80px;

    bottom:-70px;

    z-index:10;

}

/* =====================================
COUNTDOWN
===================================== */

.countdown{

padding:80px 0;

background:#25281e;

text-align:center;

}

.countdown h2{
font-family: "Cormorant Garamond", serif;
margin-bottom:70px;
color: white    ;

}

.countdown-container{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.count-box{

width:180px;

height:180px;

background:white;

border-radius:12px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

}

.count-box span{

font-family:"Forum",serif;

font-size:72px;

line-height:1;

color:#25281e;

margin-bottom:10px;

}

.count-box p{

font-family:"Montserrat",sans-serif;

font-size:14px;

letter-spacing:.25em;

text-transform:uppercase;

color:#8d867d;

}


/* mobile */

@media(max-width:768px){

.countdown{

padding:100px 20px;

}

.countdown-container{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.count-box{

width:100%;
height:140px;

}

.count-box span{

font-size:50px;

}

.count-box p{

font-size:12px;

}

}


.timeline{

background:var(--paper);

padding:100px 0;

}

.section-heading{

text-align:center;

margin-bottom:100px;

}

.section-heading p{

max-width:700px;

margin:auto;

}


/* desktop */

.timeline__line{

position:relative;

display:grid;

grid-template-columns:repeat(5,1fr);

gap:40px;

}

.timeline__line::before{

content:"";

position:absolute;

top:35px;

left:30px;

width:100%;

height:1px;

background:var(--line);

}

.timeline__item{

position:relative;

padding-top:120px;

text-align:center;

}

.timeline__icon{

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:70px;
height:70px;

padding:15px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

z-index:5;

}

.timeline__icon img{

width:100%;
height:100%;

object-fit:contain;

}

.timeline__time{

display:block;

margin-bottom:15px;

font-size:14px;

letter-spacing:.25em;

text-transform:uppercase;

color:var(--olive-light);

}

.timeline__item h3{

font-size:32px;

margin-bottom:15px;

}

.timeline__item p{

font-size:18px;

}


/* mobile */

@media(max-width:768px){

.timeline{

padding:80px 20px;

}

.timeline__line{

display:flex;
flex-direction:column;

gap:60px;

position:relative;

padding-left:90px;

}

/* линия */

.timeline__line::before{

content:"";

position:absolute;

top:0;

left:30px;

width:1px;

height:100%;

background:var(--line);

}

.timeline__item{

position:relative;

/* место под иконку + линию */

padding-left:0;

padding-top:0;

padding-bottom:20px;

min-height:90px;

text-align:left;

}

/* иконка */

.timeline__icon{

position:absolute;

top:0;

left:-60px;

transform:translateX(-50%);

width:60px;
height:60px;

padding:12px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

z-index:5;

}

.timeline__icon img{

width:28px;

height:28px;

object-fit:contain;

display:block;

margin:auto;

}


.timeline__time,
.timeline__item h3,
.timeline__item p{

text-align:left;

}

}

/* =====================================
RSVP
===================================== */

.rsvp{

padding:100px 0;

background:#25281e;

}

.rsvp-card{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

background:#f7f2ea;

border-radius:14px;

overflow:hidden;

box-shadow:
0 30px 80px rgba(0,0,0,.15);

}

.rsvp-left{

padding:90px;

background:#060605;

display:flex;

flex-direction:column;

justify-content:center;

}

.rsvp-left .section-label{

color:#bdb6aa;

}

.rsvp-left h2{

font-family:"Forum",serif;

font-size:65px;

font-weight:400;

line-height:1.1;

color:white;

margin-bottom:30px;

}

.rsvp-left p{

font-size:24px;

line-height:1.8;

max-width:450px;

color:#d6d1c8;

}

.rsvp-right{

padding:90px;

display:flex;

justify-content:center;

align-items:center;

}

.rsvp-form{

width:100%;
max-width:450px;

display:flex;

flex-direction:column;

gap:28px;

}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{

width:100%;

border:none;

border-bottom:1px solid #d5cdc0;

background:transparent;

outline:none;

padding:18px 0;

font-size:22px;

font-family:"Cormorant Garamond",serif;

}

.rsvp-form textarea{

height:120px;

resize:none;

padding-top:20px;

}

.drink-group{

display:flex;

flex-direction:column;

gap:14px;

padding:10px 0;

}

.drink-title{

font-family:"Montserrat",sans-serif;

font-size:13px;

letter-spacing:.25em;

text-transform:uppercase;

color:#938b80;

margin-bottom:10px;

}

.drink-group label{

display:flex;

align-items:center;

gap:12px;

cursor:pointer;

font-size:22px;

}

.drink-group input{

width:18px;

height:18px;

}

.rsvp-form button{

height:65px;

border:none;

background:#25281e;

color:white;

font-family:"Montserrat";

font-size:14px;

letter-spacing:.25em;

text-transform:uppercase;

cursor:pointer;

transition:.4s;

}

.rsvp-form button:hover{

transform:translateY(-3px);

}

@media(max-width:768px){

.rsvp-card{

grid-template-columns:1fr;

}

.rsvp-left,
.rsvp-right{

padding:50px;

}

.rsvp-left h2{

font-size:45px;

}

}

/* =========================================
   ACCOMMODATION
========================================= */

.accommodation{

    padding:180px 0;

    background:var(--bg);

}

.accommodation .layout-grid{

    align-items:center;

}

.accommodation__image{

    grid-column:1/7;

    position:relative;

}

.accommodation__image::after{

    content:"";

    position:absolute;

    width:85%;

    height:85%;

    border:1px solid var(--line);

    left:35px;

    top:35px;

    z-index:2;

}

.accommodation__image img{

    height:720px;

    object-fit:cover;

}

.accommodation__content{

    grid-column:8/13;

}

.accommodation__content h2{

    max-width:500px;

}

.accommodation__content p{

    margin-bottom:40px;

}

.accommodation__content ul{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.accommodation__content li{

    position:relative;

    padding-left:30px;

    font-size:22px;

}

.accommodation__content li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--olive);

    position:absolute;

    left:0;

    top:14px;

}

/* =========================================
   DRESSCODE
========================================= */

.dresscode{

    padding:100px 0;

    background:#22261b;

    text-align:center;

    color:white;

}

.dresscode h2{

    color:white;

}

.dresscode p{

    color:#d3d0ca;

    max-width:650px;

    margin:auto;

}

.palette{

    display:flex;

    justify-content:center;

    gap:35px;

    margin-top:70px;

}

.color{

    width:80px;

    height:80px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.2);

}

.c1{

background:#47291b;

}

.c2{

background:#8a403f;

}

.c3{

background:#70753c;

}

.c4{

background:#d8ceb2;

}

.c5{

background:#4c4b4b;

}

.c6{

background:#a1947f;

}

/* =========================================
   GIFT
========================================= */

.gift{

    padding:100px 0;

    background:var(--paper);

}

.gift__content{

    grid-column:1/6;

}

.gift__image{

    grid-column:8/13;

    overflow:hidden;

}

.gift__image img{

    height:580px;

    object-fit:cover;

    transition:1.2s;

}

.gift__image:hover img{

    transform:scale(1.05);

}

.gift__content p{

    max-width:520px;

}

/* =========================================
   GALLERY
========================================= */

.gallery{

    padding:40px;

    background:#f1ece3;

}

.gallery__grid{

    display:grid;

    grid-template-columns:
    repeat(12,1fr);

    gap:30px;

}

.gallery__grid img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.gallery__grid img:nth-child(1){

grid-column:1/5;
height:600px;

}

.gallery__grid img:nth-child(2){

grid-column:5/9;
height:600px;

}

.gallery__grid img:nth-child(3){

grid-column:9/13;
height:600px;

}

.gallery__grid img:nth-child(4){

grid-column:1/4;
height:400px;

}

.gallery__grid img:nth-child(5){

grid-column:4/8;
height:400px;

}

.gallery__grid img:nth-child(6){

grid-column:8/13;
height:400px;

}

/* =========================================
   FOOTER
========================================= */

.footer{

    background:#050505;

    color:white;

    padding:50px 0;

    text-align:center;

}

.footer__script{

    font-family:"Great Vibes";

    font-size:40px;

    margin-bottom:30px;

    color:#d5cfbf;

}

.footer h2{

    color:white;

}

.footer h3{
font-size: 46px;

}

.footer p{

    color:#c8c5bd;

    letter-spacing:.25em;

    text-transform:uppercase;

}

/* =========================================
   RESPONSIVE
========================================= */

@media screen and (max-width:1200px){

.layout,
.layout-grid{

    width:92%;

}

.hero__title{

    font-size:100px;

}

h2{

    font-size:54px;

}

.timeline__line{

    grid-template-columns:
    repeat(3,1fr);

    row-gap:70px;

}

.gallery__grid{

    grid-template-columns:
    repeat(2,1fr);

}

.gallery__grid img:nth-child(n){

    grid-column:auto;

    height:450px;

}

}


/* ============================= */

@media screen and (max-width:992px){

.layout-grid{

    grid-template-columns:
    repeat(1,1fr);

}

.intro .layout{

    grid-template-columns:1fr;

    gap:60px;

}

.story__text,
.story__image,
.rsvp__content,
.rsvp__qr,
.accommodation__image,
.accommodation__content,
.gift__content,
.gift__image{

    grid-column:auto;

}

.story{

    padding:120px 0;

}

.story__image{

    margin-top:50px;

}

.image-frame img{

    height:650px;

}

.story__flower{

    width:180px;

    right:-40px;

}

.timeline__line{

    grid-template-columns:
    repeat(2,1fr);

}

.accommodation__image img{

    height:550px;

}

.gift__image img{

    height:550px;

}

.hero{

    min-height:850px;

}

.hero__title{

    font-size:80px;

}

.hero__script{

    font-size:56px;

}

.footer__script{

    font-size:58px;

}

}


/* ============================= */

@media screen and (max-width:768px){

section{

    overflow:hidden;

}

.hero{

    min-height:100vh;

}

.hero__title{

    font-size:58px;

}

.hero__title .amp{

    font-size:55px;

}

.hero__script{

    font-size:42px;

}

.hero__button{

    width:220px;

    height:58px;

}

.hero__flower{

    display:none;

}


h2{

    font-size:42px;

}

p{
font-family: "Lora", serif;
    font-size:18px;

}

.section-label{

    letter-spacing:.25em;

}

.intro,
.story,
.timeline,
.rsvp,
.accommodation,
.dresscode,
.gift{

    padding:100px 0;

}

.timeline__line{

    grid-template-columns:1fr;

}



.palette{

    flex-wrap:wrap;

}

.color{

    width:60px;
    height:60px;

}

.qr-box{

    width:260px;
    height:260px;

    margin:auto;
}

.gallery{

    padding:20px;

}

.gallery__grid{

    grid-template-columns:1fr;

}

.gallery__grid img{

    height:340px !important;

}

.footer{

    padding:100px 20px;

}

.footer__script{

    font-size:46px;

}

}


/* ============================= */

@media screen and (max-width:480px){

.hero__title{

    font-size:42px;

}

.hero__script{

    font-size:34px;

}

h2{

    font-size:34px;

}

.hero__date,
.hero__location{

    font-size:14px;

}

.button,
.hero__button{

    width:100%;

}

.qr-box{

    width:220px;
    height:220px;

}

.footer__script{

    font-size:38px;

}

}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(50px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

@keyframes zoomImage{

0%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

.hero__content{

animation:fadeUp 1.2s ease;
}

.hero__background img{

animation:zoomImage 6s ease;
}
.hidden{

opacity:0;

transform:translateY(80px);

transition:1s ease;

}

.show{

opacity:1;

transform:translateY(0);

}
#musicControl {
    position: fixed !important;
    display: flex !important;

    right: 20px !important;
    bottom: 20px !important;

    top: auto !important;
    left: auto !important;

    width: max-content !important;
    height: auto !important;

    margin: 0 !important;
    padding: 8px 12px !important;

    z-index: 999999 !important;

    align-items: center !important;
    gap: 10px !important;

    border-radius: 50px !important;

    background: rgba(20, 20, 20, 0.7) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-sizing: border-box !important;
}

#musicToggle {
    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,.15) !important;

    color: white !important;

    cursor: pointer !important;
}

#musicControl span {
    color: white !important;
}

#musicVolume {
    width: 90px !important;
    margin: 0 !important;
}

@media (max-width: 600px) {

    #musicControl {
        right: 15px !important;
        bottom: 15px !important;
    }

    #musicVolume {
        width: 70px;
    }

}