:root {
  --blue:#0b3d91; 
  --teal:#00a99d; 
  --charcoal:#222; 
  --muted:#6b7280;
  --ore:#8b5e3c; 
  --stone:#3a3f44; 
  --gold:#c99a2a;
  --bg:#fbfcfe;
  --max-width:1200px;
}
/* Reset margins and ensure full viewport */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Reset */
* { 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;
}

/* Wrapper should fill the screen */
.wrap {
  min-height: 100vh;       /* full viewport height */
  width: 99%;             /* full width */
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;  /* stack header, main, footer */
}


/* 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 section fills width */
.hero {
  width: 100%;
  min-height: 60vh;        /* take up most of the screen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(rgba(11,61,145,0.7), rgba(0,169,157,0.7)), 
              url('mining-bg.jpg') center/cover no-repeat;
  color: #fff;
  padding: 40px 20px;
}

.hero h1 { font-size:2.5rem; margin-bottom:12px; }

/* Cards */
.card {
  background:#fff;
  border-radius:8px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  margin-bottom:20px;
  opacity:0;
  transform:translateY(30px);
  transition: all 0.6s ease-out;
}
.card.visible {
  opacity:1;
  transform:translateY(0);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

/* Split section fills width */
.split-section {
  flex: 1;                 /* expand to fill remaining space */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
}

.split-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Image fills its half */
.split-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}


/* Responsive tweak */
@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
  }
  .split-image {
    margin-top: 20px;
  }
}

/* Values */
.values {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.value {
  flex:1;
  min-width:200px;
  background:var(--stone);
  color:#fff;
  padding:16px;
  border-radius:8px;
  text-align:center;
  animation: bounceIn 1s ease;
}
.value i {
  font-size:1.5rem;
  margin-bottom:8px;
  display:block;
  animation: pulse 2s infinite;
}

/* 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);}
}
@keyframes bounceIn {
  0% {transform:scale(0.8); opacity:0;}
  60% {transform:scale(1.05); opacity:1;}
  100% {transform:scale(1);}
}
@keyframes pulse {
  0% {transform:scale(1);}
  50% {transform:scale(1.2);}
  100% {transform:scale(1);}
}

.footer-right {
  text-align: right;          /* left align text */
  font-weight: bold;         /* make font bold */
  color: var(--ore);         /* apply ore colour (#8b5e3c) */
}