.elementor-8 .elementor-element.elementor-element-64d19a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS *//* =========================================================================
   Bengal Skill Academy — custom.css  (Elementor build, JS-free)
   Paste into WordPress Customizer → Additional CSS.

   No custom JavaScript is used anywhere in this build. Elementor's own
   bundled frontend JS still runs the Accordion and Counter widgets (that's
   core Elementor, not something you need to add) — everything else here is
   pure CSS: a sticky header via `position: sticky`, a page-load fade-in for
   `.bsa-reveal` elements (plays on load rather than on scroll, since there's
   no scroll-observer script), and a single always-visible, wrapping nav
   instead of a JS-toggled mobile menu.

   Part 1 below is a small utility shim covering the Tailwind-style class
   names still present in the Elementor template's "CSS Classes" fields
   (spacing, type scale, flex/grid, colour) — Tailwind itself is not loaded
   on the live site. Part 2 is the actual Bengal Skill Academy visual
   identity, written against Elementor's real generated markup.
   ========================================================================= */

/* ---------- 0. Design tokens ------------------------------------------- */
:root {
  --bsa-blue: #006eff;
  --bsa-blue-dark: #0057cc;
  --bsa-navy: #023976;
  --bsa-navy-deep: #011f42;
  --bsa-gold: #ffb600;
  --bsa-orange: #ff4a00;
  --bsa-tint: #eef5ff;
  --bsa-tint-soft: #f6faff;
  --bsa-text: #0b1f3d;
  --bsa-text-muted: #5c6b84;
  --bsa-border: #e1e9f5;
  --bsa-white: #ffffff;

  --bsa-font-display: 'Poppins', sans-serif;
  --bsa-font-body: 'Inter', sans-serif;
  --bsa-font-mono: 'IBM Plex Mono', monospace;

  --bsa-shadow-sm: 0 2px 10px rgba(2, 57, 118, 0.06);
  --bsa-shadow-md: 0 10px 30px rgba(2, 57, 118, 0.10);
  --bsa-shadow-lg: 0 20px 50px rgba(2, 57, 118, 0.16);
  --bsa-radius: 18px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--bsa-font-body);
  color: var(--bsa-text);
}
.bsa-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--bsa-navy); color: #fff;
  padding: 12px 20px; z-index: 9999;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.bsa-skip-link:focus { left: 0; }

/* ---- Generated utility shim (Tailwind-equivalent, scoped to classes

   actually used in the Elementor template) ------------------------- */



.p-4 {
  padding: 1.0rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2.0rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2.0rem;
  padding-right: 2.0rem;
}

.py-2.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-20 {
  padding-top: 5.0rem;
  padding-bottom: 5.0rem;
}

.py-24 {
  padding-top: 6.0rem;
  padding-bottom: 6.0rem;
}

.py-3.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-8 {
  padding-bottom: 2.0rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-24 {
  padding-bottom: 6.0rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1.0rem;
}

.pt-16 {
  padding-top: 4.0rem;
}

.pt-20 {
  padding-top: 5.0rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1.0rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2.0rem;
}

.mb-9 {
  margin-bottom: 2.25rem;
}

.mb-12 {
  margin-bottom: 3.0rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1.0rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2.0rem;
}

.mt-12 {
  margin-top: 3.0rem;
}

.mt-16 {
  margin-top: 4.0rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mt-10 {
  margin-top: -2.5rem;
}

.-bottom-6 {
  bottom: -1.5rem;
}

.right-4 {
  right: 1.0rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1.0rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2.0rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2.5 {
  gap: 0.625rem;
}

.gap-x-6 {
  column-gap: 1.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-4 > * + * {
  margin-top: 1.0rem;
}

.space-y-5 > * + * {
  margin-top: 1.25rem;
}

.w-11 {
  width: 2.75rem;
}

.w-32 {
  width: 8.0rem;
}

.w-64 {
  width: 16.0rem;
}

.w-full {
  width: 100%;
}

.h-11 {
  height: 2.75rem;
}

.h-32 {
  height: 8.0rem;
}

.h-40 {
  height: 10.0rem;
}

.h-44 {
  height: 11.0rem;
}

.h-72 {
  height: 18.0rem;
}

.h-full {
  height: 100%;
}

.h-[480px] {
  height: 480px;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-base {
  font-size: 1rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.text-5xl {
  font-size: 3rem;
}

.text-[10.5px] {
  font-size: 10.5px;
}

.text-[11px] {
  font-size: 11px;
}

.text-[13px] {
  font-size: 13px;
}

.text-[15px] {
  font-size: 15px;
}

.text-[17px] {
  font-size: 17px;
}

@media (min-width: 640px) {
  .sm:text-3xl {
  font-size: 1.875rem;
}
}

@media (min-width: 640px) {
  .sm:text-4xl {
  font-size: 2.25rem;
}
}

@media (min-width: 640px) {
  .sm:text-5xl {
  font-size: 3rem;
}
}

@media (min-width: 1024px) {
  .lg:text-4xl {
  font-size: 2.25rem;
}
}

@media (min-width: 1280px) {
  .xl:text-[3.4rem] {
  font-size: 3.4rem;
}
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-[1.12] {
  line-height: 1.12;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-center {
  text-align: center;
}

.bg-bsablue {
  background-color: var(--bsa-blue);
}

.text-bsablue {
  color: var(--bsa-blue);
}

.bg-bsanavy {
  background-color: var(--bsa-navy);
}

.text-bsanavy {
  color: var(--bsa-navy);
}

.bg-bsanavydeep {
  background-color: var(--bsa-navy-deep);
}

.text-bsanavydeep {
  color: var(--bsa-navy-deep);
}

.bg-bsaorange {
  background-color: var(--bsa-orange);
}

.text-bsaorange {
  color: var(--bsa-orange);
}

.bg-bsagold {
  background-color: var(--bsa-gold);
}

.text-bsagold {
  color: var(--bsa-gold);
}

.bg-bsamuted {
  background-color: var(--bsa-text-muted);
}

.text-bsamuted {
  color: var(--bsa-text-muted);
}

.bg-bsatintsoft {
  background-color: var(--bsa-tint-soft);
}

.text-bsatintsoft {
  color: var(--bsa-tint-soft);
}

.bg-bsaborder {
  background-color: var(--bsa-border);
}

.text-bsaborder {
  color: var(--bsa-border);
}

.bg-white {
  background-color: #ffffff;
}

.text-white {
  color: #ffffff;
}

.bg-white/95 {
  background-color: rgba(255,255,255,0.95);
}

.text-white/50 {
  color: rgba(255,255,255,0.5);
}

.text-white/70 {
  color: rgba(255,255,255,0.7);
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
  border-style: solid;
  border-color: var(--bsa-border);
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--bsa-border);
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--bsa-border);
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.grid {
  display: grid;
}

@media (min-width: 640px) {
  .sm:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (min-width: 768px) {
  .md:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (min-width: 1024px) {
  .lg:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (min-width: 1024px) {
  .lg:grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

@media (min-width: 1024px) {
  .lg:grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

@media (min-width: 1024px) {
  .lg:col-span-1 {
  grid-column: span 1 / span 1;
}
}

@media (min-width: 1024px) {
  .lg:col-span-2 {
  grid-column: span 2 / span 2;
}
}

@media (min-width: 1024px) {
  .lg:col-span-3 {
  grid-column: span 3 / span 3;
}
}

.sticky {
  position: sticky;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-0 {
  top: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

.block {
  display: block;
}

.shrink-0 {
  flex-shrink: 0;
}

.object-cover {
  object-fit: cover;
}

.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 640px) {
  .sm:gap-6 {
  gap: 1.5rem;
}
}

@media (min-width: 1024px) {
  .lg:pt-20 {
  padding-top: 5.0rem;
}
}

@media (min-width: 1024px) {
  .lg:pb-32 {
  padding-bottom: 8.0rem;
}
}

@media (min-width: 1024px) {
  .lg:mt-8 {
  margin-top: 2.0rem;
}
}
/* =========================================================================
   Part 2 — BSA component styles, written against Elementor's actual
   rendered markup. Elementor puts your "CSS Classes" value on the widget's
   outer wrapper div, one level above the widget's own internal markup
   (.elementor-heading-title, .elementor-icon-list-items, .elementor-button,
   etc.) — so most rules below target "<your-class> <elementor-internal-class>"
   rather than styling <your-class> directly. Section and Column classes
   (cards, backgrounds, hero, footer …) sit on real wrapper divs already, so
   those are largely unchanged from the original design.
   ========================================================================= */

/* ---------- 1. Icon List widget — generic behaviour ----------------------- */
/* Reset Elementor's default list chrome so every icon-list reads as a plain
   inline or stacked row, then let each named variant below control layout. */
.elementor-widget-icon-list .elementor-icon-list-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-widget-icon-list .elementor-icon-list-item {
  list-style: none;
}
.elementor-icon-list-item a,
.elementor-icon-list-item .elementor-icon-list-text {
  color: inherit;
  text-decoration: none;
}
.elementor-icon-list-icon i { line-height: 1; }

/* Eyebrow (icon + short mono label used above most section headings) */
.bsa-eyebrow .elementor-icon-list-items,
.bsa-eyebrow .elementor-icon-list-item,
.bsa-eyebrow .elementor-icon-list-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bsa-eyebrow,
.bsa-eyebrow .elementor-icon-list-text {
  font-family: var(--bsa-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bsa-blue);
}
.bsa-eyebrow .elementor-icon-list-icon i { color: var(--bsa-blue); font-size: 0.95em; }
.bsa-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--bsa-orange);
  display: inline-block;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.bsa-eyebrow.justify-center { text-align: center; }
.bsa-eyebrow--light,
.bsa-eyebrow--light .elementor-icon-list-text,
.bsa-eyebrow--light .elementor-icon-list-icon i { color: var(--bsa-gold); }
.bsa-eyebrow--light::before { background: var(--bsa-gold); }

/* Header / footer navigation lists */
.bsa-header .elementor-icon-list-items {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.elementor-widget-icon-list .elementor-icon-list-item a,
.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text {
  font-weight: 500;
  color: var(--bsa-navy);
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.2s ease;
}
.elementor-widget-icon-list .elementor-icon-list-item a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%; height: 2px;
  background: var(--bsa-orange);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.elementor-widget-icon-list .elementor-icon-list-item a:hover::after { width: 100%; }
.bsa-footer .elementor-icon-list-item a,
.bsa-footer .elementor-icon-list-item { color: rgba(255,255,255,0.75); }
.bsa-footer .elementor-icon-list-item a:hover { color: var(--bsa-gold); }
.bsa-footer .elementor-icon-list-items { display: flex; flex-direction: column; gap: 0.75rem; }
.bsa-footer .flex.items-center.gap-3 .elementor-icon-list-items,
div[class*="flex items-center gap-3"] .elementor-icon-list-items { flex-direction: row; }

/* Trust-check list (hero) */
.hero-checks-list .elementor-icon-list-items,
ul.elementor-icon-list-items { }
.bsa-check-icon-list .elementor-icon-list-items,
.elementor-widget-icon-list[class*="gap-x-6"] .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
}
.elementor-widget-icon-list[class*="gap-x-6"] .elementor-icon-list-icon i { color: #16a34a; }
.elementor-widget-icon-list[class*="gap-x-6"] .elementor-icon-list-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--bsa-navy);
}

/* Checklist (about section) */
.bsa-checklist .elementor-icon-list-items { display: flex; flex-direction: column; gap: 0.75rem; }
.bsa-checklist .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 10px; color: var(--bsa-text); }
.bsa-checklist .elementor-icon-list-icon {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bsa-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 2px;
}
.bsa-checklist .elementor-icon-list-icon i { font-size: 10px; }

/* Course/blog card meta row (level + mentor, or filter tabs) */
.elementor-widget-icon-list[class*="justify-between"] .elementor-icon-list-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Course category tags — informational labels only (no JS filtering, so
   these are deliberately styled as plain tags, not clickable-looking pills) */
.bsa-category-tags .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.bsa-category-tags .elementor-icon-list-item {
  color: var(--bsa-text-muted);
  background: var(--bsa-tint-soft);
  border: 1px solid var(--bsa-border);
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  padding: 0.5rem 1.1rem;
}
.bsa-category-tags .elementor-icon-list-item:first-child {
  color: #fff;
  background: var(--bsa-blue);
  border-color: var(--bsa-blue);
  font-weight: 600;
}

/* Path link ("Start Here", "Read Article") — icon-list of exactly one item */
.bsa-path-link .elementor-icon-list-items,
.bsa-path-link .elementor-icon-list-item,
.bsa-path-link .elementor-icon-list-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bsa-path-link,
.bsa-path-link .elementor-icon-list-text {
  color: var(--bsa-blue);
  font-weight: 600;
  font-size: 14px;
}
.bsa-path-link .elementor-icon-list-icon i { transition: transform 0.2s ease; }
.elementor-column:hover > .elementor-widget-wrap .bsa-path-link .elementor-icon-list-icon i,
.bsa-course-card:hover .bsa-path-link .elementor-icon-list-icon i,
.bsa-path-card:hover .bsa-path-link .elementor-icon-list-icon i,
.bsa-blog-card:hover .bsa-path-link .elementor-icon-list-icon i {
  transform: translateX(4px);
}

/* Star row placeholder icon-list not used directly (native Star Rating widget
   used instead — see Section 7 below) */

/* Social icon rows (top bar + footer) */
.elementor-widget-icon-list[class*="gap-3"] .elementor-icon-list-items { display: flex; align-items: center; gap: 0.75rem; }
.bsa-footer .elementor-widget-icon-list[class*="gap-3"] .elementor-icon-list-item a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.bsa-footer .elementor-widget-icon-list[class*="gap-3"] .elementor-icon-list-item a:hover {
  background: var(--bsa-orange);
  transform: translateY(-3px);
}

/* Footer legal row (Privacy / Terms) */
.bsa-footer .elementor-widget-icon-list[class*="gap-6"] .elementor-icon-list-items {
  display: flex; align-items: center; gap: 1.5rem;
}

/* ---------- 2. Heading widget -------------------------------------------- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--bsa-font-display);
  color: inherit;
  margin: 0;
}
/* Logo mark */
.bsa-logo-badge .elementor-heading-title {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bsa-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
/* Course / blog badges & tags rendered as small Heading widgets */
.bsa-badge-duration .elementor-heading-title {
  display: inline-block;
  background: rgba(2, 57, 118, 0.85);
  color: #fff;
  font-family: var(--bsa-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 999px;
}
.bsa-course-thumb { position: relative; overflow: hidden; }
.bsa-badge-duration { position: absolute; top: 14px; left: 14px; z-index: 2; }
.bsa-badge-free { position: absolute; top: 14px; right: 14px; z-index: 2; }
.bsa-badge-free .elementor-heading-title {
  display: inline-block;
  background: var(--bsa-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
}
.bsa-tag-category .elementor-heading-title {
  color: var(--bsa-blue);
  font-family: var(--bsa-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bsa-blog-tag .elementor-heading-title {
  display: inline-block;
  background: var(--bsa-tint);
  color: var(--bsa-blue);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
/* Philosophy equation */
.bsa-philosophy-equation .elementor-heading-title {
  font-family: var(--bsa-font-mono);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Pricing ribbon + price figures */
.bsa-ribbon .elementor-heading-title {
  display: inline-block;
  background: var(--bsa-gold);
  color: var(--bsa-navy-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: 999px;
}
.bsa-price-card .elementor-heading-title { font-family: var(--bsa-font-display); }
.bsa-footer-heading .elementor-heading-title {
  color: #fff;
  font-family: var(--bsa-font-display);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- 3. Text Editor widget ----------------------------------------- */
.elementor-widget-text-editor .elementor-widget-container p { margin: 0; color: inherit; }
.text-bsamuted .elementor-widget-container p,
p.text-bsamuted { color: var(--bsa-text-muted); }

/* ---------- 4. Button widget ---------------------------------------------- */
.elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.bsa-btn-primary .elementor-button { background: var(--bsa-blue); color: #fff; box-shadow: 0 10px 24px rgba(0,110,255,0.30); }
.bsa-btn-primary .elementor-button:hover { background: var(--bsa-blue-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,110,255,0.38); }
.bsa-btn-dark .elementor-button { background: var(--bsa-navy); color: #fff; }
.bsa-btn-dark .elementor-button:hover { background: var(--bsa-navy-deep); transform: translateY(-2px); }
.bsa-btn-outline .elementor-button { background: transparent; color: var(--bsa-navy); border: 1.5px solid var(--bsa-border); }
.bsa-btn-outline .elementor-button:hover { border-color: var(--bsa-blue); color: var(--bsa-blue); transform: translateY(-2px); }
.bsa-btn-gold .elementor-button { background: var(--bsa-gold); color: var(--bsa-navy-deep); }
.bsa-btn-gold .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,182,0,0.35); }
.bsa-btn .elementor-button.elementor-size-sm,
.elementor-widget-button .elementor-button { padding: 0.85rem 1.75rem; font-size: 15px; }

/* ---------- 5. Icon Box widget --------------------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-wrapper { text-align: inherit; }
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon { color: inherit; }

/* Trust strip */
.bsa-trust-item .elementor-icon-box-wrapper { flex-direction: column; align-items: center; text-align: center; }
.bsa-trust-item .elementor-icon-box-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bsa-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.bsa-trust-item .elementor-icon-box-icon i { color: var(--bsa-blue); font-size: 20px; }
.bsa-trust-item:hover .elementor-icon-box-icon { background: var(--bsa-blue); transform: translateY(-4px) rotate(-6deg); }
.bsa-trust-item:hover .elementor-icon-box-icon i { color: #fff; }
.bsa-trust-item .elementor-icon-box-title { font-size: 14px; font-weight: 600; color: var(--bsa-navy); margin: 0; }
.bsa-trust-item .elementor-icon-box-description { display: none; }

/* Learning path cards */
.bsa-path-card {
  background: #fff; border: 1px solid var(--bsa-border); border-radius: var(--bsa-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bsa-path-card:hover { transform: translateY(-6px); box-shadow: var(--bsa-shadow-md); border-color: var(--bsa-blue); }
.bsa-path-icon .elementor-icon-box-wrapper { display: block; }
.bsa-path-icon .elementor-icon-box-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--bsa-navy);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.bsa-path-icon .elementor-icon-box-icon i { color: var(--bsa-gold); font-size: 22px; }
.bsa-path-icon .elementor-icon-box-title,
.bsa-path-icon .elementor-icon-box-description { display: none; }

/* Why-choose-us icon boxes (icon + title + description together) */
.bsa-icon-box {
  background: var(--bsa-tint-soft);
  border-radius: var(--bsa-radius);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.bsa-icon-box:hover { background: #fff; box-shadow: var(--bsa-shadow-md); transform: translateY(-4px); }
.bsa-icon-box .elementor-icon-box-wrapper { text-align: left; }
.bsa-icon-box .elementor-icon-box-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--bsa-shadow-sm);
  margin-bottom: 1rem;
}
.bsa-icon-box .elementor-icon-box-icon i { color: var(--bsa-orange); font-size: 20px; }
.bsa-icon-box .elementor-icon-box-title { font-family: var(--bsa-font-display); font-weight: 600; font-size: 16px; color: var(--bsa-navy); margin-bottom: 0.5rem; }
.bsa-icon-box .elementor-icon-box-description { font-size: 14px; color: var(--bsa-text-muted); line-height: 1.6; }

/* About-section circular collage badge */
.bsa-collage-badge { background: #fff; border-radius: 50%; box-shadow: var(--bsa-shadow-lg); overflow: hidden; }
.bsa-collage-badge .elementor-icon-box-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.bsa-collage-badge .elementor-icon-box-icon i { display: none; } /* replaced by AI wordmark title */
.bsa-collage-badge .elementor-icon-box-title { font-family: var(--bsa-font-display); font-weight: 700; color: var(--bsa-blue); font-size: 24px; margin: 0; }
.bsa-collage-badge .elementor-icon-box-description { font-family: var(--bsa-font-mono); font-size: 8px; letter-spacing: 0.08em; color: var(--bsa-navy); text-transform: uppercase; }

/* Free resources cards */
.bsa-resource-card {
  background: #fff; border: 1px solid var(--bsa-border); border-radius: var(--bsa-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bsa-resource-card:hover { transform: translateY(-6px); box-shadow: var(--bsa-shadow-md); }
.bsa-resource-card .elementor-icon-box-wrapper { align-items: center; text-align: center; }
.bsa-resource-card .elementor-icon-box-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.bsa-resource-card .elementor-icon-box-icon i { color: #fff; font-size: 22px; }
.bsa-resource-card .elementor-icon-box-title { font-family: var(--bsa-font-display); font-weight: 600; font-size: 18px; color: var(--bsa-navy); margin-bottom: 0.5rem; }
.bsa-resource-card .elementor-icon-box-description { font-size: 14px; color: var(--bsa-text-muted); line-height: 1.6; margin-bottom: 1.5rem; }

/* Contact info cards */
.bsa-contact-card {
  background: var(--bsa-tint-soft);
  border-radius: 16px;
  border: 1px solid var(--bsa-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bsa-contact-card:hover { transform: translateY(-4px); box-shadow: var(--bsa-shadow-sm); }
.bsa-contact-card .elementor-icon-box-wrapper { flex-direction: row; align-items: flex-start; gap: 1rem; text-align: left; }
.bsa-contact-card .elementor-icon-box-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.bsa-contact-card .elementor-icon-box-icon i { color: #fff; font-size: 18px; }
.bsa-contact-card .elementor-icon-box-title { font-family: var(--bsa-font-display); font-weight: 600; font-size: 14px; color: var(--bsa-navy); margin-bottom: 2px; }
.bsa-contact-card .elementor-icon-box-description { font-size: 14px; color: var(--bsa-text-muted); }

/* (Mobile hamburger toggle removed — nav is now a single always-visible,
   wrapping list, so no JS-driven toggle icon is needed.) */

/* Shared icon-box color backgrounds (bg-bsablue / bg-bsaorange / bg-bsanavy) */
.bg-bsablue .elementor-icon-box-icon { background: var(--bsa-blue); }
.bg-bsaorange .elementor-icon-box-icon { background: var(--bsa-orange); }
.bg-bsanavy .elementor-icon-box-icon { background: var(--bsa-navy); }

/* ---------- 6. Image widget ------------------------------------------------ */
.elementor-widget-image img { display: block; width: 100%; }
.bsa-hero-photo img,
.bsa-hero-photo.elementor-widget-image img {
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  box-shadow: var(--bsa-shadow-lg);
  height: 480px;
  object-fit: cover;
}
.bsa-collage-img-main img { border-radius: var(--bsa-radius); box-shadow: var(--bsa-shadow-md); height: 18rem; object-fit: cover; }
.bsa-collage-img-float img {
  border-radius: 14px; box-shadow: var(--bsa-shadow-lg); border: 5px solid #fff;
  height: 10rem; object-fit: cover; margin-top: -2.5rem; margin-left: 1.5rem; position: relative; z-index: 10;
}
.bsa-course-thumb img,
.bsa-blog-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.bsa-course-card:hover .bsa-course-thumb img,
.bsa-blog-card:hover img { transform: scale(1.06); }

/* ---------- 7. Star Rating widget ------------------------------------------ */
.elementor-widget-star-rating .elementor-star-rating { display: flex; gap: 2px; }
.bsa-star-row .elementor-star-rating i,
.elementor-widget-star-rating i { color: var(--bsa-gold); font-size: 13px; }

/* ---------- 8. Testimonial widget ------------------------------------------ */
.bsa-testimonial-card.elementor-widget-testimonial {
  display: block;
  background: #fff;
  border: 1px solid var(--bsa-border);
  border-radius: var(--bsa-radius);
  box-shadow: var(--bsa-shadow-sm);
  padding: 1.75rem;
  position: relative;
}
.bsa-testimonial-card .elementor-testimonial-content {
  font-size: 14px;
  color: var(--bsa-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.bsa-testimonial-card .elementor-testimonial-name { font-size: 14px; font-weight: 600; color: var(--bsa-navy); }
.bsa-testimonial-card .elementor-testimonial-job { font-size: 12px; color: var(--bsa-text-muted); }
.bsa-testimonial-card .elementor-testimonial-image { display: none; } /* no verified photos yet — see placeholder note */

/* ---------- 9. Counter widget (hero floating stat badges) ------------------ */
.elementor-widget-counter .elementor-counter-title {
  font-size: 12px; color: var(--bsa-text-muted); margin-top: 2px;
}
.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--bsa-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--bsa-navy);
}
.bsa-float-card.elementor-widget-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow: var(--bsa-shadow-lg);
  padding: 1rem 1.25rem;
  position: absolute;
  animation: bsa-float 5s ease-in-out infinite;
  z-index: 5;
}
/* Restore the original floating offsets (lost when moving out of inline style) */
.bsa-float-card:not(.bsa-float-card--delay) { bottom: 8%; left: -10%; }
.bsa-float-card.bsa-float-card--delay { top: 6%; right: -12%; animation-delay: 1.6s; }
@keyframes bsa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- 10. Accordion widget (FAQ) -------------------------------------- */
.elementor-widget-accordion .elementor-accordion { display: flex; flex-direction: column; gap: 1rem; }
.elementor-widget-accordion .elementor-accordion-item {
  border: 1px solid var(--bsa-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.elementor-widget-accordion .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  color: var(--bsa-navy);
  cursor: pointer;
  outline: none;
}
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bsa-tint);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon i { color: var(--bsa-blue); font-size: 12px; }
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
  background: var(--bsa-blue);
  transform: rotate(180deg);
}
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i { color: #fff; }
.elementor-widget-accordion .elementor-tab-content {
  padding: 0 1.5rem 1.25rem;
  font-size: 14px;
  color: var(--bsa-text-muted);
  line-height: 1.7;
}

/* ---------- 11. Form widget (contact + newsletter) -------------------------- */
.bsa-form-panel.elementor-widget-form {
  display: block;
  background: #fff;
  border-radius: var(--bsa-radius);
  box-shadow: var(--bsa-shadow-md);
  border: 1px solid var(--bsa-border);
  padding: 2rem;
}
.bsa-form-panel .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.bsa-form-panel .elementor-field-group { display: flex; flex-direction: column; gap: 0.5rem; }
.bsa-form-panel .elementor-field-group.elementor-col-50 { width: calc(50% - 0.625rem); }
.bsa-form-panel .elementor-field-group.elementor-col-100 { width: 100%; }
.bsa-form-panel .elementor-field-label { font-size: 12px; font-weight: 600; color: var(--bsa-navy); }
.bsa-form-panel .elementor-field {
  width: 100%;
  border: 1.5px solid var(--bsa-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--bsa-font-body);
  font-size: 14.5px;
  color: var(--bsa-text);
  background: #fbfdff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bsa-form-panel .elementor-field:focus {
  border-color: var(--bsa-blue);
  box-shadow: 0 0 0 4px rgba(0,110,255,0.12);
  outline: none;
}
.bsa-form-panel .elementor-field-type-submit { width: 100%; margin-top: 0.25rem; }
.bsa-form-panel .elementor-button {
  width: 100%;
  justify-content: center;
  padding: 0.9rem;
  background: var(--bsa-blue);
  color: #fff;
}
.bsa-form-panel .elementor-button:hover { background: var(--bsa-blue-dark); }

/* Footer newsletter form (compact inline variant) */
.bsa-newsletter-form.elementor-widget-form .elementor-form-fields-wrapper { display: flex; flex-wrap: nowrap; gap: 0; }
.bsa-newsletter-form .elementor-field-group { flex: 1; }
.bsa-newsletter-form .elementor-field-label { display: none; }
.bsa-newsletter-form .elementor-field {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 10px 0 0 10px;
  padding: 11px 14px;
  font-size: 14px;
}
.bsa-newsletter-form .elementor-field::placeholder { color: rgba(255,255,255,0.55); }
.bsa-newsletter-form .elementor-field-type-submit { width: auto; flex: none; margin-top: 0; }
.bsa-newsletter-form .elementor-button {
  border-radius: 0 10px 10px 0;
  background: var(--bsa-orange);
  color: #fff;
  padding: 0 18px;
  height: 100%;
}
.bsa-newsletter-form .elementor-button:hover { background: #e04100; }

/* ---------- 12. Google Maps widget (contact section placeholder) ----------- */
.bsa-map-placeholder.elementor-widget-google_maps .elementor-custom-embed,
.bsa-map-placeholder .elementor-custom-embed {
  border-radius: var(--bsa-radius);
  border: 1.5px dashed var(--bsa-border);
  overflow: hidden;
  min-height: 220px;
}
/* If/when a confirmed physical address replaces "West Bengal, India", this
   dashed placeholder treatment can simply be removed. */

/* ---------- 13. Cards & section chrome (unchanged — already on real divs) -- */
.bsa-course-card, .bsa-blog-card {
  background: #fff; border: 1px solid var(--bsa-border); border-radius: var(--bsa-radius);
  overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bsa-course-card:hover, .bsa-blog-card:hover { transform: translateY(-8px); box-shadow: var(--bsa-shadow-lg); }
.bsa-blog-card:hover { transform: translateY(-6px); box-shadow: var(--bsa-shadow-md); }

.bsa-price-card { background: #fff; border: 1.5px solid var(--bsa-border); border-radius: var(--bsa-radius); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.bsa-price-card:hover { transform: translateY(-6px); box-shadow: var(--bsa-shadow-md); }
.bsa-price-card--featured {
  background: linear-gradient(160deg, var(--bsa-navy) 0%, var(--bsa-navy-deep) 100%);
  border-color: var(--bsa-gold);
  transform: scale(1.03);
}
.bsa-price-card--featured .elementor-icon-list-text,
.bsa-price-card--featured p { color: rgba(255,255,255,0.92); }
.bsa-price-card--featured .bsa-price-feature-muted { color: rgba(255,255,255,0.7); }
.bsa-price-card .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.bsa-price-card .elementor-icon-list-icon i { color: var(--bsa-blue); margin-top: 2px; }
.bsa-price-card--featured .elementor-icon-list-icon i { color: var(--bsa-gold); }

/* ---------- 14. Hero, philosophy banner, header, footer (background/motion) */
.bsa-header { box-shadow: var(--bsa-shadow-sm); }

.bsa-hero { position: relative; overflow: hidden; background: radial-gradient(120% 100% at 100% 0%, #e3efff 0%, var(--bsa-tint) 45%, #ffffff 100%); }
.bsa-hero-photo { position: relative; }

.bsa-prompt-card.elementor-inner-section,
.bsa-prompt-card {
  position: absolute;
  bottom: -8%; right: 2%;
  width: 16rem;
  background: linear-gradient(160deg, var(--bsa-navy) 0%, var(--bsa-navy-deep) 100%);
  color: #fff;
  border-radius: 16px;
  box-shadow: var(--bsa-shadow-lg);
  padding: 1rem 1.25rem;
  animation: bsa-float 6s ease-in-out infinite;
  animation-delay: 0.5s;
  z-index: 6;
}
.bsa-prompt-card p { font-family: var(--bsa-font-mono); }
.bsa-prompt-card p:first-child { font-size: 11px; color: var(--bsa-gold); margin-bottom: 0.5rem; letter-spacing: 0.05em; }
.bsa-prompt-card p:last-child { font-size: 13px; line-height: 1.4; }

.bsa-philosophy { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bsa-navy-deep) 0%, var(--bsa-navy) 60%, #04407f 100%); }
.bsa-philosophy-equation .elementor-heading-title { font-size: clamp(1.5rem, 3vw, 2.25rem); }

.bsa-footer { background: var(--bsa-navy-deep); color: rgba(255,255,255,0.75); }
.bsa-section-divider { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; margin-top: 1.5rem; }

/* ---------- 15. Entrance animation (pure CSS — no scroll-observer JS) ------ */
/* Plays once on page load rather than on scroll-into-view, since there's no
   JS to watch for elements entering the viewport. Same class names as
   before, so nothing in the JSON needed to change. */
.bsa-reveal {
  animation: bsa-fade-up 0.7s ease both;
}
.bsa-reveal-delay-1 { animation-delay: 0.08s; }
.bsa-reveal-delay-2 { animation-delay: 0.16s; }
.bsa-reveal-delay-3 { animation-delay: 0.24s; }
.bsa-reveal-delay-4 { animation-delay: 0.32s; }
@keyframes bsa-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bsa-reveal, .bsa-float-card, .bsa-prompt-card { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- 16. Accessibility & misc ---------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bsa-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--bsa-gold); color: var(--bsa-navy-deep); }

/* ---------- 17. Responsive: stack the hero/about/contact/footer column pairs
   Elementor already stacks columns responsively on its own breakpoints, so
   this only fine-tunes spacing, not layout. */
@media (max-width: 1024px) {
  .bsa-float-card, .bsa-prompt-card { position: static; margin-top: 1rem; width: auto; }
}/* End custom CSS */