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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#f8f4ec;

    color:#333;

    line-height:1.7;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

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

.hero{

    position: relative;

    width: 100%;

    height: 100vh;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: url("../images/hero.jpg") center center / cover no-repeat;

    animation: heroZoom 25s ease-in-out infinite alternate;
    filter:saturate(1.08);

}

.overlay{
    

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at center,
            rgba(255,215,120,.08) 0%,
            rgba(0,0,0,0) 45%),
        linear-gradient(
            rgba(0,0,0,.38),
            rgba(0,0,0,.60)
        );

}



.hero-content{

    position:relative;

    z-index:5;

    text-align:center;

    color:white;

}

/* ===========================
   LOGO
=========================== */

.logo{

    width:120px;

    margin:0 auto 28px;

    display:block;

    filter:

        drop-shadow(0 0 18px rgba(212,175,55,.55));

}

/* ===========================
   TEXT
=========================== */

.subtitle{

    margin-top:25px;

    letter-spacing:7px;

    font-size:15px;

    color:#fff;

    text-transform:uppercase;

}

.hero h1{

    margin-top:20px;

    font-size:88px;

    line-height:1.05;

    font-family:'Cormorant Garamond',serif;

    color:white;

    text-shadow:

        0 8px 35px rgba(0,0,0,.35);

}

.hero h1 span{

    display:block;

    margin:10px 0;

    color:#D4AF37;

    font-size:58px;

}

.date{

    margin-top:25px;

    font-size:20px;

    letter-spacing:4px;

}

/* ===========================
   BUTTON
=========================== */

.hero-btn{

    margin-top:45px;

    width:320px;

    max-width:100%;

    height:72px;

    border:none;

    border-radius:60px;

    font-size:20px;

    font-weight:600;

    cursor:pointer;

    color:white;

    background:

        linear-gradient(

            135deg,

            #E7C56A,

            #C79A33

        );

    transition:.35s;

}

.hero-btn:hover{

    transform:

        translateY(-4px)

        scale(1.02);

    box-shadow:

        0 20px 40px rgba(212,175,55,.45);

}

/* ===========================
   SCROLL
=========================== */

.scroll-down{

    margin-top:45px;

    font-size:34px;

    color:#D4AF37;

    text-shadow:0 0 18px rgba(212,175,55,.5);

    animation:bounce 2s infinite;

}

/* ===========================
   SECTIONS
=========================== */

section{

    padding:110px 0;

}

section h2{

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    color:#b8965a;

    margin-bottom:30px;

}

/* ===========================
   INVITATION
=========================== */

.invitation{

    background:white;

}

.invitation p{

    max-width:700px;

    margin:auto;

    text-align:center;

    font-size:19px;

    color:#555;

}

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

.countdown{

    background:#f4efe6;

    padding:90px 0;

}

.timer{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:30px;

}

.time-box{

    position:relative;

    width:170px;
    height:230px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border-radius:24px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(14px);

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.55);

    transition:
        transform .35s,
        box-shadow .35s;

    overflow:hidden;

    text-align:center;

}
.time-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top,
            rgba(212,175,55,.20),
            transparent 70%
        );

    opacity:.7;

    pointer-events:none;

}

.time-box:hover{

    transform:
        translateY(-10px)
        scale(1.03);

    box-shadow:
        0 30px 70px rgba(0,0,0,.15),
        0 0 30px rgba(212,175,55,.25);

}

.time-box span{

    display:flex;

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

    width:100%;

    font-size:72px;

    font-weight:700;

    line-height:1;

    color:#b8965a;

    text-shadow:
        0 0 18px rgba(212,175,55,.28);

}

.time-box small{

    margin-top:18px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:14px;

    color:#777;

}

/* ===========================
   ANIMATION
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}/* ===========================
   LOVE STORY
=========================== */

.story{

    background:#ffffff;

}

.story-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    margin-top:60px;

}

.story-image img{

    width:100%;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.story-text h3{

    font-size:36px;

    color:#b8965a;

    margin-bottom:20px;

    font-family:'Cormorant Garamond',serif;

}

.story-text p{

    color:#666;

    font-size:18px;

}

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

.gallery{

    background:#f8f4ec;

}

.gallery-grid{

    display:grid;

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

    gap:20px;

    margin-top:50px;

}

.gallery-grid img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:18px;

    transition:.4s;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.05);

}

/* ===========================
   TIMELINE
=========================== */

.timeline{

    background:white;

}

.timeline-list{

    max-width:800px;

    margin:50px auto 0;

}

.timeline-item{

    display:flex;

    gap:30px;

    margin-bottom:35px;

    align-items:center;

}

.time{

    min-width:90px;

    background:#c8a15a;

    color:white;

    padding:12px;

    border-radius:12px;

    text-align:center;

    font-weight:600;

}

.event{

    background:#f8f4ec;

    padding:20px;

    border-radius:15px;

    width:100%;

}

/* ===========================
   LOCATION
=========================== */

.location{

    background:#f4efe6;

}

.address{

    text-align:center;

    margin-bottom:35px;

}

.map iframe{

    width:100%;

    height:450px;

    border:none;

    border-radius:20px;

}

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

.rsvp{

    background:white;

}

.rsvp-form{

    max-width:650px;

    margin:40px auto 0;

    display:flex;

    flex-direction:column;

    gap:20px;

}

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

    width:100%;

    padding:18px;

    border:none;

    outline:none;

    border-radius:16px;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(10px);

    box-shadow:

        0 8px 20px rgba(0,0,0,.05);

    transition:.35s;

    font-size:16px;

}
.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{

    transform:translateY(-2px);

    box-shadow:

        0 0 0 2px rgba(212,175,55,.5),

        0 12px 30px rgba(0,0,0,.12);

}

.rsvp-form button{

    background:#c8a15a;

    color:white;

    border:none;

    padding:18px;

    border-radius:50px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.rsvp-form button:hover{

    background:#b28c47;

}

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

footer{

background:#111;

padding:50px 20px;

}


footer h3{

font-size:25px;

color:#c9a227;

}


footer p{

font-size:14px;

}
footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle,

        rgba(212,175,55,.08),

        transparent 70%

    );

}

.footer-logo{

    width:90px;

    margin:0 auto 20px;

}

footer h3{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    margin-bottom:10px;

}

footer p{

    color:#cccccc;

}

.copyright{

    margin-top:25px;

    font-size:14px;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.hero h1{

    font-size:54px;

}

.story-content{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.timeline-item{

    flex-direction:column;

    align-items:flex-start;

}

.time-box{

    width:130px;

}

.logo{

    width:90px;

}

section{

    padding:70px 0;

}

.map iframe{

    height:300px;

}

}
.hero-btn{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 rgba(200,161,90,.6);

    }

    70%{

        box-shadow:0 0 25px rgba(200,161,90,.8);

    }

    100%{

        box-shadow:0 0 0 rgba(200,161,90,0);

    }

}
.hero-content > *{

    opacity:0;
    transform:translateY(30px);
    animation:fadeUp .9s forwards;

}

.logo{
    animation-delay:.2s;
}

.subtitle{
    animation-delay:.5s;
}

.hero h1{
    animation-delay:.8s;
}

.date{
    animation-delay:1.1s;
}

.hero-btn{
    animation-delay:1.4s;
}

.scroll-down{
    animation-delay:1.7s;
}
/* ================= PARTICLES ================= */

.particles{

    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:2;
    pointer-events:none;

}

.particles span{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#D4AF37;

    box-shadow:
        0 0 8px rgba(212,175,55,.8),
        0 0 16px rgba(212,175,55,.5);

    animation:particleMove linear infinite;

}

/* индивидуальные позиции */


@keyframes particleMove{

    from{

        transform:
            translateY(110vh)
            scale(.5);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    to{

        transform:
            translateY(-20vh)
            translateX(30px)
            scale(1.2);

        opacity:0;

    }

}
/* ===========================
   HERO CARD
=========================== */

.hero-card{

    width:min(92%,680px);

    padding:60px 55px;

    border-radius:36px;

    backdrop-filter:blur(24px);

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.08)
        );

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

    box-shadow:
        0 30px 70px rgba(0,0,0,.25),
        inset 0 1px rgba(255,255,255,.2);

    position:relative;

    overflow:hidden;

}
.hero-card::before{

    content:"";

    position:absolute;

    top:-50%;

    left:-20%;

    width:60%;

    height:220%;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:rotate(25deg);

    animation:shine 8s linear infinite;

}
@keyframes shine{

    from{

        left:-60%;

    }

    to{

        left:130%;

    }

}

.hero-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.40),
        0 0 60px rgba(212,175,55,.20);

}
/* ===========================
   LANGUAGE SWITCHER
=========================== */

.language-switcher{

    position:absolute;

    top:30px;

    right:30px;

    z-index:100;

    display:flex;

    gap:10px;

    padding:8px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

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

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

}

.language-switcher button{

    border:none;

    background:transparent;

    color:white;

    padding:10px 18px;

    border-radius:30px;

    cursor:pointer;

    font-size:14px;

    transition:.3s;

}

.language-switcher button:hover{

    background:rgba(212,175,55,.25);

}

.language-switcher button.active{

    background:#D4AF37;

    color:#111;

    font-weight:600;

}
.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 50% 20%,
    rgba(212,175,55,.18),
    transparent 60%);

    pointer-events:none;

    animation:goldGlow 8s ease-in-out infinite;

}

@keyframes goldGlow{

0%,100%{

opacity:.5;
}
50%{
opacity:1;
}
}
/* ===========================
   INVITATION PREMIUM
=========================== */

.invitation{

    background:#f8f4ec;

}

.invitation-card{

    max-width:850px;

    margin:auto;

    padding:70px 60px;

    background:white;

    border-radius:30px;

    text-align:center;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08);

    position:relative;

}

.invitation-card::before{

    content:"";

    position:absolute;

    top:18px;
    left:18px;
    right:18px;
    bottom:18px;

    border:1px solid rgba(212,175,55,.35);

    border-radius:24px;

}

.ornament{

    font-size:26px;

    color:#d4af37;

    margin-bottom:25px;

    letter-spacing:12px;

}

.invitation-card h2{

    margin-bottom:25px;
    font-size:32px;
line-height:1.2;

}

.invitation-card p{

    max-width:650px;

    margin:auto;

    font-size:19px;

    color:#666;

    line-height:2;

}
/* ===========================
   COUNTDOWN TITLE
=========================== */

.countdown h2{

    position:relative;

    display:inline-block;

    left:50%;

    transform:translateX(-50%);

    margin-bottom:20px;

    font-size:58px;

    color:#b8965a;

    text-shadow:

        0 0 18px rgba(212,175,55,.18);

}

.countdown h2::after{

    content:"";

    display:block;

    width:90px;

    height:2px;

    margin:18px auto 0;

    background:linear-gradient(
        to right,
        transparent,
        #d4af37,
        transparent
    );

}
/* ===========================
   LIGHTBOX
=========================== */

.lightbox{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.92);

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

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.lightbox.active{

    opacity:1;
    visibility:visible;

}

.lightbox img{

    max-width:90%;
    max-height:85vh;

    border-radius:18px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.6);

    animation:zoomImage .35s;

}

@keyframes zoomImage{

from{

    transform:scale(.85);
    opacity:0;

}

to{

    transform:scale(1);
    opacity:1;

}

}

.close-lightbox{

    position:absolute;

    top:30px;
    right:40px;

    font-size:48px;

    color:white;

    cursor:pointer;

}

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    border:none;

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

    backdrop-filter:blur(10px);

    color:white;

    width:60px;
    height:60px;

    border-radius:50%;

    cursor:pointer;

    font-size:30px;

    transition:.3s;

}

.prev:hover,
.next:hover{

    background:#D4AF37;

}

.prev{

    left:40px;

}

.next{

    right:40px;

}
/* ===========================
   LIGHTBOX
=========================== */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:88%;

    max-height:85vh;

    border-radius:18px;
    transition:.25s;

    box-shadow:
        0 0 35px rgba(212,175,55,.35);

    animation:zoomPhoto .35s;

}

.close-lightbox{

    position:absolute;

    top:30px;

    right:35px;

    color:white;

    font-size:42px;

    cursor:pointer;

}

.prev-photo,
.next-photo{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.prev-photo:hover,
.next-photo:hover{

    background:#D4AF37;

}

.prev-photo{

    left:35px;

}

.next-photo{

    right:35px;

}

@keyframes zoomPhoto{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}
@media(max-width:768px){

.hero-card{

    padding:45px 25px;

}

.hero h1{

    font-size:54px;

}

.hero h1 span{

    font-size:42px;

}

.logo{

    width:95px;

}

.hero-btn{

    width:100%;

    font-size:18px;

}

.subtitle{

    font-size:13px;

    letter-spacing:4px;

}

}
/* ===========================
   FINAL MOBILE FIX
   Wedding invitation
=========================== */

@media(max-width:768px){

    /* HERO */
    .hero{
        min-height:100vh;
    }

    .hero-card{
        width:92%;
        padding:35px 20px;
        border-radius:25px;
    }


    /* LOGO */
    .logo{
        width:75px;
        margin-bottom:15px;
    }


    /* TOP TEXT */
    .subtitle{
        font-size:11px;
        letter-spacing:3px;
        margin-top:15px;
    }


    /* NAMES */
    .hero h1{

        font-size:42px;
        line-height:1.1;
        margin-top:15px;

    }


    .hero h1 span{

        font-size:32px;
        margin:5px 0;

    }


    /* DATE */
    .date{

        margin-top:15px;
        font-size:15px;
        letter-spacing:2px;

    }


    /* BUTTON */
    .hero-btn{

        width:100%;
        height:58px;
        margin-top:30px;
        font-size:16px;

    }


    /* SCROLL ICON */
    .scroll-down{

        font-size:26px;
        margin-top:25px;

    }



    /* SECTIONS TITLES */

    section h2{

        font-size:38px;
        margin-bottom:20px;

    }


    /* INVITATION TEXT */

    .invitation-card{

        padding:40px 20px;

    }


    .invitation-card h2{

        font-size:28px;

    }


    .invitation-card p{

        font-size:16px;
        line-height:1.8;

    }



    /* COUNTDOWN */

    .countdown h2{

        font-size:38px;

    }


    .timer{

        gap:12px;

    }


    .time-box{

        width:90px;
        height:120px;
        border-radius:18px;

    }


    .time-box span{

        font-size:42px;

    }


    .time-box small{

        font-size:9px;
        letter-spacing:1px;
        margin-top:10px;

    }



    /* STORY */

    .story-content{

        gap:30px;

    }


    .story-text h3{

        font-size:30px;

    }


    .story-text p{

        font-size:16px;

    }



    /* GALLERY */

    .gallery-grid img{

        height:230px;

    }



    /* TIMELINE */

    .timeline-item{

        gap:15px;

    }


    .time{

        min-width:80px;
        padding:10px;

    }


    .event{

        padding:15px;

    }



    /* MAP */

    .map iframe{

        height:280px;

    }



    /* FORM */

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

        padding:15px;
        font-size:14px;

    }



    
    /* FOOTER */

    footer{

        padding:60px 20px;

    }


    footer h3{

        font-size:28px;

    }

}
@media(max-width:600px){

.countdown h2{

font-size:30px;

}


.time-box span{

font-size:38px;

}


.time-box small{

font-size:12px;

}

}
.gold-line{

width:80px;
height:2px;
background:#c9a227;
margin:20px auto;

}
.timeline-item{

background:white;

border-radius:20px;

padding:20px;

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

}


.time{

background:#c9a227;

color:white;

padding:8px 15px;

border-radius:20px;

display:inline-block;

margin-bottom:15px;

}
.rsvp{

background:#faf7ef;

}


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

border:none;

background:white;

border-radius:20px;

padding:18px;

box-shadow:
0 5px 20px rgba(0,0,0,.05);

}


.rsvp-form button{

background:#c9a227;

color:white;

border:none;

border-radius:30px;

padding:16px;

font-size:16px;

}