body{
margin:0;
font-family:'Tiro Devanagari Hindi';
background:linear-gradient(145deg,#3d1f00,#6e3b00,#2a1300);
color:#fff;
text-align:center;
}

.overlay{
position:fixed;
width:100%;
height:100%;
background:#000;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:10;
}

.loader{display:none;padding-top:25%;}

.gold-btn{
background:linear-gradient(45deg,#FFD700,#ffb700);
color:#000;
padding:14px 30px;
border-radius:40px;
font-weight:bold;
text-decoration:none;
box-shadow:0 0 25px gold;
margin-top:20px;
}

.card{
display:none;
max-width:850px;
margin:20px auto;
padding:30px;
border-radius:20px;
background:linear-gradient(145deg,#5c2e00,#3b1d00);
box-shadow:
0 0 30px rgba(255,215,0,.6),
inset 0 0 20px rgba(255,215,0,.3);
animation:fade 1.5s;
}

@keyframes fade{
from{opacity:0;transform:translateY(40px);}
}

.top-mantra{
font-size:14px;
color:#FFD700;
}

.couple{
font-family:'Great Vibes';
font-size:55px;
color:#FFD700;
text-shadow:0 0 25px gold;
}

.subtitle{
color:#FFD700;
}

.event{
background:#3a1b00;
margin:15px;
padding:15px;
border-left:6px solid gold;
border-radius:10px;
box-shadow:0 0 10px #000;
}

.location{
margin:25px;
font-size:20px;
color:#FFD700;
}

.family{
background:#2a1400;
margin:15px;
padding:15px;
border-radius:10px;
}

.route{
height:8px;
background:#333;
border-radius:10px;
margin:20px;
}

.barat{
height:100%;
width:0%;
background:gold;
animation:move 12s linear infinite;
}

@keyframes move{
from{width:0;}
to{width:100%;}
}

.route-text{
color:#FFD700;
font-weight:bold;
}

@media(max-width:600px){
.couple{font-size:40px;}
}
/* COUPLE ENTRY */

.entryScene{
display:none;
position:fixed;
width:100%;
height:100%;
background:black;
z-index:9;
overflow:hidden;
}

.groom{
position:absolute;
left:-200px;
bottom:0;
height:300px;
animation:groomWalk 4s forwards;
}

.bride{
position:absolute;
right:-200px;
bottom:0;
height:300px;
animation:brideWalk 4s forwards;
}

@keyframes groomWalk{
to{left:35%;}
}

@keyframes brideWalk{
to{right:35%;}
}
.flower{
position:fixed;
top:-40px;
font-size:24px;
pointer-events:none;
animation:fall linear forwards;
}

@keyframes fall{
to{
transform:translateY(110vh) rotate(360deg);
}
}
td {
    color: #333 !important; /* गहरा काला या ग्रे रंग */
    padding: 10px;
    border: 1px solid #ccc;
}
/* एंट्री सीन कंटेनर */
.entryScene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* डार्क बैकग्राउंड ताकि फोटो चमके */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* फोटो को नीचे रखने के लिए */
    align-items: center;
    padding-bottom: 80px; /* नीचे से गैप */
    z-index: 9999;
    overflow: hidden;
}

/* फोटो का मुख्य डिब्बा */
.couple-slide-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0; /* दोनों फोटो को आपस में जोड़ने के लिए */
    width: 100%;
    max-width: 400px;
}

/* दूल्हा और दुल्हन की फोटो की सेटिंग */
.groom-slide, .bride-slide {
    width: 180px; /* फोन पर सही दिखने के लिए साइज़ */
    height: auto;
    object-fit: contain; /* फोटो का अनुपात बिगड़ेगा नहीं */
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); /* हल्का गोल्डन ग्लो */
}

/* दूल्हा बाएं से आएगा */
.groom-slide {
    transform: translateX(-150%);
    animation: slideInGroom 1.5s forwards ease-out;
}

/* दुल्हन दाएं से आएगी */
.bride-slide {
    transform: translateX(150%);
    animation: slideInBride 1.5s forwards ease-out;
}

/* टेक्स्ट स्टाइल */
.wedding-text {
    color: #D4AF37;
    font-size: 2rem;
    margin-top: 20px;
    text-shadow: 2px 2px 10px #000;
    opacity: 0;
    animation: fadeInText 1s 1.5s forwards;
}

/* एनीमेशन लॉजिक */
@keyframes slideInGroom {
    to { transform: translateX(10px); } /* हल्का ओवरलैप ताकि गैप न रहे */
}
@keyframes slideInBride {
    to { transform: translateX(-10px); }
}
@keyframes fadeInText {
    to { opacity: 1; transform: translateY(-10px); }
}

/* छोटे फोन के लिए सुधार */
@media (max-width: 380px) {
    .groom-slide, .bride-slide {
        width: 140px;
    }
}
footer a {
    transition: 0.3s;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

footer a:hover {
    color: #25D366; /* व्हाट्सएप का हरा रंग */
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
}