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

body{
background:#f2f4f8;
color:#333;
padding-top: 100px;   /* ADD THIS LINE */
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* HEADER */

.header{
position:fixed;
top:0;
width:100%;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
z-index:1000;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo img{height:55px;}

.nav ul{
display:flex;
gap:40px;
list-style:none;
}

.nav a{
text-decoration:none;
color:#1e3c72;
font-weight:500;
}

.quote-btn{
background:#1e3c72;
color:white;
padding:10px 20px;
border:none;
border-radius:6px;
cursor:pointer;
}

.hamburger{
display:none;
font-size:26px;
cursor:pointer;
}

/* HERO */

.hero{
height:650px;
background:url('images/hero.jpg') center/cover no-repeat;
display:flex;
align-items:center;
position:relative;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.5);
}

.hero-content{
position:relative;
color:white;
max-width:650px;
padding-left:8%;
}

.hero h1{font-size:50px;margin-bottom:15px;}
.hero p{font-size:22px;margin-bottom:25px;}

.hero-buttons a{
display:inline-block;
padding:14px 30px;
border-radius:30px;
margin-right:15px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.btn-blue{background:#1e3c72;color:white;}
.btn-orange{background:#ff6a00;color:white;}

/* SECTION */

.section{
padding:80px 0;
text-align:center;
}

.section h2{
color:#1e3c72;
margin-bottom:10px;
}

.section p{
color:#666;
margin-bottom:40px;
}

/* PRODUCTS */

.products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.card{
background:white;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
overflow:hidden;
}

.card img{
width:100%;
height:220px;
object-fit:contain;   /* show full image */
background:#f4f6fa;
padding:15px;
}

.card h3{
padding:15px;
color:#1e3c72;
}

/* WHY CHOOSE */

.why{
background:#f7f9fc;
padding:80px 0;
}

.why-container{
display:flex;
justify-content:space-between;
text-align:center;
}

.why-item{
width:23%;
}

.why-item i{
font-size:45px;
color:#1e3c72;
margin-bottom:15px;
}

/* TESTIMONIALS */

.testimonials{
padding:80px 0;
}

.testimonial-container{
display:flex;
gap:30px;
}

.testimonial{
background:#eef1f6;
padding:30px;
border-radius:10px;
flex:1;
}

/* CONTACT */

.contact{
background:#f7f9fc;
padding:80px 0;
}

.contact-wrapper{
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:14px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:8px;
}

.contact-form button{
background:#1e3c72;
color:white;
padding:12px 25px;
border:none;
border-radius:6px;
cursor:pointer;
}

.contact-info{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

/* FOOTER */

.footer{
background:#eaeef5;
padding:50px 0;
}

.footer-container{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
}

footer h4{
color:#1e3c72;
margin-bottom:15px;
}

footer a{
display:block;
text-decoration:none;
color:#555;
margin-bottom:8px;
}

/* RESPONSIVE */

@media(max-width:1024px){
.products{grid-template-columns:repeat(2,1fr);}
.why-container{flex-direction:column;gap:30px;}
.why-item{width:100%;}
.contact-wrapper{grid-template-columns:1fr;}
}

@media(max-width:768px){

.nav{
position:absolute;
top:80px;
right:-100%;
background:white;
width:220px;
height:100vh;
padding:30px;
transition:0.3s;
}

.nav ul{flex-direction:column;gap:20px;}
.nav.active{right:0;}

.hamburger{display:block;}
.quote-btn{display:none;}

.hero h1{font-size:32px;}
.products{grid-template-columns:1fr;}
.footer-container{grid-template-columns:1fr;}
}
#formMessage{
padding:10px;
border-radius:6px;
}

.view-btn{
display:inline-block;
margin:15px 0 20px;
padding:8px 15px;
background:#1e3c72;
color:white;
text-decoration:none;
border-radius:6px;
font-size:14px;
}

.category-title{
color:#1e3c72;
margin:60px 0 40px;
font-size:28px;
text-align:center;
position:relative;
}

.category-title::after{
content:"";
display:block;
width:60px;
height:4px;
background:#1e3c72;
margin:12px auto 0;
border-radius:4px;
}

.products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-bottom:40px;
}

@media(max-width:1024px){
.products{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){
.products{
grid-template-columns:1fr;
}
}
/* CONTACT PAGE */

.contact-hero{
background:#1e3c72;
color:white;
padding:120px 0 80px;
text-align:center;
}

.contact-hero h1{
font-size:42px;
margin-bottom:10px;
}

.contact-section{
padding:80px 0;
}

.contact-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
}

.contact-form-box{
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.contact-form-box h2{
margin-bottom:25px;
color:#1e3c72;
}

.form-group{
margin-bottom:20px;
}

.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
}

.btn-primary{
background:#1e3c72;
color:white;
padding:14px 25px;
border:none;
border-radius:6px;
cursor:pointer;
font-weight:600;
}

.contact-info-box{
background:#f4f6fa;
padding:40px;
border-radius:12px;
}

.contact-info-box h2{
margin-bottom:25px;
color:#1e3c72;
}

.info-item{
margin-bottom:20px;
font-size:15px;
}

.map-section iframe{
width:100%;
height:350px;
border:0;
}

/* MOBILE RESPONSIVE */

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

@media(max-width:768px){
.contact-hero h1{
font-size:28px;
}
}

/* ABOUT PAGE */

.about-hero{
background:#1e3c72;
color:white;
padding:120px 0 80px;
text-align:center;
}

.about-hero h1{
font-size:40px;
margin-bottom:10px;
}

.about-section{
padding:80px 0;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.about-text h2{
color:#1e3c72;
margin-bottom:20px;
}

.about-text p{
margin-bottom:15px;
line-height:1.7;
color:#555;
}

.image-placeholder-large{
width:100%;
height:350px;
background:#e0e6ed;
display:flex;
align-items:center;
justify-content:center;
color:#777;
font-weight:500;
border-radius:10px;
}

.mission-section{
background:#f4f6fa;
padding:80px 0;
}

.mission-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.mission-box{
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.mission-box h3{
color:#1e3c72;
margin-bottom:15px;
}

.why-about{
padding:80px 0;
text-align:center;
}

.why-about h2{
color:#1e3c72;
margin-bottom:40px;
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.why-card{
background:#f4f6fa;
padding:25px;
border-radius:8px;
font-weight:500;
}

.stats-section{
background:#1e3c72;
color:white;
padding:60px 0;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
text-align:center;
}

.stat h3{
font-size:32px;
margin-bottom:5px;
}

/* RESPONSIVE */

@media(max-width:1024px){
.about-grid,
.mission-grid{
grid-template-columns:1fr;
}

.why-grid{
grid-template-columns:repeat(2,1fr);
}
}

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

.stats-grid{
grid-template-columns:1fr;
}
}

/* ===============================
   PRODUCTS PAGE STYLING
================================= */

.products-page{
background:#ffffff;
padding:40px 0 100px;
}

.page-title{
text-align:center;
font-size:40px;
color:#1e3c72;
margin-bottom:60px;
font-weight:700;
}

.category-title{
font-size:28px;
color:#1e3c72;
margin:60px 0 40px;
text-align:center;
position:relative;
}

.category-title::after{
content:"";
display:block;
width:70px;
height:4px;
background:#ff6a00;
margin:15px auto 0;
border-radius:4px;
}

.products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-bottom:40px;
}

.card{
background:#ffffff;
border-radius:16px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
overflow:hidden;
transition:0.3s ease;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,0.15);
}

.image-placeholder{
height:220px;
background:#e9edf4;
display:flex;
align-items:center;
justify-content:center;
color:#888;
font-weight:500;
}

.card-body{
padding:20px;
text-align:center;
}

.card-body h3{
color:#1e3c72;
font-size:18px;
}

/* RESPONSIVE */

@media(max-width:1024px){
.products{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){
.products{
grid-template-columns:1fr;
}
.page-title{
font-size:28px;
}
}

/* PRODUCT DETAILS PAGE */

.breadcrumb{
margin:30px auto;
font-size:14px;
color:#777;
}

.breadcrumb a{
text-decoration:none;
color:#1e3c72;
}

.product-banner{
height:400px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
color:white;
}

.product-banner .overlay{
background:rgba(0,0,0,0.6);
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

.product-banner h1{
font-size:42px;
font-weight:600;
}

.product-details{
padding:80px 0;
}

.details-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.details-image{
width:100%;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.product-description{
margin:20px 0;
line-height:1.7;
color:#555;
}

.feature-list{
list-style:none;
padding:0;
margin-bottom:30px;
}

.feature-list li{
margin-bottom:12px;
font-size:15px;
}

.feature-list i{
color:#28a745;
margin-right:8px;
}

.product-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.btn-orange{
background:#ff6a00;
color:white;
padding:14px 25px;
border-radius:6px;
text-decoration:none;
font-weight:600;
}

@media(max-width:768px){
.details-grid{
grid-template-columns:1fr;
}
.product-banner h1{
font-size:28px;
}
}
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.footer-col h4{
color:#1e3c72;
margin-bottom:15px;
}

.footer-col p{
margin-bottom:10px;
font-size:14px;
color:#555;
}

.footer-col i{
margin-right:8px;
color:#1e3c72;
}

/* ===== NEW CATEGORY DESIGN ===== */

.categories-section {
padding:100px 0;
}

.section-subtitle {
text-align:center;
color:#666;
margin-bottom:50px;
}

.category-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.category-card {
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
transition:0.4s ease;
display:flex;
flex-direction:column;
}

.category-card:hover {
transform:translateY(-12px);
box-shadow:0 30px 60px rgba(0,0,0,0.15);
}

.category-image {
height:260px;
display:flex;
align-items:center;
justify-content:center;
background:#f4f6fa;
padding:20px;
}

.category-image img {
max-width:100%;
max-height:100%;
object-fit:contain;
}

.category-content {
padding:30px;
text-align:center;
}

.category-content h3 {
color:#1e3c72;
font-size:22px;
margin-bottom:10px;
}

.category-content p {
color:#555;
margin-bottom:20px;
}

.view-btn {
display:inline-block;
padding:10px 20px;
background:#1e3c72;
color:white;
border-radius:30px;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.view-btn:hover {
background:#ff6a00;
}

.center-title {
text-align:center;
margin-bottom:50px;
color:#1e3c72;
}

/* Responsive */
@media(max-width:1024px){
.category-grid{
grid-template-columns:repeat(2,1fr);
}
}

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