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

/* BODY */
body{
color:#fff;
line-height:1.6;
background:url('images/background.jpg') no-repeat center center/cover;
}

/* NAVBAR */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 60px;
background:#111;
position:sticky;
top:0;
z-index:1000;
}

.logo img{
height:50px;
}

nav a{
color:white;
text-decoration:none;
margin-left:20px;
font-size:16px;
transition:0.3s;
}

nav a:hover{
color:#ff6600;
}

.login-btn{
background:#ff6600;
padding:8px 18px;
border-radius:5px;
}

.login-btn:hover{
background:#ff8533;
}


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

.main-nav{
display:flex;
align-items:center;
background:#111;
padding:0 10px;
}

.main-nav>a,
.main-nav .dropdown>a{
display:block;
padding:6px 6px;
color:#fff;
text-decoration:none;
font-weight:bold;
}

.main-nav>a:hover,
.main-nav .dropdown>a:hover{
background:#ff6600;
}

.dropdown{
position:relative;
}

.mega-menu{
display:none;
position:absolute;
left:0;
top:100%;
background:#fff;
width:900px;
padding: 20px 25px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
grid-template-columns:repeat(3,1fr);
gap:10px;
z-index:999;
}

.dropdown:hover .mega-menu{
display:grid;
}

.menu-column h4{
color:#0077cc;
margin-bottom:15px;
border-bottom:2px solid #ff6600;
padding-bottom:8px;
}

.menu-column a{
display:block;
padding:8px 0;
text-decoration:none;
color:#333;
}

.menu-column a:hover{
color:#ff6600;
padding-left:8px;
transition:.3s;
}

/* HERO */
.about{
text-align:center;
padding:60px 20px;
background:linear-gradient(to right,#222,#444);
}

.about h1{
font-size:48px;
margin-bottom:20px;
}

.about p{
font-size:20px;
margin-bottom:30px;
}

.about a{
padding:12px 25px;
background:#ff6600;
color:white;
text-decoration:none;
border-radius:5px;
}
/* STATS */
.stats{
display:flex;
justify-content:space-around;
padding:50px 20px;
background:#111;
color:white;
text-align:center;
}

.stat-box h2{
font-size:40px;
color:#ff6600;
}


/* GALLERY */
.gallery{
padding:80px 20px;
text-align:center;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.gallery-grid img{
width:100%;
height:250px;
object-fit:cover;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
transition:0.3s;
}

.gallery-grid img:hover{
transform:scale(1.05);
}


.services{
padding:80px 20px;
text-align:center;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
padding: 20px;
}
.card{
background:#111;
color:white;
border-radius:12px;
overflow: hidden;
text-align: center;
box-shadow:0 4px 15px rgba(0,0,0,0.3);
}
.card img{
width:100%;
height: 350px;
object-fit:contain;
background: #000;
display: block;
}
.card h3{
color:#ff6600;
}
.card:hover{
transform:translateY(-5px);
}

.cta{
text-align:center;
padding:80px 20px;
background:#222;
color:white;
}

.cta h2{
font-size:36px;
margin-bottom:10px;
}

/* FOOTER */
footer{
background:#111;
color:white;
text-align:center;
padding:30px;
}

/* RESPONSIVE */
/* Responsive */

@media(max-width:992px){
.products-navbar{
overflow-x:auto;
white-space:nowrap;
}
.mega-menu{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.navbar{
flex-direction:column;
gap:15px;
}
}
@media(max-width:600px){
.products-navbar{
padding:0 10px;
}
.products-navbar a{
font-size:13px;
padding:16px 10px;
}
.mega-menu{
grid-template-columns:1fr;
padding:20px;
}
}