:root{
--cream:#FDF8F3;
--rose:#e18de3 ;
--gold:#b57a04;
--dark:#3A3A3A;
--light:#ffffff;
--back:#fdf9ee;
--red:#ff2200;

}
body{
margin:0;
background:var(--cream);
color:var(--dark);
font-family:'Montserrat', sans-serif;
overflow-x:hidden;
}

/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 60px;
background:var(--back);
border-bottom:1px solid #eee;
position:sticky;
top:0;
z-index:1000;
}


nav ul{
display:flex;
list-style:none;
gap:35px;
margin:0;
padding:0;
align-items:center;
}

nav a{
text-decoration:none;
font-size:14px;
letter-spacing:1px;
color:var(--dark);
text-transform:uppercase;
}

nav a:hover{
color:var(--rose);
}
/*for mobile responsiveness */
@media (max-width:768px){
header{
flex-direction:column;
align-items:center;
padding:15px 20px;
}

nav ul{
flex-direction:column;
gap:10px;
margin-top:10px;
}
}

/* LOGO */
.logo{
display:flex;
align-items:center;
justify-content:center;
}

.logo img{
height:75px;
width:auto;
object-fit:contain;
}
/*for mobile responsiveness */
@media (max-width:768px){
.logo img{
height:40px;
}
}

/* HAMBURGER */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* MOBILE NAV */

@media (max-width:768px){

.menu-toggle{
display:block;
position:absolute;
right:20px;
top:15px;
}

nav{
width:100%;
display:none;
}

nav.active{
display:block;
}

nav ul{
flex-direction:column;
align-items:center;
gap:15px;
margin-top:15px;
}

header{
flex-direction:row;
justify-content:space-between;
}

}

@media (max-width:768px){

#nav-menu{
display:none;
position:absolute;
top:60px;
left:0;
width:100%;
background:white;
}

#nav-menu.active{
display:block;
}

#nav-menu ul{
flex-direction:column;
text-align:center;
}

}

/* HERO */
/*invocation section */
.invocation{
text-align:center;
margin-bottom:10px;
color:var(--gold);
padding-top:30px;
}
.ganesha{
width:55px;
margin:8px 0 12px 0;
}
.shloka{
font-size:18px;
line-height:1.6;
font-family:'Cormorant Garamond', serif;
margin-bottom:10px;
margin-top:2px;
}
.invitors{
font-size:10px;
font-family:'Montserrat', sans-serif;
opacity:0.9;
}

@media (max-width:768px){
.ganesha{
width:40px;
}
.shloka{
font-size:12px;
margin-top:3px ;
}
.invitors{
max-width:600px;
margin:auto;
font-size:10px;
}
.invitors1{
max-width:600px;
margin:auto;
font-size:9px;
}
}



.hero{
height:85vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background:linear-gradient(rgba(255,255,255,0.85),rgba(255,255,255,0.85)),
url("assets/logo1.JPG");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
animation: heroZoom 25s ease-in-out infinite alternate;
padding:20px 20px;
}

.hero h1{
font-family:'Great Vibes', cursive;
font-size:clamp(28px, 7vw, 70px);
color:var(--rose);
margin:0;
white-space: normal;
line-height:1.2;
}
@media (max-width:600px){
.hero h1{
font-size:22px;
}
}
@media (max-width:600px){
.hero{
height:auto;
padding:60px 20px;
}
}

.hero h2{
font-family:'Cormorant Garamond', serif;
font-size:28px;
letter-spacing:3px;
margin-top:1px;
margin-bottom:3px ;
}

@keyframes heroZoom{
0%{
background-size:100%;
}
100%{
background-size:110%;
}
}

.hero strong{
font-size:16px;
display:block;
margin-top:4px;
}
.wedding-day{
font-family:'Cormorant Garamond', serif;
font-size:18px;
letter-spacing:2px;
margin-top:1px;
color:var(--gold);
}

/*for mobile responsiveness */
@media (max-width:768px){
.hero h1{
font-size:38px;
}
.hero h2{
font-size:26px;
margin-top:10px;
}
}
@media (max-width:768px){
.hero{
animation: heroZoomMobile 30s ease-in-out infinite alternate;
}
}
@keyframes heroZoomMobile{
0%{
background-size:110%;
}
100%{
background-size:120%;
}
}
@media (max-width:600px){
.hero strong{
font-size:9px;
}
}

/* SECTIONS */
section{
padding:80px 15%;
text-align:center;
}
section h2{
font-family:'Cormorant Garamond', serif;
font-size:40px;
color:var(--gold);
margin-bottom:40px;
}

/* TIMELINE */
.timeline{
max-width:600px;
margin:auto;
text-align:left;
}
/*
.timeline li{
padding:12px 0;
border-bottom:0.5px solid #eee;
}
*/
.timeline{
list-style: none;
padding: 0;
max-width: 400px;
margin: auto;
position: relative;
}
.timeline li{
position: relative;
padding: 12px 0 12px 30px;
font-size: 16px;
color: #444;
}

/* decorative vertical line */
.timeline::before{
content: "";
position: absolute;
left: 8px;
top: 0;
width: 3px;
height: 100%;
background: #f7d2d2;
}

/* decorative dots */
.timeline li::before{
content: "";
position: absolute;
left: 2px;
top: 16px;
width: 16px;
height: 16px;
background: #f6a6a6;
border-radius: 50%;
}

/* GALLERY */
.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/*for mobile responsiveness */
@media (max-width:768px){
.gallery-grid{
grid-template-columns:repeat(1,1fr);
}
}
@media (max-width:480px){
.gallery-grid{
grid-template-columns:1fr;
}
}
.gallery-grid img{
width:100%;
border-radius:10px;
}
button{
padding:12px;
background:var(--rose);
color:white;
border:none;
cursor:pointer;
}
button:hover{
background:var(--gold);
}
#functions{
background:white;
}
#wedding{
background:#F7F1EB;
}
#gallery{
background:white;
}
#venue1,#venue2{
background:#F7F1EB;
}
#rsvp{
background:white;
}
.divider{
width:60px;
height:2px;
background:var(--rose);
margin:20px auto 40px;
}
html{
scroll-behavior:smooth;
}
nav a{
transition:0.3s;
}
.gallery-grid img:hover{
transform:scale(1.05);
transition:0.4s;
}

/*CURSOR CODES */ 
body{
cursor:url("assets/heart.png") 16 16, auto;
}
body:active{
cursor:url("assets/heart-click.png") 16 16, auto;
}
a, button{
cursor:url("assets/heart.png") 16 16, pointer;
}
a:active, button:active{
cursor:url("heart-click.png") 16 16, pointer;
}


/*Countdown Timer */
.countdown{
display:flex;
gap:30px;
margin-top:10px;
font-family:'Cormorant Garamond', serif;
}
.countdown div{
text-align:center;
}
.countdown span{
font-size:36px;
color:var(--rose);
text-shadow:0 0 10px rgba(246, 168, 168, 0.6);
font-weight:600;
}
.countdown p{
margin:0;
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;
}

/*Flower animation */
.flower{
position: fixed;
top: -40px;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 9999;
animation-name: fall;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

@keyframes fall{
0%{
transform: translateX(0px) translateY(0px) rotate(0deg);
}
25%{
transform: translateX(-40px) translateY(25vh) rotate(90deg);
}
50%{
transform: translateX(40px) translateY(50vh) rotate(180deg);
}
75%{
transform: translateX(-30px) translateY(75vh) rotate(270deg);
}
100%{
transform: translateX(30px) translateY(110vh) rotate(360deg);
}
}

footer {
    background-color: #f6a6a6;
    text-align: center;
    font-size: 10px;       
    padding: 6px 0;      
    color: #ffffff;     
    letter-spacing: 0.5px;
}

footer p {
    margin: 0;
}
footer a {
    color: white;         
    text-decoration: none; 
}

footer a:visited {
    color: white;          
}

footer a:hover {
    text-decoration: underline; 
}

@media (max-width:768px){
section{
padding:30px 20px;
}
.invocation{
padding-top:2px;
}
}
@media (max-width:768px){
.hero{
min-height:auto;
padding:20px 20px;
}
}
.on-text{
font-family:'Cormorant Garamond', serif;
font-size:18px;
margin-top:10px;
margin-bottom:0;
}
.hero h2{
margin-top:2px;
margin-bottom:3px;
}

/*Confetti launcher*/
.confetti{
position:fixed;
top:-20px;
width:12px;
height:12px;
border-radius:3px;
pointer-events:none;
z-index:9999;
animation:confettiFall linear forwards;
}

@keyframes confettiFall{
0%{
transform:translateY(0) rotate(0deg);
opacity:0.7;
}
50%{
transform:translateY(60vh) translateX(30px) rotate(360deg);
}
100%{
transform:translateY(120vh) translateX(-30px) rotate(720deg);
opacity:0;
}
}

/* Heart animation */
.heart{
position:fixed;
font-size:18px;
pointer-events:none;
animation:floatHeart 2s ease-out forwards;
}

.heart::before{
content:"❤";
color:#e9a6a6;
}
@keyframes floatHeart{
0%{
transform:translateY(0) scale(1);
opacity:1;
}
100%{
transform:translateY(-120px) scale(1.8);
opacity:0;
}
}

/* Section smooth transition */
section{
opacity:0;
transform: translateY(40px);
transition: all 1s ease;
}
section.show{
opacity:1;
transform: translateY(0);
}
.timeline li{
opacity:0;
transform:translateX(-40px);
animation:slideTimeline 1s forwards;
}
.timeline li:nth-child(1){animation-delay:0.3s;}
.timeline li:nth-child(2){animation-delay:0.6s;}
.timeline li:nth-child(3){animation-delay:0.9s;}
@keyframes slideTimeline{
to{
opacity:1;
transform:translateX(0);
}
}

/* Names fade smooth transition */
.hero h1{
opacity:0;
transform:translateY(30px);
animation:fadeUp 1.5s ease forwards;
}
.hero h1:nth-of-type(1){
animation-delay:0.4s;
}
.hero h1:nth-of-type(2){
animation-delay:0.8s;
}
@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* Ganesha glow animation */
.ganesha{
animation:ganeshaGlow 1.5s ease-in-out infinite alternate;
}
@keyframes ganeshaGlow{
from{
filter: drop-shadow(0 0 2px gold);
}
to{
filter: drop-shadow(3px 0 15px gold);
}
}

/* Lotus Animation */
.lotusSide{
position:fixed;
top:15%;
display:none;
z-index:999;
pointer-events:none;
}
#lotusLeft{
left:10%;
}
#lotusRight{
right:10%;
}
.lotusSide img{
width:60px;
max-width:30vw;
}

/* petal firework Animation */
.petalFirework{
position:fixed;
width:28px;
height:28px;
background-size:contain;
background-repeat:no-repeat;
pointer-events:none;
z-index:9999;
animation:petalBurst 3s ease-out forwards;
}

@keyframes petalBurst{
0%{
transform:translate(0,0) scale(0.5) rotate(0deg);
opacity:1;
}
100%{
transform:translate(var(--x),var(--y)) scale(1) rotate(720deg);
opacity:0;
}
}