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

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

body{
    font-family:'Poppins',sans-serif;
    background:linear-gradient(135deg,#fff8ef,#f7ead6);
    overflow-x:hidden;
    min-height:100vh;
    color:#333;
}

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

#loader{
    position:fixed;
    inset:0;
    background:#fff8ef;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.loader-box{
    text-align:center;
}

.loader-box h1{
    font-family:'Noto Serif Devanagari',serif;
    color:#b8860b;
    font-size:40px;
}

.loader-box p{
    margin-top:12px;
    color:#666;
}

/* ==========================
LANDING
========================== */

#landing{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
}

.logo img{
    width:90px;
    margin-bottom:20px;
}

#landing h2{
    font-family:'Cinzel',serif;
    color:#8b6b18;
    margin-bottom:10px;
}

#landing p{
    color:#666;
    margin-bottom:40px;
}

/* ==========================
ENVELOPE
========================== */

#envelope{
    position: relative;
    width: 360px;
    height: 240px;
    z-index: 10;
}
.back{
    position:absolute;
    width:100%;
    height:100%;
    background:#f2dfbf;
    border-radius:8px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.letter{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:90%;
    height:200px;
    background:#fffdf9;
    border-radius:8px;
    transition:1.1s;
    z-index:2;
}

.letter-inner{
    padding:30px;
    text-align:center;
}

.letter-inner h3{
    color:#b8860b;
    margin-bottom:15px;
}

.left,
.right,
.bottom,
.flap{
    position:absolute;
}

.left{
    border-top:120px solid transparent;
    border-bottom:120px solid transparent;
    border-left:180px solid #e6cfa7;
    left:0;
    z-index:3;
}

.right{
    border-top:120px solid transparent;
    border-bottom:120px solid transparent;
    border-right:180px solid #e6cfa7;
    right:0;
    z-index:3;
}

.bottom{
    width:100%;
    height:120px;
    background:#ead6b3;
    bottom:0;
    z-index:4;
}

.flap{
    width:100%;
    height:120px;
    background:#efdcb9;
    top:0;
    clip-path:polygon(0 0,100% 0,50% 100%);
    transform-origin:top;
    transition:1s;
    z-index:5;
    pointer-events: none;
}

/* ==========================
SEAL
========================== */

#seal{
    position:relative;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:120px;
    height:120px;
    border-radius:50%;
    background:#b8860b;
    border:4px solid #c99714;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    pointer-events: auto;
    z-index:99999;
    transition:.4s;
   box-shadow:
0 16px 35px rgba(0,0,0,.22),
0 0 18px rgba(212,175,55,.20);
}

#seal img{


    width:108px;
    height:108px;

    border-radius:50%;

    object-fit:cover;

    background:#fff;

    padding:0;

    display:block;

}
#sealLogo{

transition:.45s ease;

}
#seal:hover{
    transform:translate(-50%,-50%) scale(1.08);
}
/* ==========================
OPEN ANIMATION
========================== */

#flash{
    position:fixed;
    inset:0;
    background:radial-gradient(circle,
    rgba(255,255,255,.95),
    rgba(255,235,180,.85),
    rgba(255,255,255,0));
    opacity:0;
    pointer-events:none;
    transition:.5s;
    z-index:9998;
}

#flash.show{
    opacity:1;
}

#seal.hide{
    opacity:0;
    transform:translate(-50%,-50%) scale(.3);
}

#envelope.open .flap{
    transform:rotateX(180deg);
}

#envelope.open .letter{
    transform:translate(-50%,-120px);
}

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

.invitation-card{

    position: fixed;
    inset: 0;

    display: none;

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

    width: 100%;
    height: 100vh;

    padding: 40px 20px 80px;
    overflow-y: auto;

    opacity: 0;

    transform: translateY(40px) scale(0.95);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);

    z-index:1000;

}

.invitation-card.show{

    display:flex;

    opacity:1;

    transform:translateY(0) scale(1);

}
.card{
    width:100%;
    max-width:700px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    border:2px solid rgba(255,255,255,.9);
    border-radius:25px;
    padding:60px 50px;
    text-align:center;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18),
        0 0 25px rgba(212,175,55,.15);
    transition:
    transform .45s ease,
    box-shadow .45s ease;

    position:relative;
    isolation:isolate;
    overflow:hidden;
}
.card:hover{

    transform:translateY(-4px);

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

}
.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #d4af37,
        #f7e8a4,
        #d4af37
    );
}
.card::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #d4af37,
        #f7e8a4,
        #d4af37
    );
}
/* ==========================
INNER GOLD FRAME
========================== */

.card::before,
.card::after{

pointer-events:none;

}

.card .inner-frame{

position:absolute;

inset:18px;

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

border-radius:18px;

pointer-events:none;

}
.card h1{

font-size:62px;

font-weight:700;

color:#b8860b;

letter-spacing:1px;

margin:20px 0;
    text-shadow:
0 2px 8px rgba(212,175,55,.30);

}
.card h2{
    color:#b8860b;
    margin:25px 0 15px;
}
.invite-text{

font-size:21px;

line-height:2;

color:#555;

font-family:'Cinzel',serif;

font-weight:500;

letter-spacing:.5px;

margin:30px 0 40px;

}
.card h4{

font-size:18px;

letter-spacing:1px;

margin-top:12px;

margin-bottom:22px;

color:#8b6508;

font-family:'Noto Serif Devanagari',serif;

}

.card p{

    font-size:20px;

    color:#555;

    line-height:1.45;

    margin:8px 0;

}
.divider{

position:relative;

width:180px;

height:2px;

margin:40px auto;

background:linear-gradient(
90deg,
transparent,
#d4af37,
transparent);

}

.divider{

position:relative;

width:180px;

height:2px;

margin:40px auto;

background:linear-gradient(
90deg,
transparent,
#d4af37,
transparent);

}

.divider{

display:flex;

align-items:center;

justify-content:center;

margin:40px auto;

}

.divider::before,
.divider::after{

content:"";

width:85px;

height:2px;

background:linear-gradient(
90deg,
transparent,
#d4af37,
transparent);

}

.divider span{

margin:0 15px;

font-size:18px;

color:#d4af37;

text-shadow:0 0 8px rgba(212,175,55,.25);

}
@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:768px){

#envelope{

width:300px;

height:200px;

}

.left{

border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-left:150px solid #e6cfa7;

}

.right{
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
    border-right:150px solid #e6cfa7;

    position:absolute;
    right:0;
    z-index:1;
    pointer-events:none;
}
.bottom{

height:100px;

}

.flap{

height:100px;

}

.loader-box h1{

font-size:28px;

}
/* ==========================
MOBILE CARD
========================== */

.invitation-card{

    padding:25px 12px;

    align-items:flex-start;

    overflow-y:auto;

}

.card{

    width:100%;

    max-width:420px;

    margin:20px auto 40px;

    padding:35px 22px;

}

/* Typography */

.card h1{

    font-size:34px;

}

.card h2{

    font-size:24px;

}

.card h3{

    font-size:20px;

}

.card h4{

    font-size:16px;

}

.card p{

    font-size:16px;

    line-height:1.5;

}

/* Countdown */

.countdown{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

    margin:28px 0;

}
.time-box{

    width:70px;

    height:70px;

}

.time-box .number{

    font-size:22px;

}

.time-box small{

    font-size:11px;

}

/* Floral corners */

.corner{

    width:55px;

}

.top-center{

    width:90px;

}

/* Music Button */

#musicBtn{

    width:46px;

    height:46px;

    font-size:20px;

    right:15px;

    bottom:15px;

}
}
/* ==========================
FLOATING PETALS
========================== */

#petals{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.petal{
    position:absolute;
    top:-80px;

    width:18px;
    height:28px;

    background:linear-gradient(
        145deg,
        #ffccd8,
        #ff8ca5,
        #ff5c8a
    );

    border-radius:60% 40% 70% 30%;

    opacity:.92;

    filter:drop-shadow(0 3px 6px rgba(0,0,0,.12));

    animation:fall linear infinite;
}
@keyframes fall{

0%{

transform:
translateY(-80px)
translateX(0)
rotate(0deg);

}

25%{

transform:
translateY(30vh)
translateX(20px)
rotate(120deg);

}

50%{

transform:
translateY(60vh)
translateX(-20px)
rotate(260deg);

}

75%{

transform:
translateY(90vh)
translateX(25px)
rotate(430deg);

}

100%{

transform:
translateY(120vh)
translateX(-10px)
rotate(720deg);

}

}
/* ==========================
GOLDEN SPARKLES
========================== */

#sparkles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    overflow:hidden;
}

.sparkle{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;

    background:#ffd700;

    box-shadow:
        0 0 8px #ffd700,
        0 0 18px #fff2a8;

    animation:sparkleFloat linear forwards;
}

@keyframes sparkleFloat{

0%{
    opacity:0;
    transform:translateY(0) scale(.3);
}

20%{
    opacity:1;
}

100%{
    opacity:0;
    transform:translateY(-140px) scale(1.6);
}

}
/* ==========================
ROYAL LIGHT RAYS
========================== */

#light-rays{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.ray{

position:absolute;

width:220px;

height:900px;

background:linear-gradient(

to bottom,

rgba(255,255,255,0),

rgba(255,230,160,.18),

rgba(255,255,255,0)

);

filter:blur(18px);

transform:rotate(25deg);

animation:rayMove 16s linear infinite;

}

@keyframes rayMove{

0%{

transform:
translateX(-250px)
translateY(-200px)
rotate(25deg);

}

100%{

transform:
translateX(1800px)
translateY(300px)
rotate(25deg);

}

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

#musicBtn{

position:fixed;

right:25px;

bottom:25px;

width:58px;

height:58px;

border:none;

border-radius:50%;

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

backdrop-filter:blur(12px);

box-shadow:
0 8px 25px rgba(0,0,0,.18);

font-size:24px;

cursor:pointer;

z-index:5000;

transition:.30s;

}

#musicBtn:hover{

transform:scale(1.08);

background:#fff;

}
/* ==========================
ROYAL CORNERS
========================== */

.tr{

top:18px;
right:18px;

border-left:none;
border-bottom:none;

border-radius:0 20px 0 0;

}

.bl{

bottom:18px;
left:18px;

border-right:none;
border-top:none;

border-radius:0 0 0 20px;

}

.br{

bottom:18px;
right:18px;

border-left:none;
border-top:none;

border-radius:0 0 20px 0;

}
/* ==========================
ROYAL BORDER GLOW
========================== */

.card{

animation:borderGlow 4s ease-in-out infinite;

}

@keyframes borderGlow{

0%{

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

}

50%{

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

}

100%{

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

}

}
/* ==========================
ROYAL FLORAL CORNERS
========================== */

/* ==========================
ROYAL FLORAL CORNERS
========================== */

.corner-png{

position:absolute;

width:115px;

pointer-events:none;

z-index:5;

opacity:.95;

filter:drop-shadow(0 2px 10px rgba(212,175,55,.25));

}

.corner-png.tl{

top:15px;

left:15px;

}

.corner-png.tr{

top:15px;

right:15px;

transform:scaleX(-1);

}

.corner-png.bl{

bottom:15px;

left:15px;

transform:scaleY(-1);

}

.corner-png.br{

bottom:15px;

right:15px;

transform:scale(-1);

}
@keyframes vineGlow{

0%{

opacity:.75;

transform:scale(1);

}

50%{

opacity:1;

transform:scale(1.08);

}

100%{

opacity:.75;

transform:scale(1);

}

}
/* ==========================
GOLD DUST
========================== */

.goldDust{

position:fixed;

width:4px;

height:4px;

background:#ffd700;

border-radius:50%;

opacity:.7;

pointer-events:none;

box-shadow:
0 0 8px #ffd700;

animation:dustFloat linear forwards;

}

@keyframes dustFloat{

0%{

transform:
translateY(0)
scale(.4);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:
translateY(-160px)
scale(1.3);

opacity:0;

}

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

#countdown{

margin:35px 0;

}

#countdown h3{

font-family:'Cinzel',serif;

color:#b8860b;

margin-bottom:20px;

}

.count-grid{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.time-box{

width:95px;

padding:20px 10px;

background:linear-gradient(
180deg,
rgba(255,255,255,.98),
rgba(250,246,235,.96)
);

border:1.5px solid #d4af37;

border-radius:18px;

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

backdrop-filter:blur(8px);

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

overflow:hidden;

position:relative;

}

.time-box:hover{

transform:translateY(-6px);

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

}
.time-box span{

display:block;

font-size:38px;

font-weight:700;

line-height:1;

letter-spacing:1px;

color:#b8860b;

text-shadow:
0 2px 4px rgba(0,0,0,.08),
0 0 10px rgba(212,175,55,.22);

font-variant-numeric:tabular-nums;

margin-bottom:8px;

}

.time-box small{

color:#7a6a45;

font-size:12px;

font-weight:600;

letter-spacing:1.4px;

text-transform:uppercase;

display:block;

margin-top:6px;

opacity:.9;

}
/* ==========================
PREMIUM VENUE CARD
========================== */

.venue-card{

width:80%;
max-width:520px;

margin:40px auto;

padding:35px;

display:block;

background:linear-gradient(
180deg,
rgba(255,255,255,.55),
rgba(255,248,235,.75)
);

backdrop-filter:blur(12px);

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

border-radius:22px;

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

text-align:center;

transition:.35s;

clear:both;

}
.venue-card:hover{

transform:translateY(-4px);

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

}

.venue-card h3{

font-family:'Cinzel',serif;

font-size:22px;

color:#b8860b;

margin-bottom:15px;

}

.venue-card p{

font-size:18px;

line-height:1.8;

margin-bottom:20px;

}

.map-btn{

display:inline-block;

padding:14px 30px;

background:linear-gradient(135deg,#c99a18,#f0cb63);

color:white;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.35s;

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

}

.map-btn:hover{

transform:translateY(-3px) scale(1.05);

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

}

/*==========================
TOP BLESSING
==========================*/

.top-blessing{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

margin-top:10px;

margin-bottom:12px;

}

.ganesh-icon{

font-size:34px;

color:#c4941b;

filter:drop-shadow(0 3px 6px rgba(212,175,55,.35));

}

.ornament-line{

width:90px;

height:2px;

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

position:relative;

}

.ornament-line::before{

content:"";

position:absolute;

width:8px;

height:8px;

border:2px solid #d4af37;

border-radius:50%;

top:-4px;

left:50%;

transform:translateX(-50%);

background:#fffdf8;

}
/*==========================
ROYAL DIVIDER
==========================*/

.divider{

display:flex;

align-items:center;

justify-content:center;

margin:38px auto;

width:100%;

}

.divider::before,
.divider::after{

content:"";

height:1px;

flex:1;

max-width:220px;

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

}

.divider::before{

margin-right:15px;

}

.divider::after{

margin-left:15px;

}

.divider::after,
.divider::before{

opacity:.8;

}

.divider{

position:relative;

}

.divider::marker{

display:none;

}
/*==========================
HOSTED BY SECTION
==========================*/

.hosted-section{

margin:35px auto;

text-align:center;
    margin-bottom:40px;

}

.host-title{

font-size:18px;

font-weight:700;

letter-spacing:2px;

color:#b8860b;

margin-bottom:20px;

}

.host-grid{

display:flex;

justify-content:center;

align-items:stretch;

gap:25px;

flex-wrap:wrap;

}

.host-box{

width:230px;

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

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

border-radius:18px;

padding:22px 18px;

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

backdrop-filter:blur(8px);

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

}

.host-icon{

font-size:28px;

margin-bottom:10px;

}

.host-box h4{

margin:8px 0 14px;

color:#b8860b;

font-size:17px;

letter-spacing:1px;

}

.host-box p{

line-height:1.8;

font-size:15px;

color:#555;

margin:0;

}

.host-divider{

width:2px;

background:linear-gradient(

to bottom,

transparent,

#d4af37,

transparent

);

}
.hero-header{

text-align:center;

margin-bottom:30px;

}

.hero-ornament{

font-size:18px;

letter-spacing:10px;

color:#d4af37;

margin-bottom:8px;

opacity:.9;

}

.ganesh-symbol{

font-size:42px;

margin-bottom:10px;

filter:drop-shadow(0 3px 8px rgba(212,175,55,.35));

}

.hero-header h4{

font-size:17px;

color:#7d4b00;

letter-spacing:1px;

margin-bottom:18px;

}

.hero-header h1{

font-family:'Cinzel',serif;

font-size:64px;

font-weight:700;

color:#b8860b;

text-shadow:
0 2px 4px rgba(0,0,0,.08);

margin-bottom:15px;

}

.heart{

display:inline-block;

color:#d4af37;

margin:0 8px;

font-size:.9em;

filter:
drop-shadow(0 0 4px rgba(255,80,80,.35))
drop-shadow(0 0 10px rgba(255,60,60,.25));

animation:heartBeat 3s ease-in-out infinite;

transform-origin:center;

}
@keyframes heartBeat{

0%{

transform:scale(1);

}

8%{

transform:scale(1.18);

}

16%{

transform:scale(1);

}

24%{

transform:scale(1.12);

}

32%{

transform:scale(1);

}

100%{

transform:scale(1);

}

}
.hero-divider{

font-size:22px;

color:#d4af37;

letter-spacing:6px;

margin-top:10px;

}
@keyframes heartbeat{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

}
/* ===========================
   GANESH ICON
=========================== */

.ganesh-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:12px;
}

.ganesh-icon img{

    width:60px;

    height:auto;

    display:block;

    filter:
        drop-shadow(0 2px 6px rgba(212,175,55,.35));

    transition:.3s ease;

}

.ganesh-icon img:hover{

    transform:scale(1.05);

}
/*==========================
EVENT DETAILS
==========================*/

.event-details{

margin:35px 0;

}

.event-box{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.event-item{

padding:14px 20px;

min-width:140px;

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

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

border-radius:14px;

text-align:center;

}

.label{

display:block;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

color:#9b7a19;

margin-bottom:5px;

}

.value{

font-size:18px;

font-weight:600;

color:#5d4300;

}
.lawn-tag{

display:inline-block;

padding:6px 16px;

margin-bottom:8px;

background:linear-gradient(135deg,#d4af37,#f5dc84);

color:#5a3c00;

font-weight:700;

font-size:15px;

border-radius:20px;

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

letter-spacing:.5px;

}
.footer{

font-size:20px;

line-height:1.9;

color:#6d4d00;

text-align:center;

margin:40px auto;

max-width:620px;

}

.footer-love{

display:block;

margin-top:15px;

font-family:'Cinzel',serif;

font-size:22px;

font-weight:600;

color:#b8860b;

letter-spacing:1px;

}
/*==========================
SECTION REVEAL
==========================*/

.reveal{

opacity:0;

transform:translateY(30px);

animation:fadeReveal .8s ease forwards;

}

.hero-header{

animation-delay:.2s;

}

.event-details{

animation-delay:.5s;

}

.hosted-section{

animation-delay:.8s;

}

.venue-card{

animation-delay:1.1s;

}

.footer{

animation-delay:1.4s;

}

#countdown{

animation-delay:1.7s;

}

@keyframes fadeReveal{

to{

opacity:1;

transform:translateY(0);

}

}
.top-center{

position:absolute;

top:18px;

left:50%;

transform:translateX(-50%);

width:140px;

height:32px;

background:url("assets/images/floral-corner.png") center/contain no-repeat;

opacity:.95;

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

}
/* ==========================
COUNTDOWN CHANGE ANIMATION
========================== */

.time-box .number{

    display:inline-block;

    transition:all .35s ease;

}

.time-box.animate .number{

    transform:translateY(-8px);

    opacity:0;

}

.time-box.show .number{

    transform:translateY(0);

    opacity:1;

}
/* ==========================
COUNTDOWN NUMBER ANIMATION
========================== */

.number{

    display:inline-block;

    transition:
        transform .35s ease,
        opacity .35s ease;

}

.number.change{

    transform:translateY(-10px);

    opacity:0;

}
/* ==========================
INSTALL POPUP
========================== */

.install-popup{

position:fixed;

left:0;
right:0;
bottom:20px;

display:none;

justify-content:center;

z-index:9999;

padding:0 20px;

}

.install-box{

max-width:420px;

width:100%;

background:#fffdf8;

border:1px solid #d4af37;

border-radius:18px;

padding:20px;

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

text-align:center;

}

.install-box h3{

margin-bottom:10px;

color:#b8860b;

}

.install-box p{

font-size:15px;

line-height:1.6;

margin-bottom:18px;

}

.install-buttons{

display:flex;

justify-content:center;

gap:12px;

}

.install-buttons button{

border:none;

padding:10px 18px;

border-radius:10px;

cursor:pointer;

font-weight:600;

}

#installBtn{

background:#b8860b;

color:white;

}

#closeInstall{

background:#ececec;

}