/*==================================================
 GANPATI INVITATION
 STYLE.CSS - PART 1
==================================================*/

/* GOOGLE FONTS
===================================*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Mukta:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

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

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

html{
scroll-behavior:smooth;
}

body{

background:#050505;

color:#ffffff;

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

overflow-x:hidden;

line-height:1.7;

}

/* SCROLLBAR
===================================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#D4AF37;

border-radius:50px;

}

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

:root{

--gold:#D4AF37;

--gold-light:#F2D675;

--black:#050505;

--white:#ffffff;

--gray:#bbbbbb;

--glass:rgba(255,255,255,.06);

--border:rgba(255,255,255,.10);

}

/* CONTAINER
===================================*/

.container{

width:min(1200px,90%);

margin:auto;

}

/* SECTION
===================================*/

section{

padding:120px 0;

position:relative;

}

/* HEADINGS
===================================*/

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

color:var(--gold);

letter-spacing:5px;

font-size:14px;

text-transform:uppercase;

}

.section-heading h2{

font-family:'Cinzel',serif;

font-size:54px;

margin-top:15px;

font-weight:700;

}

.gold-divider{

margin:30px auto 0;

width:140px;

height:2px;

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

position:relative;

}

.gold-divider span{

position:absolute;

left:50%;

top:-4px;

transform:translateX(-50%);

width:50px;

height:10px;

background:var(--gold);

border-radius:20px;

}

/* BUTTONS
===================================*/

.btn-gold{

display:inline-flex;

align-items:center;

gap:12px;

padding:18px 40px;

background:var(--gold);

color:#000;

text-decoration:none;

border-radius:60px;

font-weight:600;

transition:.4s;

}

.btn-gold:hover{

transform:translateY(-5px);

box-shadow:

0 0 35px rgba(212,175,55,.6);

}

.btn-border{

display:inline-flex;

align-items:center;

gap:12px;

padding:18px 40px;

border:2px solid var(--gold);

color:var(--gold);

text-decoration:none;

border-radius:60px;

transition:.4s;

}

.btn-border:hover{

background:var(--gold);

color:#000;

}

/* GLASS CARD
===================================*/

.glass{

background:var(--glass);

backdrop-filter:blur(18px);

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

border-radius:25px;

}

/* LOADER
===================================*/

#loader{

position:fixed;

inset:0;

background:#000;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-circle{

width:160px;

height:160px;

border-radius:50%;

border:3px solid rgba(212,175,55,.15);

display:flex;

justify-content:center;

align-items:center;

animation:rotate 10s linear infinite;

box-shadow:

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

}

.loader-circle img{

width:90px;

}

#loader h2{

margin-top:30px;

font-family:'Cinzel',serif;

color:var(--gold);

font-size:32px;

}

#loader p{

margin-top:15px;

color:#999;

letter-spacing:3px;

}

@keyframes rotate{

100%{

transform:rotate(360deg);

}

}

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

.music-btn{

position:fixed;

right:35px;

bottom:35px;

width:65px;

height:65px;

border:none;

border-radius:50%;

background:var(--gold);

color:#000;

font-size:22px;

cursor:pointer;

z-index:999;

transition:.3s;

box-shadow:

0 0 30px rgba(212,175,55,.5);

}

.music-btn:hover{

transform:scale(1.1);

}

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

.intro{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

position:relative;

}

.intro-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at center,

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

transparent 70%);

}

.intro-content{

position:relative;

z-index:2;

}

.intro-content span{

color:var(--gold);

letter-spacing:5px;

text-transform:uppercase;

}

.intro-content h1{

font-size:70px;

font-family:'Cinzel',serif;

margin:25px 0;

}

.intro-content p{

color:#ddd;

font-size:20px;

}

#enterInvitation{

margin-top:45px;

padding:18px 45px;

background:var(--gold);

border:none;

border-radius:60px;

font-size:17px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

#enterInvitation:hover{

transform:translateY(-5px);

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

}

.hero .container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}

.hero-left h4{

color:var(--gold);

letter-spacing:4px;

margin-bottom:20px;

}

.hero-left h1{

font-size:90px;

font-family:'Cinzel',serif;

line-height:1;

}

.hero-left p{

margin:30px 0;

max-width:520px;

color:#d6d6d6;

font-size:18px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.hero-right{

position:relative;

display:flex;

justify-content:center;

}

.ganpati{

width:100%;

max-width:520px;

position:relative;

z-index:2;

filter:drop-shadow(0 0 50px rgba(212,175,55,.45));

}

.ganpati-glow{

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:

radial-gradient(circle,

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

transparent 70%);

filter:blur(40px);

}
/*==================================================
 STYLE.CSS - PART 2
 Invitation | Blessing | Family | Timeline
==================================================*/

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

.invitation-section{

    background:#080808;

}

.invite-card{

    max-width:850px;

    margin:0 auto;

    padding:60px;

    text-align:center;

    transition:.4s;

}

.invite-card:hover{

    transform:translateY(-8px);

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

}

.invite-card h3{

    font-size:38px;

    font-family:'Cinzel',serif;

    color:var(--gold);

    margin-bottom:25px;

}

.invite-card p{

    color:#d9d9d9;

    line-height:2;

    font-size:18px;

}

/* ===========================
BLESSING SECTION
=========================== */

.blessing-section{

    background:#050505;

}

.blessing-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.blessing-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.blessing-image img{

    width:100%;

    max-width:450px;

    position:relative;

    z-index:2;

}

.circle-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    filter:blur(35px);

}

.blessing-content span{

    color:var(--gold);

    letter-spacing:3px;

}

.blessing-content h2{

    font-family:'Cinzel',serif;

    font-size:60px;

    margin:20px 0;

}

.blessing-content p{

    color:#d8d8d8;

    line-height:2;

    margin-bottom:30px;

}

.blessing-content blockquote{

    border-left:4px solid var(--gold);

    padding-left:25px;

    font-size:20px;

    color:#fff;

    line-height:2;

    font-style:italic;

}

/* ===========================
FAMILY
=========================== */

.family-section{

    background:#090909;

}

.family-grid{

    display:grid;

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

    gap:35px;

}

.family-card{

    padding:40px;

    text-align:center;

    transition:.4s;

}

.family-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

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

}

.family-card img{

    width:150px;

    height:150px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid var(--gold);

    margin-bottom:25px;

}

.family-card h3{

    font-family:'Cinzel',serif;

    color:var(--gold);

    margin-bottom:15px;

    font-size:28px;

}

.family-card p{

    color:#d4d4d4;

    line-height:1.8;

}

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

.timeline-section{

    background:#050505;

}

.timeline{

    max-width:850px;

    margin:auto;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:24px;

    top:0;

    width:2px;

    height:100%;

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

}

.timeline-item{

    display:flex;

    gap:30px;

    margin-bottom:60px;

    position:relative;

}

.timeline-dot{

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--gold);

    flex-shrink:0;

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

}

.timeline-content{

    padding:25px 30px;

    flex:1;

    border-radius:18px;

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

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

    transition:.4s;

}

.timeline-content:hover{

    transform:translateX(10px);

    border-color:var(--gold);

}

.timeline-content h3{

    font-family:'Cinzel',serif;

    margin-bottom:10px;

    color:var(--gold);

}

.timeline-content p{

    color:#ccc;

    line-height:1.8;

}

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

.family-card,

.invite-card,

.timeline-content{

    transition:

    transform .4s ease,

    box-shadow .4s ease,

    border-color .4s ease;

}

.hero-left>*{

    animation:fadeUp 1s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

.hero .container,

.blessing-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.family-grid{

grid-template-columns:1fr;

}

.timeline::before{

display:none;

}

.timeline-item{

flex-direction:column;

align-items:center;

text-align:center;

}

.timeline-content:hover{

transform:none;

}

}

@media(max-width:768px){

.section-heading h2{

font-size:38px;

}

.hero-left h1{

font-size:60px;

}

.blessing-content h2{

font-size:42px;

}

.invite-card{

padding:35px;

}

.family-card{

padding:30px;

}

}

@media(max-width:480px){

.hero-buttons{

flex-direction:column;

}

.btn-gold,

.btn-border{

width:100%;

justify-content:center;

}

.hero-left h1{

font-size:48px;

}

.invite-card h3{

font-size:28px;

}

}
/*==================================================
 STYLE.CSS - PART 3
 Countdown | Event | Gallery | Footer
==================================================*/

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

.countdown-section{

    background:#080808;

}

.countdown-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.count-box{

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

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

    border-radius:25px;

    backdrop-filter:blur(15px);

    text-align:center;

    padding:40px 20px;

    transition:.4s;

}

.count-box:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

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

}

.count-box span{

    display:block;

    font-size:60px;

    color:var(--gold);

    font-family:'Cinzel',serif;

    font-weight:700;

}

.count-box small{

    display:block;

    margin-top:10px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#bbb;

}

/* ===========================
EVENT SECTION
=========================== */

.event-section{

    background:#050505;

}

.event-grid{

    display:grid;

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

    gap:30px;

}

.event-card{

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

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

    border-radius:25px;

    text-align:center;

    padding:45px 30px;

    transition:.4s;

}

.event-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

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

}

.event-card i{

    font-size:42px;

    color:var(--gold);

    margin-bottom:25px;

}

.event-card h3{

    font-family:'Cinzel',serif;

    margin-bottom:15px;

}

.event-card p{

    color:#d0d0d0;

    line-height:1.8;

}

.event-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:60px;

}

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

.gallery-section{

    background:#090909;

}

.gallery-grid{

    display:grid;

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

    gap:20px;

}

.gallery-grid img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:18px;

    transition:.5s;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.05);

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

}

/* ===========================
THANK YOU
=========================== */

.thankyou-section{

    text-align:center;

    background:#050505;

}

.thankyou-icon{

    width:120px;

    margin-bottom:25px;

    filter:drop-shadow(0 0 20px rgba(212,175,55,.4));

}

.thankyou-section h2{

    font-family:'Cinzel',serif;

    max-width:800px;

    margin:auto;

    line-height:1.5;

}

.thankyou-section p{

    margin-top:20px;

    color:#d5d5d5;

}

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

footer{

    background:#030303;

    padding:80px 0;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

}

footer h3{

    color:var(--gold);

    font-family:'Cinzel',serif;

    font-size:36px;

    margin-bottom:15px;

}

footer p{

    color:#bfbfbf;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:35px 0;

}

.footer-social a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

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

    color:var(--gold);

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--gold);

    color:#000;

    transform:translateY(-6px);

}

footer small{

    color:#777;

}

/* ===========================
BACKGROUND EFFECTS
=========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background-image:

    radial-gradient(rgba(212,175,55,.03) 1px, transparent 1px);

    background-size:70px 70px;

    z-index:-2;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to bottom,
    rgba(0,0,0,.35),
    rgba(5,5,5,1));

}

.hero{

    position:relative;

    overflow:hidden;

}

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

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

}

.scroll-down span{

    display:block;

    width:2px;

    height:60px;

    background:linear-gradient(var(--gold),transparent);

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(20px);

        opacity:0;

    }

}

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

.music-btn{

    animation:musicPulse 2s infinite;

}

@keyframes musicPulse{

    0%{

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

    }

    50%{

        box-shadow:

        0 0 25px rgba(212,175,55,.7),

        0 0 60px rgba(212,175,55,.2);

    }

    100%{

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

    }

}

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

@media(max-width:992px){

.event-grid{

grid-template-columns:1fr;

}

.gallery-grid{

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

}

.countdown-grid{

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

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.countdown-grid{

grid-template-columns:1fr;

}

.event-buttons{

flex-direction:column;

}

.thankyou-section h2{

font-size:34px;

}

footer h3{

font-size:28px;

}

}

@media(max-width:480px){

.count-box span{

font-size:42px;

}

.event-card{

padding:30px 20px;

}

.gallery-grid img{

height:240px;

}

}
#flowerCanvas{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

z-index:0;

}

#spotlight{

position:fixed;

width:300px;

height:300px;

border-radius:50%;

pointer-events:none;

transform:translate(-50%,-50%);

background:radial-gradient(circle,

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

transparent 70%);

filter:blur(10px);

z-index:2;

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

#lightbox{

position:fixed;

inset:0;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999999;

}

#lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox-image{

max-width:90%;

max-height:85vh;

border-radius:16px;

}

.lightbox-close,

.lightbox-prev,

.lightbox-next{

position:absolute;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#D4AF37;

cursor:pointer;

font-size:20px;

}

.lightbox-close{

top:30px;

right:30px;

}

.lightbox-prev{

left:40px;

}

.lightbox-next{

right:40px;

}