:root {
  --blue:#0b3d91; 
  --teal:#00a99d; 
  --charcoal:#222; 
  --muted:#6b7280;
  --ore:#8b5e3c; 
  --stone:#3a3f44; 
  --gold:#c99a2a;
  --bg:#fbfcfe;
  --max-width:1200px;
}

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

body {
  font-family: Inter, system-ui, Arial, sans-serif;
  color: var(--charcoal);
  background: var(--bg);
  line-height: 1.6;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px;
}

/* Header */
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  animation: fadeDown 1s ease-out;
}
nav a {
  margin:0 12px;
  color:var(--charcoal);
  text-decoration:none;
  font-weight:600;
  transition:color .3s;
}
nav a:hover { color:var(--blue); }

/* Hero */
.hero {

  background: linear-gradient(rgba(11,61,145,0.7), rgba(0,169,157,0.7)), url('mining-bg.jpg') center/cover;
  color:#fff;
  padding:60px 20px;
  text-align:center;
  border-radius:8px;
  margin-bottom:40px;
  animation: fadeIn 1.5s ease-out;
}
.hero h1 { font-size:2.2rem; margin-bottom:12px; }

/* Our Work Section */
.ourwork-section h2 {
  color: var(--blue);
  margin-bottom:20px;
}

.footprint img {
  width:100%;
  max-width:900px;
  height:auto;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  display:block;
  margin:0 auto 30px;
  animation: fadeIn 1.5s ease-out;
}

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

.card {
  background:#fff;
  border-radius:10px;
  padding:18px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  opacity:0;
  transform:translateY(30px);
  transition: all 0.6s ease-out, background-color 0.3s, color 0.3s;
}
.card.visible {
  opacity:1;
  transform:translateY(0);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
  background: var(--blue);
  color:#fff;
}
.card:hover strong,
.card:hover .muted {
  color:#fff;
}

/* Footer sticks to bottom */
footer {
  margin-top: auto;
  width: 100%;
  text-align: center;
  padding: 20px;
  background: #f1f3f6;
  color: var(--muted);
}

footer a { color:var(--muted); margin:0 8px; text-decoration:none; }
footer a:hover { color:var(--blue); }
}


/* Animations */
@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
@keyframes fadeDown {
  from {opacity:0; transform:translateY(-20px);}
  to {opacity:1; transform:translateY(0);}
}
@keyframes fadeUp {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
.footer-right {
  text-align: right;          /* left align text */
  font-weight: bold;         /* make font bold */
  color: var(--ore);         /* apply ore colour (#8b5e3c) */
}