:root {
    --body-font-family: "Open Sans";
    --header-font-family: "M PLUS Rounded 1c";

    --primary-color: #ff7162;
    --primary-contrast-color: #ffffff;
    --primary-hover-color: #ff7f72;
    --primary-soft-color: #fff4f2;

    --secondary-color: #2b3c6b;
    --secondary-contrast-color: #ffffff;
    --secondary-hover-color: #40507a;
    --secondary-soft-color: #e6e8ed;

    --bg-color: #fff7f5;
    --bg-alt-color: #f7f0ee;
    --surface-color: #fff7f5;
    --surface-muted-color: #f5edeb;
    --surface-contrast-color: #000000;

    --text-color: #2b3c6b;
    --text-muted-color: #7782a0;
    --text-soft-color: #a6adc1;

    --accent-color: #fbb419;
    --accent-contrast-color: #ffffff;
    --accent-hover-color: #e2a217;

    --border-color: #e0d9d8;
    --header-footer-foreground: #ffffff;
    --header-footer-muted: #ffffff;

    --menu-badge-bg-color: #2b3c6b;
    --menu-badge-text-color: #ffffff;
    --menu-button-bg-color: #2b3c6b;
    --menu-button-text-color: #ffffff;
    --menu-button-border-color: #2b3c6b;

    --footer-input-bg-color: #fff7f5;
    --footer-input-text-color: #2b3c6b;
    --footer-input-border-color: #dbd4d3;

    --cta-bg-color: #ff7162;
    --cta-text-color: #ffffff;
    --cta-hover-bg-color: #e6584a;
    --cta-hover-text-color: #ffffff;
    --cta-font-size: 16px;
    --border-radius: 6px;

    --boxed-layout-bg-color: #fff7f5;
    --contrast-layout-bg-color: #000000;
    --layout-pattern-img: url('');
}


:root {
  --font-base: var(--body-font-family);
  --font-heading: var(--header-font-family);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --radius-pill: 50px;
  --shadow-sm: 0 2px 8px rgba(16, 55, 65, 0.08);
  --shadow-md: 0 10px 30px rgba(16, 55, 65, 0.10);

  --transition-fast: 300ms ease;
  --transition-med: 500ms ease;
}

body {
  /* Kider markup/CSS reads these short names everywhere below. */
  --primary: var(--primary-color);
  --light: var(--bg-color);
  --dark: var(--secondary-color);

  --primary-dark: var(--primary-hover-color);
  --primary-light: var(--primary-soft-color);
  --surface: var(--surface-color);
  --text: var(--text-color);
  --text-muted: var(--text-muted-color);
  --border: var(--border-color);
  --on-primary: var(--primary-contrast-color);
}
/* ---------- TYPOGRAPHY ---------- */
body {
    font-family: var(--font-base);
    color: var(--text);
    overflow-x: hidden;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

h5, h6, .h5, .h6 {
    font-weight: 600;
}

.font-secondary {
    font-family: var(--font-heading);
}

a {
    color: var(--primary);
}

/* Skip-to-content link: hidden off-screen until keyboard-focused */
.skip-link {
    position: absolute;
    top: -60px;
    left: var(--space-3);
    z-index: 2000;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-3); }
/* ---------- BUTTONS ---------- */
.btn {
    font-weight: 500;
    transition: var(--transition-med);
}

.btn.btn-primary {
    color: var(--on-primary);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}




:root {
    --resolved-action-bg: var(--cta-bg-color);
    --resolved-action-color: var(--cta-text-color);
    --resolved-action-border: 2px solid var(--cta-bg-color);
    --resolved-action-radius: var(--radius-pill);
    --resolved-action-shadow: none;
    --resolved-action-bg-image: none;
    --resolved-action-hover-bg: var(--cta-hover-bg-color);
    --resolved-action-hover-color: var(--cta-hover-text-color);
    --resolved-action-hover-border: 2px solid var(--cta-hover-bg-color);
    --resolved-action-hover-shadow: var(--shadow-md);
    --resolved-action-hover-bg-image: none;
}

.sch-cta-btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.5;
    cursor: pointer;
    transition: var(--transition-med);
    color: var(--cta-text-color);
    background: var(--cta-bg-color);
    background-image: none;
    border: 2px solid var(--cta-bg-color);
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: none;
}

.sch-cta-btn:hover,
.sch-cta-btn:focus {
    color: var(--cta-hover-text-color);
    background: var(--cta-hover-bg-color);
    background-image: none;
    border: 2px solid var(--cta-hover-bg-color);
    box-shadow: var(--shadow-md);
}


.theme-btn:not(.kidko-theme-btn-alt) {
    /* Only `color` needs !important (matching vendor's own `color:#fff
       !important` on the base rule so this can actually beat it) -- the rest
       win on specificity alone, which also means a handful of vendor rules
       scoped to specific page contexts (.contact-section .theme-btn,
       .cart-section .theme-btn, both higher-specificity but NOT !important)
       correctly keep winning there instead of being force-overridden. */
    color: var(--cta-text-color) !important;
    background: var(--cta-bg-color);
    background-image: none;
    border: 2px solid var(--cta-bg-color);
    border-radius: var(--radius-pill);
    box-shadow: none;
}

.theme-btn:not(.kidko-theme-btn-alt):before {
    /* Kidko's own scale-in colour-wipe hover animation is replaced by a plain
       background swap below (same mechanism `.sch-cta-btn` already uses on
       every inner page), so the wipe layer needs to stay permanently hidden
       rather than fight the new hover rule for which colour wins. */
    opacity: 0 !important;
}

.theme-btn:not(.kidko-theme-btn-alt):hover,
.theme-btn:not(.kidko-theme-btn-alt):focus {
    color: var(--cta-hover-text-color) !important;
    background: var(--cta-hover-bg-color);
    background-image: none;
    border: 2px solid var(--cta-hover-bg-color);
    box-shadow: var(--shadow-md);
}



.rs-home-section-shell.home-section-bg-dark .sch-cta-btn,
.rs-home-section-shell.home-section-bg-dark .theme-btn:not(.kidko-theme-btn-alt) {
    background: var(--home-section-text) !important;
    background-image: none !important;
    border-color: var(--home-section-text) !important;
    color: var(--home-section-bg) !important;
}
.rs-home-section-shell.home-section-bg-dark .sch-cta-btn:hover,
.rs-home-section-shell.home-section-bg-dark .sch-cta-btn:focus,
.rs-home-section-shell.home-section-bg-dark .theme-btn:not(.kidko-theme-btn-alt):hover,
.rs-home-section-shell.home-section-bg-dark .theme-btn:not(.kidko-theme-btn-alt):focus {
    background: color-mix(in srgb, var(--home-section-text) 85%, transparent) !important;
    border-color: var(--home-section-text) !important;
    color: var(--home-section-bg) !important;
}


.btn.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus {
    color: var(--on-primary);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn.btn-outline-light:hover {
    color: var(--dark);
}

/* The vendored Bootstrap build bakes Kinder's demo orange in as literal hex
   values (not var(--bs-primary)) for these utility classes, so they need the
   same tenant-token override the .btn-primary rules above already get. */
.bg-primary {
    background-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primary);
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: var(--radius-pill);
}

.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}
/* ---------- NAVBAR ---------- */
.navbar .navbar-nav .nav-link {
    padding: 30px 15px;
    color: var(--dark);
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar.sticky-top {
    top: -100px;
    transition: var(--transition-med);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f282";
    font-family: "bootstrap-icons";
    vertical-align: middle;
    margin-left: 5px;
    transition: var(--transition-med);
}

.navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

.sch-nav-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: var(--dark);
    font-weight: 500;
    font-size: 14px;
    border: 1px solid var(--border, rgba(16, 55, 65, .15));
    border-radius: var(--radius-pill);
    transition: var(--transition-med);
    white-space: nowrap;
}

.sch-nav-account-btn:hover,
.sch-nav-account-btn:focus {
    color: var(--on-primary);
    background: var(--primary);
    border-color: var(--primary);
}

.sch-nav-account-btn i {
    font-size: 15px;
}

/* ---------- HERO CAROUSEL / PAGE HEADER ---------- */
.header-carousel::before,
.header-carousel::after,
.page-header::before,
.page-header::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    top: 0;
    left: 0;
    background: url('https://cdn.scholix.io/theme-assets/themes/theme5/releases/46b9c494d9942fed/assets/images/bg-header-top.png') center center repeat-x;
    z-index: 1;
}

.header-carousel::after,
.page-header::after {
    height: 19px;
    top: auto;
    bottom: 0;
    background: url('https://cdn.scholix.io/theme-assets/themes/theme5/releases/46b9c494d9942fed/assets/images/bg-header-bottom.png') center center repeat-x;
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 45px;
    font-size: 22px;
    transition: var(--transition-med);
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.page-header {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), var(--page-header-image, linear-gradient(var(--primary), var(--primary-dark)));
    background-size: cover;
    background-position: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .5);
}

/* ---------- FACILITY / KEY HIGHLIGHTS ---------- */
.facility-item .facility-icon {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.facility-item .facility-icon::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .9);
    transition: var(--transition-med);
    z-index: 1;
}

.facility-item .facility-icon span {
    position: absolute;
    content: "";
    width: 15px;
    height: 30px;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.facility-item .facility-icon span:last-child {
    left: auto;
    right: 0;
}

.facility-item .facility-icon i {
    position: relative;
    z-index: 2;
}

.facility-item .facility-text {
    position: relative;
    min-height: 250px;
    padding: 30px;
    border-radius: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}

.facility-item .facility-text::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .9);
    transition: var(--transition-med);
    z-index: 1;
}

.facility-item .facility-text * {
    position: relative;
    z-index: 2;
}

.facility-item:hover .facility-icon::before,
.facility-item:hover .facility-text::before {
    background: transparent;
}

.facility-item .facility-icon img {
    position: relative;
    z-index: 2;
}

.facility-item * {
    transition: var(--transition-med);
}

.facility-item:hover * {
    color: #FFFFFF !important;
}

/* ---------- ABOUT ---------- */
.about-img img {
    transition: var(--transition-med);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.about-img img:hover {
    background: var(--primary) !important;
}

/* ---------- CLASSES / COURSES ---------- */
.classes-item {
    transition: var(--transition-med);
}

.classes-item:hover {
    margin-top: -10px;
}

.classes-item .bg-light.rounded-circle {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.classes-item .bg-light.rounded-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.classes-item .bg-light.rounded {
    position: relative;
    z-index: 1;
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    box-shadow: var(--shadow-sm);
    transition: var(--transition-med);
}

.classes-item:hover .bg-light.rounded {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

/* ---------- TEAM / FACULTY ---------- */
.team-item img.rounded-circle {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.team-item .team-text {
    position: absolute;
    width: 250px;
    height: 250px;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #FFFFFF;
    border: 17px solid var(--light);
    border-radius: 250px;
    transition: var(--transition-med);
    text-align: center;
    padding: 0 20px;
}

.team-item:hover .team-text {
    border-color: var(--primary);
}

/* ---------- TESTIMONIALS ---------- */
.testimonial-carousel {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 576px) {
    .testimonial-carousel {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 100%;
    height: 45px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 45px;
    font-size: 20px;
    transition: var(--transition-med);
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--dark);
}

/* ---------- CALL TO ACTION / APPOINTMENT / ENQUIRY FORM ---------- */
.cta-panel,
.enquiry-panel {
    background: var(--light);
    border-radius: 8px;
    overflow: hidden;
}

/* Dark home section: this card's own light background doesn't follow the
   section's --home-section-bg, so it stays untouched and swallows the
   contrast fix applied to the text/button inside it — override explicitly.
   Darkening (not lightening) the panel is what keeps the white text/button
   readable — mixing in white here would lighten it toward the section's
   own mid-tone color and reduce contrast instead of improving it. */
.rs-home-section-shell.home-section-bg-dark .cta-panel,
.rs-home-section-shell.home-section-bg-dark .enquiry-panel {
    background: color-mix(in srgb, black 25%, transparent);
}

.enquiry-panel .form-control {
    border: 0;
    background: #FFFFFF;
}

/* ---------- CONTACT ---------- */
.contact-icon-circle {
    width: 75px;
    height: 75px;
    background: var(--light);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- FOOTER ---------- */
.site-footer.kidko-footer {
    background: var(--dark);
    color: rgba(255, 255, 255, .5);
    <!-- padding-top: 60px;
    margin-top: 60px; -->
}

.kidko-footer h3 {
    color: #FFFFFF;
    margin-bottom: 25px;
    font-size: 1.25rem;
}

.kidko-footer .footer-widgets {
    padding: 60px 0 30px;
}

.kidko-footer .footer-widget {
    margin-bottom: 30px;
}

.kidko-footer .footer-widget address {
    font-style: normal;
}

.kidko-footer .footer-widget p,
.kidko-footer .footer-widget address p {
    line-height: 1.8;
    margin-bottom: 10px;
}

.kidko-footer .footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kidko-footer .footer-links-list--nested {
    margin: 8px 0 15px 15px;
}

.kidko-footer .footer-newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.kidko-footer .footer-newsletter-form .form-control {
    flex: 1 1 auto;
}

.kidko-footer .btn.btn-social {
    margin-right: 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 45px;
    transition: var(--transition-fast);
}

.kidko-footer .btn.btn-social:hover {
    border-color: var(--primary);
    background: var(--primary);
}

.kidko-footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    font-size: 16px;
    font-weight: normal;
    text-transform: capitalize;
    color: rgba(255, 255, 255, .5);
    transition: var(--transition-fast);
}

.kidko-footer .btn.btn-link::before {
    position: relative;
    content: "\f285";
    font-family: "bootstrap-icons";
    margin-right: 10px;
}

.kidko-footer .btn.btn-link:hover {
    color: var(--primary) !important;
    letter-spacing: 1px;
}

.kidko-footer .form-control {
    border-color: rgba(255, 255, 255, .5);
    background: transparent;
    color: #FFFFFF;
}

.kidko-footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.kidko-footer .copyright a,
.kidko-footer .footer-menu a {
    color: #FFFFFF;
}

.kidko-footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.kidko-footer .copyright a:hover,
.kidko-footer .footer-menu a:hover {
    color: var(--primary) !important;
}

.kidko-footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

/* ---------- HOME SECTION SHELL (alternating background support, used by
   the generic home-page section renderer for key_highlights/about/cta/
   courses/events/faculty_preview/testimonials/blog + any admin-added
   web_page_sections) ---------- */
.rs-home-section-shell {
    --home-section-bg: #ffffff;
    --home-section-text: var(--text);
    --home-section-muted: var(--text-muted);
    background: var(--home-section-bg);
    color: var(--home-section-text);
}
.rs-home-section-shell.home-section-bg-light { --home-section-bg: #ffffff; }
.rs-home-section-shell.home-section-bg-alt { --home-section-bg: var(--primary-light); }
.rs-home-section-shell.home-section-bg-dark {
    --home-section-bg: var(--primary);
    --home-section-text: var(--on-primary);
    --home-section-muted: color-mix(in srgb, var(--on-primary) 72%, transparent);
}
/* Was `background: var(--home-section-bg) !important` — the `background`
   shorthand always resets every background sub-property it doesn't mention,
   so it was silently wiping out `background-image` on any section that sets
   its own photo via inline style (e.g. event-section's admin-configurable/
   fallback background), even though that photo has higher specificity+
   normal-vs-important would otherwise lose to this !important rule anyway.
   Scoping this rule to `background-color` only (kept !important, kept the
   rule itself, per instruction not to remove it) fixes it correctly: every
   section with no image of its own still gets its light/dark/alt tone
   exactly as before (background-color IS the visible paint when there's no
   image), and any section that layers its own background-image on top now
   keeps that image intact instead of being clobbered. A plain CSS `opacity`
   was considered and rejected — it fades the whole element (including its
   text/children), not just the background layer, which isn't what's wanted
   here. Kidko's own event-section already has a `:before` dark overlay for
   photo-tint/text-contrast, so no extra tint layer was needed on top. */
.rs-home-section-shell > section {
    background-color: var(--home-section-bg) !important;
}
/* Dark section background: force every text element to the section's own
   contrast color instead of the page's fixed heading/muted/link colors,
   otherwise dark-on-dark text becomes unreadable. */
.rs-home-section-shell.home-section-bg-dark :where(
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
    p, li, span, label, strong, b
) {
    color: var(--home-section-text);
}
.rs-home-section-shell.home-section-bg-dark :where(
    .text-muted, small, .small, .section-eyebrow
) {
    color: var(--home-section-muted) !important;
}
.rs-home-section-shell.home-section-bg-dark a:not(.sch-cta-btn):not(.btn) {
    color: var(--home-section-text);
}
.rs-home-section-shell.home-section-bg-dark .text-primary {
    color: var(--home-section-text) !important;
}

/* Self-contained light cards inside a home section: facility cards
   (.facility-item, bg via ::before overlay), course cards (.classes-item,
   .bg-light), testimonial cards (.testimonial-item, .bg-light + nested
   .bg-white), and faculty cards (.team-item .team-text, solid white circle).
   All of these keep their own light surface regardless of the section's own
   darkness, so the dark-section overrides above would otherwise make their
   text invisible against a background that never actually changed. Restore
   normal document colors within them. .facility-item:hover still correctly
   forces white via the existing `.facility-item:hover * { color: #fff
   !important; }` rule, which wins on both specificity and !important. */
.rs-home-section-shell.home-section-bg-dark :where(
    .facility-item, .classes-item, .testimonial-item, .team-item .team-text
) :where(p, li, span, label, strong, b, small, a:not(.sch-cta-btn):not(.btn)) {
    color: var(--text) !important;
}
.rs-home-section-shell.home-section-bg-dark :where(
    .facility-item, .classes-item, .testimonial-item, .team-item .team-text
) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--dark);
}
.rs-home-section-shell.home-section-bg-dark :where(.facility-item, .classes-item) .text-primary {
    color: var(--primary) !important;
}

/* ---------- SUBPAGE HELPERS (about-us, courses, faculties, careers,
   contact — reuse Bootstrap utilities + the facility/classes/team-item
   vocabulary above, plus these few additions) ---------- */
.section-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Bootstrap's own pagination component is vendored (bootstrap.min.css) and
   rendered as-is via the theme-pagination Blade component; reshaped here into
   the circular, spaced-out button language Kinder uses elsewhere (owl-nav
   arrows, rounded-pill filters) instead of Bootstrap's connected boxes. */
.default-pagination {
    display: flex;
    justify-content: center;
}
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pagination .page-item .page-link {
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border, rgba(16, 55, 65, .12));
    background-color: #FFFFFF;
    color: var(--dark);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    transition: var(--transition-fast);
}
.pagination .page-item .page-link:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
}
.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
}
.pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--border, rgba(16, 55, 65, .08));
    color: var(--text-muted);
    opacity: .6;
}

/* ---------- IMAGE / VIDEO GALLERY ---------- */
.gallery-card,
.video-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    box-shadow: var(--shadow-sm);
    transition: var(--transition-med);
}

.gallery-card:hover,
.video-card:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
    transform: translateY(-6px);
}

.gallery-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.gallery-card:hover img {
    transform: scale(1.08);
}

.gallery-card .type-chip,
.video-card .type-chip,
.post-card-thumb .type-chip,
.post-featured-media .type-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(16, 55, 65, .6);
    backdrop-filter: blur(2px);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #FFFFFF;
    opacity: 0;
    background: linear-gradient(180deg, rgba(16, 55, 65, .15) 0%, rgba(16, 55, 65, .75) 100%);
    transition: var(--transition-med);
    text-align: center;
    padding: 0 15px;
}

.gallery-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-card-overlay i {
    font-size: 28px;
    transform: scale(.8);
    transition: transform .3s ease;
}

.gallery-card:hover .gallery-card-overlay i {
    transform: scale(1);
}

.video-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.video-card-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 55, 65, 0) 45%, rgba(16, 55, 65, .55) 100%);
    opacity: 0;
    transition: var(--transition-med);
}

.video-card:hover .video-card-thumb::after {
    opacity: 1;
}

.video-card-thumb img,
.video-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.video-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 32px;
}

.video-card:hover .video-card-thumb img {
    transform: scale(1.08);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 20px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .18);
    transition: var(--transition-med);
}

.video-card:hover .video-play-btn {
    background: var(--dark);
    box-shadow: 0 0 0 12px rgba(255, 255, 255, .22);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.video-card-title {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: var(--transition-fast);
}

.video-card:hover .video-card-title {
    color: var(--primary);
}

.video-card-desc {
    margin-bottom: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shared empty-state badge for catalog-style pages (galleries, reviews, etc.) */
.empty-state-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 34px;
}

/* ---------- REVIEWS / TESTIMONIALS LISTING ---------- */
.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 30px 30px;
    border-radius: 10px;
    background: var(--light);
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    transition: var(--transition-med);
}

.review-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
    border-color: transparent;
}

.review-card-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 20px;
    flex-shrink: 0;
}

.review-card-message {
    flex-grow: 1;
    margin-bottom: 24px;
    color: var(--text);
    line-height: 1.7;
}

.review-card-message p:last-child {
    margin-bottom: 0;
}

.review-card-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--border, rgba(16, 55, 65, .1));
}

.review-card-author img,
.review-card-author .review-card-initial {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.review-card-author .review-card-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    font-size: 18px;
}

.review-card-author h5 {
    margin-bottom: 2px;
    font-size: 15px;
}

.review-card-author span {
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- DOCUMENT CENTER ---------- */
.document-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.document-group-heading {
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-light);
    font-size: 20px;
}

.document-group-heading:first-child {
    margin-top: 0;
}

.document-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    box-shadow: var(--shadow-sm);
    transition: var(--transition-med);
}

.document-row:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
    transform: translateY(-3px);
}

.document-row-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 26px;
}

.document-row-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.document-row-content {
    flex-grow: 1;
    min-width: 0;
}

.document-row-type {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.document-row-title {
    margin-bottom: 6px;
    font-size: 17px;
    word-break: break-word;
}

.document-row-desc {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.document-read-more {
    display: inline-block;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.document-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.document-row-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.document-row-meta i {
    color: var(--primary);
}

.document-row-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 130px;
}

@media (max-width: 575.98px) {
    .document-row {
        flex-direction: column;
    }

    .document-row-actions {
        flex-direction: row;
        width: 100%;
    }

    .document-row-actions .btn {
        flex: 1;
    }
}

.document-row--hidden {
    display: none;
}

.document-load-more-wrap {
    text-align: center;
    margin-top: 30px;
}

/* ---------- GALLERY LIGHTBOXES ---------- */
.gallery-lightbox,
.video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-backdrop,
.video-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .9);
}

.gallery-lightbox-img {
    position: relative;
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 6px;
}

.gallery-lightbox-close,
.video-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}

.gallery-lightbox-close:hover,
.video-lightbox-close:hover {
    background: var(--primary);
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
    background: var(--primary);
}

.gallery-lightbox-prev {
    left: 20px;
}

.gallery-lightbox-next {
    right: 20px;
}

.video-lightbox-content {
    position: relative;
    width: min(90vw, 960px);
    aspect-ratio: 16 / 9;
}

.video-lightbox-content iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
}

.video-lightbox-close {
    top: -50px;
    right: 0;
}

/* ---------- BLOG / NEWS / ARTICLE LISTING ---------- */
.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    box-shadow: var(--shadow-sm);
    transition: var(--transition-med);
}

.post-card:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
    transform: translateY(-6px);
}

.post-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.post-card:hover .post-card-thumb img {
    transform: scale(1.08);
}

.post-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px;
}

.post-card-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}

.post-card-title {
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-title a {
    color: inherit;
}

.post-card:hover .post-card-title a {
    color: var(--primary);
}

.post-card-excerpt {
    flex-grow: 1;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition-fast);
}

.post-card-link i {
    transition: transform .25s ease;
}

.post-card:hover .post-card-link i {
    transform: translateX(4px);
}

/* Featured post spotlight (blogs listing only) */
.post-featured {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 12px;
    overflow: hidden;
    background: var(--light);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
    .post-featured {
        grid-template-columns: 1fr 1fr;
    }
}

.post-featured-media {
    position: relative;
    min-height: 260px;
}

.post-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

/* Browse-by-category grid (blogs listing only) */
.post-category-card {
    padding: 28px 20px;
    text-align: center;
    border-radius: 10px;
    background: var(--light);
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    transition: var(--transition-med);
}

.post-category-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: transparent;
}

.post-category-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 22px;
}

.post-category-card h3 {
    margin-bottom: 0;
    font-size: 16px;
    color: var(--dark);
}

/* ---------- BLOG / NEWS / ARTICLE DETAIL ---------- */
.post-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.post-pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.post-pill:hover {
    background: var(--primary);
    color: var(--on-primary);
}

.post-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 22px;
    color: var(--text-muted);
    font-size: 14px;
}

.post-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-meta-row i {
    color: var(--primary);
}

.post-detail-image {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 28px;
}

.post-detail-body {
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 30px;
}

.post-detail-body :is(h2, h3, h4) {
    margin-top: 1.6em;
    margin-bottom: .6em;
}

.post-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.post-tags-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .1));
}

.post-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.post-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.post-share-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.post-share-links {
    display: flex;
    gap: 8px;
}

.post-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border, rgba(16, 55, 65, .12));
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--dark);
    font-size: 15px;
    transition: var(--transition-fast);
}

.post-share-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* Comments */
.post-comments-section {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--border, rgba(16, 55, 65, .1));
}

.post-comments-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.post-comment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
}

.post-comment {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.post-comment-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
}

.post-comment-avatar--reply {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.post-comment-body {
    flex-grow: 1;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--light);
}

.post-comment-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.post-comment-header time {
    color: var(--text-muted);
    font-size: 12px;
}

.post-comment-body p {
    margin-bottom: 0;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.6;
}

.post-comment-replies {
    margin-top: 16px;
    padding-left: 20px;
    border-left: 2px solid var(--primary-light);
}

.post-comment-form-wrap {
    margin-top: 30px;
    padding: 26px;
    border-radius: 10px;
    background: var(--light);
}

/* Sidebar */
.post-sidebar-panel {
    padding: 26px;
    border-radius: 10px;
    background: var(--light);
}

.post-fact-list {
    margin-bottom: 20px;
}

.post-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .1));
    font-size: 14px;
}

.post-fact:last-child {
    border-bottom: 0;
}

.post-fact-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.post-fact-label i {
    color: var(--primary);
}

.post-fact-value {
    font-weight: 600;
    color: var(--dark);
    text-align: right;
}

.post-related-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .1));
    color: inherit;
    transition: var(--transition-fast);
}

.post-related-item:last-child {
    border-bottom: 0;
}

.post-related-item:hover {
    color: var(--primary);
}

.post-related-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
}

.post-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-related-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    line-height: 1.4;
}

.post-related-body small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ---------- FEE STRUCTURE ---------- */
.fee-summary-card {
    padding: 26px 20px;
    text-align: center;
    border-radius: 10px;
    background: var(--light);
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    transition: var(--transition-med);
}

.fee-summary-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: transparent;
}

.fee-summary-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 22px;
}

.fee-summary-course {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--dark);
}

.fee-summary-amount {
    display: block;
    margin-bottom: 4px;
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
}

.fee-summary-sublabel {
    display: block;
    color: var(--text-muted);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fee-table-card {
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    box-shadow: var(--shadow-sm);
}

.fee-table-wrap {
    overflow-x: auto;
}

.fee-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
}

.fee-table th,
.fee-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .08));
}

.fee-table thead th {
    background: var(--primary);
    color: var(--on-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 0;
}

.fee-table tbody tr:last-child td {
    border-bottom: 0;
}

.fee-total-row td {
    background: var(--primary-light);
    color: var(--dark);
    font-weight: 700;
    border-top: 2px solid var(--primary);
    border-bottom: 0;
}

.fee-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 16px 20px;
    border-radius: 10px;
    background: var(--light);
    border: 1px dashed var(--border, rgba(16, 55, 65, .2));
    color: var(--text-muted);
    font-size: 14px;
}

.fee-disclaimer i {
    margin-top: 2px;
    color: var(--primary);
    flex-shrink: 0;
}

/* ---------- LEADERSHIP INSIGHTS ---------- */
.leader-block {
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 16px;
    background: var(--light);
}

.leader-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-sm);
}

.leader-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.leader-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 60px;
}

.leader-caption {
    margin-top: 18px;
    text-align: center;
}

.leader-caption h3 {
    margin-bottom: 6px;
    font-size: 20px;
}

.leader-role {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}

.leader-role--outline {
    background: transparent;
    border: 1px solid var(--primary);
    margin-bottom: 18px;
}

.leader-bio {
    color: var(--text);
    line-height: 1.8;
}

.leader-bio p:last-child {
    margin-bottom: 0;
}

/* ---------- MANAGEMENT ---------- */
.mgmt-card {
    position: relative;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-med);
}

.mgmt-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}

.mgmt-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--primary-light);
}

.mgmt-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-med);
}

.mgmt-card:hover .mgmt-card-media img {
    transform: scale(1.05);
}

.mgmt-card-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 40px;
}

.mgmt-card-group {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.mgmt-card-body {
    padding: 16px 18px 14px;
}

.mgmt-card-body h3 {
    margin-bottom: 2px;
    font-size: 16px;
}

.mgmt-card-designation {
    display: block;
    color: var(--primary);
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 10px;
}

.mgmt-card-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.mgmt-card-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.mgmt-card-meta-row i {
    color: var(--primary);
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.mgmt-card-bio {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mgmt-card-actions {
    display: flex;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border, rgba(16, 55, 65, .08));
}

.mgmt-card-actions .btn-square {
    width: 34px;
    height: 34px;
    font-size: 13px;
}
.layout-style {
    width: 100%;
}

.section-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .section-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1200px) {
    .section-container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

html.theme-layout-boxed body {
    background-color: var(--boxed-layout-bg-color);
}

html.theme-layout-boxed.boxed-bg-type-gradient body {
    background-image: linear-gradient(135deg, var(--boxed-layout-bg-color), var(--primary-color));
}

html.theme-layout-boxed.boxed-bg-type-pattern body {
    background-color: var(--boxed-layout-bg-color);
}

/* Pattern options for the "Outside Box Background" setting — pure CSS, no image assets. */
html.theme-layout-boxed.bg-pattern-dots body {
    background-image: radial-gradient(var(--contrast-layout-bg-color) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
}

html.theme-layout-boxed.bg-pattern-grid body {
    background-image:
        linear-gradient(var(--contrast-layout-bg-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--contrast-layout-bg-color) 1px, transparent 1px);
    background-size: 24px 24px;
}

html.theme-layout-boxed.bg-pattern-diagonal-stripes body {
    background-image: repeating-linear-gradient(45deg, var(--contrast-layout-bg-color) 0 2px, transparent 2px 16px);
}

html.theme-layout-boxed.bg-pattern-vertical-stripes body {
    background-image: repeating-linear-gradient(90deg, var(--contrast-layout-bg-color) 0 2px, transparent 2px 16px);
}

html.theme-layout-boxed.bg-pattern-horizontal-lines body {
    background-image: repeating-linear-gradient(0deg, var(--contrast-layout-bg-color) 0 1px, transparent 1px 16px);
}

html.theme-layout-boxed.bg-pattern-crosshatch body {
    background-image:
        repeating-linear-gradient(45deg, var(--contrast-layout-bg-color) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(-45deg, var(--contrast-layout-bg-color) 0 1px, transparent 1px 16px);
}

html.theme-layout-boxed.bg-pattern-zigzag body {
    background-image:
        linear-gradient(135deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(225deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(45deg, var(--contrast-layout-bg-color) 25%, transparent 25%),
        linear-gradient(315deg, var(--contrast-layout-bg-color) 25%, transparent 25%);
    background-position: 0 0, 8px 0, 8px -8px, 0 8px;
    background-size: 16px 16px;
}

html.theme-layout-boxed.bg-pattern-waves body {
    background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--contrast-layout-bg-color) 9px 10px, transparent 10px);
    background-size: 20px 10px;
}

html.theme-layout-boxed.bg-pattern-noise body {
    background-image: radial-gradient(var(--contrast-layout-bg-color) 0.6px, transparent 0.6px);
    background-size: 6px 6px;
}

html.theme-layout-boxed.bg-pattern-paper body {
    background-image: repeating-linear-gradient(45deg, var(--contrast-layout-bg-color) 0 1px, transparent 1px 10px);
}

html.theme-layout-boxed.bg-pattern-fabric body {
    background-image:
        repeating-linear-gradient(0deg, var(--contrast-layout-bg-color) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(90deg, var(--contrast-layout-bg-color) 0 1px, transparent 1px 6px);
}

html.theme-layout-boxed.bg-pattern-hexagons body {
    background-image:
        linear-gradient(30deg, var(--contrast-layout-bg-color) 1px, transparent 1px),
        linear-gradient(150deg, var(--contrast-layout-bg-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--contrast-layout-bg-color) 1px, transparent 1px);
    background-size: 24px 42px;
}

html.theme-layout-boxed.bg-pattern-chevron body {
    background-image:
        linear-gradient(135deg, var(--contrast-layout-bg-color) 25%, transparent 25%, transparent 75%, var(--contrast-layout-bg-color) 75%),
        linear-gradient(45deg, var(--contrast-layout-bg-color) 25%, transparent 25%, transparent 75%, var(--contrast-layout-bg-color) 75%);
    background-position: 0 0, 16px 16px;
    background-size: 32px 32px;
}

html.theme-layout-boxed.bg-pattern-triangles body {
    background-image:
        linear-gradient(45deg, var(--contrast-layout-bg-color) 50%, transparent 50%),
        linear-gradient(-45deg, var(--contrast-layout-bg-color) 50%, transparent 50%);
    background-size: 16px 16px;
}

/* ---------- SPINNER ---------- */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* ---------- ANIMATIONS (wow.js hook classes ship in vendor CSS; this just
   guards against layout shift before wow.js attaches) ---------- */
.wow { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .wow { visibility: visible; animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ---------- RESPONSIVE (ported 1:1 from the original Kider stylesheet) ---------- */
@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        margin-top: 15px;
        border-top: 1px solid var(--border);
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        top: calc(100% - 15px);
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-med);
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: var(--transition-med);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }

    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .header-carousel .owl-carousel-item h1 {
        font-size: 30px;
        font-weight: 600;
    }
}
/* ---------- HEADER: compact nav height ----------
   Kidko's stock .header-bottom is very tall (nav links alone carry 47px/42px
   top/bottom padding, ~115px per link box) which makes the whole bar look
   oversized. Shrinks the three floated columns (logo, nav links, Join Us
   button) together so the bar gets shorter without breaking their vertical
   balance -- .sticky-header already uses its own compact padding and is
   untouched. */
.main-header .logo-box .logo {
    padding: 14px 0px;
}

.main-menu .navigation > li > a {
    padding: 28px 0px 24px 0px;
}

.main-header .outer-box {
    margin-top: 18px;
}

/* ---------- HEADER: "Join Us" CTA ----------
   Kidko's own icon-button rule has higher specificity than a bare
   .kidko-join-us-btn class and was squashing it into a circle -- match/
   exceed that specificity and reset every property it sets. */
.main-header .outer-content li a.kidko-join-us-btn,
.main-header .outer-content li a.kidko-join-us-btn:hover {
    width: auto;
    height: auto;
    line-height: normal;
    border-radius: var(--radius-pill, 50px);
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.main-header .outer-content li a.kidko-join-us-btn {
    margin-left: 20px;
    padding: 12px 26px;
    background: var(--resolved-action-bg);
    background-image: var(--resolved-action-bg-image);
    color: var(--resolved-action-color);
    border: var(--resolved-action-border);
    box-shadow: var(--resolved-action-shadow);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: var(--transition-fast, 300ms ease);
}

.main-header .outer-content li a.kidko-join-us-btn:hover,
.main-header .outer-content li a.kidko-join-us-btn:focus {
    background: var(--resolved-action-hover-bg);
    background-image: var(--resolved-action-hover-bg-image);
    color: var(--resolved-action-hover-color);
    border: var(--resolved-action-hover-border);
    box-shadow: var(--resolved-action-hover-shadow);
}

@media (max-width: 991px) {
    .main-header .outer-content li a.kidko-join-us-btn {
        margin: 10px 0 0;
    }

    /* The 18px desktop margin-top above (line 26) is unconditional, so on
       mobile it stacks on top of the vendor's own responsive.css rule that
       switches .outer-box to position:absolute; top:-2px -- pushing the
       "Join Us" button down below the header instead of level with the
       hamburger toggle. Zero it back out here so the absolute positioning
       is unopposed. */
    .main-header .outer-box {
        margin-top: 0;
    }
}

/* ---------- HOME: KEY HIGHLIGHTS ----------
   No vendor equivalent (Kidko's demo has no "why choose us" style grid) --
   bespoke card reusing the same rounded/shadow card language as
   .kidko-mgmt-card / .kidko-career-card. */
.kidko-highlights-section {
    padding: 90px 0;
}

/* .sec-title carries no bottom margin of its own (see the
   .section-container note below) -- without it the description text sits
   flush against the card grid. Matches the vendor's own 60px convention. */
.kidko-highlights-section .sec-title {
    margin-bottom: 60px;
}

.kidko-highlight-card {
    height: 100%;
    text-align: center;
    padding: 40px 26px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(229, 229, 229, 0.7);
    transition: all 300ms ease;
}

.kidko-highlight-card:hover {
    transform: translateY(-6px);
}

.kidko-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--primary-light, #eef6ff);
    color: var(--primary-color);
    font-size: 28px;
    overflow: hidden;
}

.kidko-highlight-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.kidko-highlight-title {
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--secondary-color);
}

.kidko-highlight-desc {
    margin-bottom: 0;
    font-size: 14px;
    color: var(--secondary-color);
    opacity: .75;
}

/* ---------- HOME: FACTS & FIGURES ----------
   Kidko's own .fact-counter band (style.css ~3284) is icon-font only --
   sizes an uploaded icon image down to match the vendor's 60px icon-box.
   .kidko-facts-title is the optional admin title/description above the
   band: the shared .sec-title heading renders dark text, illegible on
   this band's colored (--accent-color) background. */
.fact-counter .counter-block .icon-box img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.kidko-facts-title {
    margin-bottom: 50px;
}

.kidko-facts-title h2 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 900;
}

.kidko-facts-title p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 0;
}

/* ---------- INNER PAGE BANNER (Kidko "page-title" pattern) ---------- */
.kidko-page-title {
    position: relative;
    padding: 90px 0;
    text-align: center;
    background-color: var(--secondary-color);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.kidko-page-title:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 50, .68);
}

.kidko-page-title .container {
    position: relative;
    z-index: 2;
}

.kidko-page-title .kidko-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: var(--radius-pill, 50px);
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.kidko-page-title h1 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 700;
    margin: 0 0 12px;
}

.kidko-page-title .kidko-page-desc {
    color: rgba(255,255,255,.85);
    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
}

.kidko-page-title .kidko-breadcrumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    color: rgba(255,255,255,.75);
    font-size: 14px;
}

.kidko-page-title .kidko-breadcrumb a {
    color: rgba(255,255,255,.85);
}

.kidko-page-title .kidko-breadcrumb a:hover {
    color: var(--primary-color);
}

/* ---------- NOTICE TICKER ---------- */
.kidko-ticker {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--primary);
    color: var(--on-primary);
    padding: 0 16px;
    overflow: hidden;
}

.kidko-ticker__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 16px 10px 0;
    border-right: 1px solid rgba(255, 255, 255, .3);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.kidko-ticker__wrap {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

.kidko-ticker__track {
    /* width: max-content so the track sizes to its real (doubled) content
       instead of shrinking to fit .kidko-ticker__wrap -- needed for both
       natural overflow and the -50% keyframe math below. */
    display: flex;
    align-items: center;
    gap: 20px;
    width: max-content;
    white-space: nowrap;
    /* fill-mode "both" keeps the track pinned flush-left before the
       animation starts, avoiding a flash of unstyled position. */
    animation: kidko-ticker-scroll 22s linear infinite;
    animation-fill-mode: both;
    padding: 10px 0;
}

.kidko-ticker:hover .kidko-ticker__track {
    animation-play-state: paused;
}

@keyframes kidko-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.kidko-ticker__item {
    color: var(--on-primary);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.kidko-ticker__item:hover {
    text-decoration: underline;
}

.kidko-ticker__sep {
    opacity: .6;
}

.kidko-ticker__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--on-primary);
    opacity: .8;
    font-size: 14px;
    padding: 8px;
    cursor: pointer;
}

.kidko-ticker__close:hover {
    opacity: 1;
}

/* ---------- EVENTS ---------- */
.kidko-event-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
    box-shadow: var(--shadow-sm);
    transition: var(--transition-med);
}

.kidko-event-card:hover {
    box-shadow: var(--shadow-md);
    border-color: transparent;
    transform: translateY(-6px);
}

.kidko-event-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.kidko-event-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.kidko-event-card:hover .kidko-event-img-wrap img {
    transform: scale(1.08);
}

.kidko-event-date {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
    color: var(--dark);
    line-height: 1.1;
}

.kidko-event-date strong {
    font-size: 20px;
    color: var(--primary);
}

.kidko-event-date span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.kidko-event-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--accent, var(--primary));
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.kidko-event-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.kidko-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.kidko-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.kidko-event-meta i {
    color: var(--primary);
}

.kidko-event-title {
    margin-bottom: 10px;
    font-size: 18px;
}

.kidko-event-title a {
    color: inherit;
}

.kidko-event-card:hover .kidko-event-title a {
    color: var(--primary);
}

.kidko-event-desc {
    flex-grow: 1;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.kidko-event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border, rgba(16, 55, 65, .08));
}

.kidko-event-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 13.5px;
}

/* Countdown (event detail page) */
.kidko-countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 24px 0;
}

.kidko-countdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 14px 10px;
    border-radius: 12px;
    background: var(--light);
    border: 1px solid var(--border, rgba(16, 55, 65, .08));
}

.kidko-countdown-cell strong {
    font-size: 26px;
    color: var(--primary);
    line-height: 1;
}

.kidko-countdown-cell span {
    margin-top: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

/* ---------- EVENT DETAIL PAGE ---------- */
.kidko-event-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

@media (min-width: 992px) {
    .kidko-event-hero {
        grid-template-columns: 1.1fr .9fr;
    }
}

.kidko-event-hero-media {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-sm);
}

.kidko-event-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kidko-event-hero-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 60px;
}

.kidko-event-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 16px 0 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.kidko-event-hero-meta > div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kidko-event-hero-meta i { color: var(--primary); }

.kidko-event-layout,
.kidko-faculty-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 992px) {
    .kidko-event-layout,
    .kidko-faculty-layout {
        grid-template-columns: 1.7fr 1fr;
    }
}

.kidko-event-section,
.kidko-faculty-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .1));
}

.kidko-event-section:last-child,
.kidko-faculty-section:last-child {
    border-bottom: 0;
}

.kidko-event-section-soft {
    padding: 24px;
    border-radius: 12px;
    background: var(--light);
    border-bottom: 0;
}

.kidko-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kidko-event-tag {
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
}

.kidko-event-aside-panel,
.kidko-faculty-panel {
    padding: 26px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: var(--light);
}

.kidko-event-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 13px;
}

.kidko-event-status-open      { background: #E7F7EE; color: #1a9c5a; }
.kidko-event-status-closed    { background: #F5E7E7; color: #b3372c; }
.kidko-event-status-cancelled { background: #F5E7E7; color: #b3372c; }
.kidko-event-status-completed { background: var(--border, #eee); color: var(--text-muted); }
.kidko-event-status-upcoming-reg { background: var(--primary-light); color: var(--primary); }

.kidko-event-snapshot,
.kidko-faculty-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kidko-event-snapshot li,
.kidko-faculty-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .1));
    font-size: 13.5px;
}

.kidko-event-snapshot li:last-child, .kidko-faculty-contact-list li:last-child { border-bottom: 0; }
.kidko-event-snapshot i, .kidko-faculty-contact-list i { color: var(--primary); margin-top: 2px; }
.kidko-event-snapshot span, .kidko-faculty-contact-list span { display: block; color: var(--text-muted); font-size: 12px; }
.kidko-event-snapshot strong, .kidko-faculty-contact-list strong { display: block; }

.kidko-event-related-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .1));
    color: inherit;
}

.kidko-event-related-item:last-child { border-bottom: 0; }

.kidko-event-related-date {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    line-height: 1.1;
    font-size: 15px;
}

.kidko-event-related-date small { font-size: 9px; text-transform: uppercase; }

.kidko-event-gallery-carousel { position: relative; }
.kidko-event-gallery-viewport { overflow: hidden; border-radius: 12px; }
.kidko-event-gallery-track { display: flex; transition: transform .4s ease; }
.kidko-event-gallery-slide { flex: 0 0 100%; }
.kidko-event-gallery-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.kidko-event-gallery-control {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.85); color: var(--dark);
    display: flex; align-items: center; justify-content: center;
}
.kidko-event-gallery-control-prev { left: 12px; }
.kidko-event-gallery-control-next { right: 12px; }
.kidko-event-gallery-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.kidko-event-gallery-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border, #ddd); }
.kidko-event-gallery-dot.is-active { background: var(--primary); }

/* ---------- COURSE DETAIL PAGE ----------
   Vendor image only sets width:100%, relying on the demo photo's shape;
   real uploads vary, so give the frame an explicit ratio. */
.class-details .inner-box .lower-content .image-box img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

/* Same image-sizing fix applied to the Related Courses cards below (shared
   .classes-section/.inner-block markup with the home page's Our Classes grid). */
.classes-section .inner-block .image-box img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Admission page's Courses tab (item 49) reuses this .inner-block/.image-box
   card markup but isn't wrapped in .classes-section, so none of its card-shell
   styling (rounded corners, shadow, background, image clipping) reached it.
   Mirrored here scoped to #admission-tab-courses; deliberately excludes the
   deeper .lower-content/.info-box/.price rules since this card shows course
   code/intake, not price. */
#admission-tab-courses .inner-block {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 50px rgba(229, 229, 229, 0.8);
}
#admission-tab-courses .inner-block .image-box {
    position: relative;
    display: block;
    background: #253b71;
    overflow: hidden;
}
#admission-tab-courses .inner-block .image-box img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: all 500ms ease;
}
#admission-tab-courses .inner-block:hover .image-box img {
    opacity: 0.5;
    transform: scale(1.02);
}

/* Sidebar CTA + brochure link -- not in Kidko's own class-details demo.
   Reuses the site-wide dynamic .theme-btn; only full-width/spacing needed
   since the vendor CSS sizes it for inline text. */
.class-details-sidebar .inner-box .kidko-course-cta {
    display: block;
    width: 100%;
    margin-top: 22px;
    text-align: center;
}

.class-details-sidebar .inner-box .kidko-course-brochure {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #cdccc5;
    color: var(--secondary-color, inherit);
}

.class-details-sidebar .inner-box .kidko-course-brochure i {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--primary);
}

.class-details-sidebar .inner-box .kidko-course-brochure span {
    display: block;
    font-weight: 700;
}

.class-details-sidebar .inner-box .kidko-course-brochure small {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

/* Related Courses reuses the home page's .classes-section band, but trims
   its .sec-pad (144px) since this is a secondary block on a details page,
   not a full home section. */
.classes-section.kidko-related-classes {
    padding: 0 0 100px;
}

@media (max-width: 767px) {
    .classes-section.kidko-related-classes {
        padding-bottom: 60px;
    }
}

/* ---------- FACULTIES LISTING PAGE ----------
   Department filter tabs have no Kidko equivalent -- tenant-aware Bootstrap
   pills (same pattern as pagination), given breathing room above the
   vendor's .teachers-block-one grid. */
.kidko-faculty-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 40px;
}

/* Department group heading -- not in Kidko's flat-grid demo; styled in the
   vendor's own heading vocabulary (font-heading, bold, secondary-color). */
.kidko-faculty-group-title {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    padding-bottom: 10px;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--secondary-color);
}

.kidko-faculty-group-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

/* ---------- FACULTY DETAILS PAGE ----------
   No vendor equivalent -- reuses the EVENT detail page's grid/card/list
   rules (extended, not duplicated) since both are a "long-form content +
   info sidebar" shape. Only the profile photo header is new. */
.kidko-faculty-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

.kidko-faculty-photo {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Same circular-frame treatment as the faculties listing cards (item 31 --
   aspect-ratio 1/1 + object-fit: cover) so a profile photo matches the listing. */
.kidko-faculty-photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.kidko-faculty-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary, #fff);
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
}

.kidko-faculty-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 14px;
}

.kidko-faculty-hero-meta > div {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kidko-faculty-hero-meta i {
    color: var(--primary);
}

/* ---------- CONTACT PAGE ----------
   Kidko's .google-map-section needs a working Maps API key the demo doesn't
   have -- using a plain iframe embed instead, inside the vendor's section
   frame with explicit sizing. */
.google-map-section.kidko-contact-map iframe {
    display: block;
    width: 100%;
    height: 500px;
    border: 0;
}

/* Fallback shown instead of the map when there's no lat/long but named
   addresses are configured -- Kidko has no multi-address concept, so this
   reuses the vendor's card/heading vocabulary rather than the map section's
   own styling. */
.kidko-contact-addresses {
    padding: 60px 0;
    background: var(--light);
}

.kidko-contact-address-card {
    height: 100%;
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(229, 229, 229, 0.6);
}

.kidko-contact-address-card h5 {
    margin-bottom: 16px;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--secondary-color);
}

.kidko-contact-address-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kidko-contact-address-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.kidko-contact-address-card li:last-child {
    margin-bottom: 0;
}

.kidko-contact-address-card li i {
    margin-top: 4px;
    color: var(--primary);
}

/* Kidko's inputs have no built-in validation-error state -- shows the real
   error message with unobtrusive styling; .form-group already has
   position:relative from the vendor's own placeholder animation. */
.kidko-field-error {
    display: block;
    margin-top: 6px;
    color: #d9534f;
    font-size: 12.5px;
}

/* Vendor .contact-form-section .form-group rule (style.css ~7793) only
   covers text/email/textarea, no select. Mirrors that exact box for the
   new course-of-interest dropdown. */
.contact-form-section .contact-form .form-group select {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 15px;
    color: var(--secondary-color);
    transition: all 500ms ease;
}
.contact-form-section .contact-form .form-group select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* ---------- FEES / PRICING PAGE ----------
   Kidko's .pricing-table CSS hardcodes a "grey out unavailable feature"
   treatment on fixed list positions (style.css ~5294) for its 3-tier plan
   demo. Real fee rows are never unavailable, so those rules would
   incorrectly grey real amounts. Reset to normal readable styling, scoped
   via .kidko-fee-pricing so the original demo is untouched elsewhere. */
.pricing-section.kidko-fee-pricing .pricing-block:first-child .pricing-table .table-content li:last-child,
.pricing-section.kidko-fee-pricing .pricing-block:first-child .table-content li:nth-child(4),
.pricing-section.kidko-fee-pricing .pricing-block:nth-child(2) .pricing-table .table-content li:last-child {
    color: var(--secondary-color);
}

.pricing-section.kidko-fee-pricing .pricing-block:first-child .pricing-table:first-child .table-content li:nth-child(4):before,
.pricing-section.kidko-fee-pricing .pricing-block:first-child .pricing-table:first-child .table-content li:last-child:before,
.pricing-section.kidko-fee-pricing .pricing-block:nth-child(2) .pricing-table:first-child .table-content li:last-child:before {
    content: "\f121";
    color: var(--primary-color);
    font-size: 15px;
}

/* Multi-year tabs reuse the tenant-colored Bootstrap pill pattern already
   established for the faculties page's department filter
   (.kidko-faculty-filters) -- extend it to also sit comfortably above the
   pricing cards on this page. */
.kidko-fee-year-tabs {
    margin-bottom: 40px;
}

.kidko-fee-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 900px;
    margin: 10px auto 0;
    padding: 14px 18px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
    color: var(--secondary-color);
}

.kidko-fee-disclaimer i {
    margin-top: 3px;
    color: var(--primary);
}


/* ---------- REVIEWS / TESTIMONIALS PAGE ----------
   Reuses Kidko's real .testimonial-style-two/.testimonial-block-two cards
   outside the owl-carousel wrapper (real data is a paginated collection, not
   a carousel). Drops two carousel-only behaviours: 1) the odd/even
   alternating author-name color driven by Owl Carousel's runtime class --
   replaced with the tenant primary color uniformly; 2) a "no photo"
   fallback -- added a themed initials-avatar (same pattern as theme4)
   sized to match the vendor's 75px .author-thumb. */
.kidko-reviews-page .testimonial-block-two .inner-box .author-info h5 {
    color: var(--primary-color);
}

.kidko-review-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--primary-light, #eef6ff);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 22px;
}


/* ---------- IMAGE / VIDEO GALLERY PAGES ----------
   Reuses Kidko's real .gallery-page-section/.gallery-block markup. The
   vendor's own filter tabs are client-side isotope with no href; replaced
   with real server-side navigation links styled as the same pill row used
   on the faculties/fees pages. */
.kidko-gallery-filters {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.kidko-gallery-filters,
.kidko-faculty-filters {
    text-align: center;
}

/* Consistent card-image framing across the grid -- same reasoning as the
   news-card fix: the vendor's own gallery.html relies on isotope/masonry JS
   (not wired here) to make uneven heights look intentional. Force a uniform
   frame instead. */
.gallery-page-section .gallery-block .image-box .image img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    display: block;
}

.gallery-page-section .gallery-block .image-box {
    position: relative;
}

/* Which named gallery an item belongs to -- no vendor equivalent (gallery.html's
   demo data has no group labels), reuses the same corner-pill visual
   language as the home news cards' .kidko-post-type-badge. */
.kidko-gallery-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: var(--radius-pill, 999px);
    background: var(--primary-color);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Per-image caption/title -- gallery.html's demo images carry no caption
   text at all, but the real data contract has an optional one. */
.kidko-gallery-caption {
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--secondary-color);
}

/* Video gallery reuses every .gallery-block rule unmodified, adding only
   what a video card needs beyond a photo card: a placeholder icon when no
   thumbnail exists, and a title/description panel. */
.kidko-video-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--secondary-color);
    color: rgba(255, 255, 255, 0.6);
    font-size: 40px;
}

.kidko-video-card-info {
    padding: 18px 6px 0;
    text-align: center;
}

.kidko-video-card-info h4 {
    font-size: 18px;
    margin-bottom: 6px;
    color: var(--secondary-color);
}

.kidko-video-card-info p {
    font-size: 14px;
    color: var(--secondary-color);
    opacity: .75;
    margin-bottom: 0;
}


/* ---------- BLOG / ARTICLE / NEWS DETAILS PAGES ----------
   Kidko's real blog-details.html markup is reused wholesale. These
   additions cover data the vendor's static demo never had to represent: an
   inline type/read-time/author meta row, category pills, a copy-link
   button, a comment count badge, and a generic facts list for the sidebar. */
.kidko-post-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.kidko-post-meta-row span {
    font-size: 15px;
    color: var(--secondary-color);
    opacity: .8;
}

.kidko-post-meta-row span i {
    margin-right: 5px;
    color: var(--primary-color);
}

.kidko-post-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.kidko-post-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 300ms ease;
}

.kidko-post-pill:hover {
    background: var(--primary-color);
    color: #fff;
}

.blog-details .blog-details-content .post-share-option .share li .kidko-post-copy-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.kidko-post-comment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
}

.kidko-post-fact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.kidko-post-fact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kidko-post-fact i {
    margin-top: 3px;
    color: var(--primary-color);
    font-size: 16px;
}

.kidko-post-fact > div {
    display: flex;
    flex-direction: column;
}

.kidko-post-fact-label {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: .7;
}

.kidko-post-fact-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
}

.kidko-post-back-btn {
    display: block;
    width: 100%;
    text-align: center;
}

.kidko-post-comment-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kidko-post-form-note {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: .7;
    margin-bottom: 0;
}

.kidko-post-form-note i {
    margin-right: 4px;
}


/* ---------- BLOG / ARTICLE / NEWS LISTING PAGES ----------
   Reuses the .news-block-one card (built for the home blog widget) for all
   three listing grids. Two pieces are bespoke since Kidko's blog.html has no
   featured-post or category-browse concept: */

/* A single featured post shown above the grid when flagged is_featured --
   no vendor equivalent, built as a two-column layout reusing the existing
   rounded-card/shadow language and .theme-btn/badge components. */
.kidko-post-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 50px rgba(229, 229, 229, 0.8);
    overflow: hidden;
}

.kidko-post-featured-media {
    position: relative;
    height: 100%;
    min-height: 320px;
}

.kidko-post-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kidko-post-featured-body {
    padding: 20px 40px 20px 0;
}

.kidko-post-featured-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.kidko-post-featured-body h3 {
    font-size: 28px;
    margin-bottom: 14px;
}

.kidko-post-featured-body h3 a {
    color: var(--secondary-color);
}

.kidko-post-featured-body h3 a:hover {
    color: var(--primary-color);
}

.kidko-post-featured-body p {
    color: var(--secondary-color);
    opacity: .8;
    margin-bottom: 24px;
}

.kidko-post-featured-meta {
    margin-top: 20px;
    font-size: 14px;
    color: var(--secondary-color);
    opacity: .7;
}

.kidko-post-featured-meta i {
    margin-right: 6px;
    color: var(--primary-color);
}

@media (max-width: 767px) {
    .kidko-post-featured {
        grid-template-columns: 1fr;
    }
    .kidko-post-featured-media {
        min-height: 240px;
    }
    .kidko-post-featured-body {
        padding: 30px;
    }
}

/* Category browse cards (blogs.blade.php only) -- again no vendor
   equivalent, built as a small icon+title card matching the same
   rounded/shadow card language used across the theme. */
.kidko-post-category-card {
    display: block;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(229, 229, 229, 0.7);
    padding: 30px 16px;
    text-decoration: none;
    transition: all 300ms ease;
}

.kidko-post-category-card:hover {
    transform: translateY(-4px);
}

.kidko-post-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--primary-light, #eef6ff);
    color: var(--primary-color);
    font-size: 22px;
}

.kidko-post-category-card h3 {
    font-size: 16px;
    margin-bottom: 0;
    color: var(--secondary-color);
}


/* ---------- CAREERS PAGES ----------
   No vendor equivalent. Reuses shapes already built for other pages instead
   of inventing new ones: the featured-post two-column layout (item 37) for
   the intro banner, the faculty-details "content + sidebar" shape (item 32)
   for career-details and the apply-page summary panel, and the reviews
   initials avatar (item 35) for the job-card avatar. Only the job-card grid
   and filter bar are genuinely new. */

/* Filter bar -- reuses the theme's real plain-input treatment already
   established for the contact form (item 33) and blog comment form
   (item 37): 60px inputs, 20px radius, border, no floating labels. */
.kidko-career-filter-bar {
    background: #f2f0e9;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 50px;
}

.kidko-career-filter-bar input[type="text"],
.kidko-career-filter-bar input[type="email"],
.kidko-career-filter-bar select {
    display: block;
    width: 100%;
    height: 55px;
    border: 1px solid #e5e5e5;
    padding: 10px 18px;
    border-radius: 15px;
    background: #fff;
    transition: all 300ms ease;
}

.kidko-career-filter-bar input:focus,
.kidko-career-filter-bar select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.kidko-career-filter-label {
    display: block;
    font-size: 13px;
    color: var(--secondary-color);
    opacity: .7;
    margin-bottom: 6px;
}

.kidko-career-filter-bar .theme-btn {
    height: 55px;
    justify-content: center;
    width: 100%;
}

.kidko-career-filter-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--secondary-color);
}

.kidko-career-filter-extra label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.kidko-career-filter-extra a {
    color: var(--primary-color);
    font-weight: 700;
}

/* Job cards -- bespoke, no vendor equivalent. */
.kidko-career-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(229, 229, 229, 0.7);
    padding: 30px;
}

.kidko-career-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.kidko-career-card-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kidko-career-card-identity h5 {
    margin-bottom: 4px;
    font-size: 17px;
}

.kidko-career-card-identity h5 a {
    color: var(--secondary-color);
}

.kidko-career-card-identity h5 a:hover {
    color: var(--primary-color);
}

.kidko-career-card-sub {
    font-size: 13px;
    color: var(--secondary-color);
    opacity: .7;
}

/* .kidko-review-initial normally fills a sized parent frame (width/height:
   100%) -- used standalone here, so this gives it its own fixed circle. */
.kidko-review-initial.kidko-career-avatar {
    display: inline-flex;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kidko-review-initial.kidko-career-avatar--lg {
    width: 70px;
    height: 70px;
    font-size: 26px;
}

.kidko-career-status {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--radius-pill, 999px);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.kidko-career-status--open {
    background: #e8f7ee;
    color: #1a9c56;
}

.kidko-career-status--closed {
    background: #f2f0e9;
    color: #848484;
}

.kidko-career-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.kidko-career-card-meta span {
    background: #f2f0e9;
    border-radius: var(--radius-pill, 999px);
    padding: 6px 14px;
    font-size: 13px;
    color: var(--secondary-color);
}

.kidko-career-card-meta span i {
    color: var(--primary-color);
    margin-right: 5px;
}

.kidko-career-card-desc {
    font-size: 14px;
    color: var(--secondary-color);
    opacity: .8;
    margin-bottom: 20px;
}

.kidko-career-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

/* career-details.blade.php hero row -- avatar + title + status badge
   above the two-column layout. */
.kidko-career-details-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.kidko-career-details-hero-title {
    flex: 1 1 auto;
}

.kidko-career-panel-apply-btn {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

.kidko-career-panel-back-link {
    display: block;
    text-align: center;
    margin-top: 20px;
}


/* ---------- LEADERSHIP INSIGHTS PAGES ----------
   No vendor equivalent. Bespoke .kidko-leader-block: portrait + name/role
   caption on one side, an outlined role pill + rich-text message on the
   other, reusing the theme's established paragraph spacing (item 37) for
   the bio text. */
.kidko-leader-block {
    padding: 40px 0;
    border-bottom: 1px solid var(--border, rgba(16, 55, 65, .1));
}

.kidko-leader-block:last-child {
    border-bottom: 0;
}

.kidko-leader-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    background: var(--secondary-color);
    box-shadow: 0 20px 40px rgba(229, 229, 229, 0.7);
}

.kidko-leader-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kidko-leader-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 60px;
}

.kidko-leader-caption {
    text-align: center;
    margin-top: 18px;
}

.kidko-leader-caption h3 {
    font-size: 20px;
    margin-bottom: 4px;
}

.kidko-leader-role {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.kidko-leader-role--outline {
    padding: 6px 18px;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-pill, 999px);
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .03em;
}

.kidko-leader-bio p {
    margin-bottom: 20px;
    color: var(--secondary-color);
    opacity: .85;
}

.kidko-leader-bio p:last-child {
    margin-bottom: 0;
}


/* ---------- MANAGEMENT TEAM PAGE ----------
   No vendor equivalent for a rich person-card grid. Bespoke .kidko-mgmt-card
   built from already-established pieces: .kidko-gallery-chip (item 36) for
   the corner badge, .kidko-leader-role (item 39) for the designation,
   .kidko-career-card-meta/-desc (item 38) for the meta row and bio. Only the
   card shell, media frame, and phone/email buttons are new. */
.kidko-mgmt-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(229, 229, 229, 0.7);
    overflow: hidden;
}

.kidko-mgmt-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--secondary-color);
}

.kidko-mgmt-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* .kidko-review-initial normally fills a sized parent frame -- used here
   to fill the full square media frame when a member has no uploaded
   photo, same recipe as the career avatar (item 38), just bigger. */
.kidko-review-initial.kidko-mgmt-avatar {
    font-size: 40px;
}

.kidko-mgmt-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.kidko-mgmt-card-body h3 {
    margin-bottom: 4px;
    font-size: 18px;
}

.kidko-mgmt-card-body .kidko-career-card-meta {
    margin-top: 12px;
}

.kidko-mgmt-card-body .kidko-career-card-desc {
    margin-top: 4px;
}

.kidko-mgmt-card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

.kidko-mgmt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    transition: all 300ms ease;
}

.kidko-mgmt-icon-btn:hover {
    background: var(--primary-color);
    color: #fff;
}


/* ---------- INFRASTRUCTURE / FACILITIES PAGES ----------
   No vendor equivalent. The listing (.classes-section .inner-block, item 30)
   and detail page (.class-details/.class-details-sidebar/.info-list, item
   30) reuse the course pages' shape directly, since a facility card/detail
   is structurally the same as a course card/detail with different fields.
   Category tabs reuse the gallery's filter pills (item 36) and facility
   badges reuse the career card's meta-pill row (item 38). Only the image
   carousel (for facilities with multiple photos) is new markup, restyled
   from the platform's existing accessible carousel rather than a vendor
   plugin. */

/* .classes-section carries no padding in the vendor stylesheet --
   home-courses.blade.php pairs it with the vendor's own 144px .sec-pad, too
   much for a listing page's intro. Scoped padding here instead, matching
   every other listing page's intro spacing. */
.kidko-facilities-section {
    padding: 50px 0;
}

/* .class-details above already has its own top/bottom padding, but
   .kidko-related-facilities reuses the bare .classes-section class with no
   padding of its own and nothing below it but the footer, so the grid ran
   flush against whatever followed. */
.kidko-related-facilities {
    padding-bottom: 50px;
}

/* Vendor-named sections (.classes-section, .our-teachers, etc.) each give
   .sec-title a 60px bottom margin in the vendored stylesheet, but pages
   using the generic .section-container utility instead never got it,
   leaving the heading flush against following content. Scoped here to
   match the vendor's own 60px convention. */
.section-container .sec-title {
    margin-bottom: 60px;
}

/* ---------- COURSES LISTING PAGE ----------
   Reuses Kidko's own home page course-card grid (.classes-section
   .inner-block, item 30) instead of the generic Bootstrap card markup the
   listing page shipped with, so a course reads identically everywhere.
   Course-type grouping reuses the management page's department-filter
   shape (item 40) since course "type" and "department" are the same
   flat-grouped-clusters shape. */

/* .classes-section carries no padding in the vendor stylesheet (same cause
   as item 41) -- scoped padding here instead of the vendor's 144px .sec-pad. */
.kidko-courses-section {
    padding: 50px 0;
}

/* Live search box -- no vendor equivalent on a course grid, but Kidko's
   own sidebar search widget (.sidebar-search .form-group, style.css ~5777)
   has the exact rounded input + icon-button shape. Lifted into a centred
   toolbar element since this page has no sidebar. */
.kidko-course-search {
    max-width: 460px;
    margin: 0 auto 40px;
}

.kidko-course-search .form-group {
    position: relative;
    display: block;
    margin: 0;
}

.kidko-course-search .form-group input[type='search'] {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    font-size: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 10px 50px 10px 15px;
    transition: all 500ms ease;
}

.kidko-course-search .form-group input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.kidko-course-search .form-group button {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 18px;
    color: #222;
    background: transparent;
    border: 0;
    padding: 0;
    pointer-events: none;
}

.kidko-course-search .form-group input:focus + button {
    color: var(--primary-color);
}

/* ---------- COURSE / FACILITY META PILL (.info-box) TEXT FIT ----------
   Reverted per feedback -- the box looks like Kidko's original badge-graphic
   pill again, untouched vendor background/shape/color. The vendor's 70px
   image only fits one short line, and real values run longer than the
   demo's, so only the text is adjusted: a smaller font plus per-<li>
   max-width with ellipsis truncation, so long values clip with "…" instead
   of wrapping outside the pill. */
.classes-section .inner-block .lower-content .info-box li {
    font-size: 11px;
    max-width: 45%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}



.kidko-facility-carousel {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(229, 229, 229, 0.7);
}

.kidko-facility-carousel-viewport {
    overflow: hidden;
}

.kidko-facility-carousel-track {
    display: flex;
    transition: transform 450ms ease;
}

.kidko-facility-carousel-item {
    flex: 0 0 100%;
    min-width: 0;
}

.kidko-facility-carousel-item img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

/* .kidko-mgmt-icon-btn supplies the circular border/hover-fill recipe --
   only position/background need overriding to sit on top of the image. */
.kidko-facility-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #fff;
}

.kidko-facility-carousel-control--prev {
    left: 14px;
}

.kidko-facility-carousel-control--next {
    right: 14px;
}

.kidko-facility-carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.kidko-facility-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.6);
}

.kidko-facility-carousel-dot.is-active {
    width: 24px;
    background: var(--primary-color);
}


/* ---------- FOOTER: generic widget content bridge ----------
   Kidko styles footer widget bodies by fixed type class; Scholix's footer
   widgets are admin-configurable, so the body markup is generic
   (p/ul/address/form) -- bridge those here so any admin-added widget still
   reads like Kidko's design. */
.main-footer .footer-top .footer-widget > p,
.main-footer .footer-top .footer-widget > address p {
    color: #bec5d4;
    margin-bottom: 18px;
}

.main-footer .footer-top .footer-widget address {
    font-style: normal;
}

.main-footer .footer-top .footer-widget address p {
    position: relative;
    font-size: 15px;
    color: #bec5d4;
    margin-bottom: 12px;
}

.main-footer .footer-top .footer-widget ul.footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-footer .footer-top .footer-widget ul.footer-links-list li {
    margin-bottom: 14px;
}

.main-footer .footer-top .footer-widget ul.footer-links-list li:last-child {
    margin-bottom: 0;
}

.main-footer .footer-top .footer-widget ul.footer-links-list a.btn-link,
.main-footer .footer-top .footer-widget ul.footer-links-list a {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: #bec5d4;
    padding: 0;
    text-decoration: none;
    transition: all 500ms ease;
}

.main-footer .footer-top .footer-widget ul.footer-links-list a:hover {
    color: var(--primary-color);
    padding-left: 14px;
}

.main-footer .footer-top .footer-widget ul.footer-links-list ul.footer-links-list--nested {
    margin: 10px 0 0 10px;
}

.main-footer .footer-top .footer-widget form.footer-newsletter-form {
    display: flex;
    gap: 10px;
}

.main-footer .footer-top .footer-widget form.footer-newsletter-form .form-control {
    flex: 1 1 auto;
    height: 60px;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 20px;
    padding: 10px 18px;
}

.main-footer .footer-top .footer-widget form.footer-newsletter-form .btn-primary {
    height: 60px;
    width: 60px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    color: #fff;
}

.main-footer .footer-top .footer-widget form.footer-newsletter-form .btn-primary:hover {
    background: var(--secondary-color);
}

.main-footer .footer-top .footer-widget .btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    margin-right: 8px;
    transition: all 500ms ease;
}

.main-footer .footer-top .footer-widget .btn-social:hover {
    background: var(--primary-color);
}

/* ---------- HERO: secondary CTA + video mode (Kidko has no native
   video-hero slide, so this bridges it into the same visual language) ---------- */
.main-slider .theme-btn.kidko-theme-btn-alt {
    background: transparent;
    border: 2px solid #fff;
    border-radius: var(--resolved-action-radius);
    color: #fff;
    margin-left: 15px;
}

.main-slider .theme-btn.kidko-theme-btn-alt:before {
    background: #fff;
}

.main-slider .theme-btn.kidko-theme-btn-alt:hover {
    color: var(--secondary-color) !important;
}

.main-slider .slide.kidko-hero-video {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--secondary-color);
}

.main-slider .slide.kidko-hero-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-slider .slide.kidko-hero-video:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 50, .45);
}

.main-slider .slide.kidko-hero-video .container {
    position: relative;
    z-index: 2;
}

/* ---------- HEADER: logo size constraint ----------
   Kidko assumed images/logo.png was already sized correctly (~130x50) and
   applied no constraint. A tenant's uploaded logo can be any resolution --
   cap it here to match Kidko's intended proportions. */
.main-header .logo-box .logo img {
    max-height: 56px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.main-header .sticky-header .logo-box img {
    max-height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .main-header .logo-box .logo img {
        max-height: 44px;
        max-width: 150px;
    }
}

/* ---------- HEADER: nav menu alignment (Theme Customization -> Menu Alignment) ----------
   .nav-outer already carries pull-left/pull-right (Kidko's own float utility),
   swapped server-side -- no override needed there. The sticky-header clone's
   .menu-area hard-codes float: right !important with no class hook, so give it
   one: .pull-left here must out-specificity that base rule to actually flip it. */
.sticky-header .menu-area.pull-left {
    float: left !important;
}

/* ---------- HERO: height/position/text color/overlay (Home Page Settings) ----------
   Kidko's .main-slider .slide has a fixed height and hardcoded overlay/text
   color, none responsive to tenant Hero settings. The Blade template
   applies min-height/align-items/justify-content per the admin's choices;
   this block makes overlay tint and text color respond the same way. */
.main-slider .slide {
    background-position: center center;
}

.main-slider .kidko-hero-overlay-dark .slide:before,
.main-slider.kidko-hero-overlay-dark .slide:before {
    background: rgba(20, 25, 50, var(--kidko-hero-overlay-opacity, 0.45));
}

.main-slider .kidko-hero-overlay-light .slide:before,
.main-slider.kidko-hero-overlay-light .slide:before {
    background: rgba(255, 255, 255, var(--kidko-hero-overlay-opacity, 0.5));
}

.main-slider .kidko-hero-overlay-none .slide:before,
.main-slider.kidko-hero-overlay-none .slide:before {
    background: transparent;
}

.main-slider .slide.kidko-hero-text-light h3 {
    color: #fff;
}

.main-slider .slide.kidko-hero-text-light h1 {
    color: #fff;
}

.main-slider .slide.kidko-hero-text-light .text {
    color: rgba(255, 255, 255, .9);
}

.main-slider .slide .content-box {
    position: relative;
    z-index: 2;
}

/* Kidko's h3/h1/.text/.btn-box fade in via opacity:0 + a .active-triggered
   transform that only fires inside owl-carousel's .active slide class. A
   non-carousel hero has no .active class, leaving them permanently
   invisible -- force them visible there. */
section.main-slider > .slide h3,
section.main-slider > .slide h1,
section.main-slider > .slide .text,
section.main-slider > .slide .btn-box {
    opacity: 1;
    transform: none;
}

/* ---------- ABOUT: guarantee the overlapping-photo stacking order ----------
   Kidko's .image-1/.image-2 rely on implicit DOM-order stacking (no
   z-index) to keep .image-2 on top. That's fragile inside the platform's
   own admin-configurable section wrapper (flex row/col, wow.js classes)
   which can open a stacking context Kidko's static page never had to
   handle. Make the order and visibility explicit instead. */
.about-section .row,
.about-section .image-column,
.about-section .image-box {
    overflow: visible;
}

.about-section .image-box {
    isolation: isolate;
}

.about-section .image-box .image-1 {
    position: relative;
    z-index: 1;
}

.about-section .image-box .image-2 {
    z-index: 2;
}

/* Kidko's demo photo for image-1 is a tall portrait (~470x577); a tenant
   upload can be any ratio. Pin image-1 to that portrait ratio with
   object-fit: cover so the frame stays identical regardless of the
   uploaded photo -- a deliberate crop-over-distort trade-off (see
   THEMING_GUIDE.md lesson 20). */
.about-section .image-box .image-1 img {
    width: 100%;
    height: auto;
    aspect-ratio: 470 / 577;
    object-fit: cover;
    display: block;
}

/* image-2 (the overlapping accent photo) is deliberately smaller than
   image-1 -- Kidko's base rule sizes both at 100%, making them equal.
   Scaled down so it reads as an accent photo, same fixed-frame +
   object-fit: cover reasoning as image-1. */
.about-section .image-box .image-2 {
    width: 85%;
}
.about-section .image-box .image-2 img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* our-teachers photo frame -- Kidko's .image-holder relies on the photo's
   own aspect ratio with border-radius:50%, only circular when the photo
   happens to be square. Force a true 1:1 frame with aspect-ratio
   (responsive) and object-fit: cover regardless of source dimensions. */
.our-teachers .teachers-block-one .inner-box .image-holder {
    aspect-ratio: 1 / 1;
}
.our-teachers .teachers-block-one .inner-box .image-holder .image-box {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}
.our-teachers .teachers-block-one .inner-box .image-holder .image-box img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* event-section card image -- Kidko's .image-box is a fixed 220x300 frame
   but the <img> only sets width:100%, only filling it in the demo by
   coincidence. Force the image to fully cover its frame regardless of the
   source photo's shape. */
.event-block-one .inner-box .image-box img {
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CTA section text color -- Kidko hardcodes white/light-purple text since
   the section always sat on its own dark accent background. The
   admin-configurable section-background system (auto/light/alt/dark) can
   put a pale background under it, making the hardcoded text unreadable.
   Drive the text from the shell's own --home-section-text/
   --home-section-muted properties instead, which already resolve
   correctly for every mode. */
.cta-section .content-box h3,
.cta-section .content-box h1 {
    color: var(--home-section-text);
}
.cta-section .content-box .text {
    color: var(--home-section-muted);
}

/* news-section (blog/news home cards) image -- same recurring issue as the
   teachers circle and event card above: the vendor's img only sets
   width:100%, so differently-shaped admin-uploaded post images would
   render uneven card heights. Force a consistent frame ahead of time. */
.news-block-one .inner-box .image-box img {
    aspect-ratio: 380 / 240;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Blog/news home cards mix post types in one grid (Kidko's demo only ever
   shows one type) -- a small pill badge on the image tells them apart.
   .image-box already has position:relative + overflow:hidden from the
   vendor's own rule, so this positions cleanly. */
.kidko-post-type-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: var(--radius-pill, 999px);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.kidko-post-type-badge--blog {
    background: var(--primary);
}
.kidko-post-type-badge--news {
    background: #43b3d9;
}
.kidko-post-type-badge--article {
    background: var(--secondary-color);
}

/* ---------- FOOTER: logo size constraint ----------
   Same issue as the header logo above: Kidko's .footer-logo has no size
   constraint, so an uploaded logo (or the platform's wide 1610x540 default)
   renders at full native size otherwise. */
.main-footer .footer-bottom .right-content .footer-logo img {
    max-height: 50px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

@media (max-width: 767px) {
    .main-footer .footer-bottom .right-content .footer-logo img {
        max-height: 38px;
        max-width: 140px;
    }
}

/* ---------- ADMISSION: single clubbed overview page ----------
   New page (item 48) with no vendor Kidko equivalent. Reuses two existing
   vendor components for the tab/accordion switching behaviour (tabs-box
   from the shop-details product tabs, accordion-box from the FAQ page) --
   only the visual dressing below is new, since the vendor's own tab-btn
   styling is scoped under .shop-details. */
.kidko-admission-section {
    padding: 50px 0;
}
.kidko-admission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 40px;
}

/* Tab bar: same pill-button look as the vendor's own
   .shop-details .product-info-tabs .tab-btns li (style.css ~6357-6390),
   just un-scoped from .shop-details, since eight admission-section tabs
   need this styling outside a shop context. */
.kidko-admission-tabs .tab-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 40px;
    margin-bottom: 35px;
    border-bottom: 1px dashed #e9e9e9;
    list-style: none;
    padding-left: 0;
}
.kidko-admission-tabs .tab-btns li {
    font-size: 15px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #8a8d91;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 14px 24px;
    cursor: pointer;
    transition: all 500ms ease;
}
.kidko-admission-tabs .tab-btns li i {
    margin-right: 8px;
}
.kidko-admission-tabs .tab-btns li.active-btn,
.kidko-admission-tabs .tab-btns li:hover {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Rich-text admin content (eligibility/documents/process/policy/scholarship
   fields, TinyMCE-authored) needs paragraph/list spacing the vendor's
   minimal FAQ-answer rule doesn't provide, since these fields can run
   several paragraphs. */
.kidko-admission-accordion .block .content .text p,
.kidko-admission-accordion .block .content .text ul,
.kidko-admission-accordion .block .content .text ol {
    margin-bottom: 14px;
}
.kidko-admission-accordion .block .content .text p:last-child,
.kidko-admission-accordion .block .content .text ul:last-child,
.kidko-admission-accordion .block .content .text ol:last-child {
    margin-bottom: 0;
}
.kidko-admission-accordion .block .content .text ul,
.kidko-admission-accordion .block .content .text ol {
    padding-left: 20px;
}

/* Admission page Fees tab reuses the real vendor .pricing-section
   .pricing-table cards (same as fees.blade.php), nested inside a
   tabs-content panel instead of a full section -- the vendor's own section
   padding would double up with the tabs-content padding, so it's zeroed
   here. */
.kidko-admission-fee-pricing.pricing-section {
    padding: 0;
}
.kidko-admission-fee-pricing .kidko-fee-year-tabs {
    margin-bottom: 30px;
}
/* ═══ UI kit (themes/theme5/ui/*) — plugin & platform pages in the Kidko look ═══ */
.t5ui-section { padding: 100px 0; position: relative; }
.t5ui-lead { margin: 14px auto 0; max-width: 640px; }
.t5ui-page .sec-title, .t5ui-section .sec-title { margin-bottom: 44px; }
.t5ui-accordion { margin: 0 auto; max-width: 900px; }
/* The template's .acc-btn is a div; the kit uses a real button for keyboard access. */
.t5ui-accordion .acc-btn {
    background: none;
    border: 0;
    display: block;
    padding: 0 40px 0 0;
    position: relative;
    text-align: left;
    width: 100%;
}
.t5ui-accordion .acc-btn h4 { margin: 0; padding: 24px 0 26px; }
.t5ui-accordion.accordion-box .block .acc-btn .icon-outer {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .3s ease;
}
.t5ui-accordion .acc-content { padding-bottom: 28px; }