:root{
  --bg: #f6f7f8;             /* very light grey */
  --card: #ffffff;
  --text: #0b0b0b;           /* near-black */
  --muted: #6b6b6b;
  --accent: #c87548;         /* warm orange / copper */
  --glass: rgba(255,255,255,0.6);
  --radius: 14px;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* container */
.container{max-width:1120px;margin:0 auto;padding:28px}

/* header */
/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;

  /* solid background instead of transparent */
  background: var(--card);  /* same as white/very light gray */
  backdrop-filter: blur(8px); /* optional soft glass effect */
  -webkit-backdrop-filter: blur(8px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* subtle shadow for depth */
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between}

.brand-text{font-weight:600}
.brand{font-weight:600}
.accent{color:var(--accent);margin-left:4px;font-weight:700}
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav a{color:var(--text);text-decoration:none;font-weight:500}
.header-actions{display:flex;gap:12px;align-items:center}

/* replace your existing .logo / .logo-img rules with this */
.logo{
  display:flex;
  align-items:center;
  gap:14px;                /* slightly more breathing room */
  text-decoration:none;
  color:var(--text);
}

/* default larger size */
.logo-img{
  height:72px;             /* bigger by default */
  width:auto;
  transition:height .22s ease;
  display:block;
}

/* extra-large screens: even bigger */
@media (min-width:1200px){
  .logo-img{ height:96px; }
}

/* small screens: keep it reasonable */
@media (max-width:420px){
  .logo-img{ height:56px; }
  .brand-text{ font-size:0.95rem; } /* prevent text from overflowing */
}


/* hero */
.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600}
h1{font-size:2.1rem;margin:8px 0 12px}
.lead{color:var(--muted);max-width:560px}
.hero-ctas{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:var(--accent);color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:10px 16px;border-radius:10px;text-decoration:none}
.card-hero{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.06);transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.card-hero .cover{display:block;width:100%;height:320px;object-fit:cover}
.card-overlay{padding:12px}

/* grids */
.services-grid, .impact-grid, .about-grid{display:grid;gap:18px}
.services-grid{grid-template-columns:repeat(3,1fr)}
.impact-grid{grid-template-columns:repeat(3,1fr)}
.about-grid{grid-template-columns:repeat(3,1fr)}

/* cards */
/* cards */
.service-card, .impact-card, .about-card, {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  transition: transform .28s ease, box-shadow .28s ease;
}

.service-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
}

/* hover: gentle orange glow */
.service-card:hover,
.impact-card:hover,
.about-card:hover,
 {
  transform: translateY(-8px);
  box-shadow:
    0 10px 25px rgba(200,117,72,0.25),  /* subtle orange glow */
    0 2px 10px rgba(0,0,0,0.06);        /* slight natural depth */
}

.service-card img {
  width: 60px; /* reduce this value for smaller icons (try 50px or 40px if needed) */
  height: auto;
  margin-bottom: 1rem;
}

/* news */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.news-thumb{height:180px;object-fit:cover;border-radius:10px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:24px}
.contact input, .contact textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);margin-bottom:10px}
.btn-link{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-weight:600}

/* footer */
.site-footer{padding:26px 0;border-top:1px solid rgba(0,0,0,0.04);margin-top:48px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:var(--card);max-width:920px;width:92%;border-radius:12px;padding:20px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,0.4)}
.modal-close{position:absolute;right:10px;top:6px;border:none;background:transparent;font-size:28px;cursor:pointer}
.modal-content{max-height:70vh;overflow:auto;padding:8px}

/* animation utilities */
.animated-card{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1)}
.animated-card.inview{opacity:1;transform:none}

/* small screens */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .services-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .main-nav{display:none}
}
/* Partner logos area */
.partner-logos {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* Make partner logos small and subtle */
.partner-logos img {
  height: 28px;        /* 👈 tiny but still clear */
  width: auto;
  opacity: 0.8;        /* softer look */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.partner-logos img:hover {
  opacity: 1;
  transform: scale(1.05); /* gentle hover effect */
}

/* optional: for mobile screens */
@media (max-width: 480px) {
  .partner-logos img {
    height: 22px;
  }
}

/* NEWS SECTION – Journal Style (bigger version) */
.news-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}

.news-journal {
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  width: 400px;                /* ⬆️ larger card width */
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}

.news-journal:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 25px rgba(200,117,72,0.22), /* warm orange glow */
    0 3px 10px rgba(0,0,0,0.08);
}

/* header like a journal title bar */
.news-header {
  background: var(--accent);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.news-header h3 {
  font-size: 1.15rem;          /* ⬆️ slightly bigger title */
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}

.news-header time {
  font-size: 0.85rem;
  opacity: 0.95;
}

/* larger image area */
.news-image {
  width: 100%;
  height: 220px;               /* ⬆️ taller image */
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.news-journal:hover .news-image img {
  transform: scale(1.05);
}

/* text area like journal body */
.news-content {
  padding: 18px 20px 22px;
  color: var(--text);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-content p {
  font-size: 1rem;             /* ⬆️ larger text */
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.6;
}

/* button style */
.btn-journal {
  align-self: flex-start;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.btn-journal:hover {
  color: #e98a4f; /* lighter orange tone */
}

/* responsiveness */
@media (max-width: 700px) {
  .news-journal {
    width: 100%;
  }
}