:root{
  --primary:#1c4f7c;
  --secondary:#3d8bfd;
  --light:#f7f9fc;
  --dark:#1a1a1a;
  --text:#444;
  --max-width:1200px;
}

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

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  line-height:1.6;
  background:white;
}

.container{
  width:90%;
  max-width:var(--max-width);
  margin:auto;
}

header{
  position:sticky;
  top:0;
  background:white;
  border-bottom:1px solid #eee;
  z-index:1000;
}

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
}

.logo{
  font-size:1.4rem;
  font-weight:700;
  color:var(--primary);
  text-decoration: none;
}

.menu{
  display:flex;
  gap:2rem;
}

.menu a{
  text-decoration:none;
  color:var(--dark);
  font-weight:500;
}
.hero{
  position:relative;
  min-height:80vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:white;
}
.hero-picture{
  position:absolute;
  inset:0;
  z-index:1;
}

.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:2;
}

.hero .container{
  position:relative;
  z-index:3;
}

.hero-content{
  max-width:700px;
}

.hero h1{
  font-size:3.5rem;
  margin-bottom:1rem;
}

.hero p{
  font-size:1.2rem;
  margin-bottom:2rem;
}

.btn{
  display:inline-block;
  padding:14px 28px;
  background:var(--secondary);
  color:white !important;
  text-decoration:none;
  border-radius:8px;
}

section{
  padding:5rem 0;
}

.section-title{
  text-align:center;
  margin-bottom:3rem;
}

.section-title h2{
  color:var(--primary);
  font-size:2.3rem;
}

.impact{
  background:var(--light);
}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}

.stat{
  background:white;
  padding:2rem;
  text-align:center;
  border-radius:12px;
}

.stat h3{
  font-size:2.5rem;
  color:var(--secondary);
}

.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
}

.card{
  padding:2rem;
  border:1px solid #e7e7e7;
  border-radius:14px;
}

.card h3{
  color:var(--primary);
  margin-bottom:1rem;
}

.projects{
  background:var(--light);
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
}

.project{
  background:white;
  border-radius:14px;
  overflow:hidden;
}

.project img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.project a{
  text-decoration: none;
  color: inherit;
}

.project a:hover{
  text-decoration: underline;
}

.project-content{
  padding:1.5rem;
}

.cta{
  text-align:center;
  background:var(--primary);
  color:white;
}

.cta h2{
  margin-bottom:1rem;
}

footer{
  background:#111;
  color:#ccc;
  padding:3rem 0;
}

footer p{
  margin-bottom:.5rem;
}

@media(max-width:768px){

  .hero h1{
    font-size:2.4rem;
  }

  .menu{
    display:none;
  }

}

.article{
  width:min(1020px,90%);
  margin:4rem auto;
  color:var(--text);
  line-height:1.8;
  font-size:1.1rem;
}

.article > *{
  margin:1.5rem 0;
}

.article h1{
  font-size:3rem;
  line-height:1.15;
  color:var(--primary);
  margin-bottom:1rem;
}

.article h2{
  font-size:2rem;
  line-height:1.2;
  color:var(--primary);
  margin-top:3rem;
}

.article h3{
  font-size:1.5rem;
  line-height:1.3;
  color:var(--primary);
  margin-top:2rem;
}

.article h4{
  font-size:1.2rem;
  color:var(--primary);
}

.article p{
  margin:1.2rem 0;
}

.article .lead{
  font-size:1.35rem;
  color:#666;
}

.article a{
  color:var(--secondary);
}

.article strong{
  color:var(--dark);
}

.article em{
  font-style:italic;
}

/* ==========================================================
LISTS
========================================================== */

  .article ul,
  .article ol{
    padding-left:2rem;
  }

  .article li{
    margin:.6rem 0;
  }

  /* ==========================================================
  IMAGES
  ========================================================== */

  .article img{
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
  }

  .article figure{
    margin:2rem 0;
  }

  .article figcaption{
    margin-top:.75rem;
    font-size:.9rem;
    color:#777;
    text-align:center;
  }

  /* ==========================================================
  BLOCKQUOTE
  ========================================================== */

  .article blockquote{
    border-left:5px solid var(--secondary);
    padding-left:1.5rem;
    font-size:1.2rem;
    font-style:italic;
    color:#666;
  }

  /* ==========================================================
  TABLES
  ========================================================== */

  .article table{
    width:100%;
    border-collapse:collapse;
    margin:2rem 0;
  }

  .article th,
  .article td{
    border:1px solid #ddd;
    padding:.75rem;
    text-align:left;
  }

  .article th{
    background:#f5f5f5;
  }

  /* ==========================================================
  CODE
  ========================================================== */

  .article code{
    background:#efefef;
    padding:.2rem .45rem;
    border-radius:4px;
    font-family:Consolas, monospace;
  }

  .article pre{
    background:#222;
    color:white;
    padding:1.25rem;
    border-radius:12px;
    overflow:auto;
  }

  .article pre code{
    background:none;
    padding:0;
    color:inherit;
  }

  /* ==========================================================
  HORIZONTAL RULE
  ========================================================== */

  .article hr{
    border:none;
    border-top:1px solid #ddd;
    margin:3rem 0;
  }

  /* ==========================================================
  WIDTH UTILITIES
  ========================================================== */

  .w-25{width:25%;}
  .w-33{width:33.333%;}
  .w-40{width:40%;}
  .w-50{width:50%;}
  .w-60{width:60%;}
  .w-66{width:66.666%;}
  .w-75{width:75%;}
  .w-100{width:100%;}

  /* ==========================================================
  TEXT ALIGNMENT
  ========================================================== */

  .left{text-align:left;}
  .center{text-align:center;}
  .right{text-align:right;}

  /* ==========================================================
  FLOATS
  ========================================================== */

  .float-left{
    float:left;
    margin:0 2rem 1.5rem 0;
  }

  .float-right{
    float:right;
    margin:0 0 1.5rem 2rem;
  }

  /* ==========================================================
  DISPLAY
  ========================================================== */

  .block{display:block;}
  .inline{display:inline;}
  .inline-block{display:inline-block;}

  /* ==========================================================
  BORDERS
  ========================================================== */

  .border{
    border:1px solid #ddd;
  }

  .border-2{
    border:2px solid #ddd;
  }

  .border-primary{
    border:2px solid var(--primary);
  }

  /* ==========================================================
  RADIUS
  ========================================================== */

  .rounded{
    border-radius:12px;
  }

  .rounded-lg{
    border-radius:20px;
  }

  .circle{
    border-radius:999px;
  }

  /* ==========================================================
  SHADOWS
  ========================================================== */

  .shadow{
    box-shadow:0 8px 30px rgba(0,0,0,.12);
  }

  .shadow-lg{
    box-shadow:0 15px 40px rgba(0,0,0,.18);
  }

  /* ==========================================================
  BACKGROUNDS
  ========================================================== */

  .bg-light{
    background:var(--light);
    padding:2rem;
  }

  .bg-primary{
    background:var(--primary);
    color:white;
    padding:2rem;
  }

  .bg-dark{
    background:#222;
    color:white;
    padding:2rem;
  }

  /* ==========================================================
  SPACING
  ========================================================== */

  .mt-0{margin-top:0;}
  .mt-1{margin-top:1rem;}
  .mt-2{margin-top:2rem;}
  .mt-3{margin-top:3rem;}
  .mt-4{margin-top:4rem;}

  .mb-0{margin-bottom:0;}
  .mb-1{margin-bottom:1rem;}
  .mb-2{margin-bottom:2rem;}
  .mb-3{margin-bottom:3rem;}
  .mb-4{margin-bottom:4rem;}

  .pt-1{padding-top:1rem;}
  .pt-2{padding-top:2rem;}
  .pt-3{padding-top:3rem;}

  .pb-1{padding-bottom:1rem;}
  .pb-2{padding-bottom:2rem;}
  .pb-3{padding-bottom:3rem;}

  /* ==========================================================
  FLEX UTILITIES
  ========================================================== */

  .flex{
    display:flex;
  }

  .flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .gap-1{gap:1rem;}
  .gap-2{gap:2rem;}
  .gap-3{gap:3rem;}

  /* ==========================================================
  CLEAR FLOATS
  ========================================================== */

  .clear{
    clear:both;
  }

  /* ==========================================================
  RESPONSIVE
  ========================================================== */

  @media(max-width:768px){

    .article{
      width:92%;
      font-size:1rem;
    }

    .article h1{
      font-size:2.3rem;
    }

    .article h2{
      font-size:1.7rem;
    }

    .article h3{
      font-size:1.3rem;
    }

    .float-left,
    .float-right{
      float:none;
      width:100%;
      margin:2rem 0;
    }

    .w-25,
    .w-33,
    .w-40,
    .w-50,
    .w-60,
    .w-66,
    .w-75{
      width:100%;
    }

    .flex,
    .flex-between{
      display:block;
    }
  }