/* ================================================================
   KSJI PORTAL — CONSOLIDATED STYLESHEET
   Bootstrap 5.3 compatible

   Clean-copy notes:
   - All original selectors and declarations are preserved.
   - Repeated @layer blocks are merged into one canonical block per layer.
   - Original declaration order inside each layer is preserved.
   - Cascade priority remains: reset, tokens, base, layout, components,
     modules, utilities, overrides.
   - Unlayered rules such as @page remain unlayered.
   ================================================================ */

@layer reset, tokens, base, layout, components, modules, utilities, overrides;

/* ================================================================
   RESET LAYER
   ================================================================ */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        min-height: 100vh;
        overflow-x: hidden;
    }

    img, svg, video, canvas {
        display: block;
        max-width: 100%;
    }

    button, input, select, textarea {
        font: inherit;
    }
}

/* ================================================================
   TOKENS LAYER
   ================================================================ */
@layer tokens {
    :root {
        /* Brand */
        --ksji-navy-950: #081733;
        --ksji-navy-900: #10254f;
        --ksji-navy-800: #17366f;
        --ksji-blue-700: #234b96;
        --ksji-blue-600: #315db2;
        --ksji-gold-700: #9a6b00;
        --ksji-gold-600: #b8860b;
        --ksji-gold-500: #d4a72c;
        --ksji-gold-400: #e3bd58;
        --ksji-gold-100: #fbf3db;
        --ksji-red-700: #8d1b24;
        --ksji-red-600: #a8232d;
        --ksji-red-100: #fbe8ea;
        /* Neutrals */
        --ksji-white: #ffffff;
        --ksji-ivory: #fffdf7;
        --ksji-surface: #ffffff;
        --ksji-surface-soft: #f7f8fb;
        --ksji-border: #dde2eb;
        --ksji-border-strong: #c8d0dd;
        --ksji-text: #1e293b;
        --ksji-text-muted: #64748b;
        --ksji-text-soft: #94a3b8;
        /* States */
        --ksji-success: #157347;
        --ksji-danger: #b42318;
        --ksji-warning: #b7791f;
        --ksji-info: #0b6aa2;
        /* Typography */
        --ksji-font-sans: "Quicksand", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --ksji-font-serif: Georgia, "Times New Roman", serif;
        --ksji-fs-xs: 0.75rem;
        --ksji-fs-sm: 0.875rem;
        --ksji-fs-base: 1rem;
        --ksji-fs-lg: 1.125rem;
        --ksji-fs-xl: clamp(1.25rem, 2vw, 1.5rem);
        --ksji-fs-2xl: clamp(1.6rem, 3vw, 2.25rem);
        --ksji-fs-3xl: clamp(2rem, 5vw, 3.75rem);
        /* Spacing */
        --ksji-space-1: 0.25rem;
        --ksji-space-2: 0.5rem;
        --ksji-space-3: 0.75rem;
        --ksji-space-4: 1rem;
        --ksji-space-5: 1.5rem;
        --ksji-space-6: 2rem;
        --ksji-space-7: 3rem;
        --ksji-space-8: 4.5rem;
        /* Shape */
        --ksji-radius-sm: 0.25rem;
        --ksji-radius-md: 0.25rem;
        --ksji-radius-lg: 0.25rem;
        --ksji-radius-xl: 0.25rem;
        --ksji-radius-pill: 999px;
        /* Elevation */
        --ksji-shadow-sm: 0 2px 10px rgb(15 23 42 / 0.07);
        --ksji-shadow-md: 0 12px 32px rgb(15 23 42 / 0.10);
        --ksji-shadow-lg: 0 24px 60px rgb(15 23 42 / 0.16);
        --ksji-shadow-gold: 0 16px 42px rgb(184 134 11 / 0.22);
        /* Motion */
        --ksji-ease: cubic-bezier(.2, .8, .2, 1);
        --ksji-duration-fast: 150ms;
        --ksji-duration: 260ms;
        --ksji-duration-slow: 420ms;
        /* Bootstrap bridge */
        --bs-primary: var(--ksji-navy-800);
        --bs-primary-rgb: 23, 54, 111;
        --bs-secondary: var(--ksji-gold-600);
        --bs-secondary-rgb: 184, 134, 11;
        --bs-danger: var(--ksji-red-600);
        --bs-body-font-family: var(--ksji-font-sans);
        --bs-body-color: var(--ksji-text);
        --bs-body-bg: var(--ksji-surface-soft);
        --bs-border-color: var(--ksji-border);
        --bs-border-radius: var(--ksji-radius-md);
    }
}

/* ================================================================
   BASE LAYER
   ================================================================ */
@layer base {
    body {
        font-family: var(--ksji-font-sans);
        color: var(--ksji-text);
        background: radial-gradient(circle at 10% 0%, rgb(212 167 44 / 0.09), transparent 26rem), linear-gradient(180deg, var(--ksji-ivory), var(--ksji-surface-soft));
        line-height: 1.25;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--ksji-navy-950);
        font-weight: 750;
        line-height: 1;
        text-wrap: balance;
    }

    p {
        text-wrap: pretty;
    }

    a {
        color: var(--ksji-blue-700);
        text-decoration-thickness: .08em;
        text-underline-offset: .18em;
    }

        a:hover {
            color: var(--ksji-red-600);
        }

    ::selection {
        color: var(--ksji-white);
        background: var(--ksji-navy-800);
    }

    :focus-visible {
        outline: 3px solid rgb(212 167 44 / 0.75);
        outline-offset: 3px;
    }
}

/* ================================================================
   LAYOUT LAYER
   ================================================================ */
@layer layout {
    .ksji-page {
        min-height: 100vh;
        isolation: isolate;
    }

    .ksji-container {
        width: min(100% - 2rem, 1280px);
        margin-inline: auto;
    }

    .ksji-section {
        padding-block: clamp(3.5rem, 7vw, 7rem);
    }

    .ksji-section-sm {
        padding-block: clamp(2rem, 4vw, 4rem);
    }

    .ksji-stack > * + * {
        margin-top: var(--ksji-space-5);
    }

    .ksji-grid {
        display: grid;
        gap: clamp(1.25rem, 3vw, 2.5rem);
    }

    .ksji-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ksji-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ================================================================
   COMPONENTS LAYER
   ================================================================ */
@layer components {
    .ksji-card {
        position: relative;
        overflow: hidden;
        height: 100%;
        background: rgb(255 255 255 / 0.92);
        border: 1px solid rgb(221 226 235 / 0.9);
        border-radius: var(--ksji-radius-xl);
        box-shadow: var(--ksji-shadow-md);
        backdrop-filter: blur(12px);
    }

    .ksji-card-hover {
        transition: transform var(--ksji-duration) var(--ksji-ease), box-shadow var(--ksji-duration) var(--ksji-ease), border-color var(--ksji-duration) ease;
    }

        .ksji-card-hover:hover {
            transform: translateY(-6px);
            border-color: rgb(212 167 44 / 0.7);
            box-shadow: var(--ksji-shadow-lg);
        }

    .ksji-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        color: var(--ksji-gold-700);
        font-size: var(--ksji-fs-xs);
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

        .ksji-eyebrow::before {
            content: "";
            width: 2rem;
            height: 2px;
            background: currentColor;
        }

    .ksji-title {
        margin: 0;
        font-size: var(--ksji-fs-2xl);
    }

    .ksji-lead {
        color: var(--ksji-text-muted);
        font-size: var(--ksji-fs-lg);
        line-height: 1.8;
    }

    .ksji-divider {
        width: min(8rem, 30vw);
        height: 3px;
        margin-block: 1.5rem;
        border: 0;
        background: linear-gradient(90deg, var(--ksji-gold-600), transparent);
    }

    .ksji-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        min-height: 2.75rem;
        padding: .7rem 1.15rem;
        border: 1px solid transparent;
        border-radius: var(--ksji-radius-pill);
        font-weight: 700;
        text-decoration: none;
        transition: transform var(--ksji-duration-fast) ease, background-color var(--ksji-duration-fast) ease, border-color var(--ksji-duration-fast) ease, box-shadow var(--ksji-duration-fast) ease;
    }

        .ksji-btn:hover {
            transform: translateY(-2px);
        }

    .ksji-btn-primary {
        color: var(--ksji-white);
        background: linear-gradient(135deg, var(--ksji-navy-800), var(--ksji-blue-600));
        box-shadow: 0 10px 22px rgb(23 54 111 / 0.25);
    }

        .ksji-btn-primary:hover {
            color: var(--ksji-white);
            box-shadow: 0 14px 30px rgb(23 54 111 / 0.32);
        }

    .ksji-btn-gold {
        color: var(--ksji-navy-950);
        background: linear-gradient(135deg, var(--ksji-gold-400), var(--ksji-gold-500));
        box-shadow: var(--ksji-shadow-gold);
    }

    .ksji-btn-outline {
        color: var(--ksji-navy-800);
        background: transparent;
        border-color: var(--ksji-border-strong);
    }

        .ksji-btn-outline:hover {
            color: var(--ksji-white);
            background: var(--ksji-navy-800);
            border-color: var(--ksji-navy-800);
        }

    .ksji-icon-button {
        display: inline-grid;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
        padding: 0;
        border: 1px solid var(--ksji-border);
        border-radius: 50%;
        color: var(--ksji-navy-800);
        background: var(--ksji-white);
        box-shadow: var(--ksji-shadow-sm);
    }

    .ksji-media {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--ksji-gold-100), #eef2ff);
    }

        .ksji-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--ksji-duration-slow) var(--ksji-ease);
        }

    .ksji-card-hover:hover .ksji-media img {
        transform: scale(1.045);
    }

    /* Shared card shell used by readings, news, saints, videos,
           visitor counter and sidebar cards. */
    .ksji-home-card {
        overflow: hidden;
        margin-bottom: var(--ksji-space-4);
        background: var(--ksji-surface);
        border: 1px solid var(--ksji-border);
        border-radius: var(--ksji-radius-lg);
        box-shadow: var(--ksji-shadow-sm);
        transition: transform var(--ksji-duration) var(--ksji-ease), box-shadow var(--ksji-duration) var(--ksji-ease), border-color var(--ksji-duration-fast) ease;
    }

        .ksji-home-card:hover {
            transform: translateY(-2px);
            border-color: rgb(212 167 44 / .55);
            box-shadow: var(--ksji-shadow-md);
        }

        .ksji-home-card > .card-header {
            padding: .5rem .75rem;
            color: var(--ksji-white);
            background: linear-gradient( 90deg, var(--ksji-red-700), var(--ksji-red-600) );
            border: 0;
        }

            .ksji-home-card > .card-header h6 {
                margin: 0;
                color: inherit;
                font-size: var(--ksji-fs-base);
                font-weight: 700;
            }

    .ksji-card-link {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .ksji-card-image {
        display: block;
        width: 100%;
        height: auto;
        transition: transform var(--ksji-duration) var(--ksji-ease);
    }

    .ksji-card-link:hover .ksji-card-image {
        transform: scale(1.03);
    }

    /* Visitor counter */
    .ksji-visitor-number {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--ksji-space-3);
        text-align: center;
    }

    .ksji-visitor-label {
        margin-bottom: .35rem;
        color: var(--ksji-text-muted);
        font-size: var(--ksji-fs-sm);
        font-weight: 600;
    }

    .ksji-visitor-count {
        color: var(--ksji-red-700);
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .125rem;
    }

    /* Optional locally hosted fonts. Use root-relative URLs in CSS. */
    @font-face {
        font-family: "Tangerine";
        src: url("/ksji_RCL/fonts/Tangerine-Regular.woff2") format("woff2"), url("/ksji_RCL/fonts/Tangerine-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Tangerine";
        src: url("/ksji_RCL/fonts/Tangerine-Bold.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "BarCode";
        src: url("/ksji_RCL/fonts/CodeLogitogo.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Quicksand";
        src: url("/ksji_RCL/fonts/Quicksand-Regular.otf") format("opentype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    /* Bootstrap accordion integration */
    .accordion-button {
        --bs-accordion-btn-color: var(--ksji-navy-900);
        --bs-accordion-btn-bg: var(--ksji-surface-soft);
        --bs-accordion-active-color: var(--ksji-white);
        --bs-accordion-active-bg: var(--ksji-navy-900);
        font-weight: 700;
    }

    .accordion-body a + a {
        margin-top: .35rem;
    }

    /* Forms */
    #formContent,
    .ksji-form-card {
        position: relative;
        width: min(100%, 42rem);
        margin-inline: auto;
        overflow: hidden;
        text-align: center;
        background: var(--ksji-white);
        border: 1px solid var(--ksji-border);
        border-radius: var(--ksji-radius-lg);
        box-shadow: var(--ksji-shadow-lg);
    }

    #formFooter,
    .ksji-form-footer {
        padding: 1rem 1.25rem;
        text-align: center;
        background: var(--ksji-surface-soft);
        border-top: 1px solid var(--ksji-border);
    }

    .simple-form {
        width: min(100%, 42rem);
        margin-inline: auto;
    }

        .simple-form :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
            width: 100%;
            min-height: 2.65rem;
            padding: .6rem .8rem;
            color: var(--ksji-text);
            background: var(--ksji-white);
            border: 1px solid var(--ksji-border);
            border-left: .25rem solid var(--ksji-text-soft);
            border-radius: var(--ksji-radius-sm);
            box-shadow: var(--ksji-shadow-sm);
            transition: border-color var(--ksji-duration-fast) ease, box-shadow var(--ksji-duration-fast) ease;
        }

        .simple-form :is(input, select, textarea):required {
            border-left-color: var(--ksji-success);
        }

        .simple-form :is(input, select, textarea):invalid:not(:placeholder-shown) {
            border-left-color: var(--ksji-danger);
        }

        .simple-form :is(input, select, textarea):focus {
            border-color: var(--ksji-gold-500);
            box-shadow: 0 0 0 .2rem rgb(212 167 44 / .18);
            outline: 0;
        }

        .simple-form label {
            display: block;
            margin-bottom: .35rem;
            color: var(--ksji-text-muted);
            font-size: var(--ksji-fs-sm);
            font-weight: 700;
            text-align: left;
        }

        .simple-form :is(input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]) {
            width: 100%;
        }

        .style_Btn,
        .simple-form :is(input[type="button"], input[type="submit"], input[type="reset"]) {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.65rem;
            padding: .65rem 1rem;
            color: var(--ksji-white);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .035em;
            background: linear-gradient(135deg, var(--ksji-navy-800), var(--ksji-blue-600));
            border: 0;
            border-radius: var(--ksji-radius-sm);
            box-shadow: 0 10px 24px rgb(23 54 111 / .22);
            cursor: pointer;
            transition: transform var(--ksji-duration-fast) ease, box-shadow var(--ksji-duration-fast) ease;
        }

            .style_Btn:hover,
            .simple-form :is(input[type="button"], input[type="submit"], input[type="reset"]):hover {
                transform: translateY(-2px);
                box-shadow: 0 14px 30px rgb(23 54 111 / .3);
            }

    /* ================================================================
       KSJI FOOTER
       Compact navy footer with four-column desktop layout
       ================================================================ */

    /* ----------------------------------------------------------------
       Footer foundation
       ---------------------------------------------------------------- */

    .ksji-footer {
        width: 100%;
        color: var(--ksji-white);
        background: var(--ksji-navy-950);
    }

        .ksji-footer a {
            color: var(--ksji-white);
            text-decoration: none;
        }

            .ksji-footer a:hover,
            .ksji-footer a:focus {
                color: var(--ksji-gold-400);
            }


    /* ----------------------------------------------------------------
       Main footer area
       ---------------------------------------------------------------- */

    .ksji-footer-main {
        padding: 1rem 1.25rem;
    }

    .ksji-footer-grid {
        display: grid;
        grid-template-columns: minmax(15rem, 1.15fr) minmax(15rem, 1.25fr) minmax(15rem, 1.25fr) minmax(14rem, .95fr);
        gap: 2rem;
        width: min(100%, 1280px);
        margin-inline: auto;
        align-items: start;
    }


    /* ----------------------------------------------------------------
       Shared footer sections
       ---------------------------------------------------------------- */

    .ksji-footer-section {
        min-width: 0;
    }

    .ksji-footer-title {
        margin: 0 0 .55rem;
        color: var(--ksji-white);
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .ksji-footer-subtitle {
        margin: .85rem 0 .4rem;
        color: var(--ksji-white);
        font-size: .86rem;
        font-weight: 800;
    }


    /* ----------------------------------------------------------------
       About KSJI
       ---------------------------------------------------------------- */

    .ksji-footer-brand {
        display: grid;
        grid-template-columns: 4.25rem minmax(0, 1fr);
        gap: .85rem;
        align-items: center;
    }

    .ksji-footer-logo-link {
        display: block;
    }

    .ksji-footer-logo {
        display: block;
        width: 4rem;
        height: 4rem;
        object-fit: contain;
    }

    .ksji-footer-brand-content {
        min-width: 0;
    }

    .ksji-footer-description {
        margin: 0;
        color: rgb(255 255 255 / .92);
        font-size: .72rem;
        line-height: 1.55;
    }


    /* ----------------------------------------------------------------
       Social media
       Hidden by default to match the supplied target
       ---------------------------------------------------------------- */

    .ksji-footer-social {
        display: none;
    }

    .ksji-footer-social-link {
        display: inline-grid;
        width: 1.75rem;
        height: 1.75rem;
        place-items: center;
        color: var(--ksji-white);
        border: 1px solid rgb(255 255 255 / .22);
        border-radius: 50%;
    }


    /* ----------------------------------------------------------------
       Featured links
       ---------------------------------------------------------------- */
    .ksji-footer-link-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem;
        align-items: start;
    }

    .ksji-footer-links {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
    }

        .ksji-footer-links li {
            margin: 0;
            padding: 0;
        }

            .ksji-footer-links li + li {
                margin-top: .15rem;
            }

        .ksji-footer-links a {
            display: block;
            padding: .125rem 0;
            color: var(--ksji-white);
            font-size: .5rem;
            line-height: 1;
            text-align: left;
        }

    .ksji-footer-link-columns .ksji-footer-links:nth-child(2) a::before {
        content: "›";
        display: inline-block;
        width: .6rem;
        margin-right: .15rem;
        color: var(--ksji-white);
    }


    /* ----------------------------------------------------------------
       Contact and information
       ---------------------------------------------------------------- */

    .ksji-footer-contact {
        margin: 0;
        font-style: normal;
    }

    .ksji-footer-contact-link {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .72rem;
    }

        .ksji-footer-contact-link i {
            display: none;
        }


    /* ----------------------------------------------------------------
       Newsletter
       ---------------------------------------------------------------- */

    .ksji-footer-newsletter {
        margin-top: .7rem;
    }

    .ksji-footer-newsletter-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 2rem;
        gap: .4rem;
        align-items: center;
        width: 100%;
    }

    .ksji-footer-newsletter-input {
        width: 100%;
        min-width: 0;
        height: 2rem;
        padding: .35rem .55rem;
        color: var(--ksji-text);
        font-size: .7rem;
        line-height: 1;
        background: var(--ksji-white);
        border: 1px solid var(--ksji-border);
        border-radius: .3rem;
        outline: 0;
    }

        .ksji-footer-newsletter-input::placeholder {
            color: var(--ksji-text-muted);
        }

        .ksji-footer-newsletter-input:focus {
            border-color: var(--ksji-gold-500);
            box-shadow: 0 0 0 .15rem rgb(212 167 44 / .18);
        }

    .ksji-footer-newsletter-button {
        display: grid;
        width: 2rem;
        height: 2rem;
        place-items: center;
        padding: 0;
        color: var(--ksji-white);
        background: rgb(255 255 255 / .14);
        border: 0;
        border-radius: .3rem;
        cursor: pointer;
    }

        .ksji-footer-newsletter-button:hover,
        .ksji-footer-newsletter-button:focus {
            color: var(--ksji-navy-950);
            background: var(--ksji-gold-400);
        }

    /* =========================================================
       KSJI CAROUSEL
       ========================================================= */

    .ksji-carousel {
        --ksji-carousel-image-height: 50vh;
        --ksji-carousel-image-min-height: 320px;
        --ksji-carousel-description-height: 60px;
        --ksji-carousel-indicator-height: 10px;
        position: relative;
        width: 100%;
        overflow: hidden;
        background-color: #fff;
    }


        /* =========================================================
       CAROUSEL SLIDES
       ========================================================= */

        .ksji-carousel .carousel-inner {
            width: 100%;
        }

        .ksji-carousel .carousel-item {
            width: 100%;
        }


    /* =========================================================
       LAYER 1: IMAGE
       ========================================================= */

    .ksji-carousel-image-layer {
        position: relative;
        width: 100%;
        height: var(--ksji-carousel-image-height);
        min-height: var(--ksji-carousel-image-min-height);
        overflow: hidden;
        background-color: #071a3d;
    }

    .ksji-carousel-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }


    /* Use this modifier only when an image must remain fully visible */

    .ksji-carousel-image--contain {
        object-fit: contain;
        background-color: #000;
    }


    /* =========================================================
       LAYER 2: DESCRIPTION
       ========================================================= */

    .ksji-carousel-description {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: var(--ksji-carousel-description-height);
        padding: .35rem 4rem;
        color: #081a3b;
        text-align: center;
        background-color: rgba(255, 255, 255, .50);
        border-top: 1px solid rgba(255, 255, 255, .75);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

        .ksji-carousel-description h6 {
            margin: 0;
            font-size: .95rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .ksji-carousel-description p {
            width: 100%;
            margin: .15rem 0 0;
            overflow: hidden;
            font-size: .78rem;
            line-height: 1.2;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


    /* =========================================================
       PREVIOUS AND NEXT CONTROLS
       Restricted to the image layer
       ========================================================= */

    .ksji-carousel-control {
        top: 0;
        bottom: auto;
        width: 7%;
        height: var(--ksji-carousel-image-height);
        min-height: var(--ksji-carousel-image-min-height);
        opacity: .85;
    }

        .ksji-carousel-control:hover,
        .ksji-carousel-control:focus {
            opacity: 1;
        }

        .ksji-carousel-control .carousel-control-prev-icon,
        .ksji-carousel-control .carousel-control-next-icon {
            width: 2rem;
            height: 2rem;
            padding: 1.25rem;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, .35);
            background-size: 55%;
        }


    /* =========================================================
       LAYER 3: INDICATOR BAR
       ========================================================= */

    .ksji-carousel-indicators {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        align-items: stretch;
        width: 100%;
        height: var(--ksji-carousel-indicator-height);
        margin: 0;
        background-color: #071a3d;
    }

        .ksji-carousel-indicators [data-bs-target] {
            flex: 1 1 0;
            width: auto;
            height: 100%;
            margin: 0;
            border: 0;
            border-right: 1px solid rgba(255, 255, 255, .25);
            border-radius: 0;
            background-color: rgba(255, 255, 255, .35);
            opacity: 1;
            transition: background-color .25s ease, opacity .25s ease;
        }

            .ksji-carousel-indicators [data-bs-target]:last-child {
                border-right: 0;
            }

        .ksji-carousel-indicators .active {
            background-color: #d4af37;
        }

    /* ----------------------------------------------------------------
       Footer gallery
       ---------------------------------------------------------------- */

    .ksji-footer-gallery {
        display: grid;
        grid-template-columns: repeat(3, 3rem);
        gap: .45rem 1.8rem;
        align-items: center;
    }

    .ksji-footer-gallery-link {
        display: block;
        width: 3rem;
        height: 3rem;
        overflow: hidden;
        background: var(--ksji-white);
        border: 2px solid var(--ksji-white);
        border-radius: .35rem;
    }

        .ksji-footer-gallery-link img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    /* ----------------------------------------------------------------
       Footer legal bar
       ---------------------------------------------------------------- */

    .ksji-footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .6rem 1.25rem;
        border-top: 1px solid rgb(255 255 255 / .12);
    }

    .ksji-footer-copyright {
        flex: 1;
        margin: 0;
        color: rgb(255 255 255 / .72);
        font-size: .68rem;
        line-height: 1;
        white-space: nowrap;
    }

    .ksji-footer-legal {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
        margin: 0;
        white-space: nowrap;
    }

        .ksji-footer-legal a {
            color: rgb(255 255 255 / .72);
            font-size: .5rem;
            line-height: 1;
            text-decoration: none;
        }

            .ksji-footer-legal a:hover {
                color: var(--ksji-gold-400);
            }



    /* Legacy boxes */
    .shadow_Box,
    .box_Div,
    .div_Header,
    .div_Panel {
        border-radius: var(--ksji-radius-md);
        box-shadow: var(--ksji-shadow-sm);
    }

    .shadow_Box {
        text-align: center;
    }

    .box_Div,
    .div_Panel {
        padding: .75rem;
        background: var(--ksji-white);
        border: 1px solid var(--ksji-border);
    }

    .div_Header {
        padding: .75rem 1rem;
        color: var(--ksji-white);
        text-align: center;
        background: linear-gradient(135deg, var(--ksji-navy-900), var(--ksji-blue-700));
        border: 1px solid rgb(255 255 255 / .15);
    }

    .div_Panel {
        overflow: auto;
    }

    .div_wrapper,
    .wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .wrapper {
        flex-direction: column;
    }

    .centerIt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .failed,
    .success {
        padding: .75rem 1rem;
        color: var(--ksji-white);
        border-radius: var(--ksji-radius-sm);
    }

    .failed {
        background: var(--ksji-danger);
    }

    .success {
        background: var(--ksji-success);
    }

    .alertData {
        color: var(--ksji-white);
        letter-spacing: .03em;
    }

    .closebtn {
        margin-left: auto;
        color: currentColor;
        cursor: pointer;
        transition: opacity var(--ksji-duration-fast) ease;
    }

        .closebtn:hover {
            opacity: .65;
        }

    .mod_Label {
        text-align: center;
    }

    /* Shadows retained under clearer implementation */
    .effect1 {
        box-shadow: 0 .625rem .375rem -.375rem rgb(15 23 42 / .45);
    }

    .effect6,
    .effect7,
    .effect8 {
        box-shadow: 0 1px .25rem rgb(0 0 0 / .3), 0 0 2.5rem rgb(0 0 0 / .08) inset;
    }

    .effect2,
    .effect3,
    .effect4,
    .effect5,
    .effect6,
    .effect7,
    .effect8 {
        position: relative;
        isolation: isolate;
    }

        .effect2::before,
        .effect2::after,
        .effect3::before,
        .effect4::after,
        .effect5::before,
        .effect5::after {
            content: "";
            position: absolute;
            z-index: -1;
            top: 78%;
            bottom: .8rem;
            width: 46%;
            max-width: 18rem;
            background: rgb(15 23 42 / .35);
            box-shadow: 0 1.2rem 1rem rgb(15 23 42 / .35);
        }

        .effect2::before,
        .effect3::before,
        .effect5::before {
            left: .75rem;
            transform: rotate(-3deg);
        }

        .effect2::after,
        .effect4::after,
        .effect5::after {
            right: .75rem;
            transform: rotate(3deg);
        }

    /* Navigation tabs */
    .nav-tabs .nav-link {
        color: var(--ksji-text-muted);
        font-weight: 650;
        background: transparent;
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
    }

        .nav-tabs .nav-link:hover {
            color: var(--ksji-navy-800);
        }

        .nav-tabs .nav-link.active {
            color: var(--ksji-navy-800);
            font-weight: 800;
            border-bottom-color: var(--ksji-gold-500);
        }

    /* Navbar/dropdown correction */
    .navbar .nav-link {
        padding: .75rem 1rem;
    }

    .navbar-collapse {
        display: flex;
        justify-content: center; /* Horizontal */
        align-items: center; /* Vertical */
    }

    .navbar-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .navbar-nav .nav-item {
            display: flex;
            align-items: center;
        }

    .navbar > .container-fluid {
        display: flex;
        align-items: center;
    }

    .ksji-nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 42px; /* or 44px */
        padding: 0 1rem;
        text-align: center;
    }

    .dropdown-menu .dropdown-item {
        display: block;
        padding: .4rem 1rem !important;
        white-space: nowrap;
    }

    .navbar.navbar-dark .nav-link {
        color: var(--ksji-white);
    }

        .navbar.navbar-dark .nav-link:hover,
        .navbar.navbar-dark .nav-link:focus {
            color: var(--ksji-white);
            opacity: .85;
        }

    /* ==========================================
       KSJI Sidebar Card
    ========================================== */

    .ksji-sidebar-card {
        width: 100%;
    }

    /* ==========================================
       Header
    ========================================== */

    .ksji-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .65rem;
        min-height: 2rem;
        padding: .15rem .15rem;
        color: var(--ksji-white);
        background: linear-gradient( 90deg, var(--ksji-red-700), var(--ksji-red-600) );
        border: 0;
    }

    .ksji-sidebar-logo {
        display: block;
        width: 2em;
        height: 2em;
        flex: 0 0 2em;
        object-fit: contain;
    }

    .ksji-sidebar-title {
        margin: 0;
        color: var(--ksji-white);
        font-size: .75rem;
        font-weight: 700;
        line-height: 1;
    }

    /* ==========================================
       Body and Navigation
    ========================================== */

    .ksji-sidebar-body {
        padding: .15rem;
    }

    .ksji-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }

    .ksji-sidebar-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        width: 100%;
        min-height: 36px;
        padding: .45rem .65rem;
        color: var(--ksji-text);
        font-size: .86rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        border-radius: .35rem;
        transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
    }

        .ksji-sidebar-link:hover {
            color: var(--ksji-red-700);
            background: rgb(141 27 36 / .08);
        }

        .ksji-sidebar-link.active {
            color: var(--ksji-white);
            background: var(--ksji-red-700);
        }

    .ksji-sidebar-link-content {
        display: flex;
        align-items: center;
        gap: .55rem;
        min-width: 0;
    }

        .ksji-sidebar-link-content span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .ksji-sidebar-link i {
        width: 16px;
        flex: 0 0 16px;
        text-align: center;
    }

    /* ==========================================
       Collapse Indicator
    ========================================== */

    .ksji-sidebar-chevron {
        transition: transform .2s ease;
    }

    .ksji-sidebar-parent[aria-expanded="true"] .ksji-sidebar-chevron {
        transform: rotate(180deg);
    }

    /* ==========================================
       Child Links
    ========================================== */

    .ksji-sidebar-collapse {
        margin: .1rem 0 .2rem;
        padding-left: .5rem;
    }

    .ksji-sidebar-child {
        min-height: 32px;
        padding: .35rem .65rem .35rem 1rem;
        font-size: .82rem;
        font-weight: 500;
        border-left: 2px solid rgb(141 27 36 / .18);
        border-radius: 0 .35rem .35rem 0;
    }

        .ksji-sidebar-child:hover {
            padding-left: 1.15rem;
        }

        .ksji-sidebar-child.active {
            color: var(--ksji-red-700);
            background: rgb(141 27 36 / .10);
            border-left-color: var(--ksji-red-700);
        }

    /* ==========================================
       External Link
    ========================================== */

    .ksji-sidebar-external {
        margin-top: .25rem;
        color: var(--ksji-red-700);
        border-top: 1px solid rgb(15 23 42 / .08);
        border-radius: 0;
    }

        .ksji-sidebar-external:hover {
            background: rgb(141 27 36 / .08);
        }



    /* ==========================================
       Footer
    ========================================== */
    .ksji-sidebar-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .45rem .65rem;
        color: var(--ksji-text-muted);
        background: var(--ksji-surface-soft);
        font-size: .76rem;
        font-weight: 600;
        text-align: center;
        border-top: 1px solid rgb(15 23 42 / .08);
    }

    /* ==========================================
       Mobile
    ========================================== */

    @media (max-width: 575.98px) {
        .ksji-sidebar-header {
            min-height: 48px;
        }

        .ksji-sidebar-logo {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
        }

        .ksji-sidebar-title {
            font-size: .9rem;
        }
    }


    /* Carousel */
    .carousel-description {
        min-height: 4.5rem;
        padding: .75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ksji-white);
        text-align: center;
        font-size: var(--ksji-fs-sm);
        background: rgb(8 23 51 / .82);
        backdrop-filter: blur(8px);
    }

    /* Payslip */
    :root {
        --imo-green: #1c7c3a;
        --imo-green-2: #155f2d;
    }

    .payslip-header .brand-logo {
        width: 3.5rem;
        height: 3.5rem;
        object-fit: contain;
    }

    .payslip-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .85rem 1rem;
        border-bottom: 4px solid #e8f1ec;
    }

        .payslip-brand .brand-title {
            font-weight: 800;
            letter-spacing: .02em;
        }

    .payslip-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .5rem 1rem;
        color: var(--ksji-white);
        font-weight: 700;
        background: var(--imo-green);
    }

        .payslip-strip .year-badge {
            padding: .15rem .6rem;
            color: var(--imo-green-2);
            font-weight: 800;
            background: var(--ksji-white);
            border-radius: var(--ksji-radius-pill);
        }

    .payslip-card {
        display: grid;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) 140px;
        gap: 1rem;
        align-items: start;
        padding: 1rem;
    }

        .payslip-card .profile {
            display: flex;
            gap: .75rem;
            align-items: center;
        }

            .payslip-card .profile img {
                width: 4.5rem;
                height: 4.5rem;
                object-fit: cover;
                border: 2px solid #e8f1ec;
                border-radius: .5rem;
            }

        .payslip-card .info th {
            width: 10rem;
        }

        .payslip-card .info :is(th, td) {
            padding: .35rem .5rem;
            vertical-align: top;
        }

        .payslip-card .qr {
            display: flex;
            justify-content: flex-start;
        }

            .payslip-card .qr .qrbox {
                width: 7rem;
                height: 7rem;
                display: grid;
                place-items: center;
                background: #fafdfb;
                border: 1px dashed #cfe6d7;
                border-radius: .5rem;
            }

    /* Paper previews */
    .a4-portrait,
    .a4-landscape {
        max-width: 100%;
        margin-inline: auto;
        padding: 20mm;
        background: var(--ksji-white);
        box-shadow: var(--ksji-shadow-sm);
    }

    .a4-portrait {
        width: 210mm;
        min-height: 297mm;
    }

    .a4-landscape {
        width: 297mm;
        min-height: 210mm;
    }

    /* Shared utilities */
    .scrollable-content {
        max-height: 50vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .vh-100-minus-nav {
        min-height: 100vh;
    }

    .btn-outline-white {
        color: var(--ksji-white);
        border-color: currentColor;
    }

        .btn-outline-white:hover {
            color: var(--ksji-navy-950);
            background: var(--ksji-white);
            border-color: var(--ksji-white);
        }

    .simple-form hr {
        width: 90%;
        margin: 2px auto;
        border-color: powderblue;
    }

    .simple-form :is(table, th, td) {
        border: 0.1vw dotted powderblue;
    }

    .simple-form img {
        margin-inline: auto;
    }

        .simple-form img.Layout {
            width: 95%;
            height: 95%;
        }

    .simple-form .img_header {
        width: 80%;
        height: auto;
    }

    .simple-form .imgshadow {
        margin-top: 0.313em;
        padding: 0.25em;
        border: 1px solid #777;
        box-shadow: 0 0 0.313em #666;
    }

    .simple-form .img_left {
        float: left;
        width: auto;
        margin: 0.313em 0.938em 0.313em 0.313em;
    }

    .simple-form .img-circle {
        border-radius: 50%;
    }

    .simple-form .centerIt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        text-align: center;
    }

    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        display: inline-block;
        color: var(--ksji-white);
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        background: linear-gradient(135deg, var(--ksji-navy-800), var(--ksji-blue-600));
        border: 0;
        border-radius: var(--ksji-radius-sm);
        box-shadow: 0 10px 30px rgb(23 54 111 / 0.22);
        transition: transform var(--ksji-duration-fast) ease, box-shadow var(--ksji-duration-fast) ease;
    }

        input[type="button"]:hover,
        input[type="submit"]:hover,
        input[type="reset"]:hover {
            box-shadow: 0 14px 30px rgb(23 54 111 / 0.3);
        }

        input[type="button"]:active,
        input[type="submit"]:active,
        input[type="reset"]:active {
            transform: scale(0.95);
        }

    input[type="text"],
    input[type="password"] {
        display: inline-block;
        color: #0d0d0d;
        text-align: center;
        text-decoration: none;
        background-color: #f6f6f6;
        border: 2px solid #f6f6f6;
        border-radius: var(--ksji-radius-sm);
        transition: border-color var(--ksji-duration) ease, box-shadow var(--ksji-duration) ease;
    }

    div.container4 {
        position: relative;
    }

        div.container4 p {
            position: absolute;
            background: yellow;
            transform: translate(-50%, -50%);
        }

    .effect6::before,
    .effect6::after,
    .effect7::before,
    .effect7::after,
    .effect8::before,
    .effect8::after {
        content: "";
        position: absolute;
        z-index: -1;
        box-shadow: 0 0 1.25em rgb(0 0 0 / 0.8);
    }

    .effect6::before,
    .effect6::after {
        inset: 50% 0.625em 0;
        border-radius: 100px / 0.625em;
    }

    .effect7::before,
    .effect7::after {
        inset: 0 0.625em;
        border-radius: 6.25em / 0.625em;
    }

    .effect8::before,
    .effect8::after {
        inset: 0.625em 0;
        border-radius: 100px / 0.625em;
    }

    .effect6::after,
    .effect7::after,
    .effect8::after {
        right: 0.625em;
        left: auto;
        transform: skew(8deg) rotate(3deg);
    }
}

/* ================================================================
   MODULES LAYER
   ================================================================ */
@layer modules {
    .ksji-home-hero {
        position: relative;
        overflow: hidden;
        color: var(--ksji-white);
        background: linear-gradient(120deg, rgb(8 23 51 / 0.96), rgb(23 54 111 / 0.90)), radial-gradient(circle at 75% 25%, rgb(212 167 44 / 0.32), transparent 24rem);
    }

        .ksji-home-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg, transparent 0 48%, rgb(255 255 255 / 0.035) 48% 50%, transparent 50% 100%);
            background-size: 4rem 4rem;
            mask-image: linear-gradient(to bottom, black, transparent 85%);
        }

    .ksji-home-hero-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
        gap: clamp(2rem, 6vw, 5rem);
        align-items: center;
        min-height: clamp(34rem, 75vh, 48rem);
        padding-block: clamp(4rem, 9vw, 8rem);
    }

    .ksji-home-hero h1 {
        max-width: 14ch;
        margin: 0;
        color: var(--ksji-white);
        font-size: var(--ksji-fs-3xl);
        font-weight: 800;
        letter-spacing: -.035em;
    }

    .ksji-home-hero p {
        max-width: 64ch;
        color: rgb(255 255 255 / 0.82);
        font-size: var(--ksji-fs-lg);
    }

    .ksji-home-emblem {
        width: min(100%, 22rem);
        margin-inline: auto;
        filter: drop-shadow(0 24px 50px rgb(0 0 0 / 0.32));
    }

    .ksji-welcome-list {
        display: grid;
        gap: clamp(1.75rem, 4vw, 3rem);
    }

    .ksji-welcome-card {
        display: grid;
        grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr);
        min-height: 30rem;
    }

        .ksji-welcome-card:nth-child(even) {
            grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
        }

            .ksji-welcome-card:nth-child(even) .ksji-welcome-portrait {
                order: 2;
            }

    .ksji-welcome-portrait {
        position: relative;
        min-height: 24rem;
        display: grid;
        place-items: end center;
        overflow: hidden;
        background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.9), transparent 45%), linear-gradient(145deg, var(--ksji-gold-100), #eef2ff);
    }

        .ksji-welcome-portrait::after {
            content: "";
            position: absolute;
            inset: auto 8% 0;
            height: 1.25rem;
            border-radius: 50%;
            background: rgb(15 23 42 / 0.16);
            filter: blur(12px);
        }

        .ksji-welcome-portrait img {
            position: relative;
            z-index: 1;
            width: min(88%, 22rem);
            max-height: 27rem;
            object-fit: contain;
            object-position: center bottom;
        }

    .ksji-welcome-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(2rem, 5vw, 4.5rem);
    }

    .ksji-welcome-role {
        margin-bottom: .75rem;
        color: var(--ksji-red-600);
        font-size: var(--ksji-fs-sm);
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .ksji-welcome-content h2 {
        margin-bottom: 1.25rem;
        font-size: var(--ksji-fs-2xl);
    }

    .ksji-welcome-content p {
        color: var(--ksji-text-muted);
        font-size: 1.02rem;
        line-height: 1.85;
    }

    .ksji-quote {
        position: relative;
        margin: 1.5rem 0 0;
        padding: 1.15rem 1.25rem 1.15rem 1.5rem;
        color: var(--ksji-navy-900);
        background: linear-gradient(90deg, var(--ksji-gold-100), transparent);
        border-left: 4px solid var(--ksji-gold-500);
        border-radius: 0 var(--ksji-radius-md) var(--ksji-radius-md) 0;
        font-family: var(--ksji-font-serif);
        font-size: var(--ksji-fs-lg);
        font-style: italic;
    }

    /* Existing classes bridged to the new system */
    .eshop-header,
    .eshop-footer,
    .tv-header,
    .schedule-header,
    .radio-frequency-banner {
        color: var(--ksji-white);
        background: linear-gradient(135deg, var(--ksji-navy-800), var(--ksji-blue-600));
    }

    .eshop-card,
    .tv-card,
    .radio-card,
    .blog-card,
    .harbinger-article-card,
    .order-content-card,
    .order-sidebar-card,
    .order-stat-card,
    .church-card {
        border: 1px solid var(--ksji-border);
        border-radius: var(--ksji-radius-lg);
        background: var(--ksji-surface);
        box-shadow: var(--ksji-shadow-sm);
    }

    .eshop-card,
    .tv-card,
    .radio-card,
    .blog-card,
    .harbinger-article-card,
    .order-stat-card,
    .church-card {
        transition: transform var(--ksji-duration) var(--ksji-ease), box-shadow var(--ksji-duration) var(--ksji-ease), border-color var(--ksji-duration) ease;
    }

        .eshop-card:hover,
        .tv-card:hover,
        .radio-card:hover,
        .blog-card:hover,
        .harbinger-article-card:hover,
        .order-stat-card:hover,
        .church-card:hover {
            transform: translateY(-5px);
            border-color: rgb(212 167 44 / .55);
            box-shadow: var(--ksji-shadow-md) !important;
        }

    .product-price,
    .cart-item-price,
    .cart-total-amount,
    .schedule-day-name,
    .schedule-time,
    .zoom-price {
        color: var(--ksji-blue-700);
    }

    .featured-badge,
    .tv-badge-featured,
    .radio-badge-featured,
    .blog-featured-badge {
        color: var(--ksji-navy-950);
        background: linear-gradient(135deg, var(--ksji-gold-400), var(--ksji-gold-500));
        box-shadow: 0 4px 12px rgb(212 167 44 / .25);
    }

    .div_About,
    .div_Citizens,
    .div_Location,
    .div_Help {
        width: 95%;
        height: 160px;
    }

    .div_Government {
        height: 160px;
        padding: 0.2vw;
    }

    .div_Instagram {
        width: 95%;
        max-height: 360px;
    }

    .div_Businesses,
    .div_Residents {
        height: 80px;
        padding: 0.4vw;
    }

    .div_Facebook,
    .div_Twitter {
        width: 95%;
        height: 220px;
    }

    .div_News {
        width: 98%;
        height: 100px;
    }

    .div_Online {
        height: auto;
        padding: 0.4vw;
    }

    .div_Services {
        height: 120px;
        padding: 0.1vw;
    }

    .hd_About,
    .hd_Citizens,
    .hd_Instagram,
    .hd_Facebook,
    .hd_Location,
    .hd_Help {
        width: 95%;
        min-height: 30px;
    }

    .hd_Government,
    .hd_Businesses,
    .hd_Online,
    .hd_Residents,
    .hd_Services,
    .hd_Twitter {
        width: 100%;
        min-height: 20px;
    }

    .hd_News {
        width: 98%;
        min-height: 20px;
    }

    .mapouter,
    .gmap_canvas {
        width: 100%;
        height: 200px;
    }
}

/* ================================================================
   UTILITIES LAYER
   ================================================================ */
@layer utilities {
    .ksji-text-muted {
        color: var(--ksji-text-muted) !important;
    }

    .ksji-text-gold {
        color: var(--ksji-gold-600) !important;
    }

    .ksji-text-navy {
        color: var(--ksji-navy-900) !important;
    }

    .ksji-bg-soft {
        background: var(--ksji-surface-soft) !important;
    }

    .ksji-rounded {
        border-radius: var(--ksji-radius-lg) !important;
    }

    .ksji-shadow {
        box-shadow: var(--ksji-shadow-md) !important;
    }

    .ksji-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .font-tangerine {
        font-family: "Tangerine", cursive !important;
    }

    .font-barcode {
        font-family: "BarCode", monospace !important;
    }

    .font-quicksand {
        font-family: "Quicksand", var(--ksji-font-sans) !important;
    }

    .text_padding {
        padding: 0.25rem 0.75rem;
    }

    .container_padding {
        padding: clamp(1rem, 3vw, 2.5rem);
    }

    .scroll {
        max-height: 30vh;
        overflow-y: auto;
    }

    .circular--portrait,
    .circular--landscape {
        width: 6.25rem;
        height: 6.25rem;
        overflow: hidden;
        border-radius: 50%;
    }

        .circular--portrait img,
        .circular--landscape img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .grid-container {
        display: grid;
        grid-template-columns: 0.2fr 0.8fr;
        gap: 2px;
        width: 100%;
    }

    .float-container {
        padding: 4vw;
    }

    .float-child {
        float: left;
        padding: 4vw;
    }

    .slideshow-container {
        position: relative;
        max-width: 1000px;
        margin-inline: auto;
    }

    .numbertext {
        position: absolute;
        top: 0;
        padding: 8px 12px;
        font-size: 12px;
    }

    .dot {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-inline: 2px;
        background-color: #bbb;
        border-radius: 50%;
        transition: background-color 0.6s ease;
    }

    .pay_Naira {
        width: 1rem;
        height: 1rem;
    }

    .my_Watermark {
        width: 50vh;
        height: 50vh;
    }

    .th_text {
        padding: 0.05in;
        font-size: 14px;
    }

    .td_text {
        padding: 0.01in;
        font-size: 12px;
    }

    .style_Link {
        font-size: 0.8rem;
    }

    .qck_Links {
        font-size: 14px;
    }
}

/* ================================================================
   OVERRIDES LAYER
   ================================================================ */
@layer overrides {
    @media (max-width: 991.98px) {
        .ksji-home-hero-inner,
        .ksji-welcome-card,
        .ksji-welcome-card:nth-child(even) {
            grid-template-columns: 1fr;
        }

        .ksji-home-hero-inner {
            text-align: center;
        }

        .ksji-home-hero h1,
        .ksji-home-hero p {
            margin-inline: auto;
        }

        .ksji-welcome-card:nth-child(even) .ksji-welcome-portrait {
            order: 0;
        }

        .ksji-grid-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .ksji-container {
            width: min(100% - 1.25rem, 1280px);
        }

        .ksji-grid-2,
        .ksji-grid-3 {
            grid-template-columns: 1fr;
        }

        .ksji-welcome-content {
            padding: 1.5rem;
        }

        .ksji-welcome-portrait {
            min-height: 20rem;
        }

        .ksji-home-hero-inner {
            min-height: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    @media print {
        body {
            background: #fff !important;
        }

        .ksji-btn, .order-nav, .live-indicator {
            display: none !important;
        }

        .ksji-card {
            box-shadow: none !important;
        }
    }

    @keyframes ksji-fade-in-down {
        from {
            opacity: 0;
            transform: translate3d(0, -2rem, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes ksji-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes ksji-slide-in-right {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes ksji-zoom-in {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .fadeInDown {
        animation: ksji-fade-in-down 0.65s var(--ksji-ease) both;
    }

    .fadeIn {
        opacity: 0;
        animation: ksji-fade-in 0.7s ease forwards;
    }

        .fadeIn.first {
            animation-delay: 0.2s;
        }

        .fadeIn.second {
            animation-delay: 0.35s;
        }

        .fadeIn.third {
            animation-delay: 0.5s;
        }

        .fadeIn.fourth {
            animation-delay: 0.65s;
        }

    .underlineHover {
        position: relative;
    }

        .underlineHover::after {
            content: "";
            position: absolute;
            bottom: -0.2rem;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--ksji-gold-500);
            transition: width var(--ksji-duration-fast) ease;
        }

        .underlineHover:hover {
            color: #0d0d0d;
        }

            .underlineHover:hover::after {
                width: 100%;
            }

    /* ================================================================
           TABLET
           768px to 991.98px
           ================================================================ */

    @media (min-width: 768px) and (max-width: 991.98px) {

        .label {
            top: 19vmin;
            left: 46%;
            font-size: 1.25vh;
        }

        .my_Watermark {
            top: 50%;
            left: 55%;
        }

        .text {
            bottom: 8px;
            width: 100%;
            padding: 8px 12px;
            font-size: 1.25vh;
        }

        .input,
        .btn {
            min-height: 3.17vh;
            max-height: 4.44vh;
            margin: .25vh;
            padding: .25vh .64vh;
            font-size: 1.25vh;
            border-radius: .64vh;
        }

        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        input[type="text"],
        input[type="password"] {
            min-width: 85%;
            margin: .64vh 1.25vh;
            padding: .64vh 1vh;
        }

        .wrapper {
            width: 100%;
            min-height: 100%;
            padding: 2.53vh;
        }

        .closebtn {
            margin-left: 15px;
        }

        .style_Btn {
            width: 8vw;
            padding: .25vh;
            border: 0;
        }

        .failed,
        .success {
            margin-bottom: .64vh;
            padding: .64vh;
            border-radius: .64vh;
        }

        div.container4 {
            height: 20.3vh;
        }

            div.container4 p {
                top: 50%;
                left: 50%;
                margin: 0 -50% 0 0;
            }

        .box_Div {
            width: 95%;
            margin-inline: auto;
            padding: .4vw;
        }

        #formContent {
            width: 90%;
            max-width: 57vh;
            padding: 0;
        }

        #formFooter {
            padding: 3.17vh;
        }

        .shadow_Box {
            margin-inline: auto;
            padding-block: 1.27vh;
        }

        .circular--portrait,
        .circular--landscape {
            width: 10vh;
            height: 10vh;
        }

        .ksji-footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .ksji-footer-gallery {
            grid-template-columns: repeat(3, 3rem);
        }
    }


    /* ================================================================
           TABLET AND MOBILE
           Up to 991.98px
           ================================================================ */

    @media (max-width: 991.98px) {

        /* Payslip */

        .payslip-card {
            grid-template-columns: 1fr;
        }

            .payslip-card .qr {
                justify-content: center;
            }


        /* Carousel */

        .ksji-carousel-image-layer,
        .ksji-carousel-control {
            height: 42vh;
            min-height: 280px;
        }

        .ksji-carousel-description {
            padding-inline: 1rem;
        }
    }


    /* ================================================================
           MOBILE
           Up to 575.98px
           ================================================================ */

    @media (max-width: 575.98px) {

        /* Cart */

        .cart-panel {
            width: 100vw;
            max-width: 100vw;
        }


        /* Payslip */

        .payslip-brand,
        .payslip-strip {
            align-items: flex-start;
            flex-direction: column;
        }


        /* Paper previews */

        .a4-portrait,
        .a4-landscape {
            padding: 1rem;
        }


        /* Carousel */

        .ksji-carousel-image-layer,
        .ksji-carousel-control {
            height: 35vh;
            min-height: 240px;
        }

        .ksji-carousel-description {
            height: 64px;
            padding-inline: .75rem;
        }

            .ksji-carousel-description h6 {
                font-size: .82rem;
            }

            .ksji-carousel-description p {
                font-size: .7rem;
            }

        .ksji-carousel-control {
            width: 12%;
        }


        /* Footer */

        .ksji-footer-main {
            padding: 1rem;
        }

        .ksji-footer-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .ksji-footer-brand {
            grid-template-columns: 3.75rem minmax(0, 1fr);
        }

        .ksji-footer-logo {
            width: 3.5rem;
            height: 3.5rem;
        }

        .ksji-footer-link-columns {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .ksji-footer-gallery {
            grid-template-columns: repeat(3, 3rem);
            gap: .5rem;
        }

        .ksji-footer-bottom {
            align-items: flex-start;
            flex-direction: column;
            padding-inline: 1rem;
        }
    }
}

/* ================================================================
   UNLAYERED RULES
   ================================================================ */
@page landscapePage {
    size: A4 landscape;
    margin: 20mm;
}