/* =========================
   Base
========================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --headerH-desktop: 0px;  /* ✅ adjust if needed */
  --headerH-mobile: 0px;   /* ✅ adjust if needed */
}

body{
  font-family:Inter,Arial,sans-serif;
  color:#0b2b4a;
  background:#ffffff;
  line-height:1.6;

  /* ✅ push whole page below fixed header */
  padding-top: var(--headerH-desktop);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 0px}
.muted{opacity:.75}
.sep{margin:0 0px;opacity:.6}

/* =========================
   HEADER (Fixed full width)
========================= */
.siteHeader{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  background:#fff;                 /* ✅ prevents hero showing behind */
  border-bottom:1px solid #eef2f7; /* subtle divider */
}

/* header inner full width */
.siteHeader .container{
  max-width:100%;
  padding:0;                       /* ✅ edge-to-edge header */
}

/* the row */
.headerWrap{
  display:flex;
  align-items:stretch;
  width:100%;
  gap:0;
}

/* Logo block */
.logoBox{
  flex:0 0 auto;
  background:#fff;
  border-radius:0;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
}
.logoImg{
  height:62px;
  width:auto;
}

/* Desktop menu fills remaining width */
.menuBar{
  flex:1;
  background:#fff;
  border-radius:0;
  padding:0 48px;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  min-height: var(--headerH-desktop);
}

.menuLink{
  font-weight:700;
  color:#0b2b4a;
  font-size:16px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.menuLink:hover{opacity:.85}

.mobileMenuBtn{display:none;}

/* =========================
   MOBILE HEADER (joined pill)
========================= */
@media (max-width: 992px){
  body{ padding-top: var(--headerH-mobile); }

  .siteHeader{
    background:#fff;
    border-bottom:1px solid #eef2f7;
    padding:10px 16px;
  }

  .siteHeader .container{
    padding:0;
  }

  /* ✅ ONE pill: logo + menu together */
  .headerWrap{
    background:#fff;
    border-radius:22px;
    padding:12px 14px;
    align-items:center;
    gap:14px;
  }

  /* logo becomes part of pill (no extra box) */
  .logoBox{
    padding:0;
    min-width:auto;
    background:transparent;
  }
  .logoImg{height:56px}

  .menuBar{display:none}

  /* ✅ MENU sits inside pill on right */
  .mobileMenuBtn{
    display:flex;
    align-items:center;
    gap:10px;
    border:none;
    background:transparent;
    font-weight:900;
    font-size:28px;
    cursor:pointer;
    color:#111;
    margin-left:auto;
    padding:0 6px;
  }

  /* divider between logo and MENU */
  .mobileMenuBtn::before{
    content:"";
    width:1px;
    height:46px;
    background:#e6edf6;
    display:block;
    margin-right:14px;
  }
  .hamburger{font-size:28px;line-height:1}
}

/* =========================
   HERO
========================= */
.hero{
  background:#0b3a78;
  color:#fff;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  min-height:420px;
  align-items:stretch;
}
.hero__copy{
  padding:70px 60px;
}
.hero__copy h1{
  font-size:48px;
  font-weight:800;
  color:#ffcc00;
  margin-bottom:18px;
}
.hero__copy p{
  font-size:18px;
  max-width:560px;
  color:#e9f0fb;
}
.hero__media{
  background:url("") center/cover no-repeat;
}

/* =========================
   BREADCRUMBS + SHARE
========================= */
.crumbs{
  background:#fff;
  border-bottom:1px solid #e6edf6;
}
.crumbs__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}
.crumbs__trail a{
  color:#0b3a78;
  font-weight:600;
}
.crumbs__share{
  display:flex;
  align-items:center;
  gap:10px;
}
.iconlink{
  width:32px;height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #dbe6f4;
  background:#fff;
  transition:.2s;
}
.iconlink:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.08)}
.iconlink img{width:16px;height:16px}

/* =========================
   MAIN LAYOUT
========================= */
.main{background:#fff}
.layout{
  display:grid;
  
  grid-template-columns:280px 1fr;
  gap:44px;
  padding:44px 0 70px;
}
.layout, .content{
  min-width:0;
}
/* =========================
   SIDENAV
========================= */
.sidenav{
  border-right:1px solid #e6edf6;
  padding-right:22px;
}
.sidenav__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:#0b3a78;
  padding:6px 0 16px;
  border-bottom:1px solid #e6edf6;
  margin-bottom:6px;
}
.bullet{
  width:10px;height:10px;border-radius:50%;
  background:#ffcc00;
  display:inline-block;
}
.sidenav__link{
  display:block;
  padding:16px 0;
  border-bottom:1px solid #e6edf6;
  color:#0b3a78;
  font-weight:600;
}
.sidenav__link:hover{opacity:.85}
.sidenav__link.is-active{
  font-weight:800;
  position:relative;
}
.sidenav__link.is-active::before{
  content:"";
  position:absolute;
  left:-22px;
  top:50%;
  transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;
  background:#ffcc00;
}

/* sidebar CTA */
.sidenav__cta{
  padding-top:20px;
  display:grid;
  gap:14px;
}
.sideaction{
  display:flex;
  align-items:center;
  gap:12px;
  color:#0b3a78;
  font-weight:700;
}
.sideicon{
  width:42px;height:42px;
  border-radius:50%;
  background:#eef4ff;
  display:grid;
  place-items:center;
  font-size:18px;
}
/* ---------- Mobile dropdown version of sidenav ---------- */
.sidenavDD{ display:none; }

.sidenavDD__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:16px 18px;
  border:1px solid #0b3a78;
  border-radius:4px;
  font-weight:700;
  color:#0b3a78;
  background:#fff;
}

/* remove default marker */
.sidenavDD__summary::-webkit-details-marker{ display:none; }

.sidenavDD__chev{
  display:inline-block;
  transition:transform .2s ease;
  font-size:18px;
  line-height:1;
}

.sidenavDD[open] .sidenavDD__chev{ transform:rotate(180deg); }

.sidenavDD__nav{
  border:1px solid #e6edf6;
  border-top:none;
  padding:10px 0;
}

/* on mobile: show dropdown, hide desktop sidebar block */
@media(max-width:992px){
  .sidenavDesktop{ display:none; }
  .sidenavDD{ display:block; }
  .sidenav{ border-right:none; padding-right:0; }
}

/* =========================
   CONTENT
========================= */
.content h2{
  font-size:40px;
  line-height:1.15;
  color:#0b3a78;
  margin-bottom:16px;
}
.content p{color:#334155;margin-bottom:18px;font-size:16px}
.lead{font-size:18px;color:#23364d}

/* purpose/vision speech bubbles */
.cards2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:34px 0 10px;
}
.speech{
  padding:28px;
  border-radius:10px;
  position:relative;
}
.speech h3{
  font-size:34px;
  font-weight:800;
  margin-bottom:10px;
}
.speech p{font-size:18px;margin:0}
.speech--yellow{
  background:#ffcc00;
  color:#0b3a78;
}
.speech--blue{
  background:#0b3a78;
  color:#fff;
}
.speech::after{
  content:"";
  position:absolute;
  bottom:-20px;
  right:40px;
  border-width:20px 18px 0 18px;
  border-style:solid;
  border-color:transparent;
}
.speech--yellow::after{border-top-color:#ffcc00}
.speech--blue::after{border-top-color:#0b3a78}

/* Subhead */
.subhead{
  margin-top:30px;
  font-size:30px;
  color:#0b3a78;
}
.readmore{
  color:#0b3a78;
  border-bottom:1px solid rgba(11,58,120,.35);
  padding-bottom:1px;
  font-weight:600;
}

/* infographic + download bar */
.infographic{
  margin:36px 0 0;
  background:#f4f7fb;
  padding:24px;
  border-radius:8px;
}
.downloadbar{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}
.downloadbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:8px;
  background:#0b3a78;
  color:#fff;
  font-weight:700;
}
.downloadbtn img{filter:brightness(0) invert(1)}

/* Tiles */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:46px;
}
.tile{
  background:#fff;
  border:1px solid #e6edf6;
  border-radius:10px;
  padding:28px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition:.2s;
}
.tile:hover{transform:translateY(-2px)}
.tile::before{
  content:"";
  position:absolute;
  right:-50px;top:0;
  width:220px;height:220px;
  background:#f2f6fb;
  transform:skewX(-20deg);
}
.tile__top{position:relative;z-index:1}
.tile__top h3{
  font-size:34px;
  color:#0b3a78;
  margin-bottom:8px;
}
.tile__bottom{
  margin-top:24px;
  color:#0b3a78;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:1;
}

/* Worldwide contacts banner */
.bannerblock{
  margin-top:44px;
  background:#07325f;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.bannerblock__inner{
  padding:46px 34px;
  position:relative;
  z-index:1;
}
.bannerblock__inner h3{
  font-size:34px;
  margin-bottom:10px;
}
.bannerblock__inner p{color:#eaf1ff;margin:0;font-size:18px}
.bannerblock::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-80px;
  width:280px;height:220px;
  background:#fff;
  transform:rotate(45deg);
  opacity:.95;
}

/* Bottom CTA row */
/* =========================
   CTA ROW – single line
========================= */
.ctaRow{
  display:flex;                 /* 🔑 switch from grid to flex */
  justify-content:space-between;
  align-items:center;
  gap:20px;
  grid-template-columns: 1fr;
  width:100%;
  border-top:1px solid #e6edf6;
  border-bottom:1px solid #e6edf6;
  margin-top:28px;
  padding:16px 0;
}

/* each CTA item */
.ctaCard{
  flex:1;                       /* equal width */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  gap:14px;
  width:100%;
  max-width:100%;
  padding:18px 10px;
  font-weight:800;
  color:#0b3a78;

  border-right:1px solid #e6edf6;
  white-space:nowrap;           /* 🔑 prevents text wrapping */
}

.ctaCard:last-child{
  border-right:none;
}

/* icon */
.ctaIcon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#eef4ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

/* text */
.ctaText{
  font-size:16px;
}


/* =========================
   CONTENT responsive
========================= */
@media (max-width: 992px){
  .hero__inner{grid-template-columns:1fr;min-height:auto}
  .hero__media{min-height:220px}
  .hero__copy{padding:40px 24px}
  .layout{grid-template-columns:1fr;padding:26px 0 50px}
  .sidenav{border-right:none;padding-right:0;border-bottom:1px solid #e6edf6;padding-bottom:18px}
  .cards2{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .ctaCard:last-child{border-bottom:none}
}

/* =========================
   MOBILE DRAWER (full screen)
========================= */
.mobileDrawer{
  position:fixed;
  inset:0;
  background:#0b3a78;
  transform:translateX(-100%);
  transition:.25s ease;
  z-index:10000;
  padding:22px;
}
.mobileDrawer.open{transform:translateX(0)}

.drawerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.drawerLogo{
  height:68px;
  width:auto;
  background:#fff;
  padding:8px 10px;
  border-radius:12px;
}
.drawerClose{
  width:44px;height:44px;
  border:none;
  border-radius:6px;
  background:#ffffff;
  font-size:20px;
  cursor:pointer;
}

.drawerNav{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:20px;
}
.drawerNav a{
  color:#fff;
  font-weight:900;
  font-size:30px;
}

/* =========================
   TAB MODE (show only active section)
========================= */

/* hide all tab panels by default */
.content .block{
  display:none;
}

/* show the active one */
.content .block.is-active{
  display:block;
}

/* optional: smooth feel */
.content .block.is-active{
  animation: tabFade .18s ease-in;
}
@keyframes tabFade{
  from{opacity:.3; transform:translateY(3px)}
  to{opacity:1; transform:translateY(0)}
}

.drawerNav a:hover{opacity:.9}
/* =========================
   At a glance - Premium Cards
========================= */
/* =========================
   At a glance – TILE STYLE (like your 1st SS)
   ✅ Replace your existing glance/statCard CSS with this whole block
========================= */
.glance{
  margin-top:22px;
}

.glance__head{margin-bottom:18px}
.glance__title{
  font-size:44px;
  line-height:1.1;
  color:#0b3a78;
  margin-bottom:10px;
}
.glance__sub{
  max-width:860px;
  font-size:18px;
  color:#334155;
  margin:0;
}

/* container */
.glanceGrid{
  margin-top:22px;
  padding:26px;
  border-radius:18px;
  background:#f6f9ff;
  border:1px solid #e6edf6;
  box-shadow:0 18px 50px rgba(2, 25, 55, .08);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

/* tile card */
.statCard{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  border:1px solid #e9eff8;
  box-shadow:0 16px 40px rgba(2,25,55,.10);
  padding:26px 26px 22px;
  min-height:160px;

  /* layout */
  display:flex;
  align-items:flex-start;
  gap:18px;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* big diagonal panel (the “shape” look) */
.statCard::before{
  content:"";
  position:absolute;
  left:-90px;
  top:-80px;
  width:260px;
  height:260px;
  background:#e9eff6;
  transform:rotate(45deg);
  opacity:.9;
}

/* top accent line (blue/yellow like your 1st SS) */
.statCard::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:62%;
  height:3px;
  background:#0b3a78; /* default blue */
}

/* optional highlight for the first card (matches your purple-ish feel) */
.statCard.is-highlight{
  background:linear-gradient(180deg, #eef1ff 0%, #ffffff 75%);
}
.statCard.is-highlight::after{
  background:#ffcc00; /* yellow line */
}

/* hover */
.statCard:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px rgba(2,25,55,.16);
}

/* icon (keep on top of shape) */
.statIcon{
  position:relative;
  z-index:1;
  width:56px;
  height:56px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:26px;
  background:#f2f6ff;
  border:1px solid #dfe9ff;
  box-shadow:0 12px 26px rgba(11,58,120,.12);
}

/* text */
.statBody{
  position:relative;
  z-index:1;
  min-width:0;
}
.statLabel{
  font-size:16px;
  font-weight:900;
  color:#0b3a78;
  margin-bottom:30px;
}
.statValue{
  font-size:24px;
  font-weight:900;
  color:#0b2b4a;
  line-height:1;
  letter-spacing:.2px;
}
.statValue .unit{
  display:inline-block;
  margin-left:10px;
  font-size:18px;
  font-weight:800;
  color:#64748b;
}

/* note */
.glance__note{
  margin-top:14px;
  color:#64748b;
  font-size:14px;
}

/* Responsive */
@media (max-width: 1100px){
  .glanceGrid{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* ✅ Mobile: 2 per row */
@media (max-width: 992px){
  .glance__title{font-size:34px}

  .glanceGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    padding:16px;
    gap:14px;
    border-radius:16px;
  }

  .statCard{
    padding:16px;
    min-height:140px;
    flex-direction:column;
    gap:12px;
  }

  .statCard::before{
    left:-110px;
    top:-110px;
    width:240px;
    height:240px;
  }

  .statLabel{font-size:14px;margin-bottom:26px}
  .statValue{font-size:24px}
  .statValue .unit{font-size:14px}
  .statIcon{width:48px;height:48px;border-radius:12px;font-size:22px}
}

/* Ultra-small phones */
@media (max-width: 360px){
  .glanceGrid{grid-template-columns:1fr;}
}

/* =========================================================
   FIX: CTA ROW MOBILE OVERFLOW (right white space issue)
   Paste this at the VERY END of your CSS (do not remove anything)
========================================================= */

/* safety: never allow the CTA section to exceed screen width */
.ctaRow,
.ctaCard{
  max-width:100%;
}

/* Desktop: keep as-is (3 cards in one line) */
/* Mobile: stack to avoid overflow */
@media (max-width: 992px){

  /* stop any horizontal scrolling caused by CTA */
  html, body{
    overflow-x:hidden !important;
  }

  .ctaRow{
    flex-direction:column !important;     /* stack cards */
    gap:0 !important;
    padding:0 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .ctaCard{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    border-right:none !important;
    border-bottom:1px solid #e6edf6 !important;
    padding:18px 12px !important;
  }

  .ctaCard:last-child{
    border-bottom:none !important;
  }

  /* 🔑 this is the main overflow cause */
  .ctaText{
    white-space:normal !important;   /* allow wrap */
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* icon must not force extra width */
  .ctaIcon{
    flex:0 0 auto !important;
  }
}
/* =========================
   PARTNERS SECTION (Premium)
========================= */
.partnersWrap{
  width:100%;
}

.partnersHero{
  margin-bottom:26px;
  padding:28px 28px;
  border-radius:18px;
  border:1px solid #ffffff;

}

.partnersHero__txt h2{
  font-size:44px;
  line-height:1.08;
  color:#0b3a78;
  margin:0 0 10px;
}

.partnersHero__txt p{
  margin:0;
  max-width:980px;
  font-size:18px;
  color:#334155;
}

/* block headings */
.pBlock{ margin-top:34px; }
.pBlock__head h3{
  font-size:34px;
  color:#0b3a78;
  margin:0 0 10px;
}
.pBlock__head p{
  margin:0;
  font-size:16px;
  color:#475569;
  max-width:980px;
}

/* =========================
   LEADERSHIP CARDS
========================= */
.leadersGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.leaderCard{
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e6edf6;
  box-shadow:0 18px 55px rgba(2,25,55,.08);
  display:grid;
  grid-template-columns:160px 1fr;
  min-width:0;
}

.leaderCard__img{
  background:linear-gradient(180deg,#eef4ff 0%, #ffffff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.leaderCard__img img{
  width:100%;
  height:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid #e6edf6;
}

.leaderCard__body{
  padding:18px 18px;
  min-width:0;
}
.leaderCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.leaderCard__top h4{
  margin:0;
  font-size:20px;
  color:#0b2b4a;
  line-height:1.2;
}
.leaderCard__tag{
  white-space:nowrap;
  font-size:12px;
  font-weight:900;
  color:#0b3a78;
  background:#eef4ff;
  border:1px solid #dbe6f4;
  padding:8px 10px;
  border-radius:999px;
}
.leaderCard__bio{
  margin:10px 0 14px;
  color:#475569;
  font-size:15px;
  line-height:1.55;
}

.leaderCard__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.leaderCard__meta span{
  font-size:12px;
  font-weight:800;
  color:#0b3a78;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e6edf6;
  background:#ffffff;
}

/* =========================
   LOGO WALL
========================= */
.logoWall{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  border:1px solid #e6edf6;
  background:#fff;
  box-shadow:0 18px 55px rgba(2,25,55,.06);

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.logoItem{
  height:84px;
  border-radius:14px;
  border:1px solid #eef2f7;
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.logoItem img{
  max-height:54px;
  max-width:92%;
  object-fit:contain;
  filter:grayscale(10%);
  opacity:.95;
}

.logoNote{
  margin-top:10px;
  font-size:12px;
  color:#64748b;
}

/* =========================
   STRENGTHS
========================= */
.strengthGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.strengthCard{
  background:#fff;
  border:1px solid #e6edf6;
  border-radius:18px;
  padding:16px 16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  box-shadow:0 18px 55px rgba(2,25,55,.06);
  min-width:0;
}

.strengthIcon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
  background:linear-gradient(180deg,#eef4ff 0%, #ffffff 100%);
  border:1px solid #e6edf6;
  flex:0 0 auto;
}

.strengthText h5{
  margin:0 0 6px;
  font-size:16px;
  color:#0b2b4a;
}
.strengthText p{
  margin:0;
  font-size:14px;
  color:#475569;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px){
  .partnersHero{ padding:18px; }
  .partnersHero__txt h2{ font-size:32px; }

  .leadersGrid{ grid-template-columns:1fr; }
  .leaderCard{ grid-template-columns:120px 1fr; }
  .leaderCard__img img{ max-height:140px; }

  .logoWall{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .strengthGrid{ grid-template-columns:1fr; }
}
/* =========================
   QUALITY – Premium Boxes
========================= */
.qWrap{
  margin-top:24px;
  padding:28px;
  border-radius:22px;
  background:linear-gradient(180deg,#f3f8ff 0%, #ffffff 65%);
  border:1px solid #e6edf6;
  box-shadow:0 18px 55px rgba(2,25,55,.08);
}

.qHead h2{
  margin:0 0 10px;
  font-size:44px;
  line-height:1.1;
  color:#0b3a78;
}
.qHead p{
  margin:0;
  max-width:920px;
  font-size:18px;
  color:#334155;
}

/* grid */
.qGrid{
  margin-top:22px;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:18px;
  align-items:stretch;
}

/* card base */
.qCard{
  background:#fff;
  border:1px solid #e6edf6;
  border-radius:18px;
  padding:22px;
  box-shadow:0 12px 32px rgba(2,25,55,.08);
  min-width:0;
}

/* blue highlight card */
.qCard--blue{
  background:linear-gradient(180deg,#0b3a78 0%, #062a53 100%);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.qCard--blue::after{
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.qCard--blue p{ color:#e9f0fb; }

/* top row */
.qCard__top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.qCard__top h3{
  margin:0;
  font-size:28px;
  font-weight:900;
  line-height:1.15;
}

/* icon chips */
.qIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
}
.qIcon--soft{
  background:linear-gradient(180deg,#eef4ff 0%, #ffffff 100%);
  border:1px solid #dbe6f4;
  color:#0b3a78;
}

/* list */
.qList{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.qList li{
  position:relative;
  padding-left:30px;
  color:#334155;
  font-weight:600;
}
.qList li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ffcc00;
  box-shadow:0 6px 16px rgba(255,204,0,.35);
}

/* mini insights card (right bottom) */
.qCard--mini{
  display:grid;
  gap:14px;
}
.qMini{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  border:1px solid #e6edf6;
}
.qMini__num{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#0b3a78;
  background:#eef4ff;
  border:1px solid #dbe6f4;
}
.qMini__txt h4{
  margin:0 0 6px;
  font-size:16px;
  font-weight:900;
  color:#0b2b4a;
}
.qMini__txt p{
  margin:0;
  color:#475569;
  font-size:14px;
  line-height:1.5;
}

/* responsive */
@media (max-width: 992px){
  .qWrap{ padding:18px; border-radius:18px; }
  .qHead h2{ font-size:34px; }
  .qGrid{ grid-template-columns:1fr; }
  .qCard__top h3{ font-size:24px; }
}
/* =========================
   Quality – Side by side minis
========================= */
.qMiniGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

/* keep existing .qMini styles */
.qMini{
  display:flex;
  gap:14px;
  padding:16px;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  border:1px solid #e6edf6;
  box-shadow:0 8px 22px rgba(2,25,55,.08);
}

/* responsive: stack on mobile */
@media (max-width: 768px){
  .qMiniGrid{
    grid-template-columns:1fr;
  }
}
.qMiniGrid{
  width:100%;
  max-width:100%;
  grid-template-columns: repeat(2, 1fr);
}
.qMini{
  width:100%;
  height:100%;
}
.content,
.block{
  width:100%;
  max-width:100%;
}
/* =======================
FOOTER (CSS)
======================= */
.siteFooter{
  background:#fff;
  border-top:2px solid #000000;
  position:relative;
}

/* top strip */
.footerTop{
  padding:22px 0 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.footerLeft{min-width:0}

.footerLine{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  color:#0b2b4a;
  font-size:18px;
  line-height:1.5;
}

.footerLine a{
  font-weight:600;
  color:#0b2b4a;
  opacity:.92;
}
.footerLine a:hover{opacity:1;text-decoration:underline}
.footerSep{opacity:.45; margin:0 6px}

/* secured by row */
.securedRow{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:14px;
}
.securedTxt{
  color:#0b2b4a;
  font-size:18px;
  opacity:.9;
}
.securedLogo{
  height:28px;
  width:auto;
  display:block;
}

/* right side social */
.footerRight{flex:0 0 auto}
.follow{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-end;
}
.followTxt{
  color:#0b2b4a;
  font-size:18px;
  opacity:.9;
  margin-right:4px;
}

.soc{
  width:40px;height:40px;
  border:2px solid #0b2b4a;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#0b2b4a;
  transition:.18s ease;
  line-height:1;
}
.soc:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(2,25,55,.10)}

.toTop{
  width:42px;height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0b3a78;
  color:#fff;
  font-weight:900;
  font-size:18px;
  margin-left:6px;
  transition:.18s ease;
}
.toTop:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(11,58,120,.22)}

/* bottom pills area */
.footerBottom{
  position:relative;
  display:flex;
  justify-content:flex-end;
  gap:26px;
  padding:14px 0 0;
  border-top:1px solid #eef2f7;
  overflow:hidden;
}

/* curved “wave” feel behind pills */
.footerBottom::before{
  content:"";
  position:absolute;
  right:0;
  top:-30px;
  width:68%;
  height:84px;
  background:linear-gradient(90deg, rgba(11,58,120,.10), rgba(11,58,120,0));
  border-radius:999px 0 0 999px;
  pointer-events:none;
}

.footerPill{
  position:relative;
  z-index:1;
  border:none;
  cursor:pointer;
  padding:14px 28px;
  border-radius:999px;
  background:#eef1f6;
  color:#0b2b4a;
  font-weight:800;
  font-size:20px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:0 10px 26px rgba(2,25,55,.08);
}
.footerPill--blue{
  background:#0b3a78;
  color:#fff;
}
.footerPill .plus{
  width:34px;height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  font-size:22px;
  font-weight:900;
}
.footerPill:not(.footerPill--blue) .plus{
  background:#fff;
  border:1px solid #dbe6f4;
}

/* responsive */
@media (max-width: 992px){
  .footerTop{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .follow{justify-content:flex-start; flex-wrap:wrap}
  .footerLine{font-size:16px}
  .securedTxt{font-size:16px}
  .footerBottom{
    justify-content:flex-start;
    gap:14px;
    padding:14px 16px 10px;
  }
  .footerPill{
    font-size:18px;
    padding:12px 18px;
  }
  .footerBottom::before{width:100%}
}
/* =======================
SERVICES (CSS) – like your screenshot
======================= */
.servicesSec{
  background:#ffffff;
  padding:60px 0;
}

.servicesHead{
  margin-bottom:26px;
}

.servicesTitle{
  font-size:44px;
  line-height:1.1;
  color:#0b2b4a;
  margin:0 0 10px;
  font-weight:900;
}

.servicesSub{
  margin:0;
  max-width:920px;
  font-size:18px;
  color:#475569;
}

.servicesGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:54px 70px; /* row gap / column gap */
  padding-top:20px;
}

.serviceCard{
  min-width:0;
}

.serviceIcon{
  width:48px;
  height:48px;
  color:#0b2b4a;
  margin-bottom:18px;
}

.serviceIcon svg{
  width:48px;
  height:48px;
  display:block;
}

.serviceTitle{
  font-size:20px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#0b2b4a;
  margin:0 0 10px;
}

.serviceText{
  margin:0;
  font-size:18px;
  line-height:1.75;
  color:#475569;
  max-width:540px;
}

/* Mobile */
@media (max-width: 992px){
  .servicesSec{padding:42px 0}
  .servicesTitle{font-size:34px}
  .servicesGrid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .serviceText{font-size:16px}
  .serviceTitle{font-size:18px}
}
/* =======================
OUR CLIENTS (CSS)
======================= */
.clientsSec{
  padding:60px 0 70px;
  background:#fff;
}

.clientsHead{
  text-align:center;
  margin-bottom:34px;
}

.clientsTitle{
  margin:0;
  font-size:42px;
  font-weight:900;
  color:#0b2b4a;
  letter-spacing:.2px;
}

/* optional: green title like screenshot */
.clientsTitle{
  color:#686a74; /* remove if you want brand blue */
  font-family: Georgia, "Times New Roman", serif;
  font-weight:500;
}

.clientsSub{
  margin:10px auto 0;
  max-width:860px;
  color:#64748b;
  font-size:16px;
}

/* grid */
.clientsGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:34px 34px; /* row / col gap */
  align-items:stretch;
}

/* logo card */
.clientLogo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #e6edf6;
  box-shadow:0 10px 28px rgba(2,25,55,.06);
  border-radius:14px;
  padding:18px;
  min-height:110px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.clientLogo:hover{
  transform:translateY(-2px);
  border-color:#d4e1f5;
  box-shadow:0 18px 44px rgba(2,25,55,.10);
}

.clientLogo img{
  max-width:100%;
  max-height:72px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:saturate(1);
}

/* Responsive */
@media (max-width: 1200px){
  .clientsGrid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 992px){
  .clientsSec{ padding:42px 0 54px; }
  .clientsTitle{ font-size:34px; }
  .clientsGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)); /* ✅ 2 logos per row */
    gap:18px;
  }
  .clientLogo{
    min-height:96px;
    padding:14px;
    border-radius:12px;
  }
  .clientLogo img{ max-height:58px; }
}

@media (max-width: 360px){
  .clientsGrid{ gap:14px; }
  .clientLogo img{ max-height:52px; }
}
/* ===== CONTACT PAGE ===== */
.contactHero{
  background:#0b3a78;
  color:#fff;
}
.contactHero__title{
  padding:26px 0;
  text-align:center;
  font-weight:900;
  font-size:44px;
  letter-spacing:.2px;
}

/* MAP AREA */
.contactMap{
  background:#0b3a78;
}
.contactMap__grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:0;
  align-items:stretch;
  min-height:520px;
}

/* LEFT PANEL */
.contactInfo{
  background:#0b3a78;
  color:#fff;
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contactInfo__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.contactInfo__head h2{
  margin:0;
  font-size:44px;
  line-height:1.05;
  font-weight:900;
}
.contactInfo__pin{
  width:56px;height:56px;
  border-radius:50%;
  background:#fff;
  color:#0b3a78;
  display:grid;
  place-items:center;
  font-size:22px;
  flex:0 0 auto;
}

.contactInfo__body{
  display:grid;
  gap:14px;
  font-size:18px;
}
.contactInfo__line{margin:0;color:#eaf1ff}
.contactInfo__link{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  font-weight:700;
  width:max-content;
  padding:6px 0;
}
.ciIcon{
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  font-size:18px;
  border:1px solid rgba(255,255,255,.15);
}

.contactSocial{
  margin-top:12px;
  display:flex;
  gap:12px;
}
.contactSocial a{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background:rgba(255,255,255,.10);
}

/* RIGHT MAP */
.contactMap__frame{
  background:#0b3a78;
  position:relative;
}
.contactMap__frame iframe{
  width:100%;
  height:100%;
  min-height:520px;
  border:0;
  display:block;
  filter:saturate(.95) contrast(.98);
}

/* ===== FORM AREA ===== */
.contactFormWrap{
  background:#ffffff; /* similar to your screenshot */
  padding:54px 0 64px;
}

.formCard{
  background:transparent;
  border-radius:22px;
  padding:0;
}

.formTitle{
  margin:0 0 18px;
  font-size:44px;
  font-weight:900;
  color:#0b2b4a;
}

/* Enquiry row */
.enquiryRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.enquiryLabel{
  font-weight:800;
  font-size:18px;
  color:#0b2b4a;
  margin-right:6px;
}
.radioPill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(11,58,120,.18);
  cursor:pointer;
  font-weight:700;
  color:#0b2b4a;
}
.radioPill input{accent-color:#0b3a78}

/* Form grid */
.contactForm .formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
}
.formCol{display:grid; gap:18px}

.field{
  width:100%;
  border:px solid rgba(11,58,120,.18);
  background:#fff;
  border-radius:6px;
  padding:16px 18px;
  font-size:20px;
  outline:none;
}
.field:focus{
  border-color:rgba(11,58,120,.45);
  box-shadow:0 0 0 5px rgba(11,58,120,.10);
}

.field--area{
  min-height:264px;
  resize:vertical;
}

/* Submit */
.formActions{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.submitBtn{
  border:none;
  cursor:pointer;
  padding:16px 46px;
  border-radius:999px;
  background:#f7a900;
  color:#111;
  font-weight:900;
  font-size:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}
.submitBtn:hover{transform:translateY(-1px)}
.submitBtn:active{transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px){
  .contactHero__title{font-size:34px;padding:20px 0}

  .contactMap__grid{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .contactInfo{
    padding:28px 18px;
  }
  .contactInfo__head h2{font-size:34px}
  .contactMap__frame iframe{min-height:360px}

  .formTitle{font-size:32px}
  .contactForm .formGrid{
    grid-template-columns:1fr;
  }
  .field{font-size:18px}
  .field--area{min-height:200px}
}
/* =========================
   PROJECTS GRID (3 desktop / 2 mobile)
========================= */
.projects{padding:24px 0 60px}
.projects__head{margin-bottom:18px}
.projects__head h2{
  font-size:44px; line-height:1.1; margin:0 0 8px;
  color:#0b3a78; font-weight:900;
}
.projects__head p{margin:0; color:#475569; font-size:16px; max-width:780px}

.projectsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  width:100%;
}

@media (max-width: 992px){
  .projectsGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .projects__head h2{font-size:34px}
}
@media (max-width: 420px){
  .projectsGrid{grid-template-columns:1fr;}
}

/* =========================
   PROJECT CARD
========================= */
.pCard{
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e6edf6;
  box-shadow:0 18px 60px rgba(2,25,55,.08);
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* =========================
   SLIDER MEDIA (FIX FIT)
========================= */
.pCard__media{
  position:relative;
  overflow:hidden;
  background:#0b3a78;
  border-bottom:1px solid #eef2f7;

  /* ✅ consistent sizing + fix crop */
  aspect-ratio: 16 / 10;
}

/* slider track */
.pCard__track{
  height:100%;
  width:100%;
  display:flex;
  transition:transform .35s ease;
  will-change:transform;
}

/* slide button (clickable) */
.pCard__slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.pCard__slide img{
  width:100%;
  height:100%;
  object-fit:cover;     /* ✅ IMPORTANT */
  object-position:center;
  display:block;
}

/* nav buttons */
.navBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(11,58,120,.35);
  color:#fff;
  font-size:26px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:4;
}
.navBtn--prev{left:12px}
.navBtn--next{right:12px}
.navBtn:hover{background:rgba(11,58,120,.55)}

/* badge */
.pCard__badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  border-radius:16px;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(219,230,244,.9);
  backdrop-filter: blur(8px);
  box-shadow:0 10px 28px rgba(2,25,55,.16);
  text-align:right;
  max-width:70%;
}
.pCard__badgeLabel{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color:#6b7280;
}
.pCard__badgeValue{
  font-size:22px;
  font-weight:1000;
  color:#0b2b4a;
  line-height:1.05;
}
.pCard__badgeValue span{
  font-size:12px;
  font-weight:1000;
  color:#6b7280;
  margin-left:6px;
}

/* dots */
.pCard__dots{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:5;
}
.dot{
  width:7px;height:7px;border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(11,58,120,.18);
}
.dot.is-active{
  width:18px;
  background:#fff;
}

/* =========================
   CARD BODY
========================= */
.pCard__body{padding:16px 16px 18px; min-width:0}
.pCard__title{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.2;
  color:#0b3a78;
  font-weight:1000;
  letter-spacing:.2px;
}
.pCard__desc{
  margin:0 0 14px;
  color:#475569;
  font-size:14px;
  line-height:1.6;
}

/* client/duration row */
.pCard__kv{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  border-top:1px solid #eef2f7;
  padding-top:12px;
}
.pCard__kLabel{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  margin-bottom:6px;
}
.pCard__kValue{
  font-size:14px;
  font-weight:900;
  color:#0b2b4a;
  line-height:1.35;
  word-break:break-word;
}

@media (max-width: 992px){
  .pCard__title{font-size:18px}
  .pCard__kv{grid-template-columns:1fr}
}

/* =========================
   JS LIGHTBOX (WORKING)
========================= */
/* =========================
   LIGHTBOX (JS)
========================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;                 /* ✅ hidden by default */
}
.lightbox.open{ display:block; } /* ✅ show only when open */

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
}

.lightbox__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(94vw, 1100px);
  max-height:90vh;
  background:#0b0f18;
  border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.lightbox__figure{
  margin:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.lightbox__figure img{
  width:100%;
  height:auto;
  max-height:78vh;
  object-fit:contain;
  border-radius:12px;
  background:#0b0f18;
}

.lightbox__figure figcaption{
  color:#cbd5e1;
  font-size:14px;
  text-align:center;
  padding:0 10px;
}

/* buttons */
.lbBtn{
  position:absolute;
  border:none;
  cursor:pointer;
  font-weight:900;
  background:rgba(255,255,255,.12);
  color:#fff;
  width:44px;height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  backdrop-filter: blur(6px);
}
.lbBtn--close{ top:14px; right:14px; }
.lbBtn--prev{ left:14px; top:50%; transform:translateY(-50%); font-size:26px; }
.lbBtn--next{ right:14px; top:50%; transform:translateY(-50%); font-size:26px; }
.lbBtn:hover{ background:rgba(255,255,255,.22); }

/* make sure slider is clickable */
.pCard__media { position: relative; }
.pCard__track { position: relative; z-index: 1; }
.pCard__slide { position: relative; z-index: 2; pointer-events: auto; }

/* IMPORTANT: badge + dots should NOT block clicks */
.pCard__badge,
.pCard__dots{
  pointer-events: none;   /* ✅ clicks go to image */
}

/* nav buttons must stay clickable */
.navBtn{
  z-index: 6;
  pointer-events: auto;
}

/* if you have any overlay on media, disable click-blocking */
.pCard__media::before,
.pCard__media::after{
  pointer-events: none;
}
/* ==== CLICK FIX: make sure slides are clickable ==== */
.pCard__badge,
.pCard__dots{
  pointer-events:none; /* overlay should not block clicks */
}

.pCard__track{
  width:100% !important;               /* don't hardcode 300% */
  transition: transform .45s ease;
  will-change: transform;
  animation:none !important;           /* IMPORTANT: disable CSS keyframe slider */
}

.pCard__slide{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 100%;
  display:block;
}

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

/* mobile image height */
@media(max-width:992px){
  .pCard__slide img{height:180px;}
}

/* =========================
   PROJECTS PAGE BANNER
========================= */
.projectsBanner{
  position:relative;
  background:
    linear-gradient(180deg, rgba(11,58,120,.85), rgba(11,58,120,.85)),
    url("images/banner/projects-banner.jpg") center/cover no-repeat;
  color:#fff;
}

.projectsBanner__inner{
  max-width:1200px;
  margin:0 auto;
  padding:72px 16px 64px;
}

.projectsBanner__content{
  max-width:720px;
}

.projectsBanner__content h1{
  margin:0 0 12px;
  font-size:54px;
  font-weight:1000;
  letter-spacing:.3px;
  line-height:1.05;
}

.projectsBanner__content p{
  margin:0;
  font-size:18px;
  line-height:1.6;
  color:#e6effc;
}

/* subtle bottom divider */
.projectsBanner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.25);
}

/* =========================
   Responsive
========================= */
@media (max-width: 992px){
  .projectsBanner__inner{
    padding:56px 16px 52px;
  }

  .projectsBanner__content h1{
    font-size:38px;
  }

  .projectsBanner__content p{
    font-size:16px;
  }
}