:root{
  --accent-green:#00A878;
  --header-bg:#0b1120;
  --body-bg:#ffffff;
  --text-main:#111827;
  --text-muted:#6b7280;
  --footer-bg:#020617;
  --max-width:1400px; /* widened cap so large screens look good */
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--body-bg);color:var(--text-main);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
main{flex:1 0 auto}

/* ---------- GLOBAL CONTAINER (FULLER LAYOUT) ---------- */
/* Use vw-based width so content spans the screen with small borders */
.container{
  width: min(92vw, var(--max-width)); /* ~4% border each side on large screens */
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Header */
.site-header{background:var(--header-bg);color:#e5e7eb;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:1rem}
.logo-tag-inner{background:#ffffff;border-radius:999px;padding:4px 10px;border:1px solid #e5e7eb;display:inline-flex;align-items:center;justify-content:center}
.logo-tag-inner img{height:36px;display:block}
.main-nav{display:flex;align-items:center;gap:.75rem}
.nav-link{padding:.35rem .5rem;border-radius:4px;font-size:.95rem;color:#e5e7eb}
.nav-link:hover,.nav-link.active{color:#ecfeff}
.nav-link.active{border-bottom:2px solid var(--accent-green)}
.nav-item{position:relative}
.dropdown-toggle{background:none;border:none;color:#e5e7eb;cursor:pointer;padding:.35rem .5rem;border-radius:4px;font-size:.95rem}
.dropdown-toggle:hover{color:#ecfeff}
.dropdown-menu{position:absolute;top:100%;left:0;background:#020617;border-radius:6px;min-width:190px;padding:.3rem 0;box-shadow:0 10px 25px rgba(0,0,0,.45);display:none}
.dropdown-item{display:block;padding:.45rem .75rem;font-size:.9rem;color:#e5e7eb}
.dropdown-item:hover{background:rgba(148,163,184,.2);color:#f9fafb}
.nav-item.open .dropdown-menu{display:block}
#mobile-nav-toggle{display:none;background:none;border:1px solid #4b5563;border-radius:4px;color:#e5e7eb;padding:.25rem .5rem}

/* ================= HERO ================= */

.hero-slideshow {
  position: relative;
  height: 455px;
  overflow: hidden;
}

/* The slides */
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity .8s ease;
  filter: brightness(.78) contrast(1.05) saturate(1.08);
}

.slide.active {
  opacity: 1;
}

/* Overlay text box */
.hero-caption {
  position: absolute;
  bottom: 55px;
  left: 60px;
  font-size: 1.7rem;
  font-weight: 700;
  color: white;
  max-width: 650px;
  background: rgba(0,0,0,0.45);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  line-height: 1.35;
  box-shadow: 0 12px 35px rgba(0,0,0,0.32);
}

/* ===== Hero slider controls ===== */

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #ffffff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.hero-arrow-prev { left: 14px; }
.hero-arrow-next { right: 14px; }

.hero-arrow:hover {
  background: rgba(0,0,0,0.75);
  transform: translateY(-50%) scale(1.05);
}

/* Dots under hero */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
}

.hero-dot.active {
  background: #ffffff;
  opacity: 1;
}

/* Make controls more comfortable on mobile */
@media (max-width: 900px) {
  .hero-arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
    top: 52%;
  }
  .hero-arrow-prev { left: 10px; }
  .hero-arrow-next { right: 10px; }

  .hero-dots {
    bottom: 10px;
  }
}

/* ===== Inner page layout ===== */
.page-main {
  padding: 2.5rem 0;
  background: #f9fafb;
}

/* Allow inner pages to use more of the container (remove tiny cap) */
.page-main .container {
  max-width: none; /* let .container rule control width */
}

/* Main H1 on inner pages (About, Business Model, etc.) */
.page-main h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 2.1rem;
  line-height: 1.25;
}

/* Body copy on inner pages */
.page-text p {
  font-size: 1.02rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

/* Sections */ 
.section-light{padding:2.5rem 0;background:#f9fafb}
.section-muted{padding:2.5rem 0;background:#f3f4f6}
.page-main{padding:2.5rem 0}
.page-text p{font-size:1.03rem;color:var(--text-muted);max-width:900px}

/* Welcome section */
.welcome-inner{display:flex;align-items:center;gap:2rem}
.welcome-logo{flex:0 0 auto;display:flex;justify-content:center}
.welcome-logo-tag{background:#ffffff;border-radius:24px;padding:12px 20px;border:1px solid #e5e7eb;display:inline-flex}
.welcome-logo-tag img{height:60px}
.welcome-text{flex:1 1 auto;text-align:right}
.welcome-text p{color:var(--text-muted);margin-bottom:1rem}
.welcome-text h2{margin-top:0}

/* Buttons */
.btn{display:inline-block;padding:.55rem 1.1rem;border-radius:999px;border:none;cursor:pointer;font-size:.92rem;font-weight:500;background:var(--accent-green);color:#ecfdf3;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(0,0,0,.18);background:#059669}
.btn-outline{background:transparent;border:1px solid var(--accent-green);color:var(--accent-green)}
.btn-outline:hover{background:var(--accent-green);color:#ecfdf3}

/* Industries */
.industries h2{text-align:center;margin-top:0}
.industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:1.25rem}
.industry-card{background:#ffffff;border-radius:10px;padding:1rem;border:1px solid #e5e7eb;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.industry-card img{width:52px;height:52px;border-radius:16px;object-fit:contain;background:#f3f4f6;padding:.35rem}
.industry-card h3{margin:.2rem 0}
.industry-card p{margin:0;color:var(--text-muted);font-size:.9rem}
.industry-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,23,42,.16);border-color:var(--accent-green)}

/* Companies we serve */
.companies h2{text-align:center;margin-top:0}
.companies-logos{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:center;margin-top:1.25rem}
.company-logo-wrap{flex:0 0 auto;max-height:70px;display:flex;align-items:center}
.company-logo-wrap img{max-height:70px;max-width:150px;object-fit:contain}

/* Products grid */
.products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.5rem}
.product-card{background:#ffffff;border-radius:10px;padding:1rem;border:1px solid #e5e7eb;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center}
.product-card h3{margin:0;font-size:.98rem}
.product-image-wrap{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f9fafb;border-radius:8px}
.product-image-wrap img{max-width:100%;max-height:100%;object-fit:contain}

/* Category links */
.category-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}

/* Contact */
.contact-form{display:grid;gap:.75rem;max-width:600px;margin-top:1rem}
.contact-form label{font-size:.92rem;color:var(--text-main);display:flex;flex-direction:column;gap:.25rem}
.contact-form input,.contact-form textarea{padding:.5rem;border-radius:6px;border:1px solid #d1d5db;font:inherit}
.form-status{font-size:.88rem;color:var(--accent-green);min-height:1.2em}

/* Footer */
.site-footer{background:var(--footer-bg);color:#9ca3af;padding:2rem 0 1.5rem;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:1.25rem;font-size:.9rem}
.footer-grid h4{color:#e5e7eb;margin-top:0}
.footer-grid a{color:#9ca3af}
.footer-grid a:hover{color:#d1fae5}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:.25rem}
address{font-style:normal}
copyright{margin-top:1rem;font-size:.85rem;color:#6b7280}

/* Responsive */
@media (max-width:900px){
  .main-nav{display:none;flex-direction:column;align-items:flex-start;background:#020617;position:absolute;left:0;right:0;top:100%;padding:.75rem 1rem;border-bottom:1px solid #111827}
  .main-nav.open{display:flex}
  #mobile-nav-toggle{display:block}
  .header-inner{position:relative}
  .hero-slideshow{height:260px}
  .hero-text{max-width:100%;margin:0 auto}
  .welcome-inner{flex-direction:column}
  .welcome-text{text-align:center}
  .companies-logos{justify-content:center}
  .footer-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .products-grid{grid-template-columns:1fr}
}

/* CONTACT MAP */
.contact-map iframe {
  display: block;
  width: 100%;
  height: 350px;
}

/* CONTACT SUMMARY (GREEN STRIP WITH 3 CARDS) */
.contact-summary {
  background: #00A878;
  padding: 3rem 0;
  color: #ffffff;
}

.contact-cards-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
}

.contact-card {
  flex: 1;
  background: rgba(0,0,0,0.10);
  padding: 1.5rem 1rem;
  border-radius: 15px;
  text-align: center;
}

.contact-card h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
}

.contact-card p {
  margin: 0;
  font-size: 0.95rem;
}

/* CONTACT FORM SPACING */
.contact-form-section h1 {
  text-align: center;
}

.contact-form-section > p {
  text-align: center;
  color: #6b7280;
  max-width: 620px;
  margin: 0.25rem auto 1.25rem;
}

/* RESPONSIVE: STACK CARDS ON SMALL SCREENS */
@media (max-width: 900px) {
  .contact-cards-row {
    flex-direction: column;
  }
}

/* ================= FINAL POLISH ================= */

/* Softer background + nicer typography */
body {
  background: #f3f4f6;
  color: #111827;
}

h1, h2, h3 {
  letter-spacing: 0.02em;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.4rem;
}

/* Give main content more breathing room */
.page-main {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

/* Welcome section – make it feel more “hero-like” */
.welcome-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* Product cards – subtle hover and depth */
.product-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.12);
  border-color: #00A878;
}

/* Contact summary cards – more premium feel */
.contact-summary {
  margin-top: 0;
}

.contact-card {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}

/* Footer – pull it visually closer to content */
.site-footer {
  margin-top: 0;
}

/* Optional: slightly tighter width on very large screens */
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
}

/* ========== Micro Polish ========== */

/* Reduce map-to-green-strip gap */
.contact-map iframe {
  margin-bottom: -4px;
}

/* Equal height for all three cards, perfect alignment */
.contact-card {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Make address more readable */
.contact-card p {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Footer separation line (subtle) */
.site-footer {
  border-top: 6px solid #00684e;
}

/* Contact page: reduce bottom padding so footer hugs closer */
.contact-page-main {
  padding-bottom: 1.5rem;
}

/* MOBILE HEADER IMPROVEMENTS */
@media (max-width: 900px) {

  .site-header {
    padding: 0.4rem 0;
  }

  .logo-tag-inner img {
    height: 28px;  /* reduce mobile logo */
  }
    /* Inner page headings on mobile */
  .page-main {
    padding: 1.8rem 0 2.3rem;
  }

  .page-main h1 {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 0.8rem;
  }

  .page-text p {
    font-size: 0.98rem;
  }

  #mobile-nav-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1e293b;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    font-size: 26px;
    border: 1px solid #ffffff50;
    color: #ffffff;
  }

  #mobile-nav-toggle:focus {
    outline: 2px solid #00A878;
  }

  .main-nav {
    width: 100%;
    background: #0b1120;
    border-bottom: 1px solid #1e293b;
  }

  .nav-link,
  .dropdown-toggle {
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
  }
}
@media (max-width: 900px){
  .hero-text h1 {
    font-size: 1.4rem;
    text-align: center;
    padding: 0 1rem;
  }
}
@media (max-width: 900px){
  .welcome-logo-tag img {
    height: 48px;
  }
  .welcome-text {
    margin-top: 1rem;
  }
}

/* CONTACT: align page like others */
.contact-page-main {
  background: #f9fafb;
  padding-bottom: 1.5rem;
}

.contact-summary .container {
  max-width: 1100px;
}

/* Center alignment fix */
.page-text h1 {
  text-align: center;
  margin-bottom: 1.8rem;
}

/* ---------- ADDITIONAL HERO / MOBILE FIXES ---------- */
/* Ensure hero caption centers and doesn't overflow on small screens */
@media (max-width: 900px) {
  .hero-caption {
    left: 1rem;
    right: 1rem;
    bottom: 30px;
    max-width: none;
    text-align: center;
    font-size: 1.3rem;
    padding: 0.9rem;
  }
}

/* ---------- MOBILE CONTAINER TUNE (extra padding on phones) ---------- */
@media (max-width: 480px) {
  .container {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
  }
}

/* ---------- DESKTOP SIDE-BORDER TUNE (slightly larger on huge screens) ---------- */
@media (min-width: 1200px) {
  .container {
    width: min(90vw, var(--max-width));
  }
}
/* =========================
   Contact section: fixes
   Paste this at the END of assets/css/style.css
   ========================= */

/* Full-bleed map container (keeps neat side gutters) */
.contact-map-section {
  width: 100%;
  padding: 0;
  background: transparent;
}

/* Ensure the map sits centered with 5% gutters on desktop and full width on mobile */
.contact-map {
  width: 100%;
}
.contact-map iframe {
  display: block;
  width: 90%;              /* 5% left + 5% right gutters */
  max-width: 1400px;
  margin: 0 auto;
  height: 420px;           /* taller map for nicer visual balance */
  border: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Reduce gap between map and green strip */
.contact-map iframe { margin-bottom: -6px; }

/* Green summary band (Address / Phone / Email) — full width but inner content centered */
.contact-summary {
  background: #00A878;
  padding: 2.25rem 5%;     /* left/right gutters match the map (5%) */
  color: #ffffff;
  margin: 0;               /* remove added outer white space */
}

/* Center and constrain card row */
.contact-summary .contact-cards-row {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
}

/* Card styling — higher contrast and readable */
.contact-card {
  flex: 1;
  background: rgba(0,0,0,0.06);   /* subtle darker card on green */
  padding: 2rem 1.4rem;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  color: #ffffff;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Headings/paragraphs inside cards */
.contact-card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  color: #ffffff;
  line-height: 1.15;
}
.contact-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.95);
  opacity: 0.95;
}

/* Small decorative underline used previously — keep it visible */
.contact-card .card-underline {
  width: 60px;
  height: 2px;
  background: rgba(255,255,255,0.25);
  margin: 0.9rem auto 0;
  border-radius: 2px;
}

/* Reduce the large white margins around the contact block on inner pages */
.contact-page-main {
  padding-top: 0.5rem;     /* pull content up so map touches header area more naturally */
  padding-bottom: 1.5rem;  /* keep footer spacing reasonable */
  background: transparent;
}

/* Make sure the contact-summary container doesn't add extra white below on desktop */
.contact-summary + .site-footer {
  margin-top: 0;
}

/* Responsive: stack the cards and make map full width on smaller screens */
@media (max-width: 900px) {

  .contact-map iframe {
    width: calc(100% - 32px);  /* small side padding on mobile */
    margin: 0 16px;
    height: 300px;
  }

  .contact-summary {
    padding: 1.5rem 4%;
  }

  .contact-summary .contact-cards-row {
    flex-direction: column;
    gap: 1rem;
  }

  .contact-card {
    min-height: auto;
    padding: 1rem 1rem;
  }
}

/* Small extra polish for phone sized displays */
@media (max-width: 420px) {
  .contact-map iframe {
    width: calc(100% - 24px);
    margin: 0 12px;
    height: 260px;
  }
  .contact-card h2 { font-size: 1rem; }
  .contact-card p { font-size: 0.95rem; }
}
/* Inner pages: centered heading + centered paragraph block */
.page-main h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: 2.1rem;
  line-height: 1.25;
}

/* paragraph block centered with comfortable max-width for readability */
.page-text p {
  margin: 0 auto 1rem;      /* centers the paragraph block */
  max-width: 900px;         /* limits line length */
  text-align: center;       /* center text inside the block */
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
/* =============================
   CONTACT PAGE FIXES (FINAL)
   ============================= */

/* FULL-WIDTH MAP (100%) */
.contact-map iframe {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  height: 420px !important;
  display: block;
  border: none;
}

/* REMOVE GREEN OVERFLOW */
.contact-summary {
  background: #00A878;
  padding: 2.5rem 3%;
  margin-top: 0 !important;
}

/* FIX GREEN STRIP HEIGHT */
.contact-summary .contact-cards-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

/* FIX CARD COLORS + READABILITY */
.contact-card {
  flex: 1;
  background: rgba(255,255,255,0.75);  /* light background */
  color: #000000 !important;          /* make text BLACK */
  border-radius: 14px;
  padding: 2rem 1.2rem;
  min-height: 220px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* TEXT FIXES */
.contact-card h2 {
  color: #000 !important;
  margin-bottom: 0.5rem;
}

.contact-card p {
  color: #000 !important;
  opacity: 1 !important;
  line-height: 1.45;
}

/* FIX MOBILE STACKING */
@media (max-width: 900px) {
  .contact-summary .contact-cards-row {
    flex-direction: column;
    gap: 1rem;
  }

  .contact-card {
    min-height: auto;
  }

  .contact-map iframe {
    height: 320px !important;
  }
}