*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:Arial,sans-serif;

}



/* NAVIGATION */


nav{

background:#000;

color:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 50px;
animation:slideDown 1s ease;

}


.brand{

display:flex;

align-items:center;

gap:15px;

}


.logo{

width:90px;

height:90px;

object-fit:contain;

}


nav ul{

display:flex;

list-style:none;

}


nav ul li{

margin-left:25px;

}


nav ul li a{

color:white;

text-decoration:none;

}


nav ul li a:hover{

color:#d4af37;

}





/* HERO */


.hero{

height:80vh;

background:

linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.6)
),

url("../images/cover.jpg");


background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

}


.hero h1{

font-size:60px;

}


.hero h2{

font-size:35px;

color:#d4af37;

margin:15px;

}


.hero p{

font-size:22px;

}




button{

margin-top:20px;

padding:12px 30px;

background:#d4af37;

border:none;

font-size:18px;

cursor:pointer;

font-weight:bold;

transition:0.3s;

}


button:hover{

background:#000;

color:#d4af37;

transform:scale(1.05);

}





/* ABOUT */


.about{

padding:70px 100px;

text-align:center;

}


.about h2{

font-size:40px;

margin-bottom:25px;

}


.about p{

font-size:20px;

line-height:1.8;

color:#555;

}





/* SERVICES */


.services{

background:#f5f5f5;

padding:70px 50px;

text-align:center;

}


.services h2{

font-size:40px;

margin-bottom:40px;

}


.service-container{

display:flex;

justify-content:center;

align-items:flex-start;

gap:25px;

flex-wrap:wrap;

}





/* CARDS */


.card{

width:250px;

height:300px;

background:white;

border-radius:10px;

box-shadow:0 5px 15px #ccc;

overflow:hidden;

transition:0.4s;

animation:fadeCard 0.8s ease;
}


.card:hover{

transform:translateY(-10px);

box-shadow:0 15px 30px #aaa;

}


.card h3{

margin-bottom:15px;

}





/* VIDEO CARD */


.video-card{

position:relative;

background:#000;

cursor:pointer;

}


.video-card video{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

opacity:0.30;

}




.card-overlay{

position:relative;

z-index:2;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:20px;

color:white;

text-shadow:2px 2px 5px black;

}


.card-overlay h3{

font-size:25px;

color:white;

}


.card-overlay p{

font-size:16px;

color:white;

}





.card-overlay button{

background:#d4af37;

color:#000;

padding:10px 25px;

font-size:16px;

border-radius:5px;

}





/* GALLERY */


.gallery{

display:none;

padding:60px;

background:#f5f5f5;

text-align:center;

}


.gallery h2{

font-size:40px;

margin-bottom:40px;

}



.gallery-box{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:20px;

}



.gallery-box img{

width:100%;

height:230px;

object-fit:cover;

border-radius:10px;

transition:0.4s;

}



.gallery-box img:hover{

transform:scale(1.08) rotate(2deg);
box-shadow:0 0 20px #d4af37;

}





/* WHY */


.why{

padding:70px 50px;

text-align:center;

}


.why h2{

font-size:40px;

margin-bottom:30px;

}


.features{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}


.features div{

width:220px;

padding:25px;

background:#000;

color:white;

border-radius:10px;

}





/* CONTACT */


.contact{

padding:70px;

text-align:center;

background:#111;

color:white;

}


.contact h2{

font-size:40px;

margin-bottom:20px;

}

@keyframes slideDown{

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

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

}

@keyframes fadeCard{

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

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

}



/* FOOTER */


footer{

background:#000;

color:white;

text-align:center;

padding:20px;

}





/* ANIMATIONS */


.hero-content{

animation:fadeUp 1.2s ease;

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}

}

@keyframes slideDown{

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

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

}

@keyframes fadeCard{

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

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

}


.video-card:hover{

box-shadow:0 0 25px #d4af37;

}




@media(max-width:900px){


nav{

flex-direction:column;

}


.service-container{

flex-wrap:wrap;

}


.gallery-box{

grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:500px){


.gallery-box{

grid-template-columns:1fr;

}


.hero h1{

font-size:40px;

}


}

.order-form{

display:none;

padding:60px;

background:#f5f5f5;

text-align:center;

}


.order-form h2{

font-size:40px;

margin-bottom:30px;

}


.order-form form{

display:flex;

flex-direction:column;

max-width:500px;

margin:auto;

gap:15px;

}


.order-form input,
.order-form select,
.order-form textarea{

padding:15px;

font-size:16px;

border:1px solid #ccc;

border-radius:5px;

}


.order-form textarea{

height:120px;

}
/* ORDER POPUP */

.order-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.45);

backdrop-filter:blur(8px);

display:none;

justify-content:center;

align-items:center;

z-index:999;

}



.order-box{

width:400px;

background:white;

padding:40px;

border-radius:15px;

position:relative;

box-shadow:0 0 30px black;

}



.order-box h2{

text-align:center;

margin-bottom:25px;

}



.order-box input,
.order-box select,
.order-box textarea{

width:100%;

padding:12px;

margin:10px 0;

border:1px solid #ccc;

border-radius:5px;

}



.order-box textarea{

height:100px;

resize:none;

}



.close-btn{

position:absolute;

right:15px;

top:15px;

background:#000;

color:white;

padding:8px 12px;

border-radius:50%;

margin:0;

}



.close-btn:hover{

background:#d4af37;

color:black;

}
body.blur .hero{

filter:blur(8px);

}
.order-box{

filter:none;

}
.contact-info{

margin:30px auto;

max-width:700px;

font-size:20px;

line-height:1.8;

}


.contact-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}


.contact-buttons a{

text-decoration:none;

}


.contact-buttons button{

background:#d4af37;

color:#000;

padding:12px 25px;

border-radius:5px;

}


.contact-buttons button:hover{

background:white;

color:#000;

}
/* MOBILE VERSION */

@media (max-width:768px){

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 15px;
position:relative;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.logo{
width:55px;
height:55px;
}

.brand h2{
font-size:18px;
}

.menu-btn{
    display:block;
}

#navMenu{
display:none;
position:absolute;
top:75px;
right:0;
width:220px;
background:#000;
flex-direction:column;
padding:15px 0;
}

#navMenu.show{
display:flex;
}

#navMenu li{
margin:0;
text-align:center;
}

#navMenu li a{
display:block;
padding:15px;
}

nav > ul:not(#navMenu){
display:none;
}

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

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 15px;
    position:relative;
}

/* Logo left */
.brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo{
    width:55px;
    height:55px;
}

.brand h2{
    font-size:18px;
}

/* Menu button right */
.menu-btn{
    display:block;
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:34px;
    color:#fff;
    cursor:pointer;
}

/* Hide desktop menu */
nav > ul:not(#navMenu){
    display:none;
}

/* Mobile menu */
#navMenu{
    display:none;
    position:absolute;
    top:75px;
    left:0;
    width:100%;
    background:#000;
    flex-direction:column;
    z-index:999;
}

#navMenu.show{
    display:flex;
}

#navMenu li{
    margin:0;
    text-align:center;
}

#navMenu li a{
    display:block;
    padding:15px;
    color:#fff;
}
/* Card text smaller on mobile */
.card-overlay h3{
    font-size:14px;
}

.card-overlay p{
    font-size:9px;
    line-height:1.3;
}

.card-overlay button{
    font-size:10px;
    padding:6px 14px;
}
}
/* MOBILE - Contact section smaller */

@media (max-width:768px){

.contact{
    padding:30px 15px;
}

.contact h2{
    font-size:20px;
}

.contact p{
    font-size:12px;
}

.contact-info{
    font-size:12px;
    line-height:1.5;
}

.contact-buttons button{
    font-size:12px;
    padding:8px 15px;
}

footer{
    font-size:11px;
    padding:12px;
}

}
/* =========================
   MOBILE IMPROVEMENTS
========================= */
@media (max-width:768px){

/* Cover Section */
.hero{
    height:55vh;
}

.hero h1{
    font-size:26px;
}

.hero h2{
    font-size:18px;
}

.hero p{
    font-size:13px;
}

.hero button{
    font-size:13px;
    padding:8px 18px;
}

/* Products - 2 cards per row */
.service-container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    justify-items:center;
}

.card{
    width:160px;
    height:220px;
}

.card-overlay h3{
    font-size:15px;
}

.card-overlay p{
    font-size:11px;
}

.card-overlay button{
    font-size:11px;
    padding:6px 12px;
}

/* Gallery - 2 photos per row */
.gallery-box{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.gallery-box img{
    height:120px;
}

/* Section spacing */
.about,
.services,
.gallery,
.why,
.contact{
    padding:30px 15px;
}

.about h2,
.services h2,
.gallery h2,
.why h2,
.contact h2{
    font-size:24px;
}

.about p,
.contact p{
    font-size:14px;
}

.features div{
    width:150px;
    padding:12px;
}

}
/* DESKTOP */
.menu-btn{
    display:none;
}

/* MOBILE */
@media (max-width:768px){

.menu-btn{
    display:block;
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:34px;
    color:#fff;
    cursor:pointer;
}

}