@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
/* =====================================================================
   sri-vivid.css — brighter, more professional palette (2026-10-16)
   Taken from the "Sri AI: Build the Future" mockup: vivid emerald → lime greens,
   sunshine-yellow CTAs, white reading areas with a soft green wash.
   Loads LAST (head.php), so it only overrides; delete the <link> to roll back.
   ===================================================================== */
:root{
  --v-green:#0B8A3E; --v-green-2:#16A34A; --v-green-dk:#05532A; --v-green-xdk:#033A1D;
  --v-lime:#A3E635; --v-lime-2:#C6F432;
  --v-yellow:#FFD60A; --v-yellow-2:#FFC300; --v-yellow-ink:#1F1600;
  --v-ink:#0E2116; --v-wash:#F1FAF3;
  --v-btn:linear-gradient(180deg,#FFE55C 0%,#FFD60A 45%,#FFC300 100%);
  --v-btn-hv:linear-gradient(180deg,#FFEB7A 0%,#FFDD2E 45%,#FFCB1F 100%);
  --v-glow:0 8px 22px rgba(255,195,0,.42);
}

/* ---------- brand tokens used by the home sections ---------- */
.sri{
  --sri-gold:#FFC300; --sri-gold-tint:#FFF9DB;
  --sri-green:var(--v-green); --sri-green-dk:var(--v-green-dk);
  --sri-mint:#E3F7E8; --sri-mint-dk:var(--v-green-2);
  --sri-ink:var(--v-ink); --sri-surface:var(--v-wash); --sri-line:#E0ECE3;
  --sri-shadow:0 1px 2px rgba(5,83,42,.06),0 10px 26px rgba(5,83,42,.08);
  --sri-shadow-lg:0 2px 6px rgba(5,83,42,.08),0 26px 50px rgba(5,83,42,.16);
}

/* ---------- announcement bar ---------- */
.hia-ticker-wrap{background:linear-gradient(90deg,var(--v-green-xdk) 0%,#06502A 55%,var(--v-green-xdk) 100%)!important}
.hia-ticker-label{background:linear-gradient(135deg,var(--v-green-2),var(--v-green))!important}
.hia-ticker-fade--left{background:linear-gradient(90deg,#04411F,transparent)!important}
.hia-ticker-fade--right{background:linear-gradient(-90deg,#04411F,transparent)!important}
.hia-ticker-dot{background:var(--v-yellow)!important}
.hia-ticker-excerpt{color:#CFEBD8!important}
.hia-ticker-item:hover .hia-ticker-title{color:var(--v-yellow)!important}
.hia-ticker-controls{background:#022C16!important}

/* ---------- header ---------- */
.nav-menu .nav-item > a.active{color:var(--v-green)!important;background:#E9F8EE!important}
.nav-menu .nav-item > a:hover{color:var(--v-green)!important}

/* ---------- every gold CTA → sunshine yellow gradient ---------- */
.nav-cta > a, .nav-cta > a:visited,
.idbs-hero__btn--primary,
a.bg-hia-green-600, button.bg-hia-green-600, input.bg-hia-green-600,
a.bg-hia-green-700, button.bg-hia-green-700,
form button[type="submit"]:not(.sri-btn),
.sri-btn--gold{
  background:var(--v-btn)!important; color:var(--v-yellow-ink)!important;
  border-color:var(--v-yellow-2)!important; box-shadow:var(--v-glow)!important;
}
.nav-cta > a:hover, .idbs-hero__btn--primary:hover,
a.bg-hia-green-600:hover, button.bg-hia-green-600:hover, input.bg-hia-green-600:hover,
a.bg-hia-green-700:hover, button.bg-hia-green-700:hover,
form button[type="submit"]:not(.sri-btn):hover,
.sri-btn--gold:hover{background:var(--v-btn-hv)!important;color:var(--v-yellow-ink)!important}
.nav-cta > a::after{content:"\2192";margin-left:6px;font-weight:800}
.sri-btn--green{background:linear-gradient(135deg,var(--v-green-2),var(--v-green))!important}
.sri-btn--green:hover{background:linear-gradient(135deg,var(--v-green),var(--v-green-dk))!important}

/* =====================================================================
   HERO — full-colour banner, copy in the dark middle band
   ===================================================================== */
.idbs-hero{
  background:#04311A!important; min-height:clamp(380px,25vw,470px)!important; height:auto!important;
  place-items:center start; padding:26px 0!important;
}
.idbs-hero::before{display:none}                     /* engineering grid */
.idbs-hero__circuit,.idbs-hero__tech{display:none!important}
.idbs-hero__media img{filter:none!important;object-position:50% 30%}
.idbs-hero__media img.is-active{opacity:1!important}
/* legibility wash: darkens only the middle band where the copy sits */
.idbs-hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,transparent 0%,transparent 24%,rgba(2,32,16,.55) 36%,rgba(2,32,16,.50) 60%,transparent 74%),
  linear-gradient(180deg,rgba(2,32,16,.25) 0%,transparent 30%,transparent 78%,rgba(2,32,16,.45) 100%)}

.idbs-hero__content{
  text-align:left!important; max-width:680px!important; margin-left:31%!important; padding:0!important;
}
.sri-hero p[data-t="p"]{margin-left:0!important;margin-right:0!important;max-width:600px!important;color:#EAF6EE!important;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.idbs-hero__buttons{justify-content:flex-start!important}

.sri-hero-lang{vertical-align:middle;background:rgba(0,0,0,.35)!important;border-color:rgba(255,255,255,.18)!important;backdrop-filter:blur(6px);margin-right:10px}
.sri-hero-lang button[aria-pressed="true"]{background:var(--v-btn)!important;color:var(--v-yellow-ink)!important;box-shadow:0 2px 10px rgba(255,195,0,.4)}
.idbs-hero__kicker{background:rgba(0,0,0,.35)!important;border:1px solid rgba(255,214,10,.55)!important;color:#fff!important;backdrop-filter:blur(6px)}
.idbs-hero__kicker i{background:var(--v-yellow)!important;box-shadow:0 0 0 5px rgba(255,214,10,.2)!important}

.idbs-hero__content h1{
  font-family:"Plus Jakarta Sans","Noto Sans Sinhala","Noto Sans Tamil",system-ui,sans-serif!important;
  font-weight:800!important; letter-spacing:-.025em; line-height:1.05!important;
  font-size:clamp(2.1rem,3.4vw,3.2rem)!important; margin-bottom:12px!important; color:#fff!important;
  text-shadow:0 3px 18px rgba(0,0,0,.35);
}
/* Sinhala / Tamil run longer than English: smaller type so the banner keeps the English size */
.idbs-hero .sri-hero[data-lang="si"] h1,.idbs-hero .sri-hero[data-lang="ta"] h1{font-size:clamp(1.45rem,2.3vw,2.2rem)!important;line-height:1.3!important;letter-spacing:0}
.idbs-hero .sri-hero[data-lang="si"] p[data-t="p"],.idbs-hero .sri-hero[data-lang="ta"] p[data-t="p"]{font-size:.9rem!important;line-height:1.6!important}
.idbs-hero .sri-hero[data-lang="si"] .idbs-hero__btn,.idbs-hero .sri-hero[data-lang="ta"] .idbs-hero__btn{font-size:.9rem!important;padding:13px 20px!important}
.idbs-hero .sri-hero[data-lang="si"] .sri-hero-offer,.idbs-hero .sri-hero[data-lang="ta"] .sri-hero-offer{font-size:.82rem!important}
@media (max-width:700px){.idbs-hero .sri-hero[data-lang="si"] h1,.idbs-hero .sri-hero[data-lang="ta"] h1{font-size:clamp(1.3rem,6vw,1.7rem)!important}}
.idbs-hero__content h1 span{
  position:relative; display:inline-block; padding-bottom:.12em;
  background:linear-gradient(90deg,#8EE62B 0%,#C6F432 45%,#FFE14A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent!important;
  text-shadow:none; filter:drop-shadow(0 3px 14px rgba(140,230,40,.35));
}
.idbs-hero__content h1 span::after{                   /* hand-drawn yellow swoosh */
  content:""; position:absolute; left:4%; right:2%; bottom:-.08em; height:.22em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C 80 3, 200 2, 297 7' fill='none' stroke='%23FFD60A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.idbs-hero__btn{border-radius:14px!important;font-weight:800!important;padding:15px 26px!important;font-size:1rem!important}
.idbs-hero__btn--primary::after{content:"\2192";margin-left:8px}
.idbs-hero__btn--secondary{background:rgba(0,0,0,.28)!important;color:#fff!important;border:2px solid rgba(255,255,255,.85)!important;backdrop-filter:blur(6px)}
.idbs-hero__btn--secondary:hover{background:#fff!important;color:var(--v-green-dk)!important}
.sri-hero-offer{background:rgba(0,0,0,.38)!important;border:1.5px solid var(--v-yellow)!important;color:var(--v-yellow)!important;backdrop-filter:blur(6px)}

/* Tablet & phone: picture on top, copy below on a green gradient */
@media (max-width:1080px){
  .idbs-hero{display:block!important;min-height:0!important;padding:0 0 24px!important;
    background:linear-gradient(180deg,#04311A 0%,#06502A 60%,#0B6B35 100%)!important}
  .idbs-hero__media{position:relative!important;inset:auto!important;z-index:0!important;aspect-ratio:1853/849;width:100%}
  .idbs-hero__media img{object-position:center!important}
  .idbs-hero__media::after{background:linear-gradient(180deg,transparent 55%,#04311A 100%)}
  .idbs-hero__content{margin:-28px auto 0!important;max-width:680px!important;padding:0 20px!important;text-align:center!important}
  .sri-hero p[data-t="p"]{margin-left:auto!important;margin-right:auto!important}
  .idbs-hero__buttons{justify-content:center!important}
  .sri-hero-lang{margin-right:0}
}
@media (max-width:700px){
  .idbs-hero__content{margin-top:-14px!important;padding:0 16px!important}
  .idbs-hero__content h1{font-size:clamp(2rem,9vw,2.6rem)!important}
  .idbs-hero__btn{width:100%;justify-content:center}
}

/* =====================================================================
   NUMBERS STRIP — white cards, each with its own accent (mockup)
   ===================================================================== */
.sri-stats{background:
  radial-gradient(60% 120% at 0% 100%,rgba(22,163,74,.10),transparent 60%),
  radial-gradient(60% 120% at 100% 100%,rgba(163,230,53,.12),transparent 60%),
  linear-gradient(180deg,#F3FBF5 0%,#fff 100%)!important;border-bottom:0!important}
.sri-stat{border-width:2px!important;box-shadow:0 10px 26px rgba(5,83,42,.08)!important}
.sri-stat b{color:var(--v-ink)!important}
.sri-stat__ic .sri-i{--ic:#fff!important}
.sri-stat:nth-child(1){border-color:#4ADE80!important}
.sri-stat:nth-child(1) .sri-stat__ic{background:linear-gradient(135deg,#4ADE80,#16A34A)!important;box-shadow:0 6px 14px rgba(22,163,74,.35)!important}
.sri-stat:nth-child(2){border-color:#2DD4BF!important}
.sri-stat:nth-child(2) .sri-stat__ic{background:linear-gradient(135deg,#5EEAD4,#0D9488)!important;box-shadow:0 6px 14px rgba(13,148,136,.35)!important}
.sri-stat:nth-child(2) .sri-stat__t{color:#0F766E!important}
.sri-stat:nth-child(3){border-color:#A78BFA!important}
.sri-stat:nth-child(3) .sri-stat__ic{background:linear-gradient(135deg,#A78BFA,#7C3AED)!important;box-shadow:0 6px 14px rgba(124,58,237,.35)!important}
.sri-stat:nth-child(3) .sri-stat__t{color:#5B21B6!important}
.sri-stat:nth-child(1) .sri-stat__t{color:#15803D!important}
.sri-stat--hot{background:linear-gradient(140deg,#FFE55C 0%,#FFD60A 50%,#FFC300 100%)!important;border-color:#FFC300!important;box-shadow:0 14px 30px rgba(255,195,0,.35)!important}
.sri-stat--hot .sri-stat__ic{background:#fff!important;box-shadow:0 6px 14px rgba(0,0,0,.12)!important}
.sri-stat--hot .sri-stat__ic .sri-i{--ic:var(--v-green)!important}
.sri-stat--hot::after{background:var(--v-green)!important}
.sri-stat:hover{border-color:var(--v-green-2)!important}

/* ---------- page ground: the template's pale blue wash → soft green to cream ---------- */
body.bg-gray-50{background:linear-gradient(135deg,#EAF8EE 0%,#FFFFFF 48%,#FFFBEA 100%) #F7FBF8!important;background-attachment:fixed!important}

/* ---------- sections ---------- */
.sri-sec--s{background:linear-gradient(180deg,#F1FAF3 0%,#F7FCF8 100%)!important}
.sri-pass{border-color:var(--v-yellow-2)!important}
.sri-talk{background:linear-gradient(135deg,#FFFBE6,#F1FAF3)!important;border-color:#F5D547!important}
.sri-cta{background:
  radial-gradient(circle at 85% 15%,rgba(255,214,10,.28),transparent 40%),
  radial-gradient(circle at 10% 90%,rgba(163,230,53,.25),transparent 40%),
  linear-gradient(135deg,var(--v-green-xdk) 0%,var(--v-green-dk) 45%,var(--v-green) 100%)!important}
.sri .sri-off{color:#B45309!important}

/* Inner-page banners + CTA panels: same yellow family as the buttons, brighter */
[class*="bg-gradient-to"][class*="from-hia-green-8"],
[class*="bg-gradient-to"][class*="from-hia-green-7"]{background:
  radial-gradient(circle at 90% 0%,rgba(255,255,255,.45),transparent 40%),
  linear-gradient(135deg,#FFC300 0%,#FFD60A 50%,#FFE55C 100%)!important}
[class*="bg-gradient-to"][class*="from-hia-green-8"] button,
[class*="bg-gradient-to"][class*="from-hia-green-8"] [class*="bg-hia-gold"],
[class*="bg-gradient-to"][class*="from-hia-green-8"] [class*="bg-yellow"],
[class*="bg-gradient-to"][class*="from-hia-green-7"] [class*="bg-hia-gold"],
[class*="bg-gradient-to"][class*="from-hia-green-7"] [class*="bg-yellow"]{background:var(--v-green-dk)!important}

/* ---------- chat launcher ---------- */
.hia-chat-toggle{background:var(--v-btn)!important;box-shadow:var(--v-glow)!important}
.hia-chat-toggle::before{border-color:var(--v-yellow)!important}

/* ---------- footer: deep emerald instead of flat black ---------- */
.ftr{background:
  radial-gradient(50% 60% at 100% 0%,rgba(22,163,74,.18),transparent 70%),
  linear-gradient(180deg,#03301A 0%,#021F11 100%)!important;
  --ftr-body:#BFD8C8; --ftr-muted:#86A595; --ftr-link-hv:var(--v-yellow); --ftr-panel:#04391E}

/* ---------- online application page ---------- */
body .sapp-hero{background:
  radial-gradient(circle at 85% 10%,rgba(255,214,10,.25),transparent 45%),
  radial-gradient(circle at 10% 90%,rgba(163,230,53,.22),transparent 45%),
  linear-gradient(135deg,var(--v-green-xdk),var(--v-green-dk) 55%,var(--v-green))!important}
body .sapp-hero h1 span{background:linear-gradient(90deg,#8EE62B,#FFE14A);-webkit-background-clip:text;background-clip:text;color:transparent!important}
body .sapp-btn--gold{background:var(--v-btn)!important;color:var(--v-yellow-ink)!important;box-shadow:var(--v-glow)!important}

/* 993-1080px (small laptops / tablets landscape): the desktop menu is shown but did not fit,
   overflowing the page by ~60px on every page. Drop the icon chips and tighten spacing. */
@media (min-width: 993px) and (max-width: 1080px) {
  .nav-menu .nav-item > a .nav-icon { display: none !important; }
  .nav-menu .nav-item > a { padding: 0 7px !important; font-size: 14px !important; gap: 4px !important; }
  .nav-cta > a { padding-left: 14px !important; padding-right: 14px !important; }
  .nav-cta > a::after { display: none; }
}
/* 993-1300px: the fixed 840px Tech Courses panel was pushed right of centre and hung off-screen. */
@media (min-width: 993px) and (max-width: 1300px) {
  .nav-menu > .nav-item > .programs-mega { left: 50% !important; width: min(840px, calc(100% - 24px)) !important;
    grid-template-columns: 190px minmax(0,1fr) 170px !important; }
}

/* Compact hero (user: "reduce the banner height"): tighter spacing inside the copy block */
.idbs-hero .sri-hero-lang{margin-bottom:10px!important}
.idbs-hero__kicker{margin-bottom:12px!important;padding:6px 13px!important}
.sri-hero p[data-t="p"]{font-size:.95rem!important;line-height:1.55!important;margin-bottom:16px!important}
.idbs-hero__btn{padding:12px 22px!important}
.sri-hero-offer{margin-top:12px!important;padding:5px 14px!important}
@media (max-width:1080px){
  .idbs-hero__media{max-height:300px}
  .idbs-hero__media img{object-position:center 35%!important}
  .idbs-hero__content{margin-top:-20px!important}
}
@media (max-width:700px){
  .idbs-hero__media{max-height:200px}
  .sri-hero p[data-t="p"]{font-size:.88rem!important;margin-bottom:14px!important}
  .idbs-hero__buttons{gap:8px!important}
  .idbs-hero__btn{padding:11px 16px!important;font-size:.92rem!important}
}


/* =====================================================================
   HERO = the "Build the Future" mockup (rev b, 2026-10-16)
   ===================================================================== */
/* language switch + location tag side by side */
.idbs-hero .sri-hero-lang{display:inline-flex!important;vertical-align:middle;margin:0 10px 12px 0!important}
.idbs-hero .idbs-hero__kicker{display:inline-flex!important;vertical-align:middle;margin:0 0 12px!important;padding:7px 14px!important;font-size:12px!important;letter-spacing:.04em!important}
.idbs-hero__kicker i{width:15px!important;height:15px!important;border-radius:0!important;box-shadow:none!important;background:var(--v-yellow)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat}

/* button + offer icons */
.idbs-hero__btn{display:inline-flex!important;align-items:center;gap:9px}
.idbs-hero__btn--primary::before,.idbs-hero__btn--secondary::before,.sri-hero-offer::before{content:"";flex:none;width:19px;height:19px;background:currentColor}
.idbs-hero__btn--primary::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1-.1-2.9a2.2 2.2 0 0 0-2.9-.1z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-4A12.9 12.9 0 0 1 22 2c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.6-3 2-4c1.6-1.1 5 0 5 0M12 15v5s3-.6 4-2c1.1-1.6 0-5 0-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1-.1-2.9a2.2 2.2 0 0 0-2.9-.1z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-4A12.9 12.9 0 0 1 22 2c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.6-3 2-4c1.6-1.1 5 0 5 0M12 15v5s3-.6 4-2c1.1-1.6 0-5 0-5'/%3E%3C/svg%3E") center/contain no-repeat}
.idbs-hero__btn--secondary::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 22a9 9 0 0 1 18 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 22a9 9 0 0 1 18 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.sri-hero-offer{display:inline-flex!important;align-items:center;gap:9px;color:#fff!important;font-weight:600!important}
.sri-hero-offer::before{background:var(--v-yellow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='3'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18M8 14h3M8 17.5h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='3'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18M8 14h3M8 17.5h6'/%3E%3C/svg%3E") center/contain no-repeat}
.sri-hero-offer b{color:var(--v-yellow);font-weight:800}

/* "Sri Lanka Builds AI" brush script, top right */
.sri-hero-script{position:absolute;z-index:3;right:4.5%;top:7%;font-family:"Kaushan Script",cursive;color:#fff;
  font-size:clamp(2.2rem,3.4vw,3.6rem);line-height:1.02;text-align:center;transform:rotate(-12deg);
  text-shadow:0 3px 14px rgba(0,0,0,.5);pointer-events:none}
.sri-hero-script::after{content:"";display:block;width:85%;height:.2em;margin:.12em auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C 80 3, 200 2, 297 7' fill='none' stroke='%23FFD60A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* curved bottom edge with a lime glow line (the mockup's wave) */
.idbs-hero{padding-bottom:84px!important}
.idbs-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(46px,5.5vw,90px);z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 58 C 260 8, 560 14, 760 46 S 1180 92, 1440 34 L1440 90 L0 90 Z' fill='%23F3FBF5'/%3E%3Cpath d='M0 58 C 260 8, 560 14, 760 46 S 1180 92, 1440 34' fill='none' stroke='%23A3E635' stroke-width='3' opacity='.9'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* number cards ride up over the wave; round icon badges */
.sri-stats{position:relative;padding-top:6px!important}
.sri-stats .sri-wrap{position:relative;z-index:5;margin-top:-64px}
.sri-stat__ic{border-radius:50%!important}
@media (min-width:1280px){
  .sri-stats::after{content:"Learn\A Create\A Lead";white-space:pre;position:absolute;right:3%;top:50%;
    transform:translateY(-50%) rotate(-10deg);font-family:"Kaushan Script",cursive;font-size:clamp(1.8rem,2.3vw,2.6rem);
    line-height:1.05;color:var(--v-green-dk);text-align:center;pointer-events:none}
}

/* Sinhala / Tamil: fit in the same height as English */
.idbs-hero .sri-hero[data-lang="si"],.idbs-hero .sri-hero[data-lang="ta"]{max-width:720px!important}
.idbs-hero .sri-hero[data-lang="si"] h1,.idbs-hero .sri-hero[data-lang="ta"] h1{font-size:clamp(1.35rem,2.05vw,1.95rem)!important}
.idbs-hero .sri-hero[data-lang="si"] p[data-t="p"],.idbs-hero .sri-hero[data-lang="ta"] p[data-t="p"]{font-size:.84rem!important;line-height:1.5!important;max-width:700px!important}
.idbs-hero .sri-hero[data-lang="si"] .idbs-hero__btn,.idbs-hero .sri-hero[data-lang="ta"] .idbs-hero__btn{font-size:.84rem!important;padding:11px 15px!important;white-space:nowrap}
.idbs-hero .sri-hero[data-lang="si"] .sri-hero-offer,.idbs-hero .sri-hero[data-lang="ta"] .sri-hero-offer{font-size:.76rem!important}
@media (min-width:1081px){ .idbs-hero__buttons{flex-wrap:nowrap!important} }

/* features strip under the cards (the mockup's dark green footer bar) */
.sri-feat{background:linear-gradient(90deg,#033A1D 0%,#06502A 50%,#033A1D 100%);color:#fff;margin-top:22px}
.sri-feat__in{display:flex;justify-content:space-between;align-items:center;gap:14px 22px;padding:14px 0;flex-wrap:wrap}
.sri-feat__i{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:#fff;white-space:nowrap}
.sri-feat__i svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--v-yellow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sri .sri-feat__go{color:#fff} .sri .sri-feat__go:hover{color:var(--v-yellow)}
.sri-feat__go svg{stroke:var(--v-lime)}

@media (max-width:1080px){
  .sri-hero-script{display:none}
  .idbs-hero{padding-bottom:56px!important}
  .sri-stats .sri-wrap{margin-top:-36px}
  .sri-feat__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sri-feat__i{white-space:normal;font-size:.9rem}
  .sri-feat__go{grid-column:1/-1;justify-content:center}
  .idbs-hero .sri-hero-lang{margin-right:6px!important}
}
@media (max-width:420px){ .sri-feat__i{font-size:.84rem;gap:8px} .sri-feat__i svg{width:20px;height:20px} }
@media (min-width:1081px){ .sri-feat .sri-feat__in{width:min(1480px,100% - 48px);flex-wrap:nowrap} }
/* offer pill: icon + one flowing line (flex split "Special offer:" into its own column on phones) */
.sri-hero-offer{display:inline-block!important}
.sri-hero-offer::before{display:inline-block;vertical-align:-4px;margin-right:8px}
@media (max-width:700px){
  .sri-hero-offer{font-size:.8rem!important;line-height:1.4}
  /* Sinhala / Tamil a step smaller on phones so the hero stays the English height */
  .idbs-hero .sri-hero[data-lang="si"] h1,.idbs-hero .sri-hero[data-lang="ta"] h1{font-size:1.2rem!important}
  .idbs-hero .sri-hero[data-lang="si"] p[data-t="p"],.idbs-hero .sri-hero[data-lang="ta"] p[data-t="p"]{font-size:.78rem!important;line-height:1.45!important}
  .idbs-hero .sri-hero[data-lang="si"] .idbs-hero__btn,.idbs-hero .sri-hero[data-lang="ta"] .idbs-hero__btn{font-size:.8rem!important;white-space:normal}
  .idbs-hero .sri-hero[data-lang="si"] .sri-hero-offer,.idbs-hero .sri-hero[data-lang="ta"] .sri-hero-offer{font-size:.72rem!important}
}
/* phones/tablets: Tamil runs much longer, so the locked height is Tamil's;
   centre the copy vertically so shorter languages get even space, not a gap at the bottom */
@media (max-width:1080px){
  .idbs-hero .idbs-hero__content{display:flex!important;flex-direction:column;align-items:center;justify-content:center}
  .idbs-hero .idbs-hero__buttons{align-self:stretch}
}

/* =====================================================================
   Mockup details (rev c): painted canvas + tropical leaves around the 4 cards,
   green swooshes in the white menu bar
   ===================================================================== */
.sri-stats{background:
  url("../images/sri-leaves.webp") left -30px bottom -40px / auto 128% no-repeat,
  url("../images/sri-leaves-r.webp") right -30px bottom -40px / auto 128% no-repeat,
  linear-gradient(180deg,rgba(243,251,245,.15),rgba(255,255,255,.35)),
  url("../images/sri-canvas.webp") center / cover no-repeat,
  #F3FBF5 !important;
  padding-bottom:30px!important; overflow:hidden}
.sri-stats::after{right:auto!important;left:calc(50% + 640px);color:#05532A!important;
  text-shadow:0 0 12px rgba(255,255,255,.95),0 0 4px #fff}
.sri-feat{margin-top:0!important}
@media (max-width:1080px){
  .sri-stats{background:
    url("../images/sri-leaves.webp") left -60px bottom -30px / auto 70% no-repeat,
    url("../images/sri-leaves-r.webp") right -60px bottom -30px / auto 70% no-repeat,
    url("../images/sri-canvas.webp") center / cover no-repeat, #F3FBF5 !important}
}
@media (max-width:700px){
  .sri-stats{background:url("../images/sri-canvas.webp") center / cover no-repeat, #F3FBF5 !important}
}

/* menu bar: soft lime/green swooshes at both ends, like the mockup */
.site-header .navbar{position:relative;background:#fff}
.site-header .navbar::before,.site-header .navbar::after{content:"";position:absolute;bottom:0;height:100%;pointer-events:none;z-index:0}
.site-header .navbar::before{left:0;width:min(360px,30%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2316A34A'/%3E%3Cstop offset='1' stop-color='%23A3E635' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 100 V18 C70 40 150 92 360 100 Z' fill='url(%23g)' opacity='.22'/%3E%3Cpath d='M0 100 V55 C90 70 190 96 330 100 Z' fill='url(%23g)' opacity='.35'/%3E%3Cpath d='M0 40 C80 58 170 94 360 99' fill='none' stroke='%23A3E635' stroke-width='2' opacity='.7'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat}
.site-header .navbar::after{right:0;width:min(300px,24%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%2316A34A'/%3E%3Cstop offset='1' stop-color='%23A3E635' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M300 100 V10 C240 40 160 90 0 100 Z' fill='url(%23g)' opacity='.2'/%3E%3Cpath d='M300 0 C250 40 170 88 10 99' fill='none' stroke='%23A3E635' stroke-width='2' opacity='.6'/%3E%3C/svg%3E") right bottom / 100% 100% no-repeat}
.site-header .navbar__inner{position:relative;z-index:1}
/* "Connect with us" strip: lighter and slimmer so it reads as part of the menu */
.social-bar{background:linear-gradient(90deg,#E9F8EE,#F6FCF7 60%,#E9F8EE)!important;border-top:1px solid #DCEFE2;border-bottom:1px solid #DCEFE2}
.social-bar__label{color:#05532A!important;font-weight:700}

/* Announcements label: solid-edged label + right-pointing notch in the SAME green
   (the old triangle kept the previous colour #157553 and looked flipped) */
.hia-ticker-label{background:linear-gradient(90deg,#16A34A 0%,#0B8A3E 100%)!important;padding-right:14px!important}
.hia-ticker-arrow{margin-left:0!important;border-top:17px solid transparent!important;border-bottom:17px solid transparent!important;
  border-left:14px solid #0B8A3E!important;border-right:0!important}

/* "Connect with us" strip removed (user: not needed) */
:root{--social-bar-height:0px}
.social-bar{display:none!important}

/* real-photo leaves removed (user: wrong style, looked like an agriculture site) */
.sri-stats{background:linear-gradient(180deg,rgba(243,251,245,.15),rgba(255,255,255,.35)),url("../images/sri-canvas.webp") center / cover no-repeat,#F3FBF5!important}

/* rev d: cards must never be clipped — only clip sideways; glossy 3D swoosh corners (SVG) like the mockup */
.sri-stats{overflow:visible!important;overflow-x:clip!important;z-index:3}
.sri-stats .sri-wrap{z-index:6!important}
.sri-stats{background:
  url("../images/sri-swoosh-l.svg") left bottom / min(46%,700px) auto no-repeat,
  url("../images/sri-swoosh-r.svg") right bottom / min(46%,700px) auto no-repeat,
  linear-gradient(180deg,rgba(243,251,245,.15),rgba(255,255,255,.35)),
  url("../images/sri-canvas.webp") center / cover no-repeat,#F3FBF5!important}
@media (max-width:700px){
  .sri-stats{background:url("../images/sri-swoosh-l.svg") left bottom / 80% auto no-repeat,
    url("../images/sri-canvas.webp") center / cover no-repeat,#F3FBF5!important}
}

/* rev e: no leaves — hardware/AI electronics overlay: circuit-board pattern under the swooshes,
   fading out behind the cards so the numbers stay clean */
.sri-stats{background:
  url("../images/sri-swoosh-l.svg?v=2") left bottom / min(46%,700px) auto no-repeat,
  url("../images/sri-swoosh-r.svg?v=2") right bottom / min(46%,700px) auto no-repeat,
  radial-gradient(60% 75% at 50% 45%,rgba(243,251,245,.92) 0%,rgba(243,251,245,.55) 55%,rgba(243,251,245,0) 100%),
  url("../images/sri-circuit.svg") 0 0 / 280px 280px repeat,
  url("../images/sri-canvas.webp") center / cover no-repeat,#F3FBF5!important}
.sri-feat{background:
  url("../images/sri-circuit-lime.svg") 0 0 / 220px 220px repeat,
  linear-gradient(90deg,#033A1D 0%,#06502A 50%,#033A1D 100%)!important}
@media (max-width:700px){
  .sri-stats{background:url("../images/sri-swoosh-l.svg?v=2") left bottom / 80% auto no-repeat,
    radial-gradient(70% 70% at 50% 45%,rgba(243,251,245,.9),rgba(243,251,245,.3)),
    url("../images/sri-circuit.svg") 0 0 / 220px 220px repeat,
    url("../images/sri-canvas.webp") center / cover no-repeat,#F3FBF5!important}
}

/* 4 cards: layered, colour-tinted shadows (soft contact + long ambient) and a deeper lift on hover */
.sri-stats .sri-stat{transition:transform .25s ease,box-shadow .25s ease!important}
.sri-stats .sri-stat:nth-child(1){box-shadow:0 1px 2px rgba(5,83,42,.08),0 8px 18px -6px rgba(22,163,74,.28),0 24px 48px -16px rgba(22,163,74,.30)!important}
.sri-stats .sri-stat:nth-child(2){box-shadow:0 1px 2px rgba(5,83,42,.08),0 8px 18px -6px rgba(13,148,136,.28),0 24px 48px -16px rgba(13,148,136,.30)!important}
.sri-stats .sri-stat:nth-child(3){box-shadow:0 1px 2px rgba(5,83,42,.08),0 8px 18px -6px rgba(124,58,237,.24),0 24px 48px -16px rgba(124,58,237,.28)!important}
.sri-stats .sri-stat--hot{box-shadow:0 1px 2px rgba(120,80,0,.12),0 10px 22px -6px rgba(255,170,0,.45),0 28px 56px -16px rgba(255,170,0,.45)!important}
.sri-stats .sri-stat:hover{transform:translateY(-8px)!important}
.sri-stats .sri-stat:nth-child(1):hover{box-shadow:0 2px 4px rgba(5,83,42,.1),0 16px 30px -8px rgba(22,163,74,.38),0 36px 64px -18px rgba(22,163,74,.40)!important}
.sri-stats .sri-stat:nth-child(2):hover{box-shadow:0 2px 4px rgba(5,83,42,.1),0 16px 30px -8px rgba(13,148,136,.38),0 36px 64px -18px rgba(13,148,136,.40)!important}
.sri-stats .sri-stat:nth-child(3):hover{box-shadow:0 2px 4px rgba(5,83,42,.1),0 16px 30px -8px rgba(124,58,237,.34),0 36px 64px -18px rgba(124,58,237,.36)!important}
.sri-stats .sri-stat--hot:hover{box-shadow:0 2px 4px rgba(120,80,0,.14),0 18px 34px -8px rgba(255,170,0,.55),0 40px 70px -18px rgba(255,170,0,.5)!important}

/* =====================================================================
   rev f — seamless wave + circuit pattern everywhere
   The hero's bottom wave used to be a SOLID fill, so a hard rectangle edge showed where it met the
   patterned cards section. Now the wave is a masked cut-out painted with the SAME layers as the cards
   section, and the pattern layers are viewport-fixed so they line up across both elements.
   ===================================================================== */
.idbs-hero::after{
  background:url("../images/sri-wave-line.svg") center bottom / 100% 100% no-repeat,
    url("../images/sri-circuit.svg") 0 0 / 280px 280px repeat fixed,
    url("../images/sri-canvas.webp") center / cover no-repeat fixed,#F3FBF5!important;
  -webkit-mask:url("../images/sri-wave-mask.svg") center bottom / 100% 100% no-repeat;
          mask:url("../images/sri-wave-mask.svg") center bottom / 100% 100% no-repeat;
}
.sri-stats{background:
  url("../images/sri-swoosh-l.svg?v=3") left bottom / auto 100% no-repeat,
  url("../images/sri-swoosh-r.svg?v=3") right bottom / auto 100% no-repeat,
  url("../images/sri-circuit.svg") 0 0 / 280px 280px repeat fixed,
  url("../images/sri-canvas.webp") center / cover no-repeat fixed,#F3FBF5!important}
@media (max-width:700px){
  .sri-stats{background:url("../images/sri-swoosh-l.svg?v=3") left bottom / auto 70% no-repeat,
    url("../images/sri-circuit.svg") 0 0 / 220px 220px repeat fixed,
    url("../images/sri-canvas.webp") center / cover no-repeat fixed,#F3FBF5!important}
}

/* same electronics pattern across the whole site */
body.bg-gray-50{background:url("../images/sri-circuit-soft.svg") 0 0 / 280px 280px repeat fixed,
  linear-gradient(135deg,#EAF8EE 0%,#FFFFFF 48%,#FFFBEA 100%) fixed,#F7FBF8!important}
.sri-sec--s{background:url("../images/sri-circuit-soft.svg") 0 0 / 280px 280px repeat fixed,
  linear-gradient(180deg,#F1FAF3 0%,#F7FCF8 100%)!important}
.ftr{background:url("../images/sri-circuit-lime-soft.svg") 0 0 / 260px 260px repeat,
  radial-gradient(50% 60% at 100% 0%,rgba(22,163,74,.18),transparent 70%),
  linear-gradient(180deg,#03301A 0%,#021F11 100%)!important}
.sri-cta{background:url("../images/sri-circuit-lime-soft.svg") 0 0 / 240px 240px repeat,
  radial-gradient(circle at 85% 15%,rgba(255,214,10,.28),transparent 40%),
  radial-gradient(circle at 10% 90%,rgba(163,230,53,.25),transparent 40%),
  linear-gradient(135deg,#033A1D 0%,#05532A 45%,#0B8A3E 100%)!important}
[class*="bg-gradient-to"][class*="from-hia-green-8"],
[class*="bg-gradient-to"][class*="from-hia-green-7"]{background:url("../images/sri-circuit-gold.svg") 0 0 / 240px 240px repeat,
  radial-gradient(circle at 90% 0%,rgba(255,255,255,.45),transparent 40%),
  linear-gradient(135deg,#FFC300 0%,#FFD60A 50%,#FFE55C 100%)!important}
body .sapp-hero{background:url("../images/sri-circuit-lime-soft.svg") 0 0 / 240px 240px repeat,
  radial-gradient(circle at 85% 10%,rgba(255,214,10,.25),transparent 45%),
  linear-gradient(135deg,#033A1D,#05532A 55%,#0B8A3E)!important}
.hia-ticker-wrap{background:url("../images/sri-circuit-lime-soft.svg") 0 0 / 180px 180px repeat,
  linear-gradient(90deg,#033A1D 0%,#06502A 55%,#033A1D 100%)!important}

/* ===== mobile polish (rev g) ===== */
@media (max-width:700px){
  /* Tamil/Sinhala tighter on phones so the locked height (tallest language) leaves no big gaps */
  .idbs-hero .sri-hero[data-lang="si"] h1,.idbs-hero .sri-hero[data-lang="ta"] h1{font-size:1.08rem!important;line-height:1.35!important}
  .idbs-hero .sri-hero[data-lang="si"] p[data-t="p"],.idbs-hero .sri-hero[data-lang="ta"] p[data-t="p"]{font-size:.74rem!important}
  .idbs-hero .sri-hero[data-lang="si"] .idbs-hero__btn,.idbs-hero .sri-hero[data-lang="ta"] .idbs-hero__btn{font-size:.74rem!important;white-space:nowrap!important;padding:11px 10px!important}
  .idbs-hero .sri-hero[data-lang="si"] .idbs-hero__kicker,.idbs-hero .sri-hero[data-lang="ta"] .idbs-hero__kicker{font-size:10px!important}
  .idbs-hero__media{max-height:230px}
  .idbs-hero__content{margin-top:-6px!important}
  /* number cards: price must stay on one line */
  .sri-stats .sri-wrap{gap:10px!important}
  .sri-stat{padding:16px 10px 14px!important}
  .sri-stat b{font-size:2rem!important}
  .sri-stat--hot b{font-size:1.65rem!important;white-space:nowrap}
  .sri-stat__t{font-size:.88rem!important;line-height:1.3}
  .sri-stat small{font-size:.76rem!important;line-height:1.35}
  .sri-stat__ic{width:44px!important;height:44px!important}
}

/* mobile menu (≤992px): items left-aligned with icon + label together, chevron at the end;
   dropdown panels drop their fixed 840-900px desktop width (the menu was 852px wide on a 370px phone) */
@media (max-width:992px){
  .nav-menu{overflow-x:hidden!important}
  .nav-menu > .nav-item > a{justify-content:flex-start!important;gap:12px!important;text-align:left!important}
  .nav-menu > .nav-item > a > :last-child:not(:first-child):is(svg,i,.nav-caret,.chev,[class*="chev"],[class*="caret"]){margin-left:auto}
  .nav-menu .mega-menu,.nav-menu > .nav-item > .programs-mega,.nav-menu > .nav-item > .compact-mega,.programs-mega,.compact-mega{
    width:auto!important;max-width:100%!important;left:auto!important;right:auto!important;transform:none!important;
    grid-template-columns:1fr!important}
}
/* search boxes in page banners: the input must be allowed to shrink so the button stays inside */
form .flex-1{min-width:0}
form input.flex-1{min-width:0;width:100%}
@media (max-width:480px){ section.relative form button{padding-left:14px!important;padding-right:14px!important;flex:none} }

/* ===== rev h: phones/tablets — content ON the picture (no picture-only strip on top) ===== */
@media (max-width:1080px){
  .idbs-hero{display:grid!important;place-items:center!important;padding:30px 0 70px!important;
    background:#04311A!important;min-height:0!important}
  .idbs-hero__media{position:absolute!important;inset:0!important;max-height:none!important;aspect-ratio:auto!important;width:auto!important;z-index:-2!important}
  .idbs-hero__media img{object-fit:cover!important;object-position:40% center!important;opacity:1!important}
  .idbs-hero__media::after{background:
    linear-gradient(180deg,rgba(2,32,16,.45) 0%,rgba(2,32,16,.62) 40%,rgba(2,32,16,.70) 100%)!important}
  .idbs-hero__content{margin:0 auto!important}
}
@media (max-width:700px){
  .idbs-hero{padding:22px 0 58px!important}
  .idbs-hero__media img{object-position:34% center!important}
}
@media (max-width:1080px){
  .idbs-hero{justify-items:stretch!important}
  .idbs-hero .idbs-hero__content,.idbs-hero .sri-hero[data-lang="si"],.idbs-hero .sri-hero[data-lang="ta"]{
    width:100%!important;max-width:min(680px,100%)!important;box-sizing:border-box!important;justify-self:center}
}
@media (max-width:700px){
  .idbs-hero .sri-hero[data-lang="si"] .idbs-hero__btn,.idbs-hero .sri-hero[data-lang="ta"] .idbs-hero__btn{white-space:normal!important}
  .idbs-hero .idbs-hero__btn{max-width:100%;box-sizing:border-box}
  .idbs-hero__content h1 span{max-width:100%}
}

/* phones/tablets: Apply button always visible in the sticky header bar (Join Now is buried in the hamburger menu) */
.nav-apply{display:none}
@media (max-width:992px){
  .nav-apply,.nav-apply:visited{
    display:inline-flex;align-items:center;margin-left:auto;padding:9px 16px;border-radius:999px;
    font-weight:800;font-size:14px;line-height:1;white-space:nowrap;text-decoration:none;
    background:var(--v-btn);color:var(--v-yellow-ink);border:1px solid var(--v-yellow-2);box-shadow:var(--v-glow)
  }
  .nav-apply:hover{background:var(--v-btn-hv);color:var(--v-yellow-ink)}
  .navbar__inner > .nav-toggle{margin-left:4px}
}
@media (max-width:360px){
  .nav-apply{padding:8px 12px;font-size:13px}
  .navbar__brand-sub{display:none}
  .navbar__brand-name{white-space:nowrap}
  .navbar__inner{gap:10px}
}