*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',Arial,sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:#f7faf7;
    color:#222;

}


/* =====================
ANNIVERSARY POPUP
===================== */


.welcome{

    position:fixed;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.75);

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

    z-index:5000;

}


.welcome-box{

    width:500px;
    max-width:90%;

    text-align:center;

    padding:45px;

    border-radius:30px;

    background:
    linear-gradient(135deg,#ffd700,#ff8c00);

    color:white;

    box-shadow:
    0 0 50px gold;

    animation:popup 1s;

}


.welcome-box h1{

    font-size:45px;

}


.welcome-box h2{

    margin:20px 0;

}



.welcome-box button{

    margin-top:25px;

    padding:15px 40px;

    border:none;

    border-radius:30px;

    background:white;

    color:#008000;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

}



@keyframes popup{

from{

transform:scale(0);

}


to{

transform:scale(1);

}

}






/* =====================
HEADER
===================== */


header{

    background:white;

    color:#222;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 7%;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:0 3px 15px rgba(0,0,0,0.15);

}



.logo{

display:flex;

align-items:center;

gap:15px;

}


.logo img{

width:120px;
height:100px;

object-fit:contain;

background:transparent;

filter:
drop-shadow(0 0 8px white);

}


.logo h2{

font-size:24px;

color:#007f3f;

font-weight:700;

}




nav{

display:flex;

align-items:center;

gap:20px;

}



nav a{

color:#004d40;

text-decoration:none;

font-weight:600;

font-size:16px;

}


nav a:hover{

color:#ff9800;

}


nav a:hover{

color:#ffd700;

}



nav button{

background:#007f3f;

color:white;

border:none;

padding:12px 22px;

border-radius:30px;

cursor:pointer;

font-weight:bold;

}







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


.hero{

height:90vh;

background:

linear-gradient(
rgba(0,40,40,.65),
rgba(0,40,40,.65)
),

url("images/banner.jpeg");


background-size:cover;

background-position:center;

display:flex;

align-items:center;

padding-left:8%;

color:white;

}



.hero-content{

max-width:700px;

}



.award{

display:inline-block;

background:#ffd700;

color:#222;

padding:12px 25px;

border-radius:30px;

font-weight:bold;

margin-bottom:20px;

}



.hero h1{

font-size:65px;

line-height:1.2;

}



.hero p{

font-size:22px;

margin:25px 0;

}



.hero a{

display:inline-block;

background:#ffd700;

color:#222;

padding:15px 35px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

}







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


section{

padding:70px 8%;

text-align:center;

}



section h1{

font-size:40px;

color:#007f3f;

margin-bottom:35px;

}



section p{

font-size:18px;

line-height:1.8;

}





/* =====================
PRODUCTS
===================== */


.products{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.category-title{

margin:50px 0 30px;

color:#004d40;

font-size:32px;

}



.card{

width:320px;

background:white;

padding:25px;

border-radius:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.15);

transition:.4s;

}



.card:hover{

transform:translateY(-12px);

box-shadow:

0 20px 40px rgba(0,0,0,.25);

}



.card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:20px;

}



.card h3{

margin:20px 0;

color:#007f3f;

}



.card p{

font-size:16px;

}



.card button{

margin-top:15px;

background:#008000;

color:white;

border:none;

padding:12px 25px;

border-radius:25px;

cursor:pointer;

font-weight:bold;

}



.card button:hover{

background:#004d00;

}







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


.gallery{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}



.gallery img{

width:300px;

height:220px;

object-fit:cover;

border-radius:25px;

box-shadow:

0 10px 25px #0003;

}





/* =====================
CART
===================== */


.cart{

position:fixed;

right:25px;

top:100px;

width:350px;

background:white;

padding:25px;

border-radius:25px;

box-shadow:

0 15px 40px #0005;

display:none;

z-index:3000;

}



.cart li{

margin:10px;

}



.cart button{

background:#008000;

color:white;

border:none;

padding:12px 25px;

border-radius:20px;

margin:10px;

cursor:pointer;

}






/* =====================
PAYMENT
===================== */


.qr{

width:260px;

height:260px;

object-fit:contain;

border-radius:20px;

box-shadow:

0 10px 25px #0003;

}







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


footer{

background:#002b36;

color:white;

text-align:center;

padding:40px;

}







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


@media(max-width:900px){


header{

flex-direction:column;

gap:20px;

}



nav{

flex-wrap:wrap;

justify-content:center;

}



.hero h1{

font-size:40px;

}



.highlights{

flex-direction:column;

}



.card{

width:90%;

}



}