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

/* NAVBAR */
header {
background: #111;
position: sticky;
top: 0;
z-index: 1000;
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 8%;
}

.logo {
color: orange;
}

.nav-links {
display: flex;
list-style: none;
}

.nav-links li {
margin-left: 25px;
}

.nav-links a {
color: white;
text-decoration: none;
}

/* HERO */
.hero {
height: 90vh;
background: url("../image/bulk-saria.jpg") no-repeat center/cover;
display: flex;
align-items: center;
justify-content: center;
}

.hero-overlay {
background: rgba(0,0,0,0.7);
padding: 60px;
text-align: center;
color: white;
}

.hero-overlay h1 {
font-size: 48px;
}

.hero-overlay button {
margin-top: 20px;
padding: 12px 25px;
background: orange;
border: none;
font-size: 16px;
cursor: pointer;
}

/* ABOUT */
.about {
padding: 80px 8%;
background: white;
}

.about-container {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
gap: 40px;
align-items: center;
}

.about-img img {
width: 100%;
border-radius: 10px;
}

/* PRODUCTS */
.products {
padding: 80px 8%;
background: #f4f4f4;
}

.products h2 {
text-align: center;
margin-bottom: 40px;
}

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

.product-card {
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.product-card img {
width: 100%;
height: 180px;
object-fit: cover;
}

.product-card h3 {
padding: 15px;
text-align: center;
}

/* WHY */
.why {
padding: 80px 8%;
background: #222;
color: white;
}

.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap: 20px;
margin-top: 30px;
}

.why-card {
background: #333;
padding: 30px;
text-align: center;
border-left: 4px solid orange;
}

/* PROCESS */
.process {
padding: 80px 8%;
background: white;
}

.process-flow {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
}

.flow-box {
background: orange;
padding: 20px;
margin: 10px;
flex: 1;
text-align: center;
font-weight: bold;
}

/* CTA */
.cta {
padding: 70px 8%;
background: linear-gradient(to right, #111, #333);
color: white;
text-align: center;
}

.cta button {
margin-top: 15px;
padding: 12px 30px;
background: orange;
border: none;
}

/* FOOTER */
footer {
background: black;
color: white;
padding: 15px;
text-align: center;
}

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

.hero-overlay h1 {
font-size: 30px;
}

.nav-container {
flex-direction: column;
}

.process-flow {
flex-direction: column;
}

}