/* DHANSHREE ORNAMENT JEWELLERY PREMIUM CSS */

html{
scroll-behavior:smooth;
}

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

body{
background:linear-gradient(#000,#111,#000);
color:#fff;
line-height:1.6;
}


/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:#111;
border-bottom:2px solid #d4af37;
position:sticky;
top:0;
z-index:1000;
}


.logo h2{
color:#d4af37;
font-size:28px;
letter-spacing:1px;
}


/* NAVIGATION */

nav a{
color:#fff;
text-decoration:none;
margin-left:25px;
font-weight:600;
transition:.3s;
position:relative;
}


nav a:hover{
color:#d4af37;
}


nav a:after{
content:'';
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#d4af37;
transition:.3s;
}


nav a:hover:after{
width:100%;
}


/* HERO */

.hero{

min-height:90vh;

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

text-align:center;

padding:40px;

background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),
url("assets/images/banner.jpg") center/cover;

}


.hero-content{

animation:fadeUp 1.2s ease;

}


@keyframes fadeUp{

from{
opacity:0;
transform:translateY(50px);
}

to{
opacity:1;
transform:translateY(0);
}

}



.hero h1{

font-size:55px;

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

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


.hero p{

margin:20px 0;

font-size:20px;

}


/* BUTTON */

.btn{

display:inline-block;

padding:15px 35px;

background:#d4af37;

color:#000;

text-decoration:none;

border-radius:50px;

font-weight:700;

transition:.3s;

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

}


.btn:hover{

background:#fff;

transform:scale(1.08);

}



/* SECTIONS */

section{

padding:70px 8%;

}


section h2{

text-align:center;

color:#d4af37;

font-size:32px;

margin-bottom:35px;

}



/* PRODUCT GRID */

.products{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}



.card{

background:#111;

border:1px solid #d4af37;

border-radius:15px;

overflow:hidden;

transition:.4s;

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

}



.card:hover{

transform:translateY(-10px);

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

}



.card img{

width:100%;

height:300px;

object-fit:cover;

}



.card h3{

color:#d4af37;

text-align:center;

margin:15px 0 5px;

font-size:22px;

}



.card p{

text-align:center;

font-size:20px;

font-weight:bold;

margin-bottom:20px;

}



/* ABOUT & CONTACT */

#about,#contact{

text-align:center;

font-size:18px;

}



/* FOOTER */

footer{

background:#111;

border-top:2px solid #d4af37;

text-align:center;

padding:25px;

color:#ddd;

}



/* SCROLL BAR */

::-webkit-scrollbar{

width:10px;

}


::-webkit-scrollbar-thumb{

background:#d4af37;

border-radius:10px;

}


::-webkit-scrollbar-track{

background:#111;

}



/* MOBILE DESIGN */

@media(max-width:768px){

header{

flex-direction:column;

gap:15px;

}


.logo h2{

font-size:20px;

text-align:center;

}


nav{

display:flex;

flex-wrap:wrap;

justify-content:center;

}


nav a{

margin:8px;

font-size:14px;

}


.hero h1{

font-size:34px;

}


.hero p{

font-size:16px;

}


.card img{

height:250px;

}

}