/* IPID - Clean NGO/Semi-Gov Website
   Responsive + accessible + modern
*/

:root{
  --bg: #ffffff;
  --surface: #f6f8fb;
  --text: #0b1220;
  --muted: #4b5563;
  --border: #e5e7eb;

  /* Premium palette */
  --primary: #D7552B;    /* navy */
  --primary2: #06b6d4;   /* cyan */

  /* Accent dark areas (not full dark theme) */
  --dark: #D7552B;
  --dark2:#0a1f44;

  --shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --shadow2: 0 12px 24px rgba(2, 6, 23, .12);
  --radius: 18px;
  --radius2: 22px;
  --max: 1180px;
  --focus: 2px solid rgba(6,182,212,.65);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;

  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; }
:focus-visible{ outline: var(--focus); outline-offset: 2px; }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

.section{ padding: 64px 0; }
.section.small{ padding: 40px 0; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size: 13px;
}

.h1{ font-size: clamp(28px, 3.5vw, 44px); line-height:1.15; margin: 0 0 12px; }
.h2{ font-size: clamp(22px, 2.5vw, 32px); margin:0 0 12px; }
.h3{ font-size: 18px; margin: 0 0 8px; }
.p{ margin: 0; color: var(--muted); }

.grid{
  display:grid;
  gap: 18px;
}

.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.four{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 900px){
  .grid.two, .grid.three, .grid.four{ grid-template-columns: 1fr; }
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card.pad{ padding: 18px; }
.card.hover{
  transition: transform .25s ease, box-shadow .25s ease;
}
.card.hover:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
}

.kicker{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--primary2);
  font-weight: 700;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  color:#fff;
}
.btn.outline{
  background:#fff;
  border-color: var(--border);
  color: var(--text);
}
.btn.outline:hover{ border-color: rgba(15,76,129,.35); }

.topbar{
  display:block;
  background: #0b2341;
  color: rgba(255,255,255,.9);
  font-size: 13px;
}
.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 9px 0;
  gap: 12px;
}
.topbar .left{ display:flex; gap: 14px; flex-wrap:wrap; }
.topbar a{ color: rgba(255,255,255,.92); }
.topbar .social{ display:flex; gap: 10px; align-items:center; }
.iconbtn{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  transition: background .2s ease, transform .2s ease;
}
.iconbtn:hover{ background: rgba(255,255,255,.12); }
.iconbtn:active{ transform: translateY(1px); }

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 12px 0;
}
.logo{
  display:flex;
  align-items:center;
  gap: 10px;
}
.logo-mark {
  /* UPDATE THESE VALUES */
  width: 160px;       /* Change 38px to your preferred size (e.g., 50px, 60px) */
  height: auto;      /* Keeps the image original proportions */
  
  /* Keep these for styling */
  border-radius: 2px;
  /* box-shadow: var(--shadow2); */

  /* OPTIONAL: Remove or comment out the background since you have a real image now */
  /* background: radial-gradient(circle at 20% 20%, var(--primary2), var(--primary)); */
}
.logo strong{ font-size: 16px; letter-spacing:.02em; }
.logo span{ display:block; font-size: 12px; color: var(--muted); margin-top:2px; }

.nav{
  display:flex;
  gap: 8px;
  align-items:center;
}
.nav a{
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}
.nav a:hover{ background: var(--surface); color: var(--text); }
.nav a.active {
  color: #0b2d2e;
  background: transparent;
  border: none; /* Remove the full box border */
  border-bottom: 2px solid #e4a791; /* The underline color */
  padding-bottom: 2px; /* Adds a little space between text and line */
}

.menuBtn{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menuBtn svg{ width:22px; height:22px; }

@media (max-width: 980px){
  .nav{ display:none; }
  .menuBtn{ display:inline-flex; }
}

.drawerOverlay{
  position: fixed;
  inset:0;
  background: rgba(2,6,23,.55);
  display:none;
  z-index: 100;
}
.drawer{
  position: fixed;
  top:0; right:0;
  height:100%;
  width: min(360px, 92vw);
  background:#fff;
  border-left: 1px solid var(--border);
  transform: translateX(110%);
  transition: transform .25s ease;
  z-index: 101;
  display:flex;
  flex-direction:column;
}
.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.drawerNav{
  padding: 12px 12px 24px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.drawerNav a{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
}
.drawerNav a.active{
  background: rgba(15,76,129,.08);
  border-color: rgba(15,76,129,.25);
}
.drawerOpen .drawerOverlay{ display:block; }
.drawerOpen .drawer{ transform: translateX(0%); }

.hero{
  background:
    radial-gradient(circle at 20% 20%, rgba(14,165,164,.12), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(15,76,129,.10), transparent 52%),
    linear-gradient(#fff, #fff);
  border-bottom: 1px solid var(--border);
}
.hero .wrap{
  padding: 44px 0;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  align-items:center;
}
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns: 1fr; }
}
.hero .crumb{
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}
.hero .side{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}

.slider{
  position: relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  min-height: 420px;
}
@media (max-width: 900px){
  .slider{ min-height: 360px; }
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .5s ease;
  background-size: cover;
  background-position: center;
}
.slide.active{ opacity: 1; }
.slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,.08), rgba(2,6,23,.15));
}
.slideText{
  position:absolute;
  right: 18px;
  top: 18px;
  max-width: 440px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: var(--shadow);
  z-index:2;
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
.slide.active .slideText{
  opacity: 1;
  transform: translateY(0px);
}
.slideText .title{
  font-weight: 900;
  margin: 0 0 6px;
  font-size: 16px;
}
.slideText .desc{
  margin:0;
  color: var(--muted);
  font-size: 13px;
}
.sliderControls{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 0 10px;
  z-index: 3;
  pointer-events:none;
}
.sliderBtn{
  pointer-events:auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(2,6,23,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.sliderBtn:hover{ background: rgba(2,6,23,.50); }
.dots{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display:flex;
  gap: 8px;
  z-index:3;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.4);
  cursor:pointer;
}
.dot.active{ background:#fff; }

.mediaRow{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}
.mini{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color:#fff;
}
.mini .ic {
  width: 44px; 
  height: 44px;
  border-radius: 16px;
  
  /* Background: Light transparent version of the active color (#e4a791) */
  background: rgba(228, 167, 145, 0.12); 
  
  /* Border: Solid active color */
  border: 1px solid #e4a791;
  
  /* Icon Color (Optional: if you want the icon inside to match too) */
  color: #e4a791; 
  
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.mini .ic svg{ width:22px; height:22px; }
.mini .txt b{ display:block; margin-bottom:2px; }
.mini .txt{ color: #fff; font-size: 14px; }

.carousel{
  position:relative;
  overflow:hidden;
}
.carouselTrack{
  display:flex;
  gap: 14px;
  will-change: transform;
  transition: transform .6s ease;
}
.partnerCard{
  min-width: 220px;
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  display:flex;
  gap: 12px;
  align-items:center;
}
.partnerCard img{
  width: 52px; height: 52px;
  border-radius: 14px;
  object-fit: cover;
  border:1px solid var(--border);
}
.partnerCard b{ display:block; }
.partnerCard small{ color: var(--muted); }

.callStrip{
  background: linear-gradient(90deg, rgba(15,76,129,.12), rgba(14,165,164,.12));
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius2);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}

.footer{
  background: #0b2341;
  color: rgba(255,255,255,.92);
  padding: 46px 0 26px;
  margin-top: 60px;
}
.footer .cols{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px){
  .footer .cols{ grid-template-columns: 1fr; }
}
.footer .muted{ color: rgba(255,255,255,.74); }
.footer a{ color: rgba(255,255,255,.88); }
.footer a:hover{ color: #fff; }
.footer h4{ margin: 0 0 10px; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap: 8px; }
.footer .bottom{
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 22px;
  padding-top: 16px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity:1;
  transform: translateY(0px);
}

/* Modal */
.modalOverlay{
  position: fixed;
  inset:0;
  background: rgba(2,6,23,.62);
  display:none;
  z-index: 200;
}
.modal{
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: min(860px, calc(100% - 20px));
  max-height: calc(100vh - 36px);
  overflow:auto;
  background:#fff;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  display:none;
  z-index: 201;
}
.modalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 16px 10px;
  border-bottom:1px solid var(--border);
}
.modalBody{
  padding: 16px;
}
.modalClose{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.modalOpen .modalOverlay,
.modalOpen .modal{ display:block; }

/* Lightbox */
.lightboxOverlay{
  position: fixed;
  inset:0;
  background: rgba(2,6,23,.92);
  display:none;
  z-index: 250;
}
.lightbox{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 251;
}
.lightboxOpen .lightboxOverlay,
.lightboxOpen .lightbox{ display:block; }

.lightboxInner{
  position:absolute;
  inset: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.lightboxTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color:#fff;
}
.lightboxTop .title{ font-weight:800; }
.lightboxTop .actions{ display:flex; gap: 10px; }
.lbBtn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
}
.lbBtn:hover{ background: rgba(255,255,255,.12); }

.lightboxMain{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.lightboxMain img{
  max-width: min(980px, 92vw);
  max-height: 74vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
}

/* Blog */
.chips{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin: 12px 0 22px;
}
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size: 13px;
  color: var(--muted);
}
.chip.active{
  background: rgba(15,76,129,.10);
  border-color: rgba(15,76,129,.25);
  color: var(--text);
}

.postMeta{
  display:flex; gap: 10px; flex-wrap:wrap;
  font-size: 13px; color: var(--muted);
}

.formGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .formGrid{ grid-template-columns: 1fr; }
}
.field label{ display:block; font-weight:800; font-size: 13px; margin-bottom:6px; }
.field input, .field textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:#fff;
}
.field textarea{ min-height: 120px; resize: vertical; }
.help{ color: var(--muted); font-size: 13px; margin-top: 8px; }

.toast{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: var(--surface);
  display:none;
}

/* Back to top */
.toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
  cursor:pointer;
  display:none;
  z-index: 80;
}
.toTop svg{ width:22px; height:22px; }
.toTop.show{ display:flex; align-items:center; justify-content:center; }

.header.scrolled{ box-shadow: 0 10px 25px rgba(2,6,23,.08); }

.headerSpace{ height: var(--header-h, 74px); }

/* Page fade-in */
body{ opacity: 1; transition: opacity .35s ease; }
body.preload{ opacity: 0; }

/* Premium card effects */
.card{
  background:#fff;
}
.card.hover:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(2,6,23,.14);
}
.card.hover:hover{
  border-color: rgba(6,182,212,.35);
}
.card.hover::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(circle at 20% 10%, rgba(6,182,212,.18), transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
}
.card.hover{ position:relative; }
.card.hover:hover::after{ opacity: 1; }

/* Semi-dark section style */
.section.dark{
  background: radial-gradient(circle at 20% 20%, rgba(6,182,212,.10), transparent 55%),
              radial-gradient(circle at 70% 40%, rgba(255,255,255,.06), transparent 55%),
              linear-gradient(180deg, var(--dark), var(--dark2));
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.section.dark .p{ color: rgba(255,255,255,.78); }
.section.dark .badge{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
}
.section.dark .card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.section.dark .card .card{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.section.dark .card, 
.section.dark .card .h3, 
.section.dark .card .h2, 
.section.dark .card .h1,
.section.dark .card .statNum{
  color: rgba(255,255,255,.94);
}
.section.dark .card .p,
.section.dark .card .statLabel{
  color: rgba(255,255,255,.78);
}
.section.dark .card a{
  color: rgba(255,255,255,.92);
}
.section.dark .card img{
  filter: saturate(1.05) contrast(1.02);
}
.section.dark .card.hover:hover{
  border-color: rgba(6,182,212,.45);
  box-shadow: 0 18px 38px rgba(2,6,23,.24);
}
.section.dark .card .p{ color: rgba(255,255,255,.78); }
.section.dark .btn.outline{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.section.dark .btn.outline:hover{ border-color: rgba(6,182,212,.55); }

/* Stats cards */
.statNum{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.statLabel{
  color: var(--muted);
  font-weight: 800;
}
.section.dark .statLabel{ color: rgba(255,255,255,.78); }

/* Ensure card images fill width */
.card img{ width:100%; display:block; }


/* Modal overlay should cover header; modal card starts below fixed header */
.modal{
  z-index: 20000; /* higher than header */
  padding: 18px;
  padding-top: 18px; /* keep overlay covering full top */
  align-items: flex-start;
}
.modalCard{
  margin-top: calc(var(--header-h, 74px) + 12px);
  max-height: calc(100vh - (var(--header-h, 74px) + 40px));
}
.modalCard{
  margin-top: 0 !important;
  max-height: calc(100vh - (var(--header-h, 74px) + 34px));
}

body.modalOpen .header{ filter: blur(0px); }

/* Subtle motion system (Intensity 1) */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* Softer hover */
.card.hover{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.hover img{
  transition: transform .5s ease;
  transform-origin: center;
}
.card.hover:hover img{
  transform: scale(1.03);
}

/* Button micro animation */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }

/* Hero (premium semi-dark) */
.section.hero{
  background: radial-gradient(circle at 18% 25%, rgba(6,182,212,.18), transparent 55%),
              radial-gradient(circle at 75% 20%, rgba(255,255,255,.10), transparent 55%),
              linear-gradient(180deg, var(--dark), var(--dark2));
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.section.hero .p{ color: rgba(255,255,255,.80); }
.section.hero .badge{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}
.section.hero .h1, .section.hero .h2, .section.hero .h3{
  color: rgba(255,255,255,.98);
}
.section.hero a{ color: inherit; }
.section.hero .btn.outline{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.section.hero .btn.outline:hover{ border-color: rgba(6,182,212,.55); }

/* Modal animations */
.modal{ transition: opacity .18s ease; }
.modalCard{
  animation: modalIn .22s ease both;
}
@keyframes modalIn{
  from{ opacity:0; transform: translateY(10px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}




/* Dark/Hero sections: enforce glass cards + readable text (fix invisible content) */
.section.dark .card,
.section.hero .card{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
.section.dark .card .h3,
.section.dark .card .h2,
.section.dark .card .h1,
.section.dark .card h1,
.section.dark .card h2,
.section.dark .card h3,
.section.dark .card h4,
.section.dark .card h5,
.section.dark .card h6,
.section.dark .card .p,
.section.dark .card p,
.section.dark .card li,
.section.dark .card span,
.section.hero .card .h3,
.section.hero .card .h2,
.section.hero .card .h1,
.section.hero .card h1,
.section.hero .card h2,
.section.hero .card h3,
.section.hero .card h4,
.section.hero .card h5,
.section.hero .card h6,
.section.hero .card .p,
.section.hero .card p,
.section.hero .card li,
.section.hero .card span{
  color: rgba(255,255,255,.88) !important;
}

/* If a card contains another .card (common for image-card bodies), make inner card transparent */
.section.dark .card .card,
.section.hero .card .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.section.dark .card .badge,
.section.hero .card .badge{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.9) !important;
}

/* card hover overlay behind content */
.card.hover::after{ z-index:0; }
.card.hover > *{ position: relative; z-index:1; }

/* Slider caption readability on dark hero */
.slideText{
  background: rgba(255,255,255,.88) !important;
  color: #0b1220 !important;
}
.slideText .title, .slideText h3, .slideText h2{
  color: #0b1220 !important;
}
.slideText .desc, .slideText p{
  color: #334155 !important;
}

body.lightboxOpen .topbar,
body.lightboxOpen .header{
  visibility: hidden !important;
}
body.lightboxOpen{
  overflow: hidden !important;
}
.lightboxControls, .lightbox .controls, #lightbox .controls{
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 40001 !important;
}




/* Gallery lightbox: place UI below topbar+header (uses --header-top + --header-h) */
.lightbox, #lightbox{
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  padding-top: calc(var(--header-top, 0px) + var(--header-h, 74px) + 12px) !important;
  box-sizing: border-box;
}
.lightboxControls, .lightbox .controls, #lightbox .controls{
  position: fixed !important;
  top: calc(var(--header-top, 0px) + var(--header-h, 74px) + 14px) !important;
  right: 14px !important;
  z-index: 12001 !important;
}
.lightboxTitle, .lightbox .title, #lightbox .title{
  position: fixed !important;
  top: calc(var(--header-top, 0px) + var(--header-h, 74px) + 14px) !important;
  left: 14px !important;
  z-index: 12001 !important;
  max-width: calc(100vw - 220px);
}
body.lightboxOpen{ overflow: hidden !important; }


/* Home hero split: make slider wider (rollback layout, increase slider width) */
.heroSplitWide{
  display: grid;
  grid-template-columns: 0.9fr 1.4fr; /* text / slider */
  gap: 22px;
  align-items: center;
}
@media (max-width: 980px){
  .heroSplitWide{ grid-template-columns: 1fr; }
}
.heroSplitWide #slider{
  min-height: 420px;
}
@media (max-width: 900px){
  .heroSplitWide #slider{ min-height: 320px; }
}

/* ===== HERO SLIDER TEXT – SCREENSHOT MATCH (LIGHT TRANSPARENT STRIP) ===== */
.heroSlider .slideCaption,
.heroSlider .caption,
.slider-caption {
    background: rgba(0,0,0,0.25) !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 22px 30px;
    max-width: 92%;
}

.heroSlider .slideCaption h3,
.heroSlider .caption h3 {
    color: #ffffff !important;
    font-weight: 600;
}

.heroSlider .slideCaption p,
.heroSlider .caption p {
    color: rgba(255,255,255,0.95) !important;
    line-height: 1.6;
}

/* ===== Slider caption (actual class) - make strip transparent like reference ===== */
.heroSlider .slideText{
  background: rgba(0,0,0,0.25) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.heroSlider .slideText .title{
  color: #ffffff !important;
  font-weight: 600;
}
.heroSlider .slideText .desc{
  color: rgba(255,255,255,0.95) !important;
}


/* ===== FORCE slider caption to remove white box (final) ===== */
.slideText{
  background: rgba(0,0,0,0.25) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.slideText .title{
  color: #fff !important;
  font-weight: 600;
}
.slideText .desc{
  color: rgba(255,255,255,0.95) !important;
}






/* =========================
   Laravel Modal (JS modal)
   ========================= */

#modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 10, 23, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9998;
}

#modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.98);
  width: min(1100px, calc(100vw - 28px));
  max-height: calc(100vh - 120px);
  overflow: auto;

  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 30px 90px rgba(0,0,0,.40);

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
  padding: 22px 22px 18px;
}

/* show */
html.modalOpen #modalOverlay{
  opacity: 1;
  pointer-events: auto;
}

html.modalOpen #modal{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* close button */
#modalClose{
  position: sticky;
  top: 10px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: rgba(255,255,255,.92);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  z-index: 1;
}

/* make sure header/topbar never covers modal */
.header, .topbar{
  z-index: 100;
}



/* =========================
   Gallery Lightbox
   ========================= */

#lightboxOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 10, 23, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9998;
}

#lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

html.lightboxOpen #lightboxOverlay{
  opacity: 1;
  pointer-events: auto;
}

html.lightboxOpen #lightbox{
  opacity: 1;
  pointer-events: auto;
}

.lbTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #fff;
  gap: 12px;
}

.lbTitle{
  font-weight: 800;
  font-size: 18px;
  max-width: 65vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lbActions{
  display: flex;
  gap: 10px;
}

.lbBtn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.lbBody{
  flex: 1;
  display: grid;
  place-items: center;
  padding: 10px 14px 18px;
}

#lbImage{
  max-width: min(1200px, calc(100vw - 28px));
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}

.toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15, 23, 42, .75);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .25s ease;
  z-index: 9999;
}
.toTop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* Clients category sections */
.clientCatHead{
  grid-column: 1 / -1;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 2px;
  padding: 14px 16px;
  border:0px solid var(--border);
  border-radius:6px;
  background: linear-gradient(135deg, rgba(11,35,65,.06), rgba(11,35,65,.02));
}

.clientCatTitle{
  margin:0;
  font-size:16px;
  font-weight:900;
  color: #fff;
  letter-spacing:.2px;
}

.clientCatMeta{
  font-size:13px;
  color: #fff;
}

.clientCard{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.clientCard:hover{
  transform: translateY(-2px);
  border-color: rgba(11,35,65,.22);
  box-shadow: 0 18px 40px rgba(11,35,65,.10);
}

.clientImgWrap{
  position:relative;
}

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

.clientBadge{
  position:absolute;
  left:12px;
  bottom:12px;
  background: rgba(11,35,65,.92);
  color:#fff;
  padding:6px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight:800;
}

.clientName{
  font-weight:900;
  color:#0e1726;
  margin:0;
  line-height:1.25;
}

.clientShort{
  margin:8px 0 12px;
  color: var(--muted);
  font-size:13px;
}

.btnPrimarySolid{
  background: var(--primary);
  color:#fff;
  border:1px solid var(--primary);
}
.btnPrimarySolid:hover{
  border-color: var(--primary-2);
}

.clientLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Project Category Header */
.project-category-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 24px;
    margin-bottom: 28px;

    border-radius: 16px;

    /* glass effect */
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Left side text */
.project-category-bar .left {
    color: #ffffff;
}

.project-category-bar .year {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.project-category-bar .count {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
}

/* Right side category label */
.project-category-bar .category {
    font-size: 14px;
    font-weight: 600;
    color: #0B2341;

    background: #ffffff;
    padding: 6px 14px;
    border-radius: 999px;
}
 .nav_logo_wrapper {
                display: inline-flex !important;
                flex-direction: column !important;
                width: max-content !important; 
                max-width: none !important;
                font-family: Arial, Helvetica, sans-serif;
                text-decoration: none !important;
                box-sizing: border-box !important;
                line-height: normal !important;
            }

            /* 2. Top Row (Logo + Text) */
            .nav_logo_top_row {
                display: flex !important;
                flex-direction: row !important;
                align-items: flex-start !important;
                gap: 12px !important;
                margin-bottom: 5px !important;
            }

            /* 3. The "ipid" Mark */
            .nav_logo_mark {
                font-family: "Times New Roman", Times, serif !important;
                font-size: 50px !important;
                line-height: 0.75 !important;
                font-weight: bold !important;
                color: #e05216 !important;
                letter-spacing: -3px !important;
                margin: 0 !important;
                padding-top: 2px !important;
            }

            /* 4. Text Column */
            .nav_logo_text_col {
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                height: 48px !important; /* Locks height to logo */
                margin: 0 !important;
            }

            /* 5. Individual Lines */
            .nav_logo_line {
                font-size: 11px !important;
                line-height: 1 !important;
                font-weight: 700 !important;
                color: #666666 !important;
                white-space: nowrap !important;
                text-align: left !important;
                margin: 0 !important;
            }

            .nav_logo_highlight { 
                color: #e05216 !important; 
            }

            /* 6. Divider Bar */
            .nav_logo_bar {
                display: block !important;
                width: 100% !important;
                height: 3px !important;
                background-color: #808080 !important;
                margin-bottom: 4px !important;
            }

            /* 7. Bottom Slogan */
            .nav_logo_slogan {
                font-size: 12px !important;
                color: #1a1a1a !important;
                font-weight: 400 !important;
                white-space: nowrap !important;
            }

            /* Mobile Scaling */
            @media (max-width: 600px) {
                .nav_logo_mark { font-size: 48px !important; }
                .nav_logo_text_col { height: 36px !important; }
                .nav_logo_line { font-size: 9px !important; }
                .nav_logo_slogan { font-size: 10px !important; }
            }

/* --- 1. Container --- */
.top-announcement-bar {
    display: inline-block; /* Wraps tightly around text */
}

/* --- 2. Inner Content (Glass Effect + Flex) --- */
.top-bar-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1); /* Glass effect backing */
    padding: 8px 16px;
    border-radius: 50px; /* Rounded pill shape */
    backdrop-filter: blur(5px); /* Blurs background slightly */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    /* ANIMATION ADDED HERE: Gentle float up and down */
    animation: gentleFloat 3s ease-in-out infinite;
}

/* --- 3. Icon Styles --- */
.top-bar-icon {
    color: #fff; /* IPID Dark Blue */
    font-size: 24px;
    font-weight: 600;
}

/* --- 4. Text Styles --- */
.top-bar-text {
    color: #fff; 
    font-size: 14px;
    font-weight: 600;
    font-family: sans-serif;
    letter-spacing: 0.3px;
}

/* --- 5. The Animation Keyframes --- */
@keyframes gentleFloat {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px); /* Moves up slightly */
    }
    100% {
        transform: translateY(0px);
    }
}

/* --- 6. Responsive (Mobile/Tablet) --- */
@media (max-width: 991px) {
    .heroSplitWide {
        flex-direction: column-reverse; /* Image on top on mobile */
    }
    .reveal {
        align-items: center !important; /* Center align everything */
        text-align: center;
    }
    
    /* Ensure the bar doesn't have negative margin on mobile */
    .top-announcement-bar.right-aligned {
        margin-top: 0; 
        margin-bottom: 20px; /* Add some breathing room on mobile */
    }
}

/* --- 7. Desktop Only (Screens wider than 992px) --- */
@media (min-width: 992px) {
    .top-announcement-bar.right-aligned {
        /* Pulls the bar up to overlap/sit closer to the slider area */
        margin-top: -40px;
    }
}