/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Open Sans',sans-serif;color:#222;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;font-weight:600;line-height:1.2;color:#002147}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}

/* CONTAINERS & GRID */
.container{width:90%;max-width:1200px;margin:0 auto}
.header-dark,.footer-dark,body.dark-page{background:#002147;color:#fff}
header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}
header .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
header ul{list-style:none;display:flex;gap:1.5rem}
header a{font-weight:600;color:#002147}
header a.active,header a:hover{color:#007BFF}
.header-dark header{background:#002147;color:#fff}

/* HERO */
.hero{position:relative;text-align:center;color:#fff}
.hero img.hero-bg{width:100%;height:auto;display:block;object-fit:cover}
.hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:800px}
.hero-text h1{font-size:2.5rem;margin-bottom:.8rem}
.hero-text p{font-size:1.1rem;margin-bottom:1.5rem}
.hero.light-hero .hero-text h1,.hero.light-hero .hero-text p{color:#002147}

/* BUTTONS */
.btn{display:inline-block;padding:.8rem 1.6rem;border:none;font-weight:600;cursor:pointer;transition:.3s;background:#007BFF;color:#fff;border-radius:4px}
.btn.secondary{background:#0056b3}
.btn:hover{background:#0056b3}
.btn.secondary:hover{background:#003d80}

/* PRODUCT GRID / BLOG GRID */
.product-grid,.knowledge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}
.product-card,.blog-card{background:#fff;border:1px solid #eee;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.05);padding:1rem}
.dark-page .product-card,.dark-page .blog-card{background:#002147;border:1px solid #003366}
.product-card h3,.blog-card h3{margin:1rem 0 .5rem;font-size:1.25rem;color:#002147}
.dark-page .product-card h3,.dark-page .blog-card h3{color:#fff}
.blog-card .blog-date{font-size:.9rem;color:#666;margin-bottom:.3rem}

/* SECTIONS */
section{padding:4rem 0}
section h2{text-align:center;margin-bottom:1.5rem;font-size:2rem;color:#002147}
.light-page section h2{color:#002147}
.dark-page section h2{color:#fff}

/* CONTACT GRID */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:2rem}
.contact-item h3{margin-bottom:.5rem;font-size:1.1rem}
.social-links{list-style:none;display:flex;gap:1rem}
.social-links a{color:#007BFF;font-weight:600}
.social-links a:hover{text-decoration:underline}

/* FORM + MAP WRAPPER */
.form-wrapper, .map-wrapper{margin-top:2rem;width:100%}
iframe{width:100%;border:0;border-radius:4px}

/* CORE VALUES & TIMELINE */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}
.value-card{background:#fff;padding:1.5rem;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.dark-page .value-card{background:#003366}
.timeline-wrapper{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;overflow-x:auto;margin-top:2rem}
.timeline-item{flex:1;min-width:150px;text-align:center;position:relative}
.timeline-year{display:block;font-weight:700;margin-bottom:.5rem;color:#007BFF}

/* FOOTER */
footer{background:#002147;color:#fff;text-align:center;padding:2rem 0;font-size:.95rem;margin-top:3rem}
footer a{color:#fff;text-decoration:underline}
footer a:hover{text-decoration:none}

/* RESPONSIVE BREAKPOINTS */
@media(max-width:1199px){
  .hero-text h1{font-size:2rem}
}
@media(max-width:767px){
  header ul{flex-direction:column;gap:1rem;background:#fff;position:absolute;top:70px;left:0;width:100%;display:none}
  header ul.active{display:flex}
  .timeline-wrapper{flex-direction:column;align-items:center}
  .hero-text h1{font-size:1.8rem}
}
/* =========================================================
   HERO SECTION FIX + THEME ENHANCEMENT (Insil Scientific®)
   ========================================================= */

/* Light scientific background tone for pages */
body.light-page {
  background-color: #f6f9fc; /* Cool neutral blue-white */
  color: #002147;
}

/* Hero banner full-screen alignment */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* full viewport height */
  overflow: hidden;
}

/* Ensures hero image fills container without distortion */
.hero img.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Centered hero text overlay */
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

/* Optional dark overlay for improved text readability */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25); /* 25% transparent overlay */
  z-index: 1;
}

/* Adjusts layering: ensures text stays above overlay */
.hero-text h1,
.hero-text p,
.hero-text .btn {
  position: relative;
  z-index: 3;
}

/* Responsive adjustments for smaller devices */
@media (max-width: 767px) {
  .hero {
    height: 70vh; /* reduce height on phones */
  }
  .hero-text h1 {
    font-size: 1.8rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
}
/* =========================================================
   DARK THEME HERO + BACKGROUND FIX (Insil Scientific®)
   For: /products/ & /contact.html
   ========================================================= */

/* Dark professional background */
body.dark-page {
  background-color: #002147; /* deep corporate blue */
  color: #ffffff;
}

/* Dark header and footer tone */
.header-dark,
.footer-dark {
  background-color: #002147;
  color: #ffffff;
}

/* Hero styling for dark pages */
.dark-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Hero image covers full viewport */
.dark-hero img.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero text - bright white overlay */
.dark-hero .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  text-align: center;
  color: #ffffff;
  z-index: 2;
}

/* Subtle overlay for readability */
.dark-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* darker overlay for contrast */
  z-index: 1;
}

/* Keep hero text on top of overlay */
.dark-hero .hero-text h1,
.dark-hero .hero-text p,
.dark-hero .hero-text .btn {
  position: relative;
  z-index: 3;
}

/* Buttons on dark pages */
body.dark-page .btn {
  background-color: #007BFF; /* bright blue accent */
  color: #fff;
}

body.dark-page .btn:hover {
  background-color: #0056b3;
}

/* Headings on dark pages */
body.dark-page h1,
body.dark-page h2,
body.dark-page h3 {
  color: #ffffff;
}

/* Responsive hero size adjustment */
@media (max-width: 767px) {
  .dark-hero {
    height: 70vh;
  }
  .dark-hero .hero-text h1 {
    font-size: 1.8rem;
  }
  .dark-hero .hero-text p {
    font-size: 1rem;
  }
}
/* =========================================================
   POLISHED LABORATORY BLUE HERO GRADIENT (Product Pages)
   ========================================================= */

/* Applies only to product-page hero sections */
body.product-page .hero {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  background: linear-gradient(
      180deg,
      rgba(0, 54, 122, 0.85) 0%,
      rgba(0, 83, 173, 0.75) 50%,
      rgba(0, 106, 204, 0.6) 100%
    );
  color: #fff;
}

/* Background image styling with smooth blend */
body.product-page .hero img.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.65; /* lets gradient tint come through */
  z-index: 1;
}

/* Gradient overlay to enhance visual depth */
body.product-page .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.45) 100%
  );
  z-index: 2;
}

/* Text content centered above gradient */
body.product-page .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  color: #ffffff;
  max-width: 800px;
  padding: 0 1rem;
}

body.product-page .hero-text h1 {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

body.product-page .hero-text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #e6efff;
}

/* CTA button styling */
body.product-page .hero-text .btn {
  background-color: #007BFF;
  color: #fff;
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
body.product-page .hero-text .btn:hover {
  background-color: #0056b3;
}

/* Responsive tweaks */
@media (max-width: 767px) {
  body.product-page .hero {
    height: 65vh;
  }
  body.product-page .hero-text h1 {
    font-size: 1.8rem;
  }
  body.product-page .hero-text p {
    font-size: 1rem;
  }
}