/* =====================================================================
   DITC homepage design upgrade — layered on top of the existing markup.
   Purely visual: no content, links, images or PHP behaviour are changed.
   To revert, remove the <link> to this file in includes/head.php.
   ===================================================================== */

:root{
  --gov-blue:#0b3d91;
  --gov-blue-600:#0d47a1;
  --gov-blue-700:#0a337a;
  --gov-sky:#0074D9;
  --saffron:#ff7a00;
  --ink:#1f2937;
  --muted:#5b6472;
  --line:#e6e9f0;
  --bg-soft:#f5f7fb;
  --card:#ffffff;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-md:0 8px 24px rgba(16,24,40,.10);
  --shadow-lg:0 16px 40px rgba(11,61,145,.16);
  --radius:14px;
}

body{
  font-family:'Inter','Segoe UI',Arial,sans-serif !important;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:'Poppins','Segoe UI',Arial,sans-serif;}

/* ------------------------------------------------------------------ *
 * Top utility bar + header
 * ------------------------------------------------------------------ */
.ditc-topbar{
  background:linear-gradient(90deg,var(--gov-blue-700),var(--gov-sky)) !important;
  color:#fff !important;font-size:13px;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:5px !important;padding-bottom:5px !important;
  padding-left:max(15px,calc((100vw - 1440px)/2 + 15px)) !important;
  padding-right:max(15px,calc((100vw - 1440px)/2 + 15px)) !important;
}
.ditc-topbar a.topbar-link{color:#fff !important;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.ditc-topbar a.topbar-link:hover{text-decoration:underline;}
.ditc-topbar .topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ditc-topbar .topbar-date{font-weight:600;}
.ditc-topbar .topbar-sep{opacity:.45;}
.ditc-topbar .topbar-brand{display:inline-flex;align-items:center;gap:6px;font-weight:600;}
/* Accessibility buttons (font size + high contrast) — red active/hover accent */
.a11y-group{display:inline-flex;align-items:center;gap:4px;}
.a11y-btn{
  min-width:26px;height:23px;padding:0 6px;border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.12);color:#fff;border-radius:6px;font-weight:700;line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.a11y-btn span{font-size:9px;line-height:1;}
#fontPlus{font-size:15px;} #fontMinus{font-size:12px;}
.a11y-btn:hover,.a11y-btn.active{background:#d32f2f !important;border-color:#d32f2f !important;}
.a11y-btn:active{transform:scale(.94);}
/* Skip to main content link (visible on keyboard focus) */
.ditc-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#d32f2f;color:#fff;
  padding:10px 18px;font-weight:700;border-radius:0 0 8px 0;text-decoration:none;}
.ditc-skip:focus{left:0;}
/* High-contrast theme */
html.high-contrast body{background:#000 !important;color:#fff !important;}
html.high-contrast .site-header,
html.high-contrast .card,html.high-contrast .project-box,
html.high-contrast .p-4.text-black,html.high-contrast .owl-carousel .item{
  background:#0a0a0a !important;color:#fff !important;border-color:#444 !important;}
html.high-contrast h1,html.high-contrast h2,html.high-contrast h5,
html.high-contrast .card-title,html.high-contrast .site-header h1{color:#fff !important;}
html.high-contrast p,html.high-contrast .card-text,html.high-contrast .site-header h2{color:#eaeaea !important;}
html.high-contrast a{color:#ffd400 !important;}
html.high-contrast .footer{background:#000 !important;}
.site-header{background:#fff;position:relative;}
/* Align header (and navbar) content to the same container width as the cards below */
.site-header .container-fluid{
  max-width:1440px !important;margin-left:auto !important;margin-right:auto !important;
  padding-left:15px !important;padding-right:15px !important;
}
.navbar .container-fluid{
  max-width:1440px !important;margin-left:auto !important;margin-right:auto !important;
}
/* Dark green navigation bar */
nav.navbar{
  background:linear-gradient(90deg,#0c3b23,#15532f 45%,#1e7a45 100%) !important;
  box-shadow:0 2px 10px rgba(12,59,35,.30) !important;
}
/* Group logo + title together on the left; push the two emblems to the right */
.site-header .header-container{
  padding:8px 0;justify-content:flex-start !important;gap:14px !important;flex-wrap:nowrap;
}
.site-header .header-container > [class*="col-"]{padding:0 !important;margin:0 !important;}
.site-header .header-container > [class*="col-"]:first-child{
  flex:0 0 auto !important;width:auto !important;max-width:none !important;
}
.site-header .header-title{
  flex:1 1 auto !important;width:auto !important;max-width:none !important;
  text-align:left !important;padding-left:2px !important;
}
.site-header .header-title h1,.site-header .header-title h2{text-align:left !important;margin:0 !important;}
.site-header .header-container > .d-md-block{
  flex:0 0 auto !important;width:auto !important;max-width:none !important;
}
.site-header h1{
  font-size:23px !important;
  font-weight:700 !important;
  color:var(--gov-blue) !important;
  text-shadow:none !important;
  letter-spacing:.2px;
  line-height:1.25;
}
.site-header h2{font-size:15px !important;color:var(--muted) !important;font-weight:500;}
.site-header .header-logo{height:74px !important;width:auto !important;margin:0 auto !important;object-fit:contain;}

/* ------------------------------------------------------------------ *
 * Hero carousel
 * ------------------------------------------------------------------ */
/* Full-bleed hero slider (edge to edge) */
#carouselExampleIndicators{
  margin:0 !important;
  width:100vw;max-width:100vw;
  position:relative;left:50%;right:50%;
  margin-left:-50vw !important;margin-right:-50vw !important;
  border-radius:0 !important;overflow:hidden;box-shadow:none !important;
}
.carousel-inner{overflow:hidden;}
.carousel-item img{
  height:540px !important;width:100%;object-fit:cover;
}
/* Animated slow zoom (Ken Burns) on whichever slide is showing */
@keyframes ditc-kenburns{
  0%{transform:scale(1.03)}
  100%{transform:scale(1.16)}
}
.carousel-item.active img{
  animation:ditc-kenburns 7s ease-out forwards;
  will-change:transform;
}
/* Smooth crossfade between slides */
.carousel-fade .carousel-item{
  opacity:0;transition:opacity .9s ease-in-out;
}
.carousel-fade .carousel-item.active{opacity:1;}
#carouselExampleIndicators::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;
  background:linear-gradient(to top,rgba(3,12,35,.5),transparent);
  pointer-events:none;
}
.carousel-indicators{z-index:3;margin-bottom:16px;}
.carousel-indicators li{width:11px;height:11px;border-radius:50%;opacity:.6;transition:all .25s ease;}
.carousel-indicators li.active{opacity:1;width:26px;border-radius:6px;background:var(--saffron);}
.carousel-control-prev,.carousel-control-next{width:6%;z-index:3;opacity:.75;}
.carousel-control-prev:hover,.carousel-control-next:hover{opacity:1;}

/* ------------------------------------------------------------------ *
 * Notice / SOP bar — full-bleed, flush under the slider, stylish
 * ------------------------------------------------------------------ */
body > div[style*="linear-gradient(90deg, #001f3f"]{
  width:100vw !important;max-width:100vw !important;
  position:relative;left:50%;right:50%;
  margin:0 !important;margin-left:-50vw !important;margin-right:-50vw !important;
  border-radius:0 !important;
  padding-top:8px !important;padding-bottom:8px !important;
  padding-left:max(15px,calc((100vw - 1440px) / 2 + 15px)) !important;
  padding-right:max(15px,calc((100vw - 1440px) / 2 + 15px)) !important;
  display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;
  text-align:left !important;
  white-space:normal !important;text-overflow:clip !important;overflow:hidden !important;
  background:linear-gradient(90deg,#06214a,#0b3d91 40%,#0074D9 70%,#06214a) !important;
  background-size:220% 100% !important;
  animation:sopShimmer 8s linear infinite;
  box-shadow:0 6px 18px rgba(6,33,74,.25) !important;
}
@keyframes sopShimmer{0%{background-position:0% 0;}100%{background-position:220% 0;}}
body > div[style*="linear-gradient(90deg, #001f3f"] .blinking-text{
  color:#ffffff !important;font-size:13.5px !important;font-weight:600 !important;
  font-family:'Poppins','Segoe UI',sans-serif !important;letter-spacing:.4px;
}
body > div[style*="linear-gradient(90deg, #001f3f"] code{
  background:rgba(255,255,255,.15);color:#fff;padding:1px 6px;border-radius:5px;
}
/* turn the link into a stylish pill button */
body > div[style*="linear-gradient(90deg, #001f3f"] a{
  display:inline-flex !important;align-items:center;gap:6px;
  background:#fff !important;color:#0b3d91 !important;
  padding:7px 18px !important;border-radius:999px !important;
  text-decoration:none !important;font-weight:700 !important;font-size:14px !important;
  margin-left:auto !important;box-shadow:0 3px 10px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
body > div[style*="linear-gradient(90deg, #001f3f"] a::after{content:"\2192";}
body > div[style*="linear-gradient(90deg, #001f3f"] a:hover{
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.28);background:#f2f7ff !important;
}
@media (max-width:768px){
  body > div[style*="linear-gradient(90deg, #001f3f"]{padding:8px 14px !important;}
  body > div[style*="linear-gradient(90deg, #001f3f"] .blinking-text{font-size:12.5px !important;}
}

/* ------------------------------------------------------------------ *
 * Section shell + headings
 * ------------------------------------------------------------------ */
section > div,.c{border-top:0 !important;}
.c{background:var(--bg-soft) !important;padding:44px 16px !important;}
section > div[style*="ghostwhite"]{background:#fff !important;padding:44px 16px !important;}
section > div[style*="whitesmoke"]{background:var(--bg-soft) !important;padding:44px 16px !important;}

h2.text-center{
  position:relative;font-size:26px !important;font-weight:700 !important;
  color:var(--gov-blue) !important;letter-spacing:.4px !important;margin-bottom:32px !important;
}
h2.text-center::after{
  content:"";display:block;width:64px;height:4px;border-radius:4px;margin:12px auto 0;
  background:linear-gradient(90deg,var(--saffron),var(--gov-sky));
}

/* ------------------------------------------------------------------ *
 * Mission / Vision / Objective cards
 * ------------------------------------------------------------------ */
.c .row{max-width:1440px;margin:0 auto !important;}
.p-4.text-black{
  background:var(--card) !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;border-radius:var(--radius) !important;
  height:auto !important;min-height:210px;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease;overflow:hidden;position:relative;
}
.p-4.text-black::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--gov-sky),var(--saffron));}
.p-4.text-black:hover{
  background:var(--card) !important;color:var(--ink) !important;
  transform:translateY(-6px);box-shadow:var(--shadow-lg) !important;
}
.p-4.text-black h5{color:var(--gov-blue) !important;font-weight:700 !important;
  display:flex;align-items:center;gap:11px;font-size:17px;}
.p-4.text-black h5 .fa,.p-4.text-black h5 .fas{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;border-radius:12px;color:#fff !important;font-size:17px;margin:0 !important;
  background:linear-gradient(135deg,var(--gov-sky),var(--gov-blue));
  box-shadow:0 5px 12px rgba(11,61,145,.28);
}
.p-4.text-black div[style*="border-bottom"]{border-bottom:1px solid var(--line) !important;}
.p-4.text-black p{color:var(--muted) !important;line-height:1.6;}

/* ------------------------------------------------------------------ *
 * Our Superior — official cards
 * ------------------------------------------------------------------ */
.card{
  width:100% !important;max-width:260px;height:auto !important;margin:0 auto !important;
  border:1px solid var(--line) !important;border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;
  overflow:hidden;position:relative;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--gov-sky),var(--saffron));}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.card .card-body{width:auto !important;padding:22px 16px !important;text-align:center;background:#fff !important;}
.card .card-body:hover{background:#fff !important;color:inherit !important;transition:none !important;}
.card img{
  width:104px !important;height:104px !important;object-fit:cover;border-radius:50% !important;
  border:3px solid #eef2fb;box-shadow:0 4px 12px rgba(11,61,145,.12);margin:0 auto 12px !important;
}
.card .card-title{font-weight:700;color:var(--ink);margin:0;font-size:15px;}
.card .card-text{color:var(--muted) !important;font-size:13px;}
.card-link{text-decoration:none !important;}

/* ------------------------------------------------------------------ *
 * Important Projects
 * ------------------------------------------------------------------ */
.project-box{
  background:var(--card) !important;border:1px solid var(--line);border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm) !important;height:auto !important;min-height:230px;
  display:flex;flex-direction:column;padding:24px 22px 22px !important;text-align:left;
  transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden;
}
.project-box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--saffron),var(--gov-sky));}
.project-box:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg) !important;}
.project-box h5{color:var(--gov-blue) !important;font-weight:700 !important;font-size:16px;margin-bottom:10px;}
.project-box p{color:var(--muted) !important;flex:1;line-height:1.55;font-size:13.5px;}
.project-link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  background:linear-gradient(135deg,var(--gov-sky),var(--gov-blue)) !important;
  color:#fff !important;font-weight:600 !important;font-size:13px;text-decoration:none !important;
  padding:7px 16px;border-radius:999px;box-shadow:0 3px 10px rgba(11,61,145,.25);
  transition:transform .2s ease,box-shadow .2s ease;
}
.project-link::after{content:"\2192";transition:transform .2s ease;}
.project-link:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(11,61,145,.32);}
.project-link:hover::after{transform:translateX(4px);}
section .project-box{margin:0;}

/* ------------------------------------------------------------------ *
 * Important Links (owl carousel)
 * ------------------------------------------------------------------ */
.owl-carousel .item{
  border-radius:var(--radius) !important;border:1px solid var(--line);
  box-shadow:var(--shadow-sm) !important;display:flex !important;align-items:center;justify-content:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.owl-carousel .item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md) !important;}
.owl-carousel .item img{filter:grayscale(15%);transition:filter .25s ease;}
.owl-carousel .item:hover img{filter:none;}
section div[style*="color: red"]{color:var(--gov-blue) !important;position:relative;padding-bottom:14px !important;}
section div[style*="color: red"]::after{content:"";display:block;width:64px;height:4px;border-radius:4px;
  margin:12px auto 0;background:linear-gradient(90deg,var(--saffron),var(--gov-sky));}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.footer{
  background:linear-gradient(180deg,#122036,#0c1626) !important;
  color:#c9d3e4 !important;padding:40px 0 20px !important;
}
.footer h5{color:#fff !important;font-weight:600 !important;font-size:15px;letter-spacing:.4px;
  position:relative;padding-bottom:10px;margin-bottom:14px;}
.footer h5::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--saffron),var(--gov-sky));}
.footer .footer-section p,.footer .footer-section li{color:#aeb9cc !important;line-height:1.7;}
.footer a{color:#cdd8ea !important;}
.footer a:hover{color:#fff !important;}
.footer .social-media a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);margin:4px 8px 4px 0 !important;font-size:17px !important;transition:all .2s ease;
}
.footer .social-media a:hover{background:var(--gov-sky);color:#fff !important;transform:translateY(-2px);}
.footer .text-center p{color:#8a97ad !important;font-size:13px;}

/* ------------------------------------------------------------------ *
 * Consistent section width + evenly-sized tiles (all below the slider)
 * Every section's inner row is centered at the same max width, and the
 * tiles in each row are equal-width with even gaps.
 * ------------------------------------------------------------------ */
.c .row,
section > div[style*="ghostwhite"] > .row,
section > div[style*="whitesmoke"] > .row{
  max-width:1440px !important;width:100% !important;
  margin-left:auto !important;margin-right:auto !important;
  display:grid !important;gap:26px !important;align-items:stretch;float:none !important;
  padding-left:15px !important;padding-right:15px !important;
}
.c .row{grid-template-columns:repeat(3,1fr) !important;}
section > div[style*="ghostwhite"] > .row{grid-template-columns:repeat(4,1fr) !important;}
section > div[style*="whitesmoke"] > .row{grid-template-columns:repeat(5,1fr) !important;}
/* every tile fills its grid cell edge-to-edge (equal widths, aligned edges) */
.c .row > [class*="col-"],
section > div[style*="ghostwhite"] > .row > [class*="col-"],
section > div[style*="whitesmoke"] > .row > [class*="col-"]{
  margin:0 !important;padding:0 !important;max-width:none !important;width:auto !important;display:flex;
}
.c .row > [class*="col-"] > div,
.c .row > [class*="col-"] > a,
section > div[style*="ghostwhite"] > .row > [class*="col-"] > div,
section > div[style*="ghostwhite"] > .row > [class*="col-"] > a,
section > div[style*="whitesmoke"] > .row > [class*="col-"] > div,
section > div[style*="whitesmoke"] > .row > [class*="col-"] > a{width:100% !important;display:flex;}
.c .row > [class*="col-"] > div{padding:0 !important;}   /* Mission inner 10px wrapper */
/* inline <style> blocks inside columns must stay hidden */
.c style,section style{display:none !important;}
.card-link{display:flex !important;}
.c .p-4.text-black,
section > div[style*="ghostwhite"] .card,
section > div[style*="whitesmoke"] .project-box{width:100% !important;max-width:none !important;}

/* Important Links carousel — align to the same container width */
.owl-carousel{max-width:1440px;margin:0 auto !important;padding-left:15px;padding-right:15px;}

/* ------------------------------------------------------------------ *
 * Responsive niceties
 * ------------------------------------------------------------------ */
@media (max-width:992px){
  section > div[style*="whitesmoke"] > .row{grid-template-columns:repeat(3,1fr) !important;}
  section > div[style*="ghostwhite"] > .row{grid-template-columns:repeat(2,1fr) !important;}
  .c .row{grid-template-columns:1fr !important;}
}
@media (max-width:576px){
  section > div[style*="whitesmoke"] > .row,
  section > div[style*="ghostwhite"] > .row{grid-template-columns:repeat(2,1fr) !important;gap:16px !important;}
}
@media (max-width:768px){
  .carousel-item img{height:260px !important;}
  .site-header h1{font-size:18px !important;}
  h2.text-center{font-size:22px !important;}
}