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

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background-image:linear-gradient(
rgba(0,0,0,0.4),
rgba(0,0,0,0.4)
),
url("images/backgroundd.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

z-index:-1;

}

@media (max-width:768px){

body::before{

background-image:linear-gradient(
rgba(0,0,0,0.4),
rgba(0,0,0,0.4)
),
url("images/backgroundm.jpg");

background-size:cover;

background-position:center;

}

}
body{
animation:fadeIn 1s ease-in;
}

@keyframes fadeIn{

from{
opacity:0;
}

to{
opacity:1;
}

}
.reveal{

opacity:0;

transform:translateY(40px);

transition:all 0.8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}
/* HEADER */

header{

display:flex;
flex-direction:column;
align-items:center;

padding:25px 20px;

background:white;
color:black;

}

.logo img{

height:220px;
margin-bottom:0px;

}

nav a{

text-decoration:none;

color:black;

font-size:16px;

font-weight:bold;

padding:10px 22px;

border-radius:30px;

transition:all 0.3s ease;

border:2px solid #caa13b;

background:transparent;

}


nav a:hover{

background:#caa13b;

color:black;

transform:scale(1.08);

box-shadow:0 5px 15px rgba(0,0,0,0.2);

}


/* HERO */

.hero{

text-align:center;
padding:80px 20px;

background:rgba(255,255,255,0.95);
color:black;

border-bottom:2px solid #caa13b;

}

.hero h1{

font-size:38px;
margin-bottom:10px;

}

.hero p{

margin-bottom:20px;

}

.hero button{

padding:15px 35px;
background:#caa13b;
border:none;
color:white;
font-size:16px;
cursor:pointer;

border-radius:4px;

}
.contact-btn{

padding:15px 35px;

background:#caa13b;

border:none;

color:white;

font-size:16px;

cursor:pointer;

border-radius:6px;

transition:0.3s;

}
.contact-btn:hover{

transform:scale(1.1);

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

}
.contact-btn:active{

transform:scale(0.95);

}


/* PRODUCTS */

.products{

padding:80px 20px;
text-align:center;

}

.products h2{

margin-bottom:40px;

font-size:32px;

background:white;

color:black;

display:inline-block;

padding:12px 35px;

border-radius:30px;

border:2px solid #caa13b;

box-shadow:0 6px 15px rgba(0,0,0,0.25);

}

.product-grid{

display:grid;

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

gap:30px;

max-width:1100px;
margin:auto;

}

.product{

background:rgba(255,255,255,0.85);

color:black;

padding:10px;

border-radius:10px;

border:2px solid #caa13b;

transition:0.3s;

backdrop-filter:blur(6px);

}

.product:hover{

transform:translateY(-12px) scale(1.03);

box-shadow:0 15px 30px rgba(0,0,0,0.35);

}

.product img{

width:100%;

height:220px;

object-fit:contain;

margin-bottom:2px;

}


/* ABOUT */

.about{

padding:60px 30px;

text-align:center;

background:rgba(255,255,255,0.85);
backdrop-filter:blur(6px);
color:black;

max-width:900px;
margin:60px auto;

border-radius:8px;

border:2px solid #caa13b;

}

.about h2{

margin-bottom:15px;

}


/* CONTACT */

.contact{

text-align:center;

background:rgba(255,255,255,0.85);
backdrop-filter:blur(6px);
color:black;

max-width:600px;
margin:30px auto;

padding:40px;

border-radius:8px;

border:2px solid #caa13b;

}

.contact p{

margin:20px 0;

}

.contact a{

color:#caa13b;

font-weight:bold;

text-decoration:none;

line-height:1.5;

}

/* FOOTER */

.footer{

background:#111;

color:white;

text-align:center;

padding:40px 20px;

margin-top:60px;

border-top:3px solid #caa13b;

}

.footer h3{

margin-bottom:10px;

font-size:20px;

}

.footer p{

margin:6px 0;

color:#ddd;

}

.footer-content{

max-width:800px;

margin:auto;

}
.footer a{

color:#caa13b;

text-decoration:none;

font-weight:bold;

}


/* MOBILE */

@media (max-width:768px){

.logo img{

height:120px;

}

nav{

flex-direction:row;

gap:12px;

}

nav a{

font-size:14px;

padding:8px 16px;

}

.hero h1{

font-size:28px;

}

body{

background-attachment:scroll;

}

}
@media (max-width:768px){

body::before{

background-size:contain;

background-position:center;

background-repeat:no-repeat;

}

}