.logo img {
  height: 60px;
}

/* Theme Colors */
:root {
  --green:#0b8740;       /* Vibrant green */
  --green-dark:#076b32;  /* Deep green for hover */
  --yellow:#ffcc00;      /* Bold, bright yellow */
  --yellow-dark:#e6b800; /* Golden yellow */
  --black:#111111;
  --text:#1a1a1a;
  --muted:#666666;
  --bg:#fff8e6;          /* Warm background */
  --card:#ffffff;
  --border:#e6b800;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Global Background - applies to ALL pages */
body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  color: var(--text);
  line-height: 1.6;

  background: 
    linear-gradient(rgba(255, 249, 230, 0.88), rgba(255, 242, 204, 0.88)),
    url("IMAGES/diesel_pump.jpeg") no-repeat center center fixed;
  background-size: cover;
}

/* Add a subtle overlay for readability on all content */
.section, .hero, .card, form, .contact, footer {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 20px;
}

/* Header / Nav 
header {
  position:sticky; 
  top:0; 
  z-index:100;
  background: var(--bg);
  border-bottom:1px solid var(--border);*/

  /* Sticky Header */
header {
  position: sticky;
  top: 0;
  z-index: 1000; /* stays above other content */
  background-color: #006400; /* deep green */
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* subtle shadow */
}

header nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  transition: color 0.3s ease;
}

header nav a:hover {
  color: #ffeb3b; /* bright yellow on hover */
}
  header {
    background-color: #006400;
    color: #ffffff;
  }
  header nav a {
    color:#ffffff
  }
    header nav a:hover {
      color:#ffeb3b;
    }


.header-inner {
  max-width:1100px; 
  margin:0 auto; 
  padding:14px 20px;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:16px;
}

.logo span { color:var(--black) }
nav a {
  text-decoration:none; 
  color:var(--black); 
  padding:8px 12px; 
  border-radius:10px; 
  font-weight:600;
}
nav a:hover { background: #f7f7f7; }
nav a.active { outline:2px solid var(--yellow); }

/* Hero */
.hero {
  border-bottom:2px solid var(--border);
}
.hero-inner {
  max-width:1100px; 
  margin:0 auto; 
  padding:60px 20px; 
  text-align:center;
}
.badge {
  display:inline-block; 
  padding:6px 10px; 
  font-size:12px; 
  font-weight:700;
  background: #f9f9f9; 
  border:1px solid var(--border); 
  border-radius:999px; 
  color:var(--muted);
}
.hero h1 {
  margin:14px 0 10px; 
  font-size:40px; 
  line-height:1.15; 
  color:var(--black)
}
.hero p {
  margin:0 auto 24px; 
  max-width:680px; 
  color:#444
}

/* Buttons */
.btn {
  display:inline-block; 
  padding:12px 18px; 
  border-radius:12px;
  text-decoration:none; 
  font-weight:700; 
  border:1px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #089e45, var(--green-dark));
}
.btn-outline {
  border-color: var(--green); 
  color: var(--green); 
  background:#fff;
}
.btn-outline:hover {
  background: linear-gradient(135deg, #e6ffe6, #f3fff6);
}

/* Sections / Cards */
.section {
  max-width:1100px; 
  margin:40px auto; 
  padding:40px 20px;
}
.section h2 { margin:0 0 10px; color:var(--black) }
.section .sub { color:var(--muted); margin-bottom:22px }

.grid { display:grid; gap:18px }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }

.card {
  border:1px solid var(--border); 
  border-radius:16px; 
  padding:18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.card h3 { margin:6px 0 8px; color:var(--black) }
.kpi { font-size:28px; font-weight:800; color:var(--green) }

/* Table */
table {
  width:100%; 
  border-collapse:collapse; 
  background:#fff; 
  border:1px solid var(--border); 
  border-radius:12px; 
  overflow:hidden;
}
th,td {
  padding:14px 12px; 
  border-bottom:1px solid var(--border); 
  text-align:left;
}
thead th { background:#fafafa; color:#333 }

/* Form */
form {
  border:1px solid var(--border); 
  border-radius:16px; 
  padding:20px;
}
label { display:block; font-weight:700; margin-top:12px }
input, textarea {
  width:100%; 
  padding:12px; 
  border:1px solid var(--border); 
  border-radius:10px; 
  margin-top:6px; 
  font-size:15px;
}
input:focus, textarea:focus {
  outline:none; 
  border-color:var(--green); 
  box-shadow:0 0 0 3px rgba(10,126,59,.12)
}
button { cursor:pointer }

/* Contact */
.contact {
  padding: 60px 20px;
  text-align: center;
}

.contact h2 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 2rem;
}

.contact p {
  font-size: 1.1rem;
  margin: 10px 0;
  color: #333;
}

.contact-details {
  margin: 30px 0;
  line-height: 1.8;
}

.contact a {
  color: #006400;
  text-decoration: none;
}

.contact-actions {
  margin-top: 25px;
}

.contact-actions .btn {
  display: inline-block;
  margin: 5px;
  padding: 12px 25px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.contact-actions .btn {
  background: #f4c430;
  color: #000;
}

.contact-actions .btn:hover {
  background: #e0b222;
}

.contact-actions .btn-whatsapp {
  background: #25D366;
  color: white;
}

.contact-actions .btn-whatsapp:hover {
  background: #1da851;
}

/* Footer 
footer {
  border-top:1px solid var(--border); 
  background: rgba(255,255,255,0.95);
  color:#444;
}*/
footer {
  background: linear-gradient(to right, #006400, #f4c430); /* Green → Yellow blend */
  color: #fff; /* White text for good contrast */
  padding: 25px;
  text-align: center;
}

footer a {
  color: #000; /* Black links stand out on yellow */
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  color: #fff; /* White on hover */
}
}
.tagline { font-size:14px; color:#666 }
.badge-brand {
  padding:6px 10px; 
  border-radius:999px; 
  font-weight:700; 
  background: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
  color:#1a1a1a;
}

/* WhatsApp FAB */
.fab {
  position:fixed; 
  width:60px; 
  height:60px; 
  bottom:22px; 
  right:22px;
  background:#25D366; 
  color:#fff; 
  border-radius:50%; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  font-size:28px; 
  box-shadow:0 6px 16px rgba(0,0,0,.18); 
  z-index:1000; 
  text-decoration:none;
}
.fab:hover { transform:translateY(-1px) }