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

header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 10px;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}

.logo img {
height: 50px;
}

/* Navigation */
nav ul {
display: flex;
list-style: none;
gap: 25px;
align-items: center;
}

nav ul li a {
text-decoration: none;
color: #222;
font-weight: 300;
transition: 0.3s;
font-size: 14px;
}

nav ul li a:hover {
color: #d32f2f;
}

/* Product Catalogue Highlight */
.highlight {
color: red;
font-weight: 300;
}

/* Dropdown */
/* Dropdown Base */
.dropdown {
position: relative;
}

/* Dropdown Menu */
.dropdown-menu {
position: absolute;
top: 100%;
left: 5;
background: white;
min-width: 220px;
border-radius: 6px;
padding: 10px 0;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
display: none;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
z-index: 999;
}

/* Dropdown Item */
.dropdown-menu li a {
padding: 10px 18px;
display: block;
color: #333;
text-decoration: none;
}
.dropdown-menu li a:hover {
background: #f2f2f2;
}

/* SHOW dropdown on hover (IMPORTANT) */
.dropdown:hover > .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}

/* Prevent flicker: keep dropdown open when mouse on dropdown-menu */
.dropdown-menu:hover {
display: block;
opacity: 1;
visibility: visible;
}


/* Mobile Menu */
.menu-toggle {
font-size: 28px;
cursor: pointer;
display: none;
}

@media (max-width: 768px) {
nav ul {
position: absolute;
top: 90px;
right: 0;
flex-direction: column;
background: white;
width: 220px;
padding: 20px 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
display: none;
}

nav ul li {
margin: 10px 0;
}

.menu-toggle {
display: block;
}
}

.slider {
width: 100%;
height: 70vh;
position: relative;
overflow: hidden;
}

@media(max-width: 497px){
.slides{
height: 250px !important;
}
.slide{
height: 250px !important;
}
.slider{
height: 40vh !important;
}
}

.slides {
width: 100%;
height: 500px;
position: relative;
}

.slide {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease;
}

.slide.active {
opacity: 1;
}

.caption {
position: absolute;
bottom: 30px;
left: 100px;
color: #rgb(#,0,0);
max-width: 500px;
animation: fadeUp 1.2s ease forwards;
}

.caption h1 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 10px;
}

.caption p {
font-size: 10px;
font-weight: 300;
}

.navigation .nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 0.7rem;
color: #fff;
padding: 10px 15px;
cursor: pointer;
background: rgba(0,0,0,0.4);
border-radius: 5px;
user-select: none;
transition: 0.3s;
}

.navigation .nav-btn:hover {
background: rgba(0,0,0,0.7);
}

.navigation .nav-btn:nth-child(1) { left: 20px; }
.navigation .nav-btn:nth-child(2) { right: 20px; }

@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}


.about-section {
width: 100%;
padding: 10px 3%;
background: #f7f9fc;
display: flex;
justify-content: center;
align-items: center;
}

.about-container {
display: flex;
align-items: center;
gap: 15px;
max-width: 1300px;
}

.about-image {
position: relative;
flex: 1;
}

.about-image img {
width: 100%;
border-radius: 20px;
position: relative;
z-index: 2;
}

.img-shadow {
width: 90%;
height: 90%;
background: #fe7f26;
position: absolute;
bottom: -20px;
left: -20px;
border-radius: 20px;
z-index: 1;
opacity: 0.3;
}

.about-content {
flex: 1;
}

.about-content h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
color: #0a0a0a;
}

.about-content p {
font-size: 1.1rem;
color: #444;
margin-bottom: 15px;
line-height: 1.7;
}

.about-btn {
display: inline-block;
margin-top: 15px;
background: #fe7f26;
color: #fff;
padding: 12px 28px;
border-radius: 30px;
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}

.about-btn:hover {
background: #009ac9;
}

/* Responsive */
@media (max-width: 900px) {
.about-container {
flex-direction: column;
text-align: center;
}

.about-image img {
width: 100%;
}

.img-shadow { display: none; }
}

.why-choose {
padding: 10px 10px;
background: #ffffff;
}

.why-container {
display: flex;
gap: 60px;
align-items: center;
max-width: 1250px;
margin: auto;
flex-wrap: wrap;
}

/* Image */
.why-img {
flex: 1;
}

.why-img img {
width: 100%;
border-radius: 16px;
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

/* Content Right Side */
.why-content {
flex: 1;
}

.why-content h2 {
font-size: 36px;
font-weight: 800;
color: #222;
margin-bottom: 10px;
}

.why-sub {
font-size: 16px;
color: #666;
margin-bottom: 35px;
}

/* Points */
.why-points .point {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}

.icon {
font-size: 22px;
color: #d32f2f;
background: #ffeaea;
padding: 6px 10px;
border-radius: 8px;
font-weight: 700;
}

.point h3 {
font-size: 18px;
color: #222;
margin-bottom: 5px;
}

.point p {
font-size: 14px;
color: #666;
line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
.why-container {
flex-direction: column;
text-align: center;
}

.why-points .point {
justify-content: center;
text-align: left;
}
}


.why-section {
width: 100%;
padding: 10px 5%;
background: #ffffff;
text-align: center;
}

.why-title h2 {
font-size: 2.6rem;
font-weight: 600;
color: #0a0a0a;
margin-bottom: 10px;
}

.why-title p {
font-size: 1.1rem;
color: #555;
margin-bottom: 40px;
}

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

.why-box {
background: #f7f9fc;
padding: 30px;
border-radius: 20px;
transition: 0.3s;
box-shadow: 0 0 0 rgba(0,0,0,0);
}

.why-box:hover {
transform: translateY(-8px);
box-shadow: 0px 10px 25px rgba(0,0,0,0.12);
}

.icon {
font-size: 3rem;
margin-bottom: 20px;
color: #fe7f26;
}

.why-box h3 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 10px;
color: #0a0a0a;
}

.why-box p {
font-size: 1rem;
color: #555;
line-height: 1.6;
}


.cert-section {
padding: 70px 40px;
background: #ffffff;
text-align: center;
}

.cert-title {
font-size: 34px;
font-weight: 700;
color: #222;
margin-bottom: 10px;
}

.cert-subtitle {
color: #666;
margin-bottom: 50px;
font-size: 16px;
}

.cert-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 35px;
max-width: 1200px;
margin: auto;
}

.cert-card {
background: #f9f9f9;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: 0.3s ease;
padding-bottom: 20px;
}

.cert-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

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

.cert-card h3 {
margin-top: 15px;
color: #d32f2f;
font-size: 20px;
font-weight: 600;
}

.cert-card p {
color: #666;
font-size: 14px;
margin-top: 5px;
padding: 0 15px;
}


@media(max-width: 497px){
.banner{
height: 20vh !important;
}
}

/* Banner */
.banner{
width:100%;
height:55vh;
background:url('image/about-banner.jpg') center/cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
.banner::after{
content:"";
position:absolute;
width:100%;height:100%;
background:rgba(0,0,0,0.4);
}
.banner h1{
position:relative;
color:white;
font-size:3rem;
font-weight:700;
z-index:2;
text-shadow:0 3px 8px rgba(0,0,0,0.5);
}

/* About Section */
.about-main{
max-width:1200px;
margin:auto;
padding:60px 20px;
display:flex;
gap:40px;
align-items:center;
flex-wrap:wrap;
}
.about-main img{
width:100%;
border-radius:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}
.about-text{
flex:1;
}
.about-text h2{
font-size:2.4rem;
font-weight:700;
color:#222;
margin-bottom:15px;
}
.about-text p{
color:#555;
font-size:16px;
line-height:1.7;
text-align:justify;
}

/* Stats */
.stats{
max-width:1200px;
margin:50px auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
padding:0 20px;
}
.stat-box{
background:white;
padding:30px;
border-radius:15px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}
.stat-box:hover{transform:translateY(-8px);}
.stat-box h3{
font-size:2.2rem;
color:#d32f2f;
margin-bottom:5px;
}
.stat-box p{
color:#444;
font-size:15px;
}

/* Mission Vision */
.mission-section{
max-width:1200px;
margin:60px auto;
padding:20px;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px,1fr));
gap:30px;
}
.mv-box{
background:#ffffff;
border-radius:20px;
padding:40px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.mv-box h3{
font-size:1.8rem;
color:#d32f2f;
margin-bottom:10px;
}
.mv-box p{
color:#555;
line-height:1.6;
}

/* Team Section */
.team-section{
background:#ffffff;
padding:60px 20px;
text-align:center;
}
.team-section h2{
font-size:2.4rem;
margin-bottom:10px;
}
.team-section p{
color:#666;
margin-bottom:40px;
}
.team-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
gap:30px;
}
.member{
background:#f7f9fc;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
border-radius:15px;
padding:20px;
transition:0.3s;
}
.member:hover{
transform:translateY(-6px);
}
.member img{
width:100%;
border-radius:10px;
height:260px;
object-fit:cover;
margin-bottom:15px;
}
.member h4{
font-size:18px;
font-weight:600;
color:#111;
}
.member span{
color:#d32f2f;
font-size:14px;
}

/* Footer */
footer{
background:#222;
color:white;
padding:50px 20px;
margin-top:60px;
}
.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}
.footer-box h3{
font-size:20px;
margin-bottom:15px;
}
.footer-box p, .footer-box a{
color:#ccc;
font-size:15px;
line-height:1.7;
text-decoration:none;
}
.footer-box a:hover{color:white;}
.footer-bottom{
text-align:center;
margin-top:30px;
font-size:14px;
color:#aaa;
border-top:1px solid #444;
padding-top:15px;
}


footer {
background: #0d0d0d;
color: #ffffff;
padding: 60px 20px;
font-family: Arial, sans-serif;
}

.container {
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}

.col h3 {
font-size: 20px;
margin-bottom: 15px;
font-weight: bold;
}

.col p,
.col a,
.col li {
font-size: 14px;
color: #b3b3b3;
list-style: none;
margin-bottom: 8px;
}

.col a {
text-decoration: none;
}

.col a:hover {
color: #ffffff;
}

form button:hover {
background: #187bcd;
}

.copyright {
text-align: center;
margin-top: 40px;
color: #fff;
font-size: 13px;
background: darkred;
}

@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}

/* Contact Page Banner */
.contact-banner {
width: 100%;
height: 45vh;
background: url("image/contact-banner.jpg") center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.contact-banner::after {
content: "";
position: absolute;
width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
}
.contact-banner h1 {
position: relative;
color: white;
font-size: 3rem;
font-weight: 700;
text-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

/* Contact Container */
.contact-container {
max-width: 1200px;
margin: 60px auto;
display: flex;
gap: 40px;
padding: 20px;
flex-wrap: wrap;
}

/* Info Boxes */
.contact-info {
flex: 1;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.info-box {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.info-box h3 {
color: #d32f2f;
margin-bottom: 10px;
}

/* Contact Form */
.contact-form {
flex: 1;
background: white;
padding: 35px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.contact-form h2 {
margin-bottom: 20px;
}

.contact-form form {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-form input,
.contact-form textarea {
padding: 12px;
border-radius: 8px;
border: 1px solid #bbb;
font-size: 15px;
}
.contact-form textarea {
height: 120px;
resize: none;
}

.contact-form button {
padding: 12px;
background: #d32f2f;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
.contact-form button:hover {
background: #b02727;
}

/* Map */
.map-section {
margin-top: 40px;
}

/* Responsive */
@media (max-width: 768px) {
.contact-container {
flex-direction: column;
}
}

/* Career Hero */
.career-hero {
width: 100%;
height: 50vh;
background: url("image/career-banner.jpg") center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.career-hero::after {
content: "";
position: absolute;
width: 100%; height: 100%;
background: rgba(0,0,0,0.45);
}
.career-hero-text {
position: relative;
text-align: center;
color: white;
max-width: 700px;
}
.career-hero-text h1 {
font-size: 3rem;
}
.career-hero-text p {
font-size: 1.2rem;
margin-top: 15px;
}

/* WHY JOIN US */
.why-join {
text-align: center;
padding: 50px 20px;
}
.why-grid {
max-width: 1200px;
margin: auto;
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.why-box {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* POSITIONS */
.positions {
text-align: center;
padding: 60px 20px;
}
.position-grid {
max-width: 1200px;
margin: auto;
margin-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.job-card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: left;
}
.apply-btn {
display: inline-block;
margin-top: 15px;
padding: 10px 18px;
background: #d32f2f;
color: white;
border-radius: 8px;
text-decoration: none;
}
.apply-btn:hover {
background: #b02727;
}

/* APPLY FORM */
.apply-section {
text-align: center;
padding: 60px 20px;
background: #fafafa;
}
.apply-form {
max-width: 600px;
margin: auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.apply-form input,
.apply-form textarea {
padding: 12px;
border-radius: 8px;
border: 1px solid #bbb;
}
.apply-form textarea {
height: 120px;
resize: none;
}

.file-upload {
background: white;
padding: 12px;
border-radius: 8px;
border: 1px solid #bbb;
cursor: pointer;
text-align: left;
}
.file-upload input {
display: none;
}

.apply-form button {
background: #d32f2f;
border: none;
padding: 12px;
color: white;
border-radius: 8px;
cursor: pointer;
}
.apply-form button:hover {
background: #b02727;
}

/* HERO SECTION */
.cat-hero {
width: 100%;
height: 45vh;
background: url("image/catalogue-banner.jpg") center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.cat-hero::after {
content: "";
position: absolute;
width: 100%; height: 100%;
background: rgba(0,0,0,0.45);
}
.cat-hero-text {
position: relative;
text-align: center;
color: white;
}
.cat-hero-text h1 {
font-size: 3rem;
font-weight: 600;
}
.cat-hero-text p {
margin-top: 10px;
font-size: 1.2rem;
}

/* CATALOGUE SECTION */
.catalogue-section {
text-align: center;
padding: 60px 20px;
}
.catalogue-grid {
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
margin-top: 40px;
}
.cat-card {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
padding-bottom: 25px;
transition: 0.3s;
}
.cat-card:hover {
transform: translateY(-8px);
}
.cat-card img {
width: 100%;
height: 190px;
object-fit: cover;
border-radius: 15px 15px 0 0;
}
.cat-card h3 {
margin: 15px 0 10px;
}
.cat-card p {
padding: 0 15px;
font-size: 14px;
color: #555;
}
.cat-btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background: #d32f2f;
color: white;
border-radius: 8px;
text-decoration: none;
}
.cat-btn:hover {
background: #b02727;
}


/* PRODUCT HERO */
.product-hero {
width: 100%;
height: 40vh;
background: url("image/product-banner.jpg") center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
text-align: center;
color: white;
}
.product-hero::after {
content: "";
position: absolute;
width: 100%; height: 100%;
background: rgba(0,0,0,0.45);
}
.product-hero h1, 
.product-hero p {
position: relative;
}

/* PRODUCT DETAIL */
.product-detail {
max-width: 1200px;
margin: 60px auto;
display: flex;
gap: 40px;
padding: 20px;
flex-wrap: wrap;
}
.product-image {
flex: 1;
}
.product-image img {
width: 100%;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.product-info {
flex: 1;
}
.product-info h2 {
font-size: 2rem;
}
.price {
margin: 20px 0;
font-size: 1.5rem;
color: #d32f2f;
}
.enquiry-btn {
background: #d32f2f;
color: white;
padding: 12px 22px;
border-radius: 8px;
text-decoration: none;
font-size: 16px;
transition: 0.3s;
}
.enquiry-btn:hover {
background: #b02727;
}

/* SPECIFICATIONS TABLE */
.specifications {
max-width: 1000px;
margin: 40px auto;
padding: 20px;
}
.specifications table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
border-radius: 12px;
overflow: hidden;
}
.specifications th, 
.specifications td {
padding: 14px 18px;
border-bottom: 1px solid #eee;
}
.specifications th {
background: #f7f7f7;
width: 30%;
}

/* FEATURES */
.features {
max-width: 1000px;
margin: 50px auto;
text-align: center;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 20px;
}
.feature-box {
background: #ffffff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* APPLICATIONS */
.applications {
max-width: 1000px;
margin: 50px auto;
}
.applications ul {
margin-top: 15px;
line-height: 1.8;
}