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

/* Header */
/*header { background: #f55b27; color:#1f3c88; padding: 20px 50px; display:flex; justify-content:space-between; align-items:center; } */
header{
background:#162f6b;
color:#fff;
padding:20px 50px;
display:flex;
justify-content:space-between;
align-items:center;

position:fixed;
top:0;
left:0;
width:100%;
z-index:800;

transition:all 0.3s ease;
}

header button, .nav-btn{
background:#f58220;
color:#fff;
border:none;
padding:8px 15px;
border-radius:5px;
cursor:pointer;
transition:0.3s;
}

header button:hover, .nav-btn:hover{
background:#f58220;
}
header button:hover { opacity:0.9; }

header.scrolled{
padding:10px 50px; /* smaller height */
background:#162f6b; /* slightly darker */
}

/* Product Pages */
.product-page header {
  background: #ffffff;  /* WHITE */
  color: #1f3c88;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.product-page header button,
.product-page header a {
  color: #1f3c88;
}

.product-page .logo img {
  filter: none; /* or adjust if needed */
}

/* Hover */
.product-page header button:hover,
.product-page header a:hover {
  color: #f58220;
}

body{
padding-top:90px;
}

/* Hero */
.hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        url('https://images.unsplash.com/photo-1581090700227-1e8b5f5b9eaa') no-repeat center/cover;
    height: 300px;
    display:flex; justify-content:center; align-items:center; color:#fff; text-align:center; padding:0 20px;
}
.hero h1{
font-size:32px;
margin-bottom:10px;
}

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

.hero p{
font-size:18px;
}
.hero h2 { font-size:28px; }
.hero p { font-size:16px; }
@media screen and (max-width:768px) { .hero { height:250px; } }

/* Products */
.products { padding:60px 20px; text-align:center; color: #1f3c88;}
.products h2 { font-size:28px; margin-bottom:20px; color:#1f3c88; }
.product-grid{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }

.card {
width:260px;
min-height:320px;
border-radius:12px;
overflow:hidden;
cursor:pointer;
background:white;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
transition:all 0.3s ease;
}

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

.product-title {
padding:12px;
font-weight:bold;
text-align:center;
background:#f4f6f9;
color:#1f3c88; /* FIXED */
}
.product-title:hover { background:#f4f6f9; }

/* Carousel */
.product-images {
    width: 100%;
    height: 100%;   /* fill the card height */
}
.product-images .slide-track {
    display: flex;
    /*transition: transform 0.6s ease-in-out;*/
    height: 100%;
    will-change: transform;
}
.product-images img {
    width: 100%;    /* fill width */
    height: auto;   /* maintain aspect ratio */
    border-radius: 8px;
}
.product-images img:hover { transform: scale(1.05); }

/* About Us */
.about { background:#ffffff; text-align:center; max-height:0; overflow:hidden; transition:max-height 0.6s ease,padding 0.5s ease; padding:0 20px; }
.about.active { max-height:1000px; padding:60px 20px; }
.about h2 { font-size:28px; margin-bottom:20px; color:#1f3c88; }
.about p { max-width:900px; margin:auto; font-size:16px; line-height:1.8; color:#1f3c88; }

/* Modal */
.modal { display:none; position:fixed; z-index:1000; padding-top:80px; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.9); }
.modal-content { display:block; margin:auto; max-width:80%; max-height:80%; border-radius:10px; }
.close { position:absolute; top:30px; right:40px; color:white; font-size:40px; cursor:pointer; }
.arrow { position:absolute; top:50%; color:white; font-size:50px; font-weight:bold; cursor:pointer; user-select:none; padding:0 10px; transform:translateY(-50%); transition:0.3s; }
.arrow:hover { color:#ccc; }
.arrow.left { left:20px; }
.arrow.right { right:20px; }

/* Footer */
footer { background:#111; color:#fff; text-align:center; padding:20px; margin-top:40px; font-size:14px; }

.inquiry {
    background: #ffffff;
    padding: 60px 20px;
    text-align: center;
}

.inquiry h2 {
    font-size: 28px;
    margin-bottom: 30px;
    color: #1f3c88;
}

.inquiry {
    background: #ffffff;
    padding: 60px 20px;
}

.inquiry h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    color: #1f3c88;
}

.inquiry form {
    max-width: 900px;
    margin: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.inquiry input,
.inquiry select,
.inquiry textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}

.inquiry textarea {
    grid-column: span 2;
    resize: none;
    height: 120px;
}

.inquiry button {
    display: block;
    margin: 20px auto 0;
    background: #f58220;
    color: #fff;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.inquiry button:hover {
    background: #f58220;
}

header div {
    display: flex;
    gap: 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    /* -------- MOBILE HEADER FIX -------- */
@media (max-width:768px){

header{
flex-direction:column;
padding:10px 20px;
text-align:center;
}

header div{
flex-direction:column;
width:100%;
gap:8px;
margin-top:10px;
}

header button{
width:100%;
}

.logo img{
height:60px;
}

}

    .inquiry textarea {
        grid-column: span 1;
    }
}
.logo img{
height: 70px;
width:auto;
cursor:pointer;
transition:0.3s;
}

.logo img:hover{
transform:scale(1.05);
}

.lightbox{
    display:none;
    position:fixed;
    z-index:999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
}

.lightbox-img{
    max-width:80%;
    max-height:80%;
}

.close{
    position:absolute;
    top:20px;
    right:40px;
    color:white;
    font-size:40px;
    cursor:pointer;
}

.prev, .next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    background:none;
    border:none;
    color:white;
    cursor:pointer;
}

.prev{
    left:40px;
}

.next{
    right:40px;
}
/* ---------------- Sliding About / Contact ---------------- */
.about {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
    padding: 0 20px;
    background: #f9f9f9;
    border-radius: 10px;
    margin: 20px 0;
}

.about.active {
    max-height: 1000px; /* adjust if content is taller */
    padding: 40px 20px; /* slightly smaller to fit viewport */
}

/* ---------------- Lightbox ---------------- */
.lightbox {
    display: none;
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 40px;
    cursor: pointer;
    color: white;
}

.lightbox .prev, .lightbox .next {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    font-size: 40px;
    background:none;
    border:none;
    color:white;
    cursor:pointer;
}

.lightbox .prev { left:10px; }
.lightbox .next { right:10px; }

html {
    scroll-behavior: smooth;
}
.nav-btn{
background:#fff;
color:#1f3c88;
padding:8px 15px;
border-radius:5px;
text-decoration:none;
display:inline-block;
}
/* Floating Buttons Container */

.floating-buttons{
position:fixed;
bottom:25px;
right:25px;
display:flex;
flex-direction:column;
gap:12px;
z-index:2000;
}

/* Inquiry Button */

.floating-inquiry{
background:#f58220;
color:white;
padding:12px 18px;
border-radius:25px;
text-decoration:none;
font-weight:bold;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transition:0.3s;
text-align:center;
}

.floating-inquiry:hover{
background:#d94c1f;
transform:scale(1.05);
}

/* WhatsApp Button */

.whatsapp-float{
background:#25D366;
color:white;
font-size:26px;
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
text-decoration:none;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transition:0.3s;
}

.whatsapp-float:hover{
transform:scale(1.1);
}
.seo-description{
padding:50px 20px;
max-width:900px;
margin:auto;
text-align:center;
line-height:1.7;
color:#1f3c88;
}

.seo-description h2{
font-size:26px;
margin-bottom:20px;
}

/* Applications Section */

.applications{
padding:60px 20px;
text-align:center;
max-width:1000px;
margin:auto;
color:#1f3c88;
}

.applications h2{
font-size:26px;
margin-bottom:15px;
}

.applications p{
margin-bottom:30px;
line-height:1.6;
}

/* Grid Layout */

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

/* Cards */

.app-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
transition:0.3s;
}

.app-card:hover{
transform:translateY(-5px);
}

.app-card h3{
margin:10px 0;
font-size:18px;
}

.app-card p{
font-size:14px;
}

.app-card i{
font-size:40px;
color:rgba(0,0,0,0.5);
margin-bottom:15px;
}

.content {
    max-width: 900px;
    margin: auto;
    padding: 60px 20px;
    line-height: 1.7;
    color: #1f3c88;
}

.content h2 {
    font-size: 26px;
    margin-bottom: 15px;
    color: #1f3c88;
}

.content p {
    margin-bottom: 20px;
}

.content ul {
    margin: 20px 0;
    padding-left: 20px;
}

.content li {
    margin-bottom: 10px;
}